jQueryでマウスの場所に合わせて遠近を出す

<p>インフォグラフィックのリンク集をご紹介します。</p>
<p>インフォグラフィックとは、<br />
情報、データ、知識を視覚的に表現したもので、見る側にとって、目に止まりやすく。感覚的に理解しやすいものです。<br />
イラストを使用したり、キレイにレイアウトしたり、方法は様々ありますが、<br />
伝えたい情報をわかりやすく素早く伝えたい場合、有効な手段になります。</p>
<p>チラシやパンフレット等では、当然のごとく使用されていますが、<br />
webサイトでは、LPではよくあるかもしれませんが、普通のサイトでは、そこまで見かけないかなぁと思います。</p>
<p>当然、今後必要とされる要素ではありますが、この領域はもうwebデザインではなく、<br />
エディトリアルデザインなので、僕自身得意ではない分野ではありますが、<br />
以下に紹介させて頂くサイトを参考に勉強していきたいと思います。</p>
<p>それでは、インフォグラフィックをまとめているサイトを紹介します。<br />
最初の２つは、日本のサイトですね。</p>
<p>&nbsp;</p>
<h3>infogra.me（インフォグラミー）</h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://infogra.me/" target="_blank"><img decoding="async" loading="lazy" class=" wp-image-1929 aligncenter" alt="info1" src="/uploads-archive/2013/04/info1.jpg" width="600" height="369" srcset="/uploads-archive/2013/04/info1.jpg 1089w, /uploads-archive/2013/04/info1-300x185.jpg 300w, /uploads-archive/2013/04/info1-768x473.jpg 768w, /uploads-archive/2013/04/info1-1024x630.jpg 1024w, /uploads-archive/2013/04/info1-228x140.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://infogra.me/" target="_blank">infogra.me（インフォグラミー） | インフォグラフィックスコミュニケーションサービス</a></p>
<p>&nbsp;</p>
<h3>infographic.jp</h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://infographic.jp/" target="_blank"><img decoding="async" loading="lazy" class="size-full wp-image-1931 aligncenter" alt="info2" src="/uploads-archive/2013/04/info2.jpg" width="600" height="369" srcset="/uploads-archive/2013/04/info2.jpg 1089w, /uploads-archive/2013/04/info2-300x185.jpg 300w, /uploads-archive/2013/04/info2-768x473.jpg 768w, /uploads-archive/2013/04/info2-1024x630.jpg 1024w, /uploads-archive/2013/04/info2-228x140.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
<a href="http://infographic.jp/" target="_blank">infographic.jp &#8211; インフォグラフィックス by IOIX</a></p>
<p>&nbsp;</p>
<h3>Visual.ly</h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://visual.ly/" target="_blank"><img decoding="async" loading="lazy" class=" wp-image-1932 aligncenter" alt="info3" src="/uploads-archive/2013/04/info3.jpg" width="600" height="369" srcset="/uploads-archive/2013/04/info3.jpg 1089w, /uploads-archive/2013/04/info3-300x185.jpg 300w, /uploads-archive/2013/04/info3-768x473.jpg 768w, /uploads-archive/2013/04/info3-1024x630.jpg 1024w, /uploads-archive/2013/04/info3-228x140.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://visual.ly/" target="_blank">Infographics &amp; Data Visualization | Visual.ly</a></p>
<p>&nbsp;</p>
<h3>Daily Infographic</h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://dailyinfographic.com/" target="_blank"><img decoding="async" loading="lazy" class=" wp-image-1933 aligncenter" alt="info4" src="/uploads-archive/2013/04/info4.jpg" width="601" height="361" srcset="/uploads-archive/2013/04/info4.jpg 1089w, /uploads-archive/2013/04/info4-768x462.jpg 768w, /uploads-archive/2013/04/info4-1024x616.jpg 1024w, /uploads-archive/2013/04/info4-300x180.jpg 300w, /uploads-archive/2013/04/info4-228x137.jpg 228w" sizes="(max-width: 601px) 100vw, 601px" /></a></p>
<p><a href="http://dailyinfographic.com/" target="_blank">Daily Infographic | A New Infographic Every Day | Data Visualization, Information Design and Infographics</a></p>
<p>&nbsp;</p>
<h3>Infographics Showcase</h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://www.infographicsshowcase.com/" target="_blank"><img decoding="async" loading="lazy" class=" wp-image-1934 aligncenter" alt="info5" src="/uploads-archive/2013/04/info5.jpg" width="600" height="369" srcset="/uploads-archive/2013/04/info5.jpg 1089w, /uploads-archive/2013/04/info5-300x185.jpg 300w, /uploads-archive/2013/04/info5-768x473.jpg 768w, /uploads-archive/2013/04/info5-1024x630.jpg 1024w, /uploads-archive/2013/04/info5-228x140.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://www.infographicsshowcase.com/" target="_blank">Infographics Showcase &#8211; Infographic Reviews &#8211; Submit Infographic</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>素晴らしいインフォグラフィックがいっぱいですね！</p>
<p>作成するのがすごい大変そうですが、<br />
簡単に作成できるツールがあるそうです。<br />
それは以下のリンクからご覧ください。</p>
<p><a href="http://bazubu.com/infographictools-6427.html" target="_blank">驚くほど簡単にインフォグラフィックを作成できる無料ツール７選</a></p>
<p>まだ試してはいないんですが、簡単にできてしまうと、<br />
我々の仕事の価値もなくなってしまうようで複雑です。。。</p>


ページの印象をUPさせるインフォグラフィックのリンク集サイト５つ

<p> 今回は今日勉強できた事を書きたいと思います。</p>
<p>submitボタンが押されたら、onclickイベントでエラーをチェックし、<br />
エラーがない場合はsumit()が実行するソースです。</p>
<p></p>

		<div id="crayon-64953fd587f1a270885425" 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">JavaScript</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></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 check()
  {
		telcheck = document.form1.tel.value;
		data1 = telcheck.match(/^[0-9-]{6,9}$|^[0-9-]{12}$/);
		data2 = telcheck.match(/^\d{1,4}-\d{4}$|^\d{2,5}-\d{1,4}-\d{4}$/);
		if(!data1 &amp;&amp; !data2) {
			alert("電話番号が不正です");
			return;
		}
		
		document.form1.submit();
  }</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-64953fd587f1a270885425-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587f1a270885425-2">2</div><div class="crayon-num" data-line="crayon-64953fd587f1a270885425-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587f1a270885425-4">4</div><div class="crayon-num" data-line="crayon-64953fd587f1a270885425-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587f1a270885425-6">6</div><div class="crayon-num" data-line="crayon-64953fd587f1a270885425-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587f1a270885425-8">8</div><div class="crayon-num" data-line="crayon-64953fd587f1a270885425-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587f1a270885425-10">10</div><div class="crayon-num" data-line="crayon-64953fd587f1a270885425-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587f1a270885425-12">12</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-64953fd587f1a270885425-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">check</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587f1a270885425-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd587f1a270885425-3"><span class="crayon-h">		</span><span class="crayon-i">telcheck</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-i">form1</span><span class="crayon-sy">.</span><span class="crayon-i">tel</span><span class="crayon-sy">.</span><span class="crayon-i">value</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587f1a270885425-4"><span class="crayon-h">		</span><span class="crayon-i">data1</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">telcheck</span><span class="crayon-sy">.</span><span class="crayon-e">match</span><span class="crayon-sy">(</span>/^<span class="crayon-sy">[</span><span class="crayon-cn">0</span>-<span class="crayon-cn">9</span>-<span class="crayon-sy">]</span><span class="crayon-sy">{</span><span class="crayon-cn">6</span><span class="crayon-sy">,</span><span class="crayon-cn">9</span><span class="crayon-sy">}</span><span class="crayon-sy">$</span><span class="crayon-sy">|</span>^<span class="crayon-sy">[</span><span class="crayon-cn">0</span>-<span class="crayon-cn">9</span>-<span class="crayon-sy">]</span><span class="crayon-sy">{</span><span class="crayon-cn">12</span><span class="crayon-sy">}</span><span class="crayon-sy">$</span>/<span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd587f1a270885425-5"><span class="crayon-h">		</span><span class="crayon-i">data2</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">telcheck</span><span class="crayon-sy">.</span><span class="crayon-e">match</span><span class="crayon-sy">(</span>/^<span class="crayon-sy">\</span><span class="crayon-e">d</span><span class="crayon-sy">{</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">4</span><span class="crayon-sy">}</span>-<span class="crayon-sy">\</span><span class="crayon-e">d</span><span class="crayon-sy">{</span><span class="crayon-cn">4</span><span class="crayon-sy">}</span><span class="crayon-sy">$</span><span class="crayon-sy">|</span>^<span class="crayon-sy">\</span><span class="crayon-e">d</span><span class="crayon-sy">{</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-cn">5</span><span class="crayon-sy">}</span>-<span class="crayon-sy">\</span><span class="crayon-e">d</span><span class="crayon-sy">{</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">4</span><span class="crayon-sy">}</span>-<span class="crayon-sy">\</span><span class="crayon-e">d</span><span class="crayon-sy">{</span><span class="crayon-cn">4</span><span class="crayon-sy">}</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-64953fd587f1a270885425-6"><span class="crayon-h">		</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-sy">!</span><span class="crayon-i">data1</span><span class="crayon-h"> </span><span class="crayon-sy">&amp;&amp; !data2) {</span></div><div class="crayon-line" id="crayon-64953fd587f1a270885425-7"><span class="crayon-sy">			alert("電話番号が不正です");</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587f1a270885425-8"><span class="crayon-h">			</span><span class="crayon-st">return</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd587f1a270885425-9"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587f1a270885425-10"><span class="crayon-h">		</span></div><div class="crayon-line" id="crayon-64953fd587f1a270885425-11"><span class="crayon-h">		</span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-i">form1</span><span class="crayon-sy">.</span><span class="crayon-e">submit</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-64953fd587f1a270885425-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>//return trueの場合にsubmit()を実行する</p>
<p></p>

		<div id="crayon-64953fd587f1e266258429" 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></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;form method="POST" action=".php" name = "form1"&gt;

......
......
......
&lt;input type="button" value="確認" name="sub1" onclick="check();"&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-64953fd587f1e266258429-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587f1e266258429-2">2</div><div class="crayon-num" data-line="crayon-64953fd587f1e266258429-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587f1e266258429-4">4</div><div class="crayon-num" data-line="crayon-64953fd587f1e266258429-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587f1e266258429-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-64953fd587f1e266258429-1"><span class="crayon-h">&lt;</span><span class="crayon-e">form </span><span class="crayon-i">method</span>=<span class="crayon-s">"POST"</span><span class="crayon-h"> </span><span class="crayon-i">action</span>=<span class="crayon-s">".php"</span><span class="crayon-h"> </span><span class="crayon-i">name</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"form1"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587f1e266258429-2">&nbsp;</div><div class="crayon-line" id="crayon-64953fd587f1e266258429-3"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</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-64953fd587f1e266258429-4"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span></div><div class="crayon-line" id="crayon-64953fd587f1e266258429-5"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</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-64953fd587f1e266258429-6"><span class="crayon-h">&lt;</span><span class="crayon-e">input </span><span class="crayon-i">type</span>=<span class="crayon-s">"button"</span><span class="crayon-h"> </span><span class="crayon-i">value</span>=<span class="crayon-s">"確認"</span><span class="crayon-h"> </span><span class="crayon-i">name</span>=<span class="crayon-s">"sub1"</span><span class="crayon-h"> </span><span class="crayon-i">onclick</span>=<span class="crayon-s">"check();"</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>短くてとても役に立つと思いますので覚えておくといいですね。</p>

onClickのイベントが終わったらsubmit()を実行方法

<p>面白いjQueryを見つけた。</p>
<p><a href="http://heelhook.github.io/chardin.js/" target="_blank">http://heelhook.github.io/chardin.js/</a></p>
<p>要素に説明を入れられるプラグインのようで、早速<a href="/launchcart">LaunchCart</a>の管理画面のヘルプ画面を作ってみた。</p>
<p><a class="demo" href="/demo/hoshino/35/">デモ</a></p>
<p>※なんでも良いのでキーボードを押して下さい</p>
<p>&nbsp;</p>
<p>設置は簡単で、HTMLの要素に、例えばデモの左上「商品」部分であれば</p>

		<div id="crayon-64953fd587d2b353504292" 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;li data-intro="商品管理へ遷移します" data-position="right"&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-64953fd587d2b353504292-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-64953fd587d2b353504292-1"><span class="crayon-r ">&lt;li </span><span class="crayon-e ">data-intro</span>=<span class="crayon-s ">"商品管理へ遷移します"</span><span class="crayon-h"> </span><span class="crayon-e ">data-position</span>=<span class="crayon-s ">"right"</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>というように</p>
<p>data-intro → 説明文</p>
<p>data-position → left、right、bottom、topというふうに位置を指定</p>
<p>&nbsp;</p>
<p>実行は</p>

		<div id="crayon-64953fd587d2f447193391" 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;">
$( 'body' ).chardinJs();</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-64953fd587d2f447193391-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-64953fd587d2f447193391-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'body'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">chardinJs</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>とするだけでOK。</p>
<p>今回は</p>

		<div id="crayon-64953fd587d30416931324" 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;">
$( document ).keydown(function(e)
{
	$( 'body' ).chardinJs();
});</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-64953fd587d30416931324-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587d30416931324-2">2</div><div class="crayon-num" data-line="crayon-64953fd587d30416931324-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587d30416931324-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-64953fd587d30416931324-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">document</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">keydown</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-i">e</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587d30416931324-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd587d30416931324-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">'body'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">chardinJs</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-64953fd587d30416931324-4"><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>ヘルプ以外にも、詳しい商品説明やアプリケーションのチュートリアルなどに使えそうだ。</p>

jQueryでヘルプ画面を作る Chardin.js

<p>IEは使えないですが、スマートフォンなら簡単数行のコードでHTML5チャートを作られるJSライブラリのご紹介です。</p>
<p><a href="/demo/jeff/chart_sample.html" class="demo" target="_blank">デモ</a></p>
<h2>ソースコード</h3>
<p></p>

		<div id="crayon-64953fd587b32721887631" 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;!doctype html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;Chart.js サンプル&lt;/title&gt;
		&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
		&lt;script src="js/Chart.js"&gt;&lt;/script&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;
		&lt;script type="text/javascript"&gt;
var ctx = $("#myChart").get(0).getContext("2d");
var data = [
	{
		value: 30,
		color:"#F38630"
	},
	{
		value : 50,
		color : "#E0E4CC"
	},
	{
		value : 100,
		color : "#69D2E7"
	}
]
new Chart(ctx).Pie(data);
		&lt;/script&gt;

	&lt;/body&gt;
&lt;/html&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-64953fd587b32721887631-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-2">2</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-4">4</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-6">6</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-8">8</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-10">10</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-12">12</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-14">14</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-16">16</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-18">18</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-20">20</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-22">22</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-24">24</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-26">26</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-28">28</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-30">30</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-64953fd587b32721887631-1"><span class="crayon-n">&lt;!doctype html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-2"><span class="crayon-r ">&lt;html&gt;</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-4"><span class="crayon-i ">		</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">Chart.js サンプル</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-5"><span class="crayon-i ">		<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-6"><span class="crayon-i ">		<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/Chart.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-7"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-8"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-9"><span class="crayon-i ">		</span><span class="crayon-r ">&lt;canvas </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"myChart"</span><span class="crayon-h"> </span><span class="crayon-e ">width</span>=<span class="crayon-s ">"400"</span><span class="crayon-h"> </span><span class="crayon-e ">height</span>=<span class="crayon-s ">"400"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/canvas&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-10"><span class="crayon-i ">		<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-11"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">ctx</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#myChart"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">get</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">getContext</span><span class="crayon-sy">(</span><span class="crayon-s">"2d"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-12"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-13"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-14"><span class="crayon-h">		</span><span class="crayon-i">value</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">30</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-15"><span class="crayon-h">		</span><span class="crayon-i">color</span><span class="crayon-sy">:</span><span class="crayon-s">"#F38630"</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-16"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-17"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-18"><span class="crayon-h">		</span><span class="crayon-i">value</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">50</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-19"><span class="crayon-h">		</span><span class="crayon-i">color</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"#E0E4CC"</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-20"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-21"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-22"><span class="crayon-h">		</span><span class="crayon-i">value</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-23"><span class="crayon-h">		</span><span class="crayon-i">color</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"#69D2E7"</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-24"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-25"><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-26"><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Chart</span><span class="crayon-sy">(</span><span class="crayon-i">ctx</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">Pie</span><span class="crayon-sy">(</span><span class="crayon-i">data</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-27"><span class="crayon-h">		</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-28">&nbsp;</div><div class="crayon-line" id="crayon-64953fd587b32721887631-29"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-30"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>注意点</h3>
<p>DOMは普通に使えますが、</p>
<p></p>

		<div id="crayon-64953fd587b36794293255" 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;">
var ctx = document.getElementById("myChart").getContext("2d");</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-64953fd587b36794293255-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-64953fd587b36794293255-1">var<span class="crayon-h"> </span>ctx<span class="crayon-h"> </span>=<span class="crayon-h"> </span>document<span class="crayon-sy">.</span>getElementById<span class="crayon-sy">(</span><span class="crayon-s ">"myChart"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span>getContext<span class="crayon-sy">(</span><span class="crayon-s ">"2d"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>jQueryではちょっと変わった使い方で書きます。</p>
<p></p>

		<div id="crayon-64953fd587b38433899869" 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;">
var ctx = $("#myChart").get(0).getContext("2d");</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-64953fd587b38433899869-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-64953fd587b38433899869-1">var<span class="crayon-h"> </span>ctx<span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s ">"#myChart"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span>get<span class="crayon-sy">(</span>0<span class="crayon-sy">)</span><span class="crayon-sy">.</span>getContext<span class="crayon-sy">(</span><span class="crayon-s ">"2d"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>本家サイト</h3>
<p>他のタイプのチャートの作成や、オプションのご確認は、<a href="http://www.chartjs.org/" target="_blank">本家サイト</a>で行ってください。</p>

【HTML5】チャート簡単作成

<p>アプリのデザインをチュートリアルとして公開してくれてる記事を紹介させて頂きます。</p>
<p>海外のサイトですが、<br />
高品質なアプリアイコンの作り方を丁寧に説明してくれています。</p>
<p>どれも素晴らしいものなので、勉強にもってこいです！！</p>
<p>&nbsp;</p>
<p><a href="http://designrfix.com/icons/create-notes-app-icon-photoshop" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-1897" alt="app1" src="/uploads-archive/2013/04/app1.jpg" width="540" height="416" srcset="/uploads-archive/2013/04/app1.jpg 540w, /uploads-archive/2013/04/app1-228x176.jpg 228w, /uploads-archive/2013/04/app1-300x231.jpg 300w" sizes="(max-width: 540px) 100vw, 540px" /></a><br />
<a href="http://designrfix.com/icons/create-notes-app-icon-photoshop" target="_blank">How To Create A Notes App Icon In Photoshop | designrfix.com</a></p>
<p>&nbsp;</p>
<p><a href="http://www.photoshop-plus.co.uk/2011/12/31/carbon-fibre-style-metallic-icon-design/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-1898" alt="app2" src="/uploads-archive/2013/04/app2.png" width="600" height="400" srcset="/uploads-archive/2013/04/app2.png 600w, /uploads-archive/2013/04/app2-300x200.png 300w, /uploads-archive/2013/04/app2-228x152.png 228w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
<a href="http://www.photoshop-plus.co.uk/2011/12/31/carbon-fibre-style-metallic-icon-design/" target="_blank">Learn How To Create A Metallic Carbon Fibre Icon</a></p>
<p>&nbsp;</p>
<p><a href="http://psd.tutsplus.com/tutorials/icon-design/mobile-app-icon/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-1900" alt="app4" src="/uploads-archive/2013/04/app4.jpg" width="600" height="600" srcset="/uploads-archive/2013/04/app4.jpg 600w, /uploads-archive/2013/04/app4-150x150.jpg 150w, /uploads-archive/2013/04/app4-300x300.jpg 300w, /uploads-archive/2013/04/app4-228x228.jpg 228w, /uploads-archive/2013/04/app4-120x120.jpg 120w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
<a href="http://psd.tutsplus.com/tutorials/icon-design/mobile-app-icon/" target="_blank">Create a Mobile App Icon in Photoshop | Psdtuts+</a></p>
<p>&nbsp;</p>
<p><a href="http://abduzeedo.com/radar-icon-photoshop" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-1899" alt="app3" src="/uploads-archive/2013/04/app3.jpg" width="600" height="604" srcset="/uploads-archive/2013/04/app3.jpg 680w, /uploads-archive/2013/04/app3-298x300.jpg 298w, /uploads-archive/2013/04/app3-228x230.jpg 228w, /uploads-archive/2013/04/app3-150x150.jpg 150w, /uploads-archive/2013/04/app3-120x120.jpg 120w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
<a href="http://abduzeedo.com/radar-icon-photoshop" target="_blank">Radar Icon in Photoshop | Abduzeedo Design Inspiration &amp; Tutorials</a></p>
<p>&nbsp;<br />
&nbsp;</p>
<p>最後のはアプリとはちょっと違いますが、応用できるんじゃないかなと思います。</p>
<p>それにしてもこれだけの記事を作るのに、どのぐらいの時間がかかっているのかが気になります。</p>


丁寧に説明してくれてるアプリのデザインチュートリアル(PSD)がすごい！！

<p>前回のtitaniumにおけるスマートフォンアプリ開発に続き、自身の勉強を兼ねて、まとめてみます。</p>
<h2><span>スマートフォンアプリのタイプ</span></h3>
<ul>
<li><span style="line-height: 13px;">ネイティブアプリ</span></li>
<li>Webアプリ</li>
<li>ハイブリッドアプリ</li>
</ul>
<p>ネイティブアプリは文字通り、iOSのObjective-C、AndroidのJAVAを用いて、開発します。ハードウェアに紐付いたカメラやジャイロスコープなどを操作し、またパフォーマンスでも最速を誇ります。</p>
<p>Webアプリは、アプリ内でブラウザをたちあげているのと同じでHTML5の技術を用います。基本ウェブサイトで出来ることと変わりはなく更新制は保たれますがプッシュ通知などは出来ません。</p>
<p>ハイブリッドアプリは、上記2つの、ネイティブアプリの部分とWebアプリの部分を混合したものになります。一昔前の評判の悪かったFacebookアプリなどがこれにあたります。</p>
<h2>スマートフォンアプリ開発のフレームワーク</h3>
<p>上記の3つの前提を受け、どのような開発手法があるかをまとめると下記になりました。ちなみに、titaniumはネイティブアプリに属します。</p>
<table>
<thead>
<tr>
<th>アプリタイプ</th>
<th>開発手法</th>
</tr>
</thead>
<tbody>
<tr>
<td><tt>ネイティブアプリ</tt></td>
<td>Objective-C,JAVA&nbsp;</p>
<p>titanium</p>
<p>unity</td>
</tr>
<tr>
<td>Webアプリ</td>
<td>PhoneGap&nbsp;</p>
<p>Sencha Touch2</td>
</tr>
<tr>
<td><tt>ハイブリッドアプリ</tt></td>
<td>HTML5/CSS3&nbsp;</p>
<p>JqueryMobile</td>
</tr>
</tbody>
</table>
<h2>フレームワーク別特徴の抜粋</h3>
<p>ここでは、Objective-CやHTML5を除いたフレームワークの特徴をまとめます。</p>
<table>
<thead>
<tr>
<th></th>
<th>titanium</th>
<th>unity</th>
<th>PhoneGap</th>
<th>sencha touch</th>
<th>Jquery Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<td><tt>タイプ</tt></td>
<td>ネイティブ</td>
<td>ネイティブ</td>
<td>ハイブリッド</td>
<td>ハイブリッド</td>
<td>Webアプリ</td>
</tr>
<tr>
<td><span style="font-family: monospace;">開発言語</span></td>
<td>Javascript</td>
<td>独自UI</td>
<td>HTML5/CSS3/Javascript</td>
<td>Javascript</td>
<td>HTML5/CSS3/Javascript</td>
</tr>
<tr>
<td><span style="font-family: monospace;">特徴</span></td>
<td>Javascriptでネイティブ開発</td>
<td>ゲームに特化</td>
<td>複数デバイスに対応</td>
<td>独自仕様がある</td>
<td>HTMLの技術を応用出来る</td>
</tr>
<tr>
<td><tt>対象デバイス</tt></td>
<td>iOS/Andoroid</td>
<td>iOS/Andoroid/windows</td>
<td>iOS/Andoroid/windows</td>
<td>iOS/Andoroid</td>
<td>iOS/Andoroid</td>
</tr>
<tr>
<td><tt>ベンター</tt></td>
<td>Appcelerator</td>
<td>Unity Technologies</td>
<td>Adobe</td>
<td>Sencha Inc</td>
<td>Jquery Foundation</td>
</tr>
</tbody>
</table>


スマートフォンアプリ開発手法

<p>今回紹介したいのは、【Photoset Grid】というjQueryプラグインです。</p>
<p><a href="/demo/jeff/photosetgrid_sample.html" class="demo" target="_blank">デモ</a></p>
<h2>ソースコード</h3>
<p></p>

		<div id="crayon-64953fd58794b809812378" 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;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;photoset-gridサンプル&lt;/title&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://stylehatch.github.com/photoset-grid/jquery.photoset-grid.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://stylehatch.github.com/photoset-grid/js/jquery.colorbox.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Photoset Grid Sample&lt;/h1&gt;
&lt;div id="photoset-grid-basic" data-layout="3223" style="visibility: hidden;"&gt;
	&lt;img src="IMG_0368.jpg" /&gt;
	&lt;img src="IMG_0516.jpg" /&gt;
	&lt;img src="IMG_0922.JPG" /&gt;
	&lt;img src="IMG_0988.JPG" /&gt;
	&lt;img src="IMG_1017.JPG" /&gt;
	&lt;img src="IMG_1018.JPG" /&gt;
	&lt;img src="IMG_1019.JPG" /&gt;
	&lt;img src="IMG_1020.JPG" /&gt;
	&lt;img src="IMG_1021.JPG" /&gt;
	&lt;img src="IMG_1075.JPG" /&gt;
&lt;/div&gt;
&lt;script&gt;
	$('#photoset-grid-basic').photosetGrid({
		onComplete: function(){
			$('#photoset-grid-basic').attr('style', '');
		}
	});
&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&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-64953fd58794b809812378-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-2">2</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-4">4</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-6">6</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-8">8</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-10">10</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-12">12</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-14">14</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-16">16</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-18">18</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-20">20</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-22">22</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-24">24</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-26">26</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-28">28</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-30">30</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-31">31</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-64953fd58794b809812378-1"><span class="crayon-r ">&lt;html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span>=<span class="crayon-s ">"utf-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">photoset-gridサンプル</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-5"><span class="crayon-i "><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">"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-6"><span class="crayon-i "><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">"http://stylehatch.github.com/photoset-grid/jquery.photoset-grid.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-7"><span class="crayon-i "><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">"http://stylehatch.github.com/photoset-grid/js/jquery.colorbox.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-8"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-9"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-10"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h1&gt;</span><span class="crayon-i ">Photoset Grid Sample</span><span class="crayon-r ">&lt;/h1&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-11"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"photoset-grid-basic"</span><span class="crayon-h"> </span><span class="crayon-e ">data-layout</span>=<span class="crayon-s ">"3223"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"visibility: hidden;"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-12"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_0368.jpg"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-13"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_0516.jpg"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-14"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_0922.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-15"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_0988.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-16"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_1017.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-17"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_1018.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-18"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_1019.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-19"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_1020.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-20"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_1021.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-21"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_1075.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-22"><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-23"><span class="crayon-i "><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-24"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#photoset-grid-basic'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">photosetGrid</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-25"><span class="crayon-h">		</span><span class="crayon-i">onComplete</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-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-26"><span class="crayon-h">			</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#photoset-grid-basic'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">attr</span><span class="crayon-sy">(</span><span class="crayon-s">'style'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">''</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-27"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-28"><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-64953fd58794b809812378-29"><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-30"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-31"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>説明</h3>
<p>シンプルにdata-layoutという属性で毎行何枚の画像を表示したいのを指定すれば、自動に調整してくれるということです。</p>
<p>lightboxとの連動も可能です。</p>
<p>本家のサイトは<a href="http://stylehatch.github.com/photoset-grid/" target="_blank">こちら</a>になります。</p>

【jQuery】画像のレイアウト調整に便利なプラグイン

ページング機能

IE6もOK！画像を白黒にするjQueryプラグイン 「jQuery.BlackAndWhite」

lightbox系プラグイン「Shadowbox.js」が便利でかっこいい

PC、スマホでスワイプで画像、コンテンツを送れるスライドショー

<p>スマートフォンアプリの開発案件を受託することも多く、開発環境、SDKについては、毎回様々な要望、提案があります。</p>
<p>phonegap,unityと用途や得手不得手によって使い分けますが、その中でも、古くからあるTitaniumの最近を調べてみました。</p>
<p>2012年12月にメジャーアップデートも行いますます、活況を見せています。</p>
<h2>Titaniumの特徴</h3>
<p>まず、おさらいのような形になりますがTitaniumの特徴は以下のようになります。</p>
<ul>
<li><span style="line-height: 13px;">Javascriptで書ける</span></li>
<li>iOS,Android両対応</li>
<li>日本語のサンプル、実績が多数あり、かつコミュニティが活性化している</li>
<li> Objectiv-C,JAVAのネイティブ言語に比べて速度で劣る</li>
</ul>
<p>ゲーム系は不得意（ゲーム開発はunity）と言われていたり、その他にも特徴はありますが、デベロッパーにおいて特に重要視すべきなのは、3番目のサンプルや実績があり、コミュニティが活性化しているということではないでしょうか？開発において、バグはつきもの。やはり、先人の知恵やtipsが集約されていると総じて無駄な開発工数を削減することが出来、結果的にクオリティの高い仕事をすることが出来ます。</p>
<h2>Titaniumのアプリジャンル</h3>
<p><a href="/uploads-archive/2013/03/8299540275_da32521098_o.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1781" alt="8299540275_da32521098_o" src="/uploads-archive/2013/03/8299540275_da32521098_o-300x210.png" width="300" height="210" srcset="/uploads-archive/2013/03/8299540275_da32521098_o-300x210.png 300w, /uploads-archive/2013/03/8299540275_da32521098_o-228x160.png 228w, /uploads-archive/2013/03/8299540275_da32521098_o.png 371w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://www.sawadaru.com/blog/?p=562" target="_blank">http://www.sawadaru.com/blog/?p=562</a></p>
<p>上記のブログでどのようなジャンルのアプリが開発されているのかわかりやすくまとめられていましたので、紹介いたします。</p>
<p>図をみるとわかりますが、ニュース、ライフスタイル、SNSの3ジャンルで過半数を占め、次点でゲームですね。やはり、ツール系のアプリを得意としています。</p>
<p>Zaimやピリカ、WunderListなど話題になったアプリもTitanumで開発されていることが分かります。</p>
<h2>参考サイト</h3>
<p>Titaniumモバイルユーザー会</p>
<p><a href="http://titanium-mobile.jp/" target="_blank">http://titanium-mobile.jp/</a></p>
<p>Titaniumのまとめ</p>
<p><a href="http://ti.imthinker.net/" target="_blank">http://ti.imthinker.net/</a></p>
<p>Titaniumのニュースサイト</p>
<p><a href="http://ti-news.hatenablog.jp/" target="_blank">http://ti-news.hatenablog.jp/</a></p>


Titaniumによるスマートフォンアプリ開発

<p>&nbsp;</p>
<p>前回ブログ<br />
<a href="/officer/%E3%82%BB%E3%82%AD%E3%83%A5%E3%82%A2%E3%81%AA%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89%E3%82%92%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B%E4%BE%BF%E5%88%A9%E3%83%84%E3%83%BC%E3%83%AB.html">セキュアなパスワードを自動生成する便利ツール</a><br />
でパスワード自動生成ツールを作成したが、<br />
それをプログラムから呼び出せるAPI的なものを作成した。</p>
<p><a class="demo" href="/demo/hoshino/32/js/get_password.js" target="_blank">download</a></p>
<p>&nbsp;</p>
<h2>使い方</h2>
<p></p>

		<div id="crayon-64953fd5869bd982059526" 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;script type="text/javascript" src="js/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/get_password.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-64953fd5869bd982059526-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5869bd982059526-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-64953fd5869bd982059526-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.8.2.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-64953fd5869bd982059526-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/get_password.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>HTMLでjQueryと本jsをインポート。</p>
<p>あとは</p>

		<div id="crayon-64953fd5869c2357177791" 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;">
get_password();</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-64953fd5869c2357177791-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-64953fd5869c2357177791-1"><span class="crayon-e">get_password</span><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>&nbsp;</p>
<h2>パラメータ</h2>
<h2>無し</h3>
<p>例</p>

		<div id="crayon-64953fd5869c3207869581" 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;">
get_password();</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-64953fd5869c3207869581-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-64953fd5869c3207869581-1"><span class="crayon-e">get_password</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>英字、数値、記号それぞれ混合の8桁の値が返る。</p>
<p>&nbsp;</p>
<h2>数値</h3>
<p>例</p>

		<div id="crayon-64953fd5869c4871513410" 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></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;">
get_password( 8 );</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-64953fd5869c4871513410-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-64953fd5869c4871513410-1"><span class="crayon-e">get_password</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">8</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>英字、数値、記号それぞれ混合の指定した桁数の値が返る。</p>
<p>例だと8桁の文字列が返る。</p>
<p>&nbsp;</p>
<h2>配列</h3>
<p>例</p>

		<div id="crayon-64953fd5869c6764298541" 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;">
get_password( {
	alphabet: false,
	symbol: false,
	number: false,
	len: 2
} );</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-64953fd5869c6764298541-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5869c6764298541-2">2</div><div class="crayon-num" data-line="crayon-64953fd5869c6764298541-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5869c6764298541-4">4</div><div class="crayon-num" data-line="crayon-64953fd5869c6764298541-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5869c6764298541-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-64953fd5869c6764298541-1"><span class="crayon-e">get_password</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-64953fd5869c6764298541-2"><span class="crayon-h">	</span><span class="crayon-i">alphabet</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd5869c6764298541-3"><span class="crayon-h">	</span><span class="crayon-i">symbol</span><span class="crayon-sy">:</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-64953fd5869c6764298541-4"><span class="crayon-h">	</span><span class="crayon-i">number</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd5869c6764298541-5"><span class="crayon-h">	</span><span class="crayon-i">len</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5869c6764298541-6"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<table>
<tbody>
<tr>
<th>キー</th>
<th>値の型</th>
<th>デフォルト</th>
<th>必須</th>
<th>説明</th>
</tr>
<tr>
<td>alphabet</td>
<td>boolean</td>
<td>true</td>
<td>☓</td>
<td>戻り値にアルファベットをtrueの時は含め、falseのときは含めない</td>
</tr>
<tr>
<td>number</td>
<td>boolean</td>
<td>true</td>
<td>☓</td>
<td>戻り値に数値をtrueの時は含め、falseのときは含めない</td>
</tr>
<tr>
<td>symbol</td>
<td>boolean</td>
<td>true</td>
<td>☓</td>
<td>戻り値に記号をtrueの時は含め、falseのときは含めない</td>
</tr>
<tr>
<td>len</td>
<td>int</td>
<td>8</td>
<td>☓</td>
<td>戻り値の桁数を指定</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>

パスワードを自動生成する jQueryプラグイン

title.jpg

jQueryプラグイン「bxSlider」がレスポンシブ対応になってた

<p>wordpressなど、投稿ページから別のページに遷移しようとしたら、「このページから移動してもよろしいですか」という確認ウィンドウが出てくるから、<br />
かっこ良くていつか実装してみたいと思いました。</p>
<p>調べてみたら、jQueryのbeforeunloadイベントを使って簡単に実現できるようです。</p>
<p><a href="/demo/jeff/beforeunloadchange.html" target="_blank">サンプル</a>を見てください。</p>
<h2>仕様</h3>
<p>inputのテキストボクスに変更があった場合のみ、<br />
「戻る」（実際はプログラミングのカテゴリに遷移する）ボタンを押したら、確認ウィンドウが出てきます。</p>
<p>IE8でもテストOKです。</p>
<p>でもページを閉じようとしても、確認ウィンドウも出てきて、ちょっとうるさいですね。</p>
<h2>ソース</h3>
<p>ソースコードを簡単に貼ります。</p>
<p></p>

		<div id="crayon-64953fd586536853496086" 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;html&gt;
&lt;head&gt;
&lt;title&gt;【jQuery】ページ離脱時に確認メッセージを表示させる方法&lt;/title&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function(){
    $("input[type=text]").change(function() {
        $(window).on('beforeunload', function() {
            return '投稿が完了していません。このまま移動しますか？';
        });
    });
    $("input[type=submit]").click(function() {
        $(window).off('beforeunload');
    });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h4&gt;投稿&lt;/h4&gt;
&lt;form method="post" action="beforeunloadchange.html"&gt;
&lt;input type="text" value="" /&gt;&lt;br&gt;
&lt;input type="submit" value="送信" /&gt;
&lt;input type="button" value="戻る" onclick="location.href='/programmer'" /&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&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-64953fd586536853496086-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-2">2</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-4">4</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-6">6</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-8">8</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-10">10</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-12">12</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-14">14</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-16">16</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-18">18</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-20">20</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-22">22</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-24">24</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-26">26</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-64953fd586536853496086-1"><span class="crayon-r ">&lt;html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-2"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-3"><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">【jQuery】ページ離脱時に確認メッセージを表示させる方法</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-4"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-64953fd586536853496086-5"><span class="crayon-i "><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-6"><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" id="crayon-64953fd586536853496086-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"input[type=text]"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">change</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-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">window</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">on</span><span class="crayon-sy">(</span><span class="crayon-s">'beforeunload'</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-64953fd586536853496086-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-s">'投稿が完了していません。このまま移動しますか？'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</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-64953fd586536853496086-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"input[type=submit]"</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-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-64953fd586536853496086-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">window</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">off</span><span class="crayon-sy">(</span><span class="crayon-s">'beforeunload'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-15"><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-64953fd586536853496086-16"><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-64953fd586536853496086-17"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-18"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-19"><span class="crayon-r ">&lt;h4&gt;</span><span class="crayon-i ">投稿</span><span class="crayon-r ">&lt;/h4&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-20"><span class="crayon-r ">&lt;form </span><span class="crayon-e ">method</span>=<span class="crayon-s ">"post"</span><span class="crayon-h"> </span><span class="crayon-e ">action</span>=<span class="crayon-s ">"beforeunloadchange.html"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-21"><span class="crayon-r ">&lt;input </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"text"</span><span class="crayon-h"> </span><span class="crayon-e ">value</span>=<span class="crayon-s ">""</span><span class="crayon-r "> /&gt;</span><span class="crayon-r ">&lt;br&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-22"><span class="crayon-r ">&lt;input </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"submit"</span><span class="crayon-h"> </span><span class="crayon-e ">value</span>=<span class="crayon-s ">"送信"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-23"><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 ">onclick</span>=<span class="crayon-s ">"location.href='/programmer'"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-24"><span class="crayon-r ">&lt;/form&gt;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-25"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-26"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

【jQuery】ページ離脱時に確認メッセージを表示させる方法

<p><strong>写真の上</strong>に<strong>文字</strong>を配置することは、メインビジュアルなどでよく行います。</p>
<p>そのとき、写真が差し替えになるなどして、写真と文字の相性が悪く、</p>
<p>文字が目立たなくなってしまうことも、よくあります。</p>
<p>&nbsp;</p>
<p>その際に、文字の色を変えられるなど自由度が高ければ、</p>
<p>文字が目立つようにデザインを変更することも楽なのですが、</p>
<p>文字の色を変えるとサイトの印象が変わってしまったり、</p>
<p>お客様のご要望で変えることができない場合もあります。</p>
<p>&nbsp;</p>
<p>こういった場合に、どうやったら<strong>目立たせる</strong>ことができるのか、</p>
<p>Photoshopを使ってできる範囲で、７つほど方法を考えてみました。</p>
<p>&nbsp;</p>
<p>今回試してみたのはこちらの写真。文字の色は白</p>
<p>文字が写真とやや同化して、とても文字が見づらくなっています。</p>
<p><a href="/uploads-archive/2013/03/textphoto1.jpg" target="_blank"><img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></a></p>
<p>&nbsp;</p>
<h2>1.文字の配置を変更する</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto2.jpg" target="_blank"><img decoding="async" loading="lazy" alt="1" src="/uploads-archive/2013/03/textphoto2.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>文字の位置を変えられるのであれば、真っ先に試したい方法です。</p>
<p>&nbsp;</p>
<p>この写真の場合、はじめの位置ではタンポポの綿毛の色と文字の色が同系色で、</p>
<p>文字が写真と同化してしまい見づらいですが、</p>
<p>右下の辺りに文字を配置すれば、写真と文字のコントラストがはっきりとして見やすくなります。</p>
<p>&nbsp;</p>
<p>ただ、文字の位置を変更できない場合もよくあります。</p>
<p>そういったときの方法について考えてみます。</p>
<p>&nbsp;</p>
<h2>2.文字の後ろにプレートを敷く</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto3.jpg" target="_blank"><img decoding="async" loading="lazy" alt="2" src="/uploads-archive/2013/03/textphoto3.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>文字と写真、両方と相性のいい色のプレートを、文字と写真の間に敷くことで、</p>
<p>両方のバランスを保ちながら、文字を目立たせることができます。</p>
<p>&nbsp;</p>
<p>ただこの方法ですと、写真を一部隠してしまうことになります。</p>
<p>今回はプレートを半透明にして、できるだけ写真を隠す量を減らすように考慮してますが、</p>
<p>それでもやはり、プレートの部分は写真が見づらくなります。</p>
<p>場合によっては使用できないことも多いです。</p>
<p>&nbsp;</p>
<h2>3.背景と文字の間に境界線を置く</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto4.jpg" target="_blank"><img decoding="async" loading="lazy" alt="3" src="/uploads-archive/2013/03/textphoto4.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>文字と写真の間に境界を設けることで、文字を目立たせることができます。</p>
<p>プレートを置く方法よりも、写真を隠してしまう範囲が小さくて済みます。</p>
<p>&nbsp;</p>
<p>ただこの方法ですと、文字自体のイメージが変わってしまうことが多いです。</p>
<p>落ち着いたイメージや、高級感を出す場合には、この方法は向きません。</p>
<p>&nbsp;</p>
<h2>4.袋文字にする</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto5.jpg" target="_blank"><img decoding="async" loading="lazy" alt="4" src="/uploads-archive/2013/03/textphoto5.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>背景と文字の間に境界線を置く方法の、文字と境界の色を逆にしたものです。</p>
<p>先程と同様に文字を目立たせることができます。</p>
<p>&nbsp;</p>
<p>ただやはり、こちらも文字自体のイメージが変わってしまうことが多いので、</p>
<p>使う状況に注意が必要です。</p>
<p>&nbsp;</p>
<h2>5.ドロップシャドウを置く</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto6..jpg" target="_blank"><img decoding="async" loading="lazy" alt="5" src="/uploads-archive/2013/03/textphoto6.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>写真をほとんど隠すことなく、文字を引き立てることができます。</p>
<p>&nbsp;</p>
<p>ただ、プレートや境界線を置く方法に比べると、文字を目立たせる効果はどうしても小さくなってしまいます。</p>
<p>&nbsp;</p>
<h2>6.レイヤー効果の「光彩(外側)」を描画モード「乗算」で置く</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto7.jpg" target="_blank"><img decoding="async" loading="lazy" alt="6" src="/uploads-archive/2013/03/textphoto7.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>効果がかかっているのをできるだけ見る人に気づかせずに、</p>
<p>文字を目立たせるのに効果的な方法です。</p>
<p>&nbsp;</p>
<p>ただ、気づかれないように効果を抑えれば、その分だけ文字を目立たせることが難しくなります。</p>
<p>効果をつけすぎると、印象を変えてしまいますので、加減の調整が必要です。</p>
<p>&nbsp;</p>
<h2>7.文字周辺のコントラストを下げる</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto8.jpg" target="_blank"><img decoding="async" loading="lazy" alt="7" src="/uploads-archive/2013/03/textphoto8.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>今回の写真のように、情報量の多い写真の上に文字を置く場合に効果的です。</p>
<p>ごちゃごちゃとした感じを抑えて、文字を目立たせることができます。</p>
<p>&nbsp;</p>
<p>ただ、写真の色や明るさなどの情報が一部少なくなり、写真の印象が変わってしまうこともあるので、</p>
<p>使い方や、加減に注意が必要です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>いずれの場合も、全体のデザインに合わせて臨機応変に使い分けて、加減を調整することが必要です。</p>
<p>いかに写真と文字のコントラストを高めるかがポイントになります。</p>
<p>&nbsp;</p>
<p>限られた条件の中で、どういったことができるのかを模索することは、</p>
<p>難しい作業ですが、</p>
<p>あらゆる状況に対応できるように、より多くの方法を見つけていきたいです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


写真の上の文字を色を変えずに目立たせるには？

<p>web制作において、ワイヤーフレームを書くことはほぼ必須になってはいますが、<br />
みなさん何を使って制作しているのでしょうか？？</p>
<p>僕はなぜかその時々によって違いますが、手書きやPSDでやります。<br />
ツールはいまいちな感じだったんですが、最近のはよくできているのが多いので、<br />
その中でも無料で使用できるものをご紹介します。</p>
<p>&nbsp;</p>
<h2>ワイヤーフレーム作成の無料ツール</h3>
<p>&nbsp;</p>
<h3>moqups</h4>
<p class="center"><a href="https://moqups.com/#!/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire01.jpg" width="500" /></a></p>
<p>・アカウント登録なしで使用できる（画像UPするのにアカウントが必要）<br />
・制限も特になし<br />
・ページ遷移の設定ができる</p>
<p>&nbsp;</p>
<h3>cacoo</h4>
<p class="center"><a href="https://cacoo.com/lang/ja/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire02.jpg" width="500" /></a></p>
<p>・オンラインで作成<br />
・アカウント作成の必要あり<br />
・フリー(機能限定)25枚、エクスポート機能３回まで<br />
・chromeの拡張機能でも使える<br />
・日本製</p>
<p>&nbsp;</p>
<h3>wireframe.cc</h4>
<p class="center"><a href="http://wireframe.cc/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire03.jpg" width="500" /></a></p>
<p>・アカウント登録なしで使用できる<br />
・URLを共有できる<br />
・スマホバージョンにもできる</p>
<p>&nbsp;</p>
<h3>Justinmind</h4>
<p class="center"><a href="http://www.justinmind.com/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire04.jpg" width="500" /></a></p>
<p>・ダウンロードしてローカルで使用(windows,mac)<br />
・スマホバージョンにもできる<br />
・PDF、画像書き出し<br />
・枚数制限なし</p>
<p>&nbsp;</p>
<h3>google drive図形描画</h4>
<p>・アカウント必要あり<br />
・日本語対応<br />
・wireframe専用ではない</p>
<p>&nbsp;</p>
<p>といった５つになります。<br />
僕的には、moqups、Justinmindがいいのではないかと思っています。<br />
moqupsのページの遷移ができるってのはかなり良いポイントですね！</p>
<p>&nbsp;</p>
<p>そして、<br />
こういうツールを使うのではなく、<br />
手書きの方がいい！っていう方のために、<br />
手書き用のテンプレートもご紹介します。<br />
もちろん、すべてフリーです。</p>
<p>&nbsp;</p>
<h2>手書き用テンプレートPDF</h3>
<p>&nbsp;</p>
<h3>paper browser</h4>
<p class="center"><a href="http://www.raincreativelab.com/paperbrowser/#download-templates" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire05.jpg" width="500" /></a></p>
<p>いくつか種類があるので、お好みのをダウンロードできます。</p>
<p><a href="http://www.raincreativelab.com/paperbrowser/#download-templates" target="_blank">ダウンロードページ</a></p>
<p>&nbsp;</p>
<h3>ZURB Grid Paper</h4>
<p class="center"><a href="http://www.zurb.com/playground/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire06.jpg" width="500" /></a></p>
<p>他にも様々なテンプレートがあります。</p>
<p><a href="http://www.zurb.com/playground/playground/tools/ZURB-Grid-Paper.zip" target="_blank">ダウンロード</a></p>
<p>&nbsp;</p>
<h3>Web Sketching Template</h4>
<p class="center"><a href="http://www.flickr.com/photos/88005207@N00/3884016462/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire07.jpg" width="500" /></a></p>
<p><a href="http://www.flickr.com/photos/88005207@N00/3884016462/" target="_blank">ダウンロードページ</a></p>
<p>&nbsp;</p>
<h3>sneakpeekit</h4>
<p class="center"><a href="http://sneakpeekit.com/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire08.jpg" width="500" /></a></p>
<p>ここは、webサイトだけでなく、ipadやiphone用等もあります。</p>
<p><a href="http://sneakpeekit.com/wireframe-sketchsheets/" target="_blank">ダウンロードページ</a></p>
<p>&nbsp;</p>
<h3>paperkit</h4>
<p class="center"><a href="http://paperkit.net/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire09.jpg" width="500" /></a></p>
<p>こちらはワイヤーフレームというわけではなく、<br />
方眼紙を自由なサイズにして、ダウンロードできるものです。</p>
<p><a href="http://paperkit.net/" target="_blank">paperkit</a></p>
<p>&nbsp;</p>
<p>以上となります。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>大変便利ですね〜、こういうツールは本当にありがたい。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2013/04/18

2013/04/17

2013/04/11

2013/04/11

2013/04/11

2013/04/10

2013/04/04

2013/04/04

2013/04/04

2013/04/04

2013/04/03

2013/03/28

2013/03/28

2013/03/28

2013/03/27

2013/03/20

2013/03/14

2013/03/13