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

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


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

<p>&nbsp;</p>
<p>前回ブログ<br />
<a href="/officer/%E3%82%BB%E3%82%AD%E3%83%A5%E3%82%A2%E3%81%AA%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89%E3%82%92%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B%E4%BE%BF%E5%88%A9%E3%83%84%E3%83%BC%E3%83%AB.html">セキュアなパスワードを自動生成する便利ツール</a><br />
でパスワード自動生成ツールを作成したが、<br />
それをプログラムから呼び出せるAPI的なものを作成した。</p>
<p><a class="demo" href="/demo/hoshino/32/js/get_password.js" target="_blank">download</a></p>
<p>&nbsp;</p>
<h2>使い方</h2>
<p></p>

		<div id="crayon-64953fd5869bd982059526" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/javascript" src="js/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/get_password.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5869bd982059526-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5869bd982059526-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5869bd982059526-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-1.8.2.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5869bd982059526-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/get_password.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>HTMLでjQueryと本jsをインポート。</p>
<p>あとは</p>

		<div id="crayon-64953fd5869c2357177791" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
get_password();</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5869c2357177791-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5869c2357177791-1"><span class="crayon-e">get_password</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のように呼び出すだけ。</p>
<p>&nbsp;</p>
<h2>パラメータ</h2>
<h2>無し</h3>
<p>例</p>

		<div id="crayon-64953fd5869c3207869581" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
get_password();</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5869c3207869581-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5869c3207869581-1"><span class="crayon-e">get_password</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>英字、数値、記号それぞれ混合の8桁の値が返る。</p>
<p>&nbsp;</p>
<h2>数値</h3>
<p>例</p>

		<div id="crayon-64953fd5869c4871513410" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
get_password( 8 );</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5869c4871513410-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5869c4871513410-1"><span class="crayon-e">get_password</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">8</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>英字、数値、記号それぞれ混合の指定した桁数の値が返る。</p>
<p>例だと8桁の文字列が返る。</p>
<p>&nbsp;</p>
<h2>配列</h3>
<p>例</p>

		<div id="crayon-64953fd5869c6764298541" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
get_password( {
	alphabet: false,
	symbol: false,
	number: false,
	len: 2
} );</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5869c6764298541-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5869c6764298541-2">2</div><div class="crayon-num" data-line="crayon-64953fd5869c6764298541-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5869c6764298541-4">4</div><div class="crayon-num" data-line="crayon-64953fd5869c6764298541-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5869c6764298541-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5869c6764298541-1"><span class="crayon-e">get_password</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5869c6764298541-2"><span class="crayon-h">	</span><span class="crayon-i">alphabet</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd5869c6764298541-3"><span class="crayon-h">	</span><span class="crayon-i">symbol</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5869c6764298541-4"><span class="crayon-h">	</span><span class="crayon-i">number</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd5869c6764298541-5"><span class="crayon-h">	</span><span class="crayon-i">len</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5869c6764298541-6"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<table>
<tbody>
<tr>
<th>キー</th>
<th>値の型</th>
<th>デフォルト</th>
<th>必須</th>
<th>説明</th>
</tr>
<tr>
<td>alphabet</td>
<td>boolean</td>
<td>true</td>
<td>☓</td>
<td>戻り値にアルファベットをtrueの時は含め、falseのときは含めない</td>
</tr>
<tr>
<td>number</td>
<td>boolean</td>
<td>true</td>
<td>☓</td>
<td>戻り値に数値をtrueの時は含め、falseのときは含めない</td>
</tr>
<tr>
<td>symbol</td>
<td>boolean</td>
<td>true</td>
<td>☓</td>
<td>戻り値に記号をtrueの時は含め、falseのときは含めない</td>
</tr>
<tr>
<td>len</td>
<td>int</td>
<td>8</td>
<td>☓</td>
<td>戻り値の桁数を指定</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>

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

<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>


渋谷駅のこれから

title.jpg

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

<p>wordpressなど、投稿ページから別のページに遷移しようとしたら、「このページから移動してもよろしいですか」という確認ウィンドウが出てくるから、<br />
かっこ良くていつか実装してみたいと思いました。</p>
<p>調べてみたら、jQueryのbeforeunloadイベントを使って簡単に実現できるようです。</p>
<p><a href="/demo/jeff/beforeunloadchange.html" target="_blank">サンプル</a>を見てください。</p>
<h2>仕様</h3>
<p>inputのテキストボクスに変更があった場合のみ、<br />
「戻る」（実際はプログラミングのカテゴリに遷移する）ボタンを押したら、確認ウィンドウが出てきます。</p>
<p>IE8でもテストOKです。</p>
<p>でもページを閉じようとしても、確認ウィンドウも出てきて、ちょっとうるさいですね。</p>
<h2>ソース</h3>
<p>ソースコードを簡単に貼ります。</p>
<p></p>

		<div id="crayon-64953fd586536853496086" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;【jQuery】ページ離脱時に確認メッセージを表示させる方法&lt;/title&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function(){
    $("input[type=text]").change(function() {
        $(window).on('beforeunload', function() {
            return '投稿が完了していません。このまま移動しますか？';
        });
    });
    $("input[type=submit]").click(function() {
        $(window).off('beforeunload');
    });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h4&gt;投稿&lt;/h4&gt;
&lt;form method="post" action="beforeunloadchange.html"&gt;
&lt;input type="text" value="" /&gt;&lt;br&gt;
&lt;input type="submit" value="送信" /&gt;
&lt;input type="button" value="戻る" onclick="location.href='/programmer'" /&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd586536853496086-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-2">2</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-4">4</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-6">6</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-8">8</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-10">10</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-12">12</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-14">14</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-16">16</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-18">18</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-20">20</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-22">22</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-24">24</div><div class="crayon-num" data-line="crayon-64953fd586536853496086-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586536853496086-26">26</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd586536853496086-1"><span class="crayon-r ">&lt;html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-2"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-3"><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">【jQuery】ページ離脱時に確認メッセージを表示させる方法</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-4"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-64953fd586536853496086-5"><span class="crayon-i "><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-6"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"input[type=text]"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">change</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">window</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">on</span><span class="crayon-sy">(</span><span class="crayon-s">'beforeunload'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-s">'投稿が完了していません。このまま移動しますか？'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"input[type=submit]"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">click</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">window</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">off</span><span class="crayon-sy">(</span><span class="crayon-s">'beforeunload'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-15"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-16"><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-64953fd586536853496086-17"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-18"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-19"><span class="crayon-r ">&lt;h4&gt;</span><span class="crayon-i ">投稿</span><span class="crayon-r ">&lt;/h4&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-20"><span class="crayon-r ">&lt;form </span><span class="crayon-e ">method</span>=<span class="crayon-s ">"post"</span><span class="crayon-h"> </span><span class="crayon-e ">action</span>=<span class="crayon-s ">"beforeunloadchange.html"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-21"><span class="crayon-r ">&lt;input </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"text"</span><span class="crayon-h"> </span><span class="crayon-e ">value</span>=<span class="crayon-s ">""</span><span class="crayon-r "> /&gt;</span><span class="crayon-r ">&lt;br&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-22"><span class="crayon-r ">&lt;input </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"submit"</span><span class="crayon-h"> </span><span class="crayon-e ">value</span>=<span class="crayon-s ">"送信"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-23"><span class="crayon-r ">&lt;input </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"button"</span><span class="crayon-h"> </span><span class="crayon-e ">value</span>=<span class="crayon-s ">"戻る"</span><span class="crayon-h"> </span><span class="crayon-e ">onclick</span>=<span class="crayon-s ">"location.href='/programmer'"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-24"><span class="crayon-r ">&lt;/form&gt;</span></div><div class="crayon-line" id="crayon-64953fd586536853496086-25"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586536853496086-26"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

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

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


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

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


ワイヤーフレーム作成に無料で使えるツール5選、手書き用テンプレートPDFも紹介

<p>PHPでサーバ間通信を言えば、fsockやcurlを使うイメージですが、やや複雑な感じをしていました。</p>
<p>最近になって、ファイル内容の取得に多用している関数「file_get_contents」でもサーバ間通信で結構使えることを知りました。</p>
<h2>基本用法</h3>
<p></p>

		<div id="crayon-64953fd586353478991537" 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;">
&lt;?php
$url = 'http://www.example.net/hoge.php';
$data = array(
	'parma1' =&gt; 'aaa',
	'parma2' =&gt; 'bbb',
);
$options = array('http' =&gt; array(
	'method' =&gt; 'POST',// POSTでも使える！
	'content' =&gt; http_build_query($data),
));
$contents = file_get_contents($url, false, stream_context_create($options));</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-64953fd586353478991537-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586353478991537-2">2</div><div class="crayon-num" data-line="crayon-64953fd586353478991537-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586353478991537-4">4</div><div class="crayon-num" data-line="crayon-64953fd586353478991537-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586353478991537-6">6</div><div class="crayon-num" data-line="crayon-64953fd586353478991537-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586353478991537-8">8</div><div class="crayon-num" data-line="crayon-64953fd586353478991537-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586353478991537-10">10</div><div class="crayon-num" data-line="crayon-64953fd586353478991537-11">11</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-64953fd586353478991537-1"><span class="crayon-ta">&lt;?php</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586353478991537-2"><span class="crayon-v">$url</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'http://www.example.net/hoge.php'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd586353478991537-3"><span class="crayon-v">$data</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586353478991537-4"><span class="crayon-h">	</span><span class="crayon-s">'parma1'</span><span class="crayon-h"> </span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-s">'aaa'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd586353478991537-5"><span class="crayon-h">	</span><span class="crayon-s">'parma2'</span><span class="crayon-h"> </span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-s">'bbb'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586353478991537-6"><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd586353478991537-7"><span class="crayon-v">$options</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-sy">(</span><span class="crayon-s">'http'</span><span class="crayon-h"> </span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586353478991537-8"><span class="crayon-h">	</span><span class="crayon-s">'method'</span><span class="crayon-h"> </span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-s">'POST'</span><span class="crayon-sy">,</span><span class="crayon-c">// POSTでも使える！</span></div><div class="crayon-line" id="crayon-64953fd586353478991537-9"><span class="crayon-h">	</span><span class="crayon-s">'content'</span><span class="crayon-h"> </span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">http_build_query</span><span class="crayon-sy">(</span><span class="crayon-v">$data</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586353478991537-10"><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd586353478991537-11"><span class="crayon-v">$contents</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">file_get_contents</span><span class="crayon-sy">(</span><span class="crayon-v">$url</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">stream_context_create</span><span class="crayon-sy">(</span><span class="crayon-v">$options</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>ヘッダを追加</h3>
<p>ユーザーエージェントを指定したいやBasic認証情報を追加したい場合に使えます。</p>
<p></p>

		<div id="crayon-64953fd586357670909430" 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;">
&lt;?php
//...
$headers = array(
	'User-Agent: My User Agent 1.0',
	'Authorization: Basic '.base64_encode('user:pass'),
);
$options = array('http' =&gt; array(
	'method' =&gt; 'POST',
	'content' =&gt; http_build_query($data),
	'header' =&gt; implode("\r\n", $headers),
));
//...</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-64953fd586357670909430-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586357670909430-2">2</div><div class="crayon-num" data-line="crayon-64953fd586357670909430-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586357670909430-4">4</div><div class="crayon-num" data-line="crayon-64953fd586357670909430-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586357670909430-6">6</div><div class="crayon-num" data-line="crayon-64953fd586357670909430-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586357670909430-8">8</div><div class="crayon-num" data-line="crayon-64953fd586357670909430-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586357670909430-10">10</div><div class="crayon-num" data-line="crayon-64953fd586357670909430-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd586357670909430-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-64953fd586357670909430-1"><span class="crayon-h">&lt;</span><span class="crayon-sy">?</span><span class="crayon-i">php</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586357670909430-2"><span class="crayon-c">//...</span></div><div class="crayon-line" id="crayon-64953fd586357670909430-3"><span class="crayon-sy">$</span><span class="crayon-i">headers</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586357670909430-4"><span class="crayon-h">	</span><span class="crayon-s">'User-Agent: My User Agent 1.0'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd586357670909430-5"><span class="crayon-h">	</span><span class="crayon-s">'Authorization: Basic '</span><span class="crayon-sy">.</span><span class="crayon-e">base64_encode</span><span class="crayon-sy">(</span><span class="crayon-s">'user:pass'</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586357670909430-6"><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd586357670909430-7"><span class="crayon-sy">$</span><span class="crayon-i">options</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-sy">(</span><span class="crayon-s">'http'</span><span class="crayon-h"> </span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd586357670909430-8"><span class="crayon-h">	</span><span class="crayon-s">'method'</span><span class="crayon-h"> </span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-s">'POST'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd586357670909430-9"><span class="crayon-h">	</span><span class="crayon-s">'content'</span><span class="crayon-h"> </span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">http_build_query</span><span class="crayon-sy">(</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 crayon-striped-line" id="crayon-64953fd586357670909430-10"><span class="crayon-h">	</span><span class="crayon-s">'header'</span><span class="crayon-h"> </span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">implode</span><span class="crayon-sy">(</span><span class="crayon-s">"\r\n"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">headers</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd586357670909430-11"><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-64953fd586357670909430-12"><span class="crayon-c">//...</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>最後に</h3>
<p>使い慣れた関数を手軽く使えるのは嬉しいです。<br />
「file_get_contents」の返り値が配列だと思いましたが、PHPのマニュアルを見たら、文字列ですので、どうぞご注意を。</p>

【PHP】サーバ間通信に意外に使える関数

<p>macbookのトラックパッドのジェスチャーを拡張してタブブラウザの<strong>生産性を劇的にアップさせる</strong>すごいアプリ「nex TAB」を最近知ったので、ご紹介します。</p>
<p>以前に紹介した<a href="/officer/mac%E7%89%88chrome%E3%81%A7%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%B8%E3%82%A7%E3%82%B9%E3%83%81%E3%83%A3%E3%83%BC%E3%81%8C%E5%8B%95%E4%BD%9C%E3%81%99%E3%82%8B%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD.html" target="_blank">mac版chromeでマウスジェスチャーが動作する拡張機能「Smooth Gesture」</a>のように、私はブラウザの戻るボタンや、閉じるボタンを押すためにカーソルを合わせにいく作業が非常にストレスが溜まる性格です。ショートカットキーを暗記するところから始まりマウスジェスチャーを探し求め、私がMacを使う理由の一つでもある秀逸なトラックパッドのジェスチャーという段階まで来て、さらに、ジェスチャーを拡張するアプリということで一人胸踊りました。</p>
<p>既にVer.4が出ており、MacAppStoreで販売される350円の有料アプリで即ポチして試しました。</p>
<p>nex Tab</p>
<p><a title="Next Tab" href="http://itunes.apple.com/jp/app/nextab/id468063641?mt=12" target="_blank">http://itunes.apple.com/jp/app/nextab/id468063641?mt=12</a></p>
<h2>操作方法</h3>
<h3>右隣のタブに移動したい時</h4>
<p><a href="/uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1702" alt="スクリーンショット_2013_03_13_11_19" src="/uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220-300x222.png" width="300" height="222" srcset="/uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220-300x222.png 300w, /uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220-228x169.png 228w, /uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220.png 483w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>2本の指を用います。左側の指を置きながら、右側の指をタップします。</p>
<p>逆に左隣のタブに移動したいときは、右側の指を固定し、左側の指をタップします。</p>
<h3>タブを2個以上移動したい時</h4>
<p><a href="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1703" alt="スクリーンショット_2013_03_13_11_20" src="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb-300x221.png" width="300" height="221" srcset="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb-300x221.png 300w, /uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb-228x168.png 228w, /uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb.png 481w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>トラックパッドの上部の境目を移動したい方向になぞります。</p>
<h3>タブを閉じたい時</h4>
<p><a href="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb1.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1704" alt="スクリーンショット_2013_03_13_11_20" src="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb1-300x218.png" width="300" height="218" /></a><br />
3本指を用います。右側2本の指を置きながら、左側の指をタップします。</p>
<h3>新規タブを追加したい時</h4>
<p><a href="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1705" alt="スクリーンショット_2013_03_13_11_20" src="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2-300x220.png" width="300" height="220" srcset="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2-300x220.png 300w, /uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2-228x168.png 228w, /uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2.png 479w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>3本指を用います。左側2本の指を置きながら、右側の指をタップします。</p>
<h3>タブを更新したい時</h4>
<p><a href="/uploads-archive/2013/03/7a245d192479ff5db38067407bcbd7511.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1707" alt="スクリーンショット_2013_03_13_11_21" src="/uploads-archive/2013/03/7a245d192479ff5db38067407bcbd7511-300x220.png" width="300" height="220" /></a></p>
<p>3本指を用います。真ん中の指をタップします。</p>
<h3>ログイン画面に戻る</h4>
<p>1本指でトラックパッドの右端から左端へ素早く移動させます。</p>
<p>※Ver4で追加された新機能です。</p>
<h3>トップとボトムに移動する</h4>
<p>2本指を用いてスクロールする要領で上端から下端に移動させます。</p>
<p><span style="color: #ff0000;">※Ver4.0現在スクロールの方向をナチュラルに設定している場合、スクロールと逆の動きになります。</span></p>
<h2><span style="font-size: 1em;">まとめ</span></h3>
<p>マウスジェスチャーにトラックパッドで最強です。ただ、ジェスチャーが体が記憶するのに時間が掛かりそうです。</p>
<p>&nbsp;</p>


macbookトラックパッドを拡張するアプリ「nex Tab」で劇的生産性アップ

<p>お客様へどんなサイトがいいのか伝える時に言葉だけじゃちょっと・・・</p>
<p>といった時に参考にさせていただいているサイトのご紹介です。</p>
<h2>WEBデザインの見本帳</h3>
<p><a href="http://www.web-mihon.com/"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1686" alt="スクリーンショット（2013-03-06 18.22.23）" src="/uploads-archive/2013/03/d2f17bf502936aa92733467728810f73-300x155.png" width="300" height="155" srcset="/uploads-archive/2013/03/d2f17bf502936aa92733467728810f73-300x155.png 300w, /uploads-archive/2013/03/d2f17bf502936aa92733467728810f73-768x397.png 768w, /uploads-archive/2013/03/d2f17bf502936aa92733467728810f73-228x118.png 228w, /uploads-archive/2013/03/d2f17bf502936aa92733467728810f73.png 960w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>http://www.web-mihon.com/</p>
<ul>
<li>サイトのカテゴリ分けが明確</li>
<li>種類が豊富</li>
<li>サムネイルが直接表示</li>
</ul>
<p>色や印象、業種からも探すことが可能なのでかなりおすすめです。</p>
<p>掲載基準もデザインにこだわわっていて、見ているだけでもかなり楽しいです。</p>
<p>疲れた時に優しいデザインのサイトでいやされるのもありかも。</p>


デザインやイメージの参考サイト

セキュアなパスワードを自動生成する便利ツール

<p>4つ以上の色相を使ったカラフルなデザインは、元気で楽しげな印象を与えてくれます。</p>
<p>にぎやかさや楽しげな印象を出したいときに、よく使われるデザインで、子ども・ファミリー向けで見かけることの多いです。</p>
<p>ただ、色数が多いので、バランスを整えたり、印象を狙い通りにしていくことが、難しいです。</p>
<p>&nbsp;</p>
<p>そこで今回は、全色相系でデザインされた５つのサイトについて、調べてみました。</p>
<p>&nbsp;</p>
<p><a href="http://bikke-bikke.jp/" target="_blank"><img decoding="async" loading="lazy" alt="bikke" src="/uploads-archive/2013/03/site01.jpg" width="328" height="236" /></a></p>
<p>&nbsp;</p>
<p><a href="http://bikke-bikke.jp/" target="_blank">http://bikke-bikke.jp/</a></p>
<p>メインのイメージにアイコン的なイラストと、文字をカラフルに並べ、</p>
<p>楽しそうなイメージがたくさんつまった印象を感じます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://givery.co.jp/special/" target="_blank"><img decoding="async" loading="lazy" alt="givery" src="/uploads-archive/2013/03/site02.jpg" width="328" height="236" /></a></p>
<p><a href="http://givery.co.jp/special/" target="_blank">http://givery.co.jp/special/</a></p>
<p>ごくわずかな場所に限定してカラフルな場所を使い、</p>
<p>カラフルながらに、落ち着いた印象を受けます。</p>
<p>&nbsp;</p>
<p><a href="http://map.itp.ne.jp/" target="_blank"><img decoding="async" loading="lazy" alt="マップMAP" src="/uploads-archive/2013/03/site03.jpg" width="328" height="236" /></a></p>
<p><a href="http://map.itp.ne.jp/" target="_blank">http://map.itp.ne.jp/</a></p>
<p>全体に広がるように全色相が並べられていて、地図の色と合わせて、</p>
<p>楽しげな印象が感じられます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://agrinext.jp/kidsmuseum/" target="_blank"><img decoding="async" loading="lazy" alt="http://agrinext.jp/kidsmuseum/" src="/uploads-archive/2013/03/site04.jpg" width="328" height="236" /></a></p>
<p><a href="http://agrinext.jp/kidsmuseum/" target="_blank">http://agrinext.jp/kidsmuseum/</a></p>
<p>全色相系ですが、緑が多く使われていて、</p>
<p>かわいらしさと、まとまった印象を感じることができます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://motoiderico.com/" target="_blank"><img decoding="async" loading="lazy" alt="motoideRico" src="/uploads-archive/2013/03/site05.jpg" width="328" height="236" /></a></p>
<p><a href="http://motoiderico.com/" target="_blank">http://motoiderico.com/</a></p>
<p>他の4つと異なり、白いスペースが一切ありません。</p>
<p>ピンク系にやや色を偏らせているようです。</p>
<p>にぎやかさを超えた、サイケデリックな印象を受けます。</p>
<p>&nbsp;</p>
<h2>まとめ</h3>
<ul>
<li>基本は白をそれぞれの色に使い別ける。</li>
<li>カラフルな部分が限定されるほど、落ち着いた印象になる。</li>
<li>全色相系でも、中心となる色相に近い色を多めに配置することで、ある色のイメージを出すこともできる。</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


全色相系のサイトデザインを調べる

<p>見栄えを良くすると共にSEO上も有効なので、以下のルールを守って投稿して下さい。</p>
<p>&nbsp;</p>
<h2>見出しレベル</h2>
<p>上記のように、文章を構成する上で、文章ブロックごとに見出しをつけて下さい。</p>
<p>例えば、一番大きい見出しでは、○○の説明→○○の手順→○○の手順→確認→まとめといった内容です。</p>
<p>見出し2からスタートし、3段階用意しています。</p>
<h2>これは見出し2です。&lt;H2&gt;</h2>
<h3>これは見出し3です。&lt;H3&gt;</h3>
<h4>これは見出し４です。&lt;H4&gt;</h4>
<h2>引用</h2>
<p>何かの記事を引用する場合など引用文であることを明らかにするために、エディターの「“」のマークで囲って下さい。</p>
<blockquote><p>ここを引用しています。&lt;blockquote&gt;</p></blockquote>
<h2>強調</h2>
<p>文章のキーワード、言いたいことは、エディターの「B」のマークで文字を<strong>強調</strong>して下さい。本来は、boldの略でしょうが、html上は&lt;strong&gt;で表示されます。これも<strong>SEO上有効</strong>と言われています。一つの記事の中に2〜3は入れるようにして下さい。多すぎでもNGです。</p>
<h2>シンタックスハイライター</h2>
<p>コードなどを書くときにはエディターの一番右上の「&lt;&gt;」のアイコンを使って下さい。詳しく使い方は、他のブログなどを参照して下さい。</p>
<p><a href="http://thikasa.net/20120724/wordpress-plugin-crayon-syntax-highlighter/">http://thikasa.net/20120724/wordpress-plugin-crayon-syntax-highlighter/</a></p>

		<div id="crayon-64953fd585f3c816289982" 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;">
&lt;html&gt;Crayon Syntax Highlighterですよと。</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-64953fd585f3c816289982-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-64953fd585f3c816289982-1"><span class="crayon-h">&lt;</span><span class="crayon-i">html</span><span class="crayon-h">&gt;</span><span class="crayon-e">Crayon </span><span class="crayon-e">Syntax </span><span class="crayon-i">Highlighter</span>ですよと。</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>アイキャッチ画像</h2>
<p>必ず設定して下さい。記事が見やすいかどうか？その名の通りアイキャッチなので直帰率に寄与してきます。</p>
<p><a href="http://toshiiy.blog22.fc2.com/blog-entry-114.html">http://toshiiy.blog22.fc2.com/blog-entry-114.html</a></p>
<p>フリー素材もたくさんあります。</p>
<h2> フォント</h2>
<p>これも、SEOどうこうというよりも記事として見やすいかどうかです。</p>
<p><span style="font-size: x-large;">文字サイズ</span>を<span style="font-size: xx-small;">変えてみたり</span>、<span style="color: #ff0000;"><span style="text-decoration: underline;">色</span>を変えてみて下さい。<span style="color: #000000;"><span style="background-color: #ffff00;">文字の背景色を変える</span>こともできます<del>ねえええ</del>。</span></span></p>
<p>箇条書きにする場合は、</p>
<ol>
<li><span style="line-height: 13px;">このように</span></li>
<li>リストをつかってください。
<ul>
<li>右横のアイコンで</li>
<li>このようにインデントもできます。</li>
</ul>
</li>
</ol>
<h2>特殊なクラス</h2>
<p>以下のようにクラスを設定すると、それぞれの装飾されます。</p>

		<div id="crayon-64953fd585f41845137446" 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;">
&lt;a href="/demo/hoshino/31/” class="demo"&gt;demo&lt;/a&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-64953fd585f41845137446-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-64953fd585f41845137446-1"><span class="crayon-h">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-s">"/demo/hoshino/31/” class="</span><span class="crayon-i">demo</span>"<span class="crayon-h">&gt;</span><span class="crayon-i">demo</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a class="demo" href="/demo/hoshino/31/">demo</a></p>

		<div id="crayon-64953fd585f42940468513" 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;">
&lt;a href="/demo/hoshino/31/” class="link"&gt;demo&lt;/a&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-64953fd585f42940468513-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-64953fd585f42940468513-1"><span class="crayon-h">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-s">"/demo/hoshino/31/” class="</span><span class="crayon-i">link</span>"<span class="crayon-h">&gt;</span><span class="crayon-i">demo</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a class="link" href="/demo/hoshino/31/">demo</a></p>
<p>こんな感じです。</p>
<p>リニューアルして以来、PVは右肩上がりです。このまま継続して伸び率を増やして行きましょう。</p>

ブログの書き方ルール

【推測】basic認証の仕組みをPHPで実現してみた

今までで一番高機能かもしれないjQueryプラグインのスライドショー「camera」

<p>通信販売自体は電話やカタログからはがきでの申し込み等前々からあった</p>
<p>販売形態ですが、ECに関してはここ10年ほどでインターネットの普及により</p>
<p>利用者数・売上ともに爆発的に増加しています。</p>
<p>取扱商品は物品・サービス・デジタルコンテンツと様々ですが、</p>
<p>スマートフォンの普及からまた新たな変化がでています。</p>
<p>&nbsp;</p>
<p><span style="font-size: large;">入り口はスマートフォン</span></p>
<p>日本通信販売協会（JADMA）が1月23日に発表した</p>
<p>「インターネット利用実態調査結果」の中で</p>
<p>「スマートフォン購入後にインターネット通販の利用について」調査を行ったところ</p>
<p><strong>・15%が「PCでのインターネット通販利用が増えた」</strong></p>
<p><strong>・14%が「携帯電話（フマートフォン含む）での通販利用が増えた」</strong></p>
<p>と回答しています。</p>
<p>逆にテレビやカタログの通販については減少傾向です。</p>
<p><strong>■5回インターネット利用実態調査結果について</strong></p>
<p><a href="http://www.jadma.org/pdf/press/press_20130123net_survey.pdf">http://www.jadma.org/pdf/press/press_20130123net_survey.pdf</a></p>
<p>スマートフォンの利用率が携帯電話全体の4割を占めいている中で、</p>
<p>スマートフォンが購入のきっかけになるケースが増えている結果ですが、</p>
<p>現在スマートフォンに対応したサイト作成はどうなのでしょうか。。。</p>
<p>&nbsp;</p>
<p>ECサイト運営でスマートフォンサイトの整備が必要は不可欠になりそうです。</p>


ECの購入方法の移行

<p>最近ファッション関連ECサイトの動きが激しい。<br />
大きいところだと、ドコモ、楽天がそれぞれ<br />
マガシークとスタイライフにTOBを仕掛けている。</p>
<p>楽天はファッション関連の流通額を3567億円と初めて発表し、<br />
今後は更にファッション関連の販売に力を入れていくと強調している。</p>
<p>また、スタートトゥデイは新たにZOZObyUというセレクトショップをオープンする。<br />
従来のブランド単位でのラインナップと異なり、<br />
ブランドをまたがっての商品の提案により新たな購買層の獲得を狙う。</p>
<p>なぜ今ファッションECで大きな動きが起こっているのか?<br />
それは大きく分けると<br />
1. 購入者のネットリテラシー向上<br />
2. 競争の激化<br />
3. 技術革新<br />
が挙げられると感じる。</p>
<p>1. 購入者のネットリテラシー向上<br />
サイズやクオリティで、店舗での購入を選択していた購入者が<br />
ネットでの購入に慣れてきたということと、<br />
SNSなど個人の発言がweb上で一定の信頼感が得られるようになり<br />
加えてコミュニケーションツールの普及により購入までの障壁が下がったと考えられる。</p>
<p>2. 競争の激化<br />
即日配達、送料無料、ポイントなどの需要が高まるなか、<br />
利益率の減退に加え、流通、人的コストが増している。<br />
資本力と規模が優位性を保つ唯一の方法となる。</p>
<p>3. 技術革新<br />
付加価値や安心感を向上させるため、<br />
動画を使った表現などはよく目にするようになった。<br />
今後は例えばスマホアプリで自分を撮影して試着できるシステムや<br />
商品を3D表現するECサイトなども出てくるだろう。<br />
そうなると、値引きや流通コストの増加に加え、<br />
システムに対する設備投資もかさみ、これも資本力がものを言う。</p>
<p>要するに、そのECサイトで買うメリットが無ければ生き残れない = 大手の下で展開する<br />
しかないという選択を余儀なくされる時代になったということと思う。</p>
<p>企業にとっては苦しいが、ECサイトのクオリティ向上が図れるだけでなく、<br />
消費者にとっては選択の幅が広がることと、競争によるサービスの向上はEC業界にとってはとても良いことだと思う。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - 2013年

2013/03/28

2013/03/28

2013/03/28

2013/03/28

2013/03/27

2013/03/20

2013/03/14

2013/03/13

2013/03/13

2013/03/13

2013/03/07

2013/03/07

2013/03/07

2013/03/07

2013/03/07

2013/03/06

2013/02/28

2013/02/28