<p>前々からデスクトップ通知(desktop notifications)をしてくるWebサービスが気になっており、</p>
<p>どうやってやっているのかを調べたところ、すごく簡単に実装できたのでメモ</p>
<p>&nbsp;</p>
<p>調べると色々とやり方があるようだったのだが、ブラウザによって方法が異なり、ちゃんとやるのは難しそうだったので以下のプラグインを使用。</p>
<p>&nbsp;</p>
<p>&lt;a href=&#8221;https://github.com/ttsvetko/HTML5-Desktop-Notifications&#8221; target=&#8221;_blank&#8221;&gt;desktop-notify-min.js&lt;/a&gt;</p>
<p>&nbsp;</p>
<p>サンプルなどがangularjsで書かれており、社内では少し敷居が高そうだったのでjQueryで書きなおした。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/hoshino/54/" target="_blank">デモ</a></p>
<p>&nbsp;</p>
<h2>重要な関数たち</h2>
<p>1. permissionLevel()</p>
<p>デスクトップ通知に対するユーザーの設定が帰ってくる。</p>
<p>基本的には以下の3つぷらすその他。</p>
<p>notify.PERMISSION_GRANTED → 許可</p>
<p>notify.PERMISSION_DEFAULT → デフォルト(=全部許可、サイトごとに設定、全部拒否など)</p>
<p>notify.PERMISSION_DENIED → 全部拒否</p>
<p>&nbsp;</p>
<p>戻り値は上記3つと比較する。</p>
<p>デモの例</p>

		<div id="crayon-649540157fcf1865493805" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
function setText()
{
	if ( permissionLevel == notify.PERMISSION_GRANTED )
	{
		$( '#notificationLevel' ).html( 'デスクトップ通知が許可されている環境です' );
	}
	else if ( permissionLevel == notify.PERMISSION_DEFAULT )
	{
		$( '#notificationLevel' ).html( 'デスクトップ通知が許可されていない環境です。&lt;br /&gt;ここをクリックして許可して下さい' );
	}
	else if ( permissionLevel == notify.PERMISSION_DENIED )
	{
		$( '#notificationLevel' ).html( 'デスクトップ通知を完全拒否しています。&lt;br /&gt;ブラウザの設定で許可して下さい' );
	}
	else
	{
		$( '#notificationLevel' ).html( 'よくわからないので出てってください' );
	}	
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157fcf1865493805-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-2">2</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-4">4</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-6">6</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-8">8</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-10">10</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-12">12</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-14">14</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-16">16</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-18">18</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-19">19</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157fcf1865493805-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">setText</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-3"><span class="crayon-h">	</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">permissionLevel</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-i">notify</span><span class="crayon-sy">.</span><span class="crayon-i">PERMISSION_GRANTED</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-4"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-5"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#notificationLevel'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'デスクトップ通知が許可されている環境です'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-6"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-7"><span class="crayon-h">	</span><span class="crayon-st">else</span><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">permissionLevel</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-i">notify</span><span class="crayon-sy">.</span><span class="crayon-i">PERMISSION_DEFAULT</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-8"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-9"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#notificationLevel'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'デスクトップ通知が許可されていない環境です。&lt;br /&gt;ここをクリックして許可して下さい'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-10"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-11"><span class="crayon-h">	</span><span class="crayon-st">else</span><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">permissionLevel</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-i">notify</span><span class="crayon-sy">.</span><span class="crayon-i">PERMISSION_DENIED</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-12"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-13"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#notificationLevel'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'デスクトップ通知を完全拒否しています。&lt;br /&gt;ブラウザの設定で許可して下さい'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-14"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-15"><span class="crayon-h">	</span><span class="crayon-st">else</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-16"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-17"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#notificationLevel'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'よくわからないので出てってください'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-18"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-h">	</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-19"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>2. notify.isSupported</p>
<p>ユーザーの環境がそもそもデスクトップ通知に対応しているかどうか</p>
<p>動作環境は以下とのこと</p>
<p>Chrome(version 23+), Safari(version6+), Firefox(with ff-html5notifications plugin installed) and IE9+</p>
<p>たぶんそれ以外だとfalseとなる模様</p>
<p>&nbsp;</p>
<p>3. requestPermission</p>
<p>許可するためのポップアップを出力する。</p>
<p>これがブラウザごとに異なったため苦労したが、1行で完了。</p>
<p>&nbsp;</p>
<p>4. createNotification</p>

		<div id="crayon-649540157fcf5928765366" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
notify.createNotification( 'デスクトップ通知', { body: 'あああああああああああああああああ', icon: 'logo.png' } )</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157fcf5928765366-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157fcf5928765366-1"><span class="crayon-i">notify</span><span class="crayon-sy">.</span><span class="crayon-e">createNotification</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'デスクトップ通知'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">body</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'あああああああああああああああああ'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">icon</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'logo.png'</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>デモだと上記のように設定している。</p>
<p>&nbsp;</p>
<p>簡単だし便利そうなのでぜひ実際のサービスでも試してみたい</p>

jQueryで簡単にデスクトップ通知を実装する方法

ajaxの書き方

small_nino-eye (5).jpg

thumbnail_nino-eye (5).jpg

nino-eye (5).jpg

「Matter.js」を使ってCanvasの物理演算をやってみました

<p>WebGLなどCanvas上でグラフィックを扱う場合、</p>
<p>JSON化されたデータを読み込んで、表示するという手順がよく使われることになると思います。</p>
<p>このJSON化されたグラフィックデータなのどデータには、ユーザーにダウンロードされて流用されることを避けたいものも多いかと思います。</p>
<p>Flashなどのプラグインを使った場合は、コードをユーザーに見られないようにすることができるので、このリスクを避けられますが、</p>
<p>HTML5でJSONを扱う場合はJavaScriptを使って読み込むことになるため、</p>
<p>ユーザーがHTMLやJavaScriptからデータの場所をたどってJSONデータがダウンロードされるリスクが高まります。</p>
<p>&nbsp;</p>
<p>そこで、JSONデータを難読化して、簡単にはJSONデータが利用できないような仕組みについて、</p>
<p>調べて実際にやってみました。</p>
<p>&nbsp;</p>
<p>↓こちらが作ってみたものです。</p>
<p><a class="demo" href="/demo/ninomiya/55/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h2>
<h3>1.JSONコードを暗号化する。</h3>
<p><a class="link" href="http://www.broadband-xp.com/obfuscation/crypt.html" target="_blank">参考サイト： JavaScript難読化のためのヒント</a></p>
<p>今回はこちらの記事を参考に、暗号化を試みてみました。</p>
<p>&nbsp;</p>
<h3>2. 暗号化前のJSON本体はPHPで読み込み、URLを伏せる</h3>
<p>暗号化前のJSONデータはPHPで記述したURLからアクセスするようにして、</p>
<p>ユーザーからは直接URLがわからないようにしました。</p>
<p>&nbsp;</p>
<h3>3.暗号解読のJavaScriptコードも暗号化する。</h3>
<p>JavaScriptコード自体も暗号化して、より難読生を高めます。</p>
<p>ただ、暗号解読のコードは記述せざるを得なかったりするので、</p>
<p>飽くまでも、解読するための手間を多くするのが限界です。</p>
<p>&nbsp;</p>
<p>その他参考サイト</p>
<p><a class="link" href="http://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%BC%E3%82%B6%E3%83%BC%E6%9A%97%E5%8F%B7" target="_blank">シーザー暗号 &#8211; Wikipedia</a></p>
<p><a class="link" href="http://www.php-ref.com/bapi/02_ord.html" target="_blank">ＰＨＰリファレンス（ord()）</a></p>
<p>&nbsp;</p>


JSONデータの難読化について調べてみました

jQueryプラグインFullCalendarのイベントをフィルターで絞り込む方法

HTML5のCanvasでレスポンシブなリンク – 多角形編

HTML5のCanvasでレスポンシブなリンク – 円弧編

HTML5のCanvasでレスポンシブなリンク &#8211; 矩形(四角)編

twigのテンプレートで設置したtwitterボタンが動かない場合の対処法

【jQuery】デザインしたチェックボックスをラジオボタンのような動きにする

jQueryで金額をカウントアップする方法

<p>YYYY-MM-DDTHH:MM:SS+09:00 (e.g. 2014-06-18T19:56:00+09:00)</p>
<p>というフォーマット指定の日付を扱う必要があり、特に問題なく進んでいたのだがIE7以前でエラーが発生。</p>
<p>具体的には</p>

		<div id="crayon-6495401577fe6848620309" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
// 文字列で来る
var s = '2014-06-18T19:56:00+09:00';
var d = new Date( s );</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495401577fe6848620309-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401577fe6848620309-2">2</div><div class="crayon-num" data-line="crayon-6495401577fe6848620309-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495401577fe6848620309-1"><span class="crayon-c">// 文字列で来る</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401577fe6848620309-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-e ">s</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'2014-06-18T19:56:00+09:00'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401577fe6848620309-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">d</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-r">Date</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">s</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>という感じで、問題のフォーマットの日時がJsonで来るので文字列になっており</p>
<p><span style="line-height: 1.5em;">それを日付に変換したいのだが、IE7以下ではNaNが返ってきてしまう。</span></p>
<p>色々と調べた結果、以下の方法しかない?ことがわかった。</p>

		<div id="crayon-6495401577fea688763031" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
var s = '2015-05-25T19:56:00+09:00';
var s1 = s.split( 'T' );
var s2 = s1[0].split( '-' );
var s3 = s1[1].split( '+' );
var s4 = s3[0].split( ':' );
var s5 = new Date( s1[0] );

alert(s2[0]); //年
alert(s2[1]); //月
alert(s2[2]); //日

alert(s4[0]); //時
alert(s4[1]); //分
alert(s4[2]); //秒

alert(s5.getDay()); //曜日</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495401577fea688763031-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401577fea688763031-2">2</div><div class="crayon-num" data-line="crayon-6495401577fea688763031-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401577fea688763031-4">4</div><div class="crayon-num" data-line="crayon-6495401577fea688763031-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401577fea688763031-6">6</div><div class="crayon-num" data-line="crayon-6495401577fea688763031-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401577fea688763031-8">8</div><div class="crayon-num" data-line="crayon-6495401577fea688763031-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401577fea688763031-10">10</div><div class="crayon-num" data-line="crayon-6495401577fea688763031-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401577fea688763031-12">12</div><div class="crayon-num" data-line="crayon-6495401577fea688763031-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401577fea688763031-14">14</div><div class="crayon-num" data-line="crayon-6495401577fea688763031-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401577fea688763031-16">16</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495401577fea688763031-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-e ">s</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'2015-05-25T19:56:00+09:00'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401577fea688763031-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">s1</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">s</span><span class="crayon-sy">.</span><span class="crayon-e">split</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'T'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401577fea688763031-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">s2</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">s1</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-e">split</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'-'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401577fea688763031-4"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">s3</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">s1</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-e">split</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'+'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401577fea688763031-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">s4</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">s3</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-e">split</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">':'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401577fea688763031-6"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">s5</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-r">Date</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">s1</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401577fea688763031-7">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-6495401577fea688763031-8"><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-i">s2</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//年</span></div><div class="crayon-line" id="crayon-6495401577fea688763031-9"><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-i">s2</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//月</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401577fea688763031-10"><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-i">s2</span><span class="crayon-sy">[</span><span class="crayon-cn">2</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//日</span></div><div class="crayon-line" id="crayon-6495401577fea688763031-11">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-6495401577fea688763031-12"><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-i">s4</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//時</span></div><div class="crayon-line" id="crayon-6495401577fea688763031-13"><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-i">s4</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//分</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401577fea688763031-14"><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-i">s4</span><span class="crayon-sy">[</span><span class="crayon-cn">2</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//秒</span></div><div class="crayon-line" id="crayon-6495401577fea688763031-15">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-6495401577fea688763031-16"><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-i">s5</span><span class="crayon-sy">.</span><span class="crayon-e">getDay</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//曜日</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>

IE7以前で対応していない日付フォーマットの扱い方

ie11のjavascriptでのブラウザ判定がmsieではなくなっていた

<p>地味だけどありがたい機能を提供してくれるプラグイン。</p>
<p>今でも印刷を想定してほしいとの依頼は時々あり、昔は印刷用に別ページを作ってポップアップさせたこともあった。</p>
<p><a class="demo" href="/demo/hoshino/51/">デモ</a></p>
<p>設定は簡単で、まずはこちらからjsファイルをダウンロード。</p>
<p><a href="/demo/hoshino/51/js/jquery.jPrintArea.js" target="_blank">/demo/hoshino/51/js/jquery.jPrintArea.js</a></p>
<p>あとはHTMLに対し</p>

		<div id="crayon-64953fd597c57071736409" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div id="area1"&gt;
    &lt;img src="images/1.jpg"&gt;
hogehogehogehogehogehogehogehoge
    &lt;p&gt;&lt;input type="button" value="ここまでを印刷" id="btn1"&gt;&lt;/p&gt;
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd597c57071736409-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597c57071736409-2">2</div><div class="crayon-num" data-line="crayon-64953fd597c57071736409-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597c57071736409-4">4</div><div class="crayon-num" data-line="crayon-64953fd597c57071736409-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597c57071736409-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"area1"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597c57071736409-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/1.jpg"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd597c57071736409-3"><span class="crayon-i ">hogehogehogehogehogehogehogehoge</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597c57071736409-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;input </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"button"</span><span class="crayon-h"> </span><span class="crayon-e ">value</span>=<span class="crayon-s ">"ここまでを印刷"</span><span class="crayon-h"> </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"btn1"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd597c57071736409-5"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>JSはこのように実行する。</p>

		<div id="crayon-64953fd597c5b218972402" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$( '#btn1' ).click( function()
{
	$.jPrintArea( '#area1' );
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd597c5b218972402-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597c5b218972402-2">2</div><div class="crayon-num" data-line="crayon-64953fd597c5b218972402-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597c5b218972402-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597c5b218972402-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#btn1'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">click</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597c5b218972402-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd597c5b218972402-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-e">jPrintArea</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#area1'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597c5b218972402-4"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>製品一覧とかマニュアルとかスペック表などでわざわざPDFにしていた場合も使えそう。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

印刷範囲を指定できるjQueryプラグイン

<p>日本語フォントでは、基本一つ一つの文字が等幅で作られていることがほとんどで、</p>
<p>ウェブサイト上でテキストによって文字組をした場合に、不自然な文字間隔になってしまう場所が出てきます。</p>
<p>フラットデザインやレスポンシブデザインが標準化傾向にある今、</p>
<p>ウェブサイトでの文字は文章はもちろんのこと、テキストにおいても画像を使わずテキストを使う必要性が高まってきており、</p>
<p>日本語フォント独特の文字間隔の不自然さが、ウェブデザインでの障害となることもあります。</p>
<p>&nbsp;</p>
<p>そんな中、ウェブページのテキストの文字詰めを自動でしてくれるJSが公開されていましたので、</p>
<p>こちらをご紹介いたします。</p>
<p><a class="link" href="http://fladdict.net/blog/2011/02/auto-kerning.html" target="_blank">HTMLで文字詰めするタイポグラフィー用JS</a></p>
<p>ファイルはこちらのサイトよりダウンロードください。</p>
<p>&nbsp;</p>
<p>↓DEMO作ってみました。</p>
<p><a class="demo" title="DEMO" href="/demo/ninomiya/40/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>使い方</h3>
<p>まず、jQueryとダウンロードした文字詰めのJSファイルを読み込みます。</p>

		<div id="crayon-64953fd597a64243774703" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/javascript" src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/FLAutoKerning.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd597a64243774703-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a64243774703-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597a64243774703-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-1.9.1.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a64243774703-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/FLAutoKerning.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>次に、文字詰めを行うHTML要素に、</p>
<p>FLAutoKerning.process($(&#8216;対象の要素&#8217;));</p>
<p>と行った形でスクリプトをあてます。</p>

		<div id="crayon-64953fd597a68292024937" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	FLAutoKerning.process($('.group2 h1'));
	FLAutoKerning.process($('.group2 nav li a'));
	FLAutoKerning.process($('.group2 h2'));
	FLAutoKerning.process($('.group2 section .text'));
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd597a68292024937-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-2">2</div><div class="crayon-num" data-line="crayon-64953fd597a68292024937-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-4">4</div><div class="crayon-num" data-line="crayon-64953fd597a68292024937-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597a68292024937-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a68292024937-2"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 h1'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597a68292024937-3"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 nav li a'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a68292024937-4"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 h2'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597a68292024937-5"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 section .text'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a68292024937-6"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>これで文字詰めが行われます。</p>
<p>文字詰めを行う文字一つ一つが&lt;span&gt;で囲まれますので、&lt;span&gt;で文字の大きさや色などを指定していたりする場合は注意が必要です。</p>
<p>&nbsp;</p>
<p>全体として文字の間にできる不自然な空白が抑えられ、</p>
<p>特に句読点や括弧などの前後にできる大きな空白が抑えられているので、</p>
<p>まとまった感じがします。</p>
<p>&nbsp;</p>
<p>等幅でなくなるため、行の終わりが揃わなくなるという問題が出てくるため、</p>
<p>タイトルやキャッチコピーなどでの利用に抑えたり、</p>
<p>センタリングや右寄せした文章のような、行の終わりをそろえる必要がないような箇所に使うなどの利用法がいいかもしれません。</p>

日本語の文字詰め(カーニング)を自動で調整してくれるjQuery

jQueryとWebフォントでスマホの傾きで色の変わるアイコンを作ってみる

<p>PCで画像をクリックしてポップアップウィンドウが出てくるhtmlですが、<br />
スマートフォンだとスクリーンが狭いから、普通にページの下部（上部）に行くつもりですが、<br />
画像をタッチしたら、ポップアップウィンドウが出てきて困ったことがあります。</p>
<p>これは、jqueryのtouchstartイベントを使うではなく、<br />
touchstartからtouchmoveイベントがあるかをチェックする工夫で解決できます。</p>
<p></p>

		<div id="crayon-64953fd59704e336696693" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function()
{
	$( 'div' ).on(
	{
		'touchstart': function() {
			this.isTouch = true;
		},
		'touchmove': function() {
			this.isTouch = false;
		},
		'touchend': function() {
			if(this.isTouch == true){
				// popupイベントを発生させる
			}
		}
	});
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd59704e336696693-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-2">2</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-4">4</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-6">6</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-8">8</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-10">10</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-12">12</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-14">14</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-16">16</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-17">17</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd59704e336696693-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59704e336696693-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'div'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">on</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59704e336696693-4"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-5"><span class="crayon-h">		</span><span class="crayon-s">'touchstart'</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59704e336696693-6"><span class="crayon-h">			</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">isTouch</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-7"><span class="crayon-h">		</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59704e336696693-8"><span class="crayon-h">		</span><span class="crayon-s">'touchmove'</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-9"><span class="crayon-h">			</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">isTouch</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59704e336696693-10"><span class="crayon-h">		</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-11"><span class="crayon-h">		</span><span class="crayon-s">'touchend'</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59704e336696693-12"><span class="crayon-h">			</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">isTouch</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-13"><span class="crayon-h">				</span><span class="crayon-c">// popupイベントを発生させる</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59704e336696693-14"><span class="crayon-h">			</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-15"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59704e336696693-16"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-17"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #script

2014/11/26

2014/11/11

2014/11/05

2014/10/29

2014/10/08

2014/08/27

2014/08/06

2014/07/30

2014/07/23

2014/07/16

2014/06/20

2014/06/19

2014/04/16

2014/02/14

2014/02/13

2014/02/05

2014/01/29

2014/01/22