<p>フラットデザインとは、最近の流行りで、<br />
無駄を省いた、シンプルな質感でしばらくは今後のデザイントレンドになると考えられるものです。<br />
ミニマルな感じで僕は非常に好きなタイプなのですが、<br />
このデザインでキーとなるのが、<br />
「タイポグラフィ、写真、アイコン、配色」<br />
で、特に重要なのがタイポグラフィなので、<br />
日本語を使うサイトでは、英語圏のサイトに比べるとちと難易度が高いのが悩ましい所。。。</p>
<p>まぁそんなことをいってもしかたがないので、<br />
実際制作するにあたり、役に立つサイト等をお伝えします。</p>
<p>&nbsp;</p>
<p>まずは、他のサイトのフラットデザインはどんなもんかと調べるためのサイトをご紹介。<br />
<a href="http://fltdsgn.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2043" alt="Flat UI Design - A showcase of the best examples of the flat UI design aesthetic on the web." src="/uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web..jpg" width="601" height="334" srcset="/uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web..jpg 1167w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-300x167.jpg 300w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-768x427.jpg 768w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-228x127.jpg 228w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-1024x569.jpg 1024w" sizes="(max-width: 601px) 100vw, 601px" /></a></p>
<p><a href="http://fltdsgn.com/" target="_blank">Flat UI Design &#8211; A showcase of the best examples of the flat UI design aesthetic on the web.</a></p>
<p>&nbsp;</p>
<p>次に、フラットデザインで配色するための色を手っ取り早く知るためのサイト</p>
<p><a href="http://flatuicolors.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2046" alt="Flat UI Colors" src="/uploads-archive/2013/05/Flat-UI-Colors.jpg" width="600" height="329" srcset="/uploads-archive/2013/05/Flat-UI-Colors.jpg 1182w, /uploads-archive/2013/05/Flat-UI-Colors-300x165.jpg 300w, /uploads-archive/2013/05/Flat-UI-Colors-768x422.jpg 768w, /uploads-archive/2013/05/Flat-UI-Colors-1024x562.jpg 1024w, /uploads-archive/2013/05/Flat-UI-Colors-228x125.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://flatuicolors.com/" target="_blank">Flat UI Colors</a></p>
<p>&nbsp;</p>
<p>そして、フラットデザインに使えるアイコンの紹介。</p>
<p>こちらは先日書いた以下のブログをご覧ください！<br />
<a href="/designer/%E5%95%86%E7%94%A8%E7%84%A1%E6%96%99%EF%BC%81%E6%B5%81%E8%A1%8C%E3%82%8A%E3%81%AE%E3%83%95%E3%83%A9%E3%83%83%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%B4%E3%81%A3%E3%81%9F%E3%82%8A.html" target="_blank">商用無料！流行りのフラットデザインにぴったりなアイコン4セット</a></p>
<p>&nbsp;</p>
<p>最後は、実際にデザインしてあるパーツ等をPSDでダウンロード出来る素材のご紹介です。</p>
<p>縦長すぎるので、画像は省力しますが、<br />
この２つは手元に置いておきたい素材です。<br />
色味の参考にしてもよし、そのまま使ってもよしな非常にありがたい品です。</p>
<p><a href="http://designmodo.github.io/Flat-UI/" target="_blank">Flat UI</a></p>
<p><a href="http://designmodo.com/square-free/" target="_blank">Square UI Free &#8211; User Interface Kit &#8211; Designmodo</a><br />
こちらはツイッターでつぶやくとダウンロード出来るようになります。</p>
<p>&nbsp;</p>
<p>最後にあまり関係ないですが、<br />
webサイトで使用している色を教えてくれるサイトのご紹介です。<br />
urlを入れるだけで、そのサイトが実際に使っている色を割合も含めて表示してくれます。</p>
<p><a href="/uploads-archive/2013/05/Colours.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2054" alt="Colours" src="/uploads-archive/2013/05/Colours.jpg" width="600" height="333" srcset="/uploads-archive/2013/05/Colours.jpg 1167w, /uploads-archive/2013/05/Colours-300x167.jpg 300w, /uploads-archive/2013/05/Colours-768x427.jpg 768w, /uploads-archive/2013/05/Colours-228x127.jpg 228w, /uploads-archive/2013/05/Colours-1024x569.jpg 1024w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://webcolourdata.com/">Colours</a></p>


フラットデザインの制作に役立つあれこれ

<p>最近少し時間をできたから、スマートフォンアプリの開発ツールいくつを試すことができました。<br />
今回は、それらのツールを比較して、いいところとよくないところをまとめてみたいと思います。</p>
<p>また、比較は下記項目で行いたいと思います。<br />
・開発環境整備の容易さ<br />
・ツールの使い勝手<br />
・複数プラットフォームの対応<br />
・ソースコードの再利用性（別のプラットフォームでいかにソースコードを書けずに同じ動作のアプリを作れるか）<br />
・開発作業の役割分担に向く</p>
<h2>XCode</h3>
<p>・よいところ<br />
Macなら、XcodeをAppStoreからダウンロードしてインストールすれば、開発環境の整備が完了になりますので非常にやりやすいです。<br />
今後リリースなどのため、開発用itunes idを持つことはオススメです。</p>
<p>XCodeは非常に使いやすいです。<br />
コードを書かずに画面を弄るだけでも、簡単なアプリを作れるレベルなんです。</p>
<p>・よくないところ<br />
言うまでもなく、Androidアプリは作れないです。</p>
<h2>Titanium</h3>
<p>・よいところ<br />
Eclipseみたいな開発ツールが、Titaniumのサイトからダウンロードできます。<br />
Eclipseになれた人には親切で使いやすいと思います。</p>
<p>iOSとAndroidの環境を別々設定する必要ありますが、<br />
開発はTitaniumの開発ツールで一本のソースで対応できます。</p>
<p>また、javascriptの文法で開発を進みますので、<br />
javascriptになれた人は楽になります。</p>
<p>・よくないところ<br />
Simulatorで実行する前には、どういう見た目が出てくるのは分かりません。<br />
デザインがあっても、プログラマーがまずそれをjavasciprtに書き直す必要あります。<br />
その意味でプログラマーがやることが多くなるから、タスクの分解はしにくいかもしりません。</p>
<p>独自のAPIがあって、Objective-CやJavaになれた人でも、そのAPIを習わなくてはいけません。<br />
その意味では勉強コストがかかります。</p>
<h2>Phonegap</h3>
<p>・よいところ<br />
HTML5/CSS/JavaScriptが使えます！<br />
デザイナーが作ったHTMLが直接使えます！！<br />
開発する前にも見た目が分かったのは大きいです。</p>
<p>複数プラットフォームでも、大体同じHTMLコードで行けます。</p>
<p>・よくないところ<br />
自分でIDEがないため、iOSならXCodeを使い、AndroidならEclipseを使うことになります。<br />
ほかMonacaなどのWeb IDEサービスもありますが、Local IDEを使ってた人にとっては微妙な感じです。</p>
<p>Phonegapは、プロジェクト作成やSimulator実行のときだけ使うライブラリのようなものです。<br />
API（HTML5だけで使えないDeviceの機能、Push通知など）は、htmlに特別な書き方で書きます。<br />
が、プラットフォームによって微妙に違っています。</p>
<h2>まとめ</h3>
<p>iPhoneアプリだけ開発するなら、XCodeを使いたいと思います。<br />
Androidアプリも開発するなら、役割分担とソースの再利用性を考えればPhonegapを使いたいと思います。</p>


【スマートフォンアプリ】開発ツール比較

<h2>OP25B</h3>
<p>OP25Bとは「Outbound Port25 Blocking」の略称で、<br />
プロバイダーがメールの送信に使われる25番ポートをブロックし、主に迷惑メール対策として使われています。</p>
<h2>587番ポートを使うのに、ssl証明書がいる</h3>
<p>調べてみると、587番ポートを使うのに、ssl証明書がいるそうです。<br />
自分証明書でもいいらしいですが、同じサーバにrapidsslが発行した証明書があるから、そちらを使ってみたいと思います。</p>
<h2>postfixでの設定</h3>
<p>●main.cf<br />
ファイルの最後に、下記を追加します。</p>
<p></p>

		<div id="crayon-64953fd588790392999955" 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;">
smtpd_use_tls = yes
smtpd_tls_cert_file = /path/to/cert.pem 
smtpd_tls_key_file = /path/to/key_without_passpharse.pem
smtpd_tls_CAfile = /path/to/ca.pem
smtpd_tls_session_cache_database = btree:/etc/postfix/smtpd_scache</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-64953fd588790392999955-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588790392999955-2">2</div><div class="crayon-num" data-line="crayon-64953fd588790392999955-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588790392999955-4">4</div><div class="crayon-num" data-line="crayon-64953fd588790392999955-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd588790392999955-1"><span class="crayon-i">smtpd_use_tls</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">yes</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588790392999955-2"><span class="crayon-i">smtpd_tls_cert_file</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">cert</span><span class="crayon-sy">.</span><span class="crayon-e">pem </span></div><div class="crayon-line" id="crayon-64953fd588790392999955-3"><span class="crayon-i">smtpd_tls_key_file</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">key_without_passpharse</span><span class="crayon-sy">.</span><span class="crayon-e">pem</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588790392999955-4"><span class="crayon-i">smtpd_tls_CAfile</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">ca</span><span class="crayon-sy">.</span><span class="crayon-e">pem</span></div><div class="crayon-line" id="crayon-64953fd588790392999955-5"><span class="crayon-i">smtpd_tls_session_cache_database</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">btree</span><span class="crayon-sy">:</span>/<span class="crayon-i">etc</span>/<span class="crayon-i">postfix</span>/<span class="crayon-i">smtpd_scache</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>※passpharseが入ったものが使えないみたいで、下記コマンドでpasspharseを除去できます。</p>
<p></p>

		<div id="crayon-64953fd588794804170100" 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">Shell</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;">
openssl rsa -in /path/to/key_with_passpharse.pem  -out /path/to/key_without_passpharse.pem</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-64953fd588794804170100-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-64953fd588794804170100-1"><span class="crayon-e">openssl </span><span class="crayon-i">rsa</span><span class="crayon-h"> </span>-<span class="crayon-st">in</span><span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">key_with_passpharse</span><span class="crayon-e">.pem</span><span class="crayon-h">&nbsp;&nbsp;</span>-<span class="crayon-i">out</span><span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">key_without_passpharse</span><span class="crayon-e">.pem</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>●master.cf<br />
下記内容のコメントアウトを外してください。</p>
<p></p>

		<div id="crayon-64953fd588796462119831" 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;">
submission inet n       -       n       -       -       smtpd
smtps     inet  n       -       n       -       -       smtpd
  -o smtpd_tls_wrappermode=yes
  -o smtpd_sasl_auth_enable=yes
  -o smtpd_client_restrictions=permit_sasl_authenticated,reject
  -o milter_macro_daemon_name=ORIGINATING</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-64953fd588796462119831-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588796462119831-2">2</div><div class="crayon-num" data-line="crayon-64953fd588796462119831-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588796462119831-4">4</div><div class="crayon-num" data-line="crayon-64953fd588796462119831-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588796462119831-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-64953fd588796462119831-1"><span class="crayon-e">submission </span><span class="crayon-i">inet</span><span class="crayon-h"> </span><span class="crayon-i">n</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>-<span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-i">n</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>-<span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>-<span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e">smtpd</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588796462119831-2"><span class="crayon-e">smtps&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-i">inet</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">n</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>-<span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-i">n</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>-<span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>-<span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-i">smtpd</span></div><div class="crayon-line" id="crayon-64953fd588796462119831-3"><span class="crayon-h">&nbsp;&nbsp;</span>-<span class="crayon-i">o</span><span class="crayon-h"> </span><span class="crayon-i">smtpd_tls_wrappermode</span>=<span class="crayon-i">yes</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588796462119831-4"><span class="crayon-h">&nbsp;&nbsp;</span>-<span class="crayon-i">o</span><span class="crayon-h"> </span><span class="crayon-i">smtpd_sasl_auth_enable</span>=<span class="crayon-i">yes</span></div><div class="crayon-line" id="crayon-64953fd588796462119831-5"><span class="crayon-h">&nbsp;&nbsp;</span>-<span class="crayon-i">o</span><span class="crayon-h"> </span><span class="crayon-i">smtpd_client_restrictions</span>=<span class="crayon-i">permit_sasl_authenticated</span><span class="crayon-sy">,</span><span class="crayon-i">reject</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588796462119831-6"><span class="crayon-h">&nbsp;&nbsp;</span>-<span class="crayon-i">o</span><span class="crayon-h"> </span><span class="crayon-i">milter_macro_daemon_name</span>=<span class="crayon-i">ORIGINATING</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>dovecot</h3>
<p>受信用のミドルウェアで多分関係ないと思いますが、一応SSLの設定をしておきます。<br />
●10-ssl.conf</p>
<p></p>

		<div id="crayon-64953fd588797832160093" 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;">
ssl = yes
ssl_cert = &lt;/path/to/cert.pem 
ssl_key = &lt;/path/to/key_without_passpharse.pem
ssl_ca = &lt;/path/to/ca.pem</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-64953fd588797832160093-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588797832160093-2">2</div><div class="crayon-num" data-line="crayon-64953fd588797832160093-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588797832160093-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-64953fd588797832160093-1"><span class="crayon-i">ssl</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">yes</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588797832160093-2"><span class="crayon-i">ssl_cert</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-h">&lt;</span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">cert</span><span class="crayon-sy">.</span><span class="crayon-e">pem </span></div><div class="crayon-line" id="crayon-64953fd588797832160093-3"><span class="crayon-i">ssl_key</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-h">&lt;</span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">key_without_passpharse</span><span class="crayon-sy">.</span><span class="crayon-e">pem</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588797832160093-4"><span class="crayon-i">ssl_ca</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-h">&lt;</span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">ca</span><span class="crayon-sy">.</span><span class="crayon-i">pem</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

【postfix】587番ポートを使って送信

<p>今流行りつつあるwebデザインで、フラットデザインやらソリッドカラー等といわれていますが、<br />
それに適したアイコンが商用無料で配布されております。</p>
<p>質も申し分ないうえに量もそれなりに多いので、これさえあれば十分対応できるのではないかと思います。</p>
<p>イラストやアイコンをかけない僕みたいな人には、ありがたすぎますね〜</p>
<p>それでは以下をご覧ください。</p>
<p><a href="http://www.graphicsfuel.com/2013/04/20-flat-icons-psd/#data" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2003" alt="flat1" src="/uploads-archive/2013/04/flat1.png" width="550" height="275" srcset="/uploads-archive/2013/04/flat1.png 600w, /uploads-archive/2013/04/flat1-300x150.png 300w, /uploads-archive/2013/04/flat1-228x114.png 228w" sizes="(max-width: 550px) 100vw, 550px" /></a><br />
<a title="Permanent Link: 20 Flat Icons (PSD)" href="http://www.graphicsfuel.com/2013/04/20-flat-icons-psd/" target="_blank">20 Flat Icons (PSD)</a></p>
<p>&nbsp;</p>
<p><a href="http://www.icojam.com/blog/?p=380" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2004" alt="flat2" src="/uploads-archive/2013/04/flat2.jpg" width="540" height="379" srcset="/uploads-archive/2013/04/flat2.jpg 540w, /uploads-archive/2013/04/flat2-300x211.jpg 300w, /uploads-archive/2013/04/flat2-228x160.jpg 228w" sizes="(max-width: 540px) 100vw, 540px" /></a><br />
<a href="http://www.icojam.com/blog/?p=380" target="_blank">Eldorado mini free | Icojam</a><br />
こちらはなんと1262個ものアイコンがあります！<br />
（カラーついてますが、全部モノクロのアイコンになります。pngファイルでどうやって色つけるんだろう。。。）</p>
<p>&nbsp;</p>
<p><a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol1" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2005" alt="flat3" src="/uploads-archive/2013/04/flat3.jpg" width="500" height="500" srcset="/uploads-archive/2013/04/flat3.jpg 960w, /uploads-archive/2013/04/flat3-768x768.jpg 768w, /uploads-archive/2013/04/flat3-150x150.jpg 150w, /uploads-archive/2013/04/flat3-300x300.jpg 300w, /uploads-archive/2013/04/flat3-228x228.jpg 228w, /uploads-archive/2013/04/flat3-120x120.jpg 120w" sizes="(max-width: 500px) 100vw, 500px" /></a><br />
<a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol1" target="_blank">Flat Design Icons Set Vol1 | Media Icons | Pixeden</a></p>
<p><a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol2" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2006" alt="flat4" src="/uploads-archive/2013/04/flat4.jpg" width="500" height="500" srcset="/uploads-archive/2013/04/flat4.jpg 960w, /uploads-archive/2013/04/flat4-768x768.jpg 768w, /uploads-archive/2013/04/flat4-150x150.jpg 150w, /uploads-archive/2013/04/flat4-300x300.jpg 300w, /uploads-archive/2013/04/flat4-228x228.jpg 228w, /uploads-archive/2013/04/flat4-120x120.jpg 120w" sizes="(max-width: 500px) 100vw, 500px" /></a><br />
<a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol2" target="_blank">Flat Design Icons Set Vol2 | Media Icons | Pixeden</a></p>
<p>&nbsp;</p>
<p>この２つに関しては、フラットなんですが、多色で作りこんでいますね〜</p>
<p>&nbsp;</p>
<p>このようなアイコンは、見てみると作れそうな気がしますが、<br />
実際作るとなると、けっこう難しそうですね、、、</p>
<p>こんなアイコンを自分で作れるようになると、ある意味楽なんですが、<br />
それはまだ先の話ですね〜</p>


商用無料！流行りのフラットデザインにぴったりなアイコン4セット

<p>下記をフォーマットよくプリントアウトして、背中に貼ると効果的です。</p>
<p></p>

		<div id="crayon-64953fd588340213133362" 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;">
DO NOT DISTURB

I'm on a tight schedule today

Exceptions in case of emergency are permitted

Emergency Checklist:
・Are you on fire and I'm the only one that can put you out?
・Am I on fire and don't realize it?
・Is it the second coming?

FAQ:
1、
Q:How's it going? 
A:Good

2、
Q:WHat are you working on?
A:Stuff

3、
Q:How's stuff going?
A:See answer 1

4、
Q:Do dolphins sleep?
A:Yes,they are mammals and they do sleep.

Have a nice day :)</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-64953fd588340213133362-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-2">2</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-4">4</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-6">6</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-8">8</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-10">10</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-12">12</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-14">14</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-16">16</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-18">18</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-20">20</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-22">22</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-24">24</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-26">26</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd588340213133362-28">28</div><div class="crayon-num" data-line="crayon-64953fd588340213133362-29">29</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-64953fd588340213133362-1"><span class="crayon-st">DO</span><span class="crayon-h"> </span><span class="crayon-st">NOT</span><span class="crayon-h"> </span><span class="crayon-i">DISTURB</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-2">&nbsp;</div><div class="crayon-line" id="crayon-64953fd588340213133362-3"><span class="crayon-i">I</span><span class="crayon-s">'m on a tight schedule today</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd588340213133362-5"><span class="crayon-s">Exceptions in case of emergency are permitted</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-6">&nbsp;</div><div class="crayon-line" id="crayon-64953fd588340213133362-7"><span class="crayon-s">Emergency Checklist:</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-8"><span class="crayon-s">・Are you on fire and I'</span><span class="crayon-i">m</span><span class="crayon-h"> </span><span class="crayon-e">the </span><span class="crayon-e">only </span><span class="crayon-e">one </span><span class="crayon-e">that </span><span class="crayon-e">can </span><span class="crayon-e">put </span><span class="crayon-e">you </span><span class="crayon-i">out</span><span class="crayon-sy">?</span></div><div class="crayon-line" id="crayon-64953fd588340213133362-9">・<span class="crayon-i">Am</span><span class="crayon-h"> </span><span class="crayon-i">I</span><span class="crayon-h"> </span><span class="crayon-e">on </span><span class="crayon-e">fire </span><span class="crayon-st">and</span><span class="crayon-h"> </span><span class="crayon-i">don</span><span class="crayon-s">'t realize it?</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-10"><span class="crayon-s">・Is it the second coming?</span></div><div class="crayon-line" id="crayon-64953fd588340213133362-11">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-12"><span class="crayon-s">FAQ:</span></div><div class="crayon-line" id="crayon-64953fd588340213133362-13"><span class="crayon-s">1、</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-14"><span class="crayon-s">Q:How'</span><span class="crayon-i">s</span><span class="crayon-h"> </span><span class="crayon-e">it </span><span class="crayon-i">going</span><span class="crayon-sy">?</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-64953fd588340213133362-15"><span class="crayon-i">A</span><span class="crayon-sy">:</span><span class="crayon-i">Good</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-16">&nbsp;</div><div class="crayon-line" id="crayon-64953fd588340213133362-17"><span class="crayon-cn">2</span>、</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-18"><span class="crayon-i">Q</span><span class="crayon-sy">:</span><span class="crayon-e">WHat </span><span class="crayon-e">are </span><span class="crayon-e">you </span><span class="crayon-e">working </span><span class="crayon-i">on</span><span class="crayon-sy">?</span></div><div class="crayon-line" id="crayon-64953fd588340213133362-19"><span class="crayon-i">A</span><span class="crayon-sy">:</span><span class="crayon-i">Stuff</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-20">&nbsp;</div><div class="crayon-line" id="crayon-64953fd588340213133362-21"><span class="crayon-cn">3</span>、</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-22"><span class="crayon-i">Q</span><span class="crayon-sy">:</span><span class="crayon-i">How</span>'<span class="crayon-i">s</span><span class="crayon-h"> </span><span class="crayon-e">stuff </span><span class="crayon-i">going</span><span class="crayon-sy">?</span></div><div class="crayon-line" id="crayon-64953fd588340213133362-23"><span class="crayon-i">A</span><span class="crayon-sy">:</span><span class="crayon-e">See </span><span class="crayon-i">answer</span><span class="crayon-h"> </span><span class="crayon-cn">1</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-24">&nbsp;</div><div class="crayon-line" id="crayon-64953fd588340213133362-25"><span class="crayon-cn">4</span>、</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-26"><span class="crayon-i">Q</span><span class="crayon-sy">:</span><span class="crayon-st">Do</span><span class="crayon-h"> </span><span class="crayon-e">dolphins </span><span class="crayon-i">sleep</span><span class="crayon-sy">?</span></div><div class="crayon-line" id="crayon-64953fd588340213133362-27"><span class="crayon-i">A</span><span class="crayon-sy">:</span><span class="crayon-i">Yes</span><span class="crayon-sy">,</span><span class="crayon-e">they </span><span class="crayon-e">are </span><span class="crayon-e">mammals </span><span class="crayon-st">and</span><span class="crayon-h"> </span><span class="crayon-e">they </span><span class="crayon-st">do</span><span class="crayon-h"> </span><span class="crayon-i">sleep</span><span class="crayon-sy">.</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd588340213133362-28">&nbsp;</div><div class="crayon-line" id="crayon-64953fd588340213133362-29"><span class="crayon-i">Have</span><span class="crayon-h"> </span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-e">nice </span><span class="crayon-i">day</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>csvデータ登録に文字化けが発生して、経験則で</p>
<p></p>

		<div id="crayon-64953fd588345282885342" 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">PHP</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;">
 mb_convert_encoding($str, "UTF-8", 'SJIS-win');</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-64953fd588345282885342-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-64953fd588345282885342-1"><span class="crayon-h"> </span><span class="crayon-e">mb_convert_encoding</span><span class="crayon-sy">(</span><span class="crayon-v">$str</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"UTF-8"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'SJIS-win'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>で解決できるものがなかなかうまく行かなくて、イライラしているJeffでした。</p>

スケジュールが厳しいとき使えそうなもの

<p>今日勉強できた、CSVファイルをアップロードして配列に挿入する方法を書きたいと思います。</p>
<p>$fp = fopen( &#8216;ファイル名&#8217;, &#8220;r&#8221; );<br />
//fopenでファイルを開き、変数に入れる</p>
<p>			$j = 0;<br />
			//配列の行の初期値</p>
<p>while ($array = fgetcsv($fp, 1000,&#8221;,&#8221;)) {<br />
//while文を使って行数分を繰り返し、$arrayに一行つづ挿入する。</p>
<p>				for ($i = 0; $i < count($array); $i++){
					$newarray[$j][$i] = $array[$i];
					//変数$arrayの[$i]列目の要素を$newarrayに挿入する
				}
				$j++;
				//一行終わったら次の行を最初から挿入するために$jを1足す
}

※値を読み込むときに
例えば：1行目の1列目の値を出力したいときは
$newarray[0][0];
と書いて取得できます。 

$newarray[0][name]のように$array[$i]列を「name」のように名前で
呼び出したいので以下のように連想配列を作りました。

$newarray[$j] = array(
　　　"name" => $array[0],<br />
　　　&#8221;name_other&#8221; => $array[1],<br />
　　　&#8221;zip_code&#8221; => $array[2],<br />
　　　&#8221;address&#8221; => $array[3],<br />
　　　&#8221;addressOther&#8221; => $array[4],<br />
　　　&#8221;tel&#8221; => $array[5],<br />
　　　&#8221;station&#8221; => $array[6],<br />
　　　&#8221;url&#8221; => $array[7]<br />
);<br />
それで、$newarray[$j][name]、<br />
			$newarray[$j][&#8220;name_other&#8221;]、<br />
			$newarray[$j][&#8220;zip_code&#8221;]、<br />
			$newarray[$j][&#8220;address&#8221;]<br />
			$newarray[$j][&#8220;addressOther&#8221;]、<br />
			$newarray[$j][&#8220;tel&#8221;]、<br />
			$newarray[$j][&#8220;station&#8221;]、<br />
			$newarray[$j][&#8220;url&#8221;]、のように値を呼び出すことができます。</p>
<p>他にもいい方法がありましたら、コメントお願い致します。</p>


CSVファイルを配列に挿入する

<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>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>今回紹介したいのは、【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】画像のレイアウト調整に便利なプラグイン

ページング機能

<p>海外のECサイトの「<a href="http://www.etsy.com/">Etsy</a>」を今回ご紹介したいと思います。</p>
<h2>Etsyとは</h3>
<blockquote><p>Etsy, Inc.が運営している、主にハンドメイド（手作り）の雑貨などを扱うイーマーケットプレイスのサービスである。</p>
<p>Etsyでは、小額の掲載料を支払うことで作品を出品することができる。掲載した商品に対して購入希望者がいた場合には、PayPalの決済システムを通じて売買することができる。商品の送付や質問などは売り手・買い手が直接やり取りする。</p>
<p>Etsyは2005年にサービスの提供が開始。</p>
<p><a href="http://www.sophia-it.com/content/Etsy">http://www.sophia-it.com/content/Etsy</a></p>
<p>BINARYより引用</p></blockquote>
<p>&nbsp;</p>
<p>Etsyが1月に発表した売上高は前年比70%増加で、8億9510万ドルでした。</p>
<p>何故、Estyが大手ブランドサイトよりも売上をあげているのか。</p>
<p>通常のECサイトと何が違うのかを調べてみました。</p>
<ul>
<li>手数料が小額</li>
<li>個人だからこそ、購入後のメールやり取りが親密</li>
<li>売り手側のコミュニティが豊富にある</li>
</ul>
<p>もちろん商品自体の魅力もありますが、売り手側の入り口を広げていることで</p>
<p>出品が増え、結果買い手も集まっていると感じられます。</p>
<p>また、大きな傾向としてラグジュアリー離れがすすんでいるということもあるのかもしれません。</p>
<p>高級な贅沢品をもつよりも、自分にあった商品を選ぶ方向にシフトしていると考えると</p>
<p>売上の増加も納得できます。</p>
<p>EC自体まだ伸び続ける産業ですが、今後こういった傾向のECサイトも広がっていきそうですね。</p>
<p>&nbsp;</p>


Etsy-海外のECサイト-

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

<p>仕事柄、ECサイトをみることが多いですが、スマートフォン対応の</p>
<p>サイトって実は少なかったりします。</p>
<p>対応している場合でも別のURLでスマートフォン用の画面を作成しているということも多々。</p>
<p>スマートフォンの注文が多くなっているので、作成したいというお問合せもよくあります。</p>
<p>LaunchCartはレスポンシブWebデザインで作成していますが、それがどういったものなのか</p>
<p>というのを今回はご紹介したいと思います。</p>
<p>&nbsp;</p>
<h2>レスポンシブWebデザインとは</h3>
<ul>
<li>同一のURLで設置可能</li>
<li>デザインで統一性を持たせられる</li>
<li>修正や更新も変更後にスマホやPCに即時反映</li>
</ul>
<p>&nbsp;</p>
<p>上記が主な特徴です。</p>
<p>スマートフォンでは一部のPCアプリが使用不可だったりするので</p>
<p>それに頼らないサイトデザインの作成も可能になります。</p>
<p>&nbsp;</p>


LaunchCartでのスマートフォン対応

<p>最近、渋谷駅の改修がよく話題にあがっています。</p>
<p>東横線の渋谷駅の場所が3月15日で地上の乗り場はなくなり、地下へお引っ越ししました。</p>
<p>駅ビルを含めた再開発の一貫とのことですが、それとあわせて</p>
<p>東横線・みなとみらい線から副都心線・東部東上線・西武有楽町線・西武池袋線が</p>
<p>一つの路線として繋がります。</p>
<p>仕事上多くの乗り換えでも使用する駅なので、渋谷駅について書いてみたいと思います。</p>
<h2>今回の目的</h3>
<ul>
<li>渋谷の駅ビルを含めた再開発</li>
<li>路線統一による利用客集の向上</li>
</ul>
<p>&nbsp;</p>
<p>駅という普遍的なものに+αの価値を追加するためといったところでしょうか。</p>
<p>時間短縮や利便性もさることながら、埼玉西部から横浜中華街までの</p>
<p>1都2県にまたがることで今後いろんな相乗効果が考えられます。</p>
<p>ですが、乗り換えをせずに通過するというデメリットもあるでしょう。</p>
<p>また2026年にはJR埼京線も地下へ引っ越しする予定とのことで、渋谷駅が今の位置づけから</p>
<p>どのように変わっていくのか、楽しみなところです。</p>


渋谷駅のこれから

small_title.jpg

thumbnail_title.jpg

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>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: スターフィールド編集部

2013/05/02

2013/05/01

2013/04/25

2013/04/24

2013/04/18

2013/04/18

2013/04/17

2013/04/11

2013/04/11

2013/04/10

2013/04/04

2013/04/04

2013/04/03

2013/04/03

2013/03/28

2013/03/28

2013/03/27

2013/03/20