<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>お客様へどんなサイトがいいのか伝える時に言葉だけじゃちょっと・・・</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>


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

【推測】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>世の中便利になったもので、<br />
非常にありがたいものが無料で見ることができます。</p>
<p>日々いろんな情報を取得していく中で、<br />
最近(けっこう前でもある)タメになったものをご紹介します！</p>
<h2>デザイン</h3>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/11608357" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/shirokuro331/web-11608357" title="Webデザインのセオリーを学ぼう" target="_blank">Webデザインのセオリーを学ぼう</a> </strong> from <strong><a href="http://www.slideshare.net/shirokuro331" target="_blank">Toshiaki Sasaki</a></strong> </div>
<p>非常に丁寧でわかりやすく書かれています。<br />
デザインは論理的ですね！</p>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/14902681" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/saucerjp/ss-14902681" title="ノンデザイナーのための配色理論" target="_blank">ノンデザイナーのための配色理論</a> </strong> from <strong><a href="http://www.slideshare.net/saucerjp" target="_blank">tsukasa obara</a></strong> </div>
<p>なるほどなるほど・・・それでも配色は難しい・・・</p>
<h2>ディレクション</h3>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15442293" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/cafekenta/20121117-01-dirmtg01" title="20121117 01 dir-mtgスライド01" target="_blank">20121117 01 dir-mtgスライド01</a> </strong> from <strong><a href="http://www.slideshare.net/cafekenta" target="_blank">Kenta Nakamura</a></strong> </div>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15442318" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/cafekenta/20121125-02-dirmtg02" title="20121125 02 dir-mtgスライド02" target="_blank">20121125 02 dir-mtgスライド02</a> </strong> from <strong><a href="http://www.slideshare.net/cafekenta" target="_blank">Kenta Nakamura</a></strong> </div>
<p>まさしくディレクションとはこのことだと思います。<br />
もっとこれを多く実践してくれる人が増えたらいいのにと思います。</p>
<h2>その他</h3>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/7665168" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/hayatomizuno/jquery-7665168" title="ノンプログラマーのためのjQuery入門" target="_blank">ノンプログラマーのためのjQuery入門</a> </strong> from <strong><a href="http://www.slideshare.net/hayatomizuno" target="_blank">Hayato Mizuno</a></strong> </div>
<p>初心者向けですね。枚数は多いですが、サクサク読み進められるので、時間はあまりかからないと思います。</p>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15002576" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/nukaga/webwordpress-15002576" title="文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう" target="_blank">文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう</a> </strong> from <strong><a href="http://www.slideshare.net/nukaga" target="_blank">Junko Nukaga</a></strong> </div>
<p>これも初心者向けですね。概念から方法までわかりやすく見やすいものになってます。</p>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/16459192" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/copywritter/ss-16459192" title="カヤックコピー部のコピー講座" target="_blank">カヤックコピー部のコピー講座</a> </strong> from <strong><a href="http://www.slideshare.net/copywritter" target="_blank">長谷川 哲士</a></strong> </div>
<p>これは、もうなるほどと思ってしまう内容で、とても参考になります。</p>
<p>こういうスライドは本当にありがたく勉強になります。<br />
僕も何か書いてみようかな。。。</p>


web制作においてタメになる(なった)スライドのご紹介

<p>最近のプロジェクトでは、スペースがあまりないですが、格好いいかつ分かりやすいツールバーみたいのものを導入したいと思います。<br />
そのとき、この<a href="http://paulkinzett.github.com/toolbar/" target="_blank">toolbar.js</a>というjQueryプラグインを思い出しました。</p>
<p>公式サイト（一応）の格好良さに釣られて、結構簡単に実装できるかなと思いましたが、そうではありません。。<br />
<a href="/uploads-archive/2013/02/toolbar-js-screenshot.png"><img decoding="async" loading="lazy" src="/uploads-archive/2013/02/toolbar-js-screenshot.png" alt="toolbar-js-screenshot" width="110" height="159" class="aligncenter size-full wp-image-1593" /></a></p>
<h2>ソースの書き方が明言されていない</h3>
<p>ます、公式サイトで載せてる書き方（下記）を見て、</p>
<p></p>

		<div id="crayon-64953fd585537970903681" 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;">
$('#format-toolbar').toolbar({
	content: '#format-toolbar-options', 
	position: 'top',
	hideOnClick: true
});</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-64953fd585537970903681-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd585537970903681-2">2</div><div class="crayon-num" data-line="crayon-64953fd585537970903681-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd585537970903681-4">4</div><div class="crayon-num" data-line="crayon-64953fd585537970903681-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-64953fd585537970903681-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#format-toolbar'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">toolbar</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd585537970903681-2"><span class="crayon-h">	</span><span class="crayon-i">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'#format-toolbar-options'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-64953fd585537970903681-3"><span class="crayon-h">	</span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'top'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd585537970903681-4"><span class="crayon-h">	</span><span class="crayon-i">hideOnClick</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line" id="crayon-64953fd585537970903681-5"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p></p>

		<div id="crayon-64953fd58553b137802333" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div id="format-toolbar-options"&gt;
	&lt;a href="#"&gt;&lt;i class="icon-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href="#"&gt;&lt;i class="icon-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href="#"&gt;&lt;i class="icon-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;	</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58553b137802333-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553b137802333-2">2</div><div class="crayon-num" data-line="crayon-64953fd58553b137802333-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553b137802333-4">4</div><div class="crayon-num" data-line="crayon-64953fd58553b137802333-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-64953fd58553b137802333-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"format-toolbar-options"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553b137802333-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-align-left"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553b137802333-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-align-center"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553b137802333-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-align-right"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553b137802333-5"><span class="crayon-r ">&lt;/div&gt;</span><span class="crayon-h">	</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>id=format-toolbar-optionsのdivは書いてありますが、id=format-toolbarのは書いてありません。<br />
公式サイトのhtmlソースを見て拾いましたが、実装してみて下記の書き方しかうまくいきませんでした。</p>

		<div id="crayon-64953fd58553c627864996" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div style="width:5px;float:left;"&gt;
  &lt;div id="format-toolbar" class="settings-button"&gt;&lt;i class="icon-wrench"&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;div id="format-toolbar-options"&gt;
	&lt;a href="#"&gt;&lt;i class="icon-arrow-up"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href="#"&gt;&lt;i class="icon-arrow-down"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;	
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58553c627864996-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553c627864996-2">2</div><div class="crayon-num" data-line="crayon-64953fd58553c627864996-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553c627864996-4">4</div><div class="crayon-num" data-line="crayon-64953fd58553c627864996-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553c627864996-6">6</div><div class="crayon-num" data-line="crayon-64953fd58553c627864996-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553c627864996-8">8</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-64953fd58553c627864996-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"width:5px;float:left;"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553c627864996-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"format-toolbar"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"settings-button"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-wrench"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553c627864996-3"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"format-toolbar-options"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553c627864996-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-arrow-up"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553c627864996-5"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-arrow-down"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553c627864996-6"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-trash"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553c627864996-7"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span><span class="crayon-i ">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553c627864996-8"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>id=format-toolbar-optionsのとid=format-toolbarのを同じdivに入れなければうまく表示出来できませんでしたが、<br />
公式サイトのhtmlソースにはid=format-toolbar-optionsのとid=format-toolbarをばらばら書いてでも表示出来ています。。<br />
何かが条件になっているのかよくわかりません。。</p>
<h2>jQueryのバージョンに注意を</h3>
<p>ソースをダウンロードしてから分かるですが、このプラグインはjquery1.7以上でしか動きません。<br />
公式サイトにはjqueryのバージョンや、対応ブラウザなど一切書いてませんから、ちょっと不安です。<br />
IE8は対応していることを確認できましたが。</p>
<h2>結論</h3>
<p>jQueryのプラグインの選び方をもっと慎重にしたいと思います。</p>

【jQuery】スペースが足りない時に使えるtoolbarjs

<p>ECと一口にいっても様々な機能が最近では備わっています。</p>
<p>いろんな機能がありすぎて使用していない、どんな機能かわからないといった方も実は結構いらっしゃいます。</p>
<p>そんな日々お客様とお話させていただいた中からちょっとご紹介を。</p>
<ul>
<li>定期購入</li>
<li>ポイント</li>
<li>ステップメール等のメール機能</li>
</ul>
<p>ECカートでまずご要望の多い機能は上記の3点です。（業種にもよると思いますが）</p>
<p>今回は定期購入についてご説明したいと思います。</p>
<p>&nbsp;</p>
<p style="font-family: Arial, Helvetica, sans-serif; background-color: #5ee618; border-color: #25d971;"><span style="font-size: medium;"><strong>定期購入</strong></span></p>
<p>読んで字のごとく「定期的」に「同一の商品を購入」というのが定期購入です。</p>
<p>いつでもwebで販売しているのに、なぜ定期便購入にするのかというと</p>
<p>購入されるお客様も販売するお店にもそれぞれのメリットがあります。</p>
<p><strong>お客様側のメリット</strong></p>
<ul>
<li><span class="Apple-style-span" style="line-height: 13px;">商品を通常より安く購入できる（場合によっては送料無料などもあります）</span></li>
<li>日常的に使う商品の買い忘れ防止</li>
<li>注文する手間を省ける</li>
</ul>
<p><strong>お店側のメリット</strong></p>
<ul>
<li>受注商品数の予測が可能</li>
<li>顧客リピート率の向上</li>
<li>売上の安定</li>
</ul>
<p>いいところばかりでデメリットは？と思われるかもしれませんが</p>
<p>実際のところ双方にとってこれほどありがたいと思う購入方法はありません。</p>
<p>かなり昔のことですが、以前通信販売の会社に勤めていた時は</p>
<p>商品のお届け日や届け先が変更できない、支払い方法が代引き固定など</p>
<p>システム上の融通がきかないイメージでしたが、現在ではほとんど対応可能に</p>
<p>なっています。</p>
<p>ちなみに定期システムは当社のLaunch Cartでも実装している機能です。</p>
<p>ぜひご活用ください！</p>
<p>&nbsp;</p>


ECサイトで欲しい機能

jQueryでTouch the Numbersを作ってみた

<p>ミャンマーのIT企業は他の国と比べて、アウトソーシングの仕事を受けられない理由はインターネットシステムに信頼されていない事と見られています。インターネットの欠陥のため、仕事が遅延した場合は海外の会社へ補償金を払わなければならないこと、そのためにアウトソーシング事業の大きな仕事をできずに、小さな仕事だけを行っています。</p>
<p>その件に関して、2012年９月にネイピードで行われた通信情報技術の発展についてのセミナーで通信郵政省の大臣が、インターネットシステムが海外から信頼されるようにする事と、通信郵政省がインターネットについて責任を持っていく事を発言しました。</p>
<p>計画として、ミャンマーで開催する2013年ASEAN競技大会(SEA GAME)に間に合うようにインターネットの通信速度を10GBにまで引き上げる準備をしているようです。<br />
現在、ミャンマー国内で使用しているインターネットの速度は3GBであり、10GBまで引き上げる計画であります。</p>
<p>以前は、その計画の為に日本から支援をいただいているようでしたが、結局、韓国の政府の機関に取られたみたいです。</p>
<p>携帯に関してもいろいろ変化があります。</p>
<p>３年前(2010)、来日したときは携帯番号一個を買うのに200万チャット(約20万円)かかりました。だいたい、３０人に一人だけが持っているようなとても貴重な物でした。月給２0万チャット(約2万円)の家族は携帯を買う事は夢のようでした。約20万円の携帯もただ通話だけで来て、インターネットは使えませんでした。</p>
<p>先月、一時帰国したときはどこ行ってもみんな携帯をいじっている様子を見かけました。２年前一回一時帰国しましたが、来日する前の状況とは変わりませんでした。今回、帰ったときに大きな変わったことを言うとしたら、携帯とインターネットの事でしょう。</p>
<p>去年は200万チャット(約20万円)の携帯と50万チャット(約5万円)まで下げましたが、今年から２0万チャット(2万円)まで下げました。政府は5年計画で国内の電話普及率を57%に引き上げるという計画を立てました。これを実現する為には、3万チャット(約3千円)まで下げていくと発表しました。<br />
携帯にインターネットを設置すると設置料は１万チャット(約千円)、利用料金は１分4チャット(約0.4円)、1時間240チャット(約24円)です。<br />
通話料は１分25チャット(約2.5円)です。</p>


ミャンマーのインターネット回線と携帯

<p>こういう<a href="http://techwave.jp/archives/51779365.html" target="_blank">記事</a>に釣られて、「なに？javascriptだけで決済を完了できるのか」と驚いて、「jquery-payment」というプラグインを少し見てみました。</p>
<p><a class="demo" href="/demo/jeff/jquery_payment/example/" target="_blank">デモ</a></p>
<p>デモのソースを見てわかると思いますが、このプラグインがカード番号と有効期間をチェックするバリデーションです。。。</p>
<p>騙させたかと思って、上の記事も載せてた<a href="https://kairosfundraiser.com/" target="_blank">URL</a>に検証しに行きました。</p>
<p>驚くことに、このプラグインを使って、決済をjavascriptで完結できているみたいです！<br />
その証拠は二つ。<br />
 １、</p>

		<div id="crayon-64953fd585137186942531" 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="https://js.stripe.com/v1/"&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-64953fd585137186942531-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-64953fd585137186942531-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">"https://js.stripe.com/v1/"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>stripeのjavascriptをincludeしている！<br />
２、</p>
<p></p>

		<div id="crayon-64953fd58513b610010630" 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"&gt;
	Stripe.setPublishableKey('pk_live_C2Ckr9nZbkcBra5ZWlV8wQLs');
&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-64953fd58513b610010630-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58513b610010630-2">2</div><div class="crayon-num" data-line="crayon-64953fd58513b610010630-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58513b610010630-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">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58513b610010630-2"><span class="crayon-h">	</span><span class="crayon-i">Stripe</span><span class="crayon-sy">.</span><span class="crayon-e">setPublishableKey</span><span class="crayon-sy">(</span><span class="crayon-s">'pk_live_C2Ckr9nZbkcBra5ZWlV8wQLs'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58513b610010630-3"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>stripeのキーを設定している！</p>
<p>具体的にはもっと仕様を詳しく見ないとわからないですが、<br />
javasciprtだけで決済ができるのは、なかなか興味深いですね。</p>
<p>さくらの共有サーバでcgiのpermissionが755でなくては動かないことを知らなくてイライラしてたjeffより。</p>

javascriptだけで決済完了できそうなプラグイン

<p>ホームページ作成で大切なものはシステム構成デザイン等いろいろありますが、絶対に必須といえるものは</p>
<p>会社（もしくはブランド）の&#8221;ロゴマーク”です。</p>
<p>その&#8221;ロゴマーク&#8221;に関する本を一つ紹介したいと思います。</p>
<p>&nbsp;</p>
<p><strong><a title="日本のロゴマーク" href="http://www.amazon.co.jp/日本のロゴ―企業・美術館・博物館・老舗…シンボルマークとしての由来と変遷-成美堂出版編集部/dp/4415302645" target="_blank">日本のロゴマーク</a></strong></p>
<p>この本は&#8221;ロゴマーク&#8221;という言葉が和製英語という説明から始まり、どういった形で&#8221;ロゴマーク&#8221;を</p>
<p>作成・変遷を重ねてきたのかというの解説書になります。</p>
<p>何気なく見かけている&#8221;ロゴマーク&#8221;ですが、日本の場合元々は家紋から海外の場合は紋章からの</p>
<p>由来が少なくないとのこと。</p>
<p>また時代背景や親しみやすさ、会社イメージを凝縮したデザイン等、用途にあわせてさまざまな</p>
<p>&#8220;ロゴマーク&#8221;が作成されていることにも驚きます。</p>
<p>懐かしいロゴマークが見つかったり、今でも企業の顔として健在だったり、</p>
<p>不変なものから多様に変化するデザインが詰まっています。</p>
<p>&nbsp;</p>
<p>ホームページやシステム等は時代にあわせて変化することも多いですが、</p>
<p>ずっと親しまれる商品をご提供していけるように見習っていきたいです。</p>


ロゴマークとは

<p>普段はGoogleのChart APIを使っていて、グラフ描画ライブラリーとか特に必要ないと感じでました。<br />
外部ネットに繋ぎたくない場合に、重宝になるライブラリー【flot】を簡単に紹介します。</p>
<p>まずは<a href="/demo/jeff/flot/examples/pie.html" target="_blank">デモ</a>を見てください。</p>
<p></p>

		<div id="crayon-64953fd584cb7978172024" 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;">
    $.plot($("#default"), data, 
	{
		series: {
			pie: { 
				show: true
			}
		}
	});</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-64953fd584cb7978172024-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584cb7978172024-2">2</div><div class="crayon-num" data-line="crayon-64953fd584cb7978172024-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584cb7978172024-4">4</div><div class="crayon-num" data-line="crayon-64953fd584cb7978172024-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584cb7978172024-6">6</div><div class="crayon-num" data-line="crayon-64953fd584cb7978172024-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584cb7978172024-8">8</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-64953fd584cb7978172024-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-e">plot</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#default"</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-sy">,</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584cb7978172024-2"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd584cb7978172024-3"><span class="crayon-h">		</span><span class="crayon-i">series</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-64953fd584cb7978172024-4"><span class="crayon-h">			</span><span class="crayon-i">pie</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-64953fd584cb7978172024-5"><span class="crayon-h">				</span><span class="crayon-i">show</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584cb7978172024-6"><span class="crayon-h">			</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd584cb7978172024-7"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584cb7978172024-8"><span class="crayon-h">	</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>実は、pie図以外でも、いろいろな種類のグラフでも描画できます。<br />
その辺はまた詳しく見てないから、今回は控えておきます。</p>
<p>また、グラフの描画はhtml5のcanvasを使っていますが、IE8でもうまく描画できていることを検証済みです。</p>

【jQuery】グラフ描画ライブラリーflot

<p>前回に引き続きのテーマですが、<br />
今回は方法がちょっと違います。</p>
<p>前回は、背景画像をスライドさせる形でしたが、<br />
今回は、ul,liタグ使い、写真を複数置いたビジュアルをスライドさせた形になります。</p>
<p>それでは、DEMOをご覧下さい。</p>
<p><a href="/demo/abe/24/" target="_blank" class="demo">DEMO</a></p>
<p>margin-leftを使用し、ulをずらしています。<br />
見えなくなった先頭の要素を一番後ろに入れて、、<br />
というの繰り返して無限ループになるようになってます。</p>
<p>以下、javascritになります。</p>
<p></p>

		<div id="crayon-64953fd584ad2384515221" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	setInterval("photoslide()", 50);	
});

var current = 0;
function photoslide(){
	current -= 1;
	//先頭の写真が見えなくなった時の処理
	if(current == -400){
		var copy = $(".slide ul li:first").clone();
		$(".slide ul li:first").remove();
		$(".slide ul").append(copy);
		current = 0;
		
	};
	
	$('.slide ul').css("margin-left", current+"px");	
}</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-64953fd584ad2384515221-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-2">2</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-4">4</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-6">6</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-8">8</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-10">10</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-12">12</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-14">14</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-16">16</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-18">18</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-64953fd584ad2384515221-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-2"><span class="crayon-h">	</span><span class="crayon-r">setInterval</span><span class="crayon-sy">(</span><span class="crayon-s">"photoslide()"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">50</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">	</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-3"><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-64953fd584ad2384515221-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd584ad2384515221-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">current</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-6"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">photoslide</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-7"><span class="crayon-h">	</span><span class="crayon-i">current</span><span class="crayon-h"> </span>-=<span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-8"><span class="crayon-h">	</span><span class="crayon-c">//先頭の写真が見えなくなった時の処理</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-9"><span class="crayon-h">	</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">current</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span>-<span class="crayon-cn">400</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-10"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">copy</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">".slide ul li:first"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">clone</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-11"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".slide ul li:first"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">remove</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-64953fd584ad2384515221-12"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".slide ul"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">append</span><span class="crayon-sy">(</span><span class="crayon-i">copy</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-13"><span class="crayon-h">		</span><span class="crayon-i">current</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-14"><span class="crayon-h">		</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-15"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-16"><span class="crayon-h">	</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-17"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.slide ul'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-s">"margin-left"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">current</span>+<span class="crayon-s">"px"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-18"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>HTML</p>
<p></p>

		<div id="crayon-64953fd584ad6195428807" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div class="slide"&gt;
            	&lt;ul&gt;
                	&lt;li&gt;&lt;img src="images/sample1.jpg"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/sample2.jpg"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/sample3.jpg"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/sample4.jpg"&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd584ad6195428807-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad6195428807-2">2</div><div class="crayon-num" data-line="crayon-64953fd584ad6195428807-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad6195428807-4">4</div><div class="crayon-num" data-line="crayon-64953fd584ad6195428807-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad6195428807-6">6</div><div class="crayon-num" data-line="crayon-64953fd584ad6195428807-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad6195428807-8">8</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-64953fd584ad6195428807-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"slide"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad6195428807-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	</span><span class="crayon-r ">&lt;ul&gt;</span></div><div class="crayon-line" id="crayon-64953fd584ad6195428807-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample1.jpg"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad6195428807-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample2.jpg"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd584ad6195428807-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample3.jpg"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad6195428807-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample4.jpg"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd584ad6195428807-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/ul&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad6195428807-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>しかし、これは汎用性があるとはいえません。。。。<br />
画像のサイズは指定しなければいけないですし、<br />
画像の横幅も均一にしなければいけません。。。</p>
<p>横幅もバラバラの場合を都合上作ることができませんでした。</p>
<p>うーん、悔しい。</p>

メインビジュアルを自動でゆっくりスライドさせて流す方法②

<p>最近ではfacebookやtwitterなどSNSは日常的なツールとなっています。</p>
<p>そんな中でちょっと気になったツールを紹介したいと思います。</p>
<p>&nbsp;</p>
<h2>Miiverse</h2>
<p>任天堂から発表されたWillUに付随したソーシャル機能で、</p>
<p>大きな特徴はWillUを購入した人がメインという点です。</p>
<p>※今後はスマートフォンアプリもリリース予定とのこと。</p>
<p>コミュニティにコメントする機能、共感ボタンや手書きの絵・文字の投稿、</p>
<p>実際にプレイしている中でも書き込み可能という多機能ぶり。</p>
<p>また「わらわら広場」というメインページでは、コミュニティ全体のコメントが</p>
<p>ふきだしでランダムに表示され、実際に目の前でおしゃべりしているという視覚的効果もあります。</p>
<p>&nbsp;</p>
<p>今までのソーシャルのように世界へ向けて発信と気負わず、より限定的なコミュニティに向けて</p>
<p>といった点で口コミサイトの書き込みやレビューの機能に近いですね。</p>
<p>お互いが同じ商品を購入した、または気に入った者同士の連帯感から盛り上がりが得られるのでしょう。</p>
<p>今後はより限定したコミュニティの中で手軽に楽しくできる情報交換ツールとして、</p>
<p>このような形に広がる可能性もありそうです。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2013/03/13

2013/03/13

2013/03/07

2013/03/07

2013/03/06

2013/02/28

2013/02/28

2013/02/28

2013/02/21

2013/02/21

2013/02/20

2013/02/20

2013/02/14

2013/02/14

2013/02/14

2013/02/07

2013/02/07

2013/02/07