<p>今更だが、最近良いという話を聞いたのでGumroadを使ってみた。</p>
<p>GumroadはSTORES.jpやBASEのように商品を無料で販売できるサービス。</p>
<p>ただ、イメージや電子書籍、楽曲などクリエイター向けに作られており、決済はPayPalだけというシンプルなものだ。</p>
<p>創業者はPinterestのデザイナーだった人とのことで、デザインやインターフェイスは細部まで作りこまれており</p>
<p>大変使いやすいが統一感とシンプル性を重視しているせいか汎用性は低い。</p>
<p>ただしこれはSNSでURLをシェアするという使い方に限定すれば逆に購入する側としてもわかりやすいと思った。</p>
<p>&nbsp;</p>
<h2>販売コンテンツ</h3>
<p><a href="/uploads-archive/2014/01/1.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-3921" alt="1" src="/uploads-archive/2014/01/1.jpg" width="656" height="431" srcset="/uploads-archive/2014/01/1.jpg 656w, /uploads-archive/2014/01/1-300x197.jpg 300w, /uploads-archive/2014/01/1-228x149.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>通常の商品とサブスクリプション(定期購入商材)、事前注文(予約商品)の3種類が利用できる。</p>
<p>商材はデータとしてアップロードできるものであれば何でもいける模様。</p>
<p>&nbsp;</p>
<h2>商品登録</h3>
<p><a href="/uploads-archive/2014/01/2.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-3922" alt="2" src="/uploads-archive/2014/01/2.jpg" width="656" height="430" srcset="/uploads-archive/2014/01/2.jpg 656w, /uploads-archive/2014/01/2-300x196.jpg 300w, /uploads-archive/2014/01/2-228x149.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>商品登録はファイルとタイトルだけが必須項目になっていてとてもシンプルなフロー。</p>
<p>定期購入は月次課金と年次課金が選択できる。</p>
<p>通過も円をや香港ドル等複数から選択できる。</p>
<p>選択の仕方が通常のプルダウンでないところにデザイナーの細部のこだわりが感じられる。</p>
<p>販売する画像とは他にイメージ画像や説明文を登録することができる。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/01/3.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-3925" alt="3" src="/uploads-archive/2014/01/3.jpg" width="656" height="430" srcset="/uploads-archive/2014/01/3.jpg 656w, /uploads-archive/2014/01/3-300x196.jpg 300w, /uploads-archive/2014/01/3-228x149.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>この時点で詳細ページのURLが発行されているので、ログインした状態でアクセスすると</p>
<p>以下の様な編集ツールが出現し、商品ページの見栄えの調整ができる。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/01/4.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-3927" alt="4" src="/uploads-archive/2014/01/4.jpg" width="656" height="694" srcset="/uploads-archive/2014/01/4.jpg 656w, /uploads-archive/2014/01/4-283x300.jpg 283w, /uploads-archive/2014/01/4-228x241.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>ページの背景画像や決済画面の文言、支払い完了画面などの設定が可能。</p>
<p>デフォルトでも十分公開できるようになっている。</p>
<p>&nbsp;</p>
<p>上記の商品登録と、あとはアクセス解析や売上管理、顧客にメッセージを送る機能くらいと非常にシンプルにできている。</p>
<p>前述のとおりクリエイターがSNSでシェアすることを前提とした場合は簡単で良いかもしれない。</p>
<p>&nbsp;</p>
<p>ただ、この手のサイトは</p>
<p>・生活必需品でない</p>
<p>・企業が利用しづらい = 一定のニーズから絞りづらい</p>
<p>・既成品でない = 制作者のバリューに商材が比例</p>
<p>という理由ですぐに大きな流通量を稼ぎだすのは難しい気がするが</p>
<p>ショップという概念が無くSNSがそれであるという新しい概念として注目したいと思った</p>
<p>&nbsp;</p>


Gumroadを使ってみた

<p>1月〜11月の来日外国人の数が約950万人となっており、</p>
<div>12月中旬にも1000万人を超える見通しになると観光庁の発表があったとのこと。</div>
<div><a href="http://www.nikkei.com/article/DGXNASGC11016_R11C13A2EA2000/" target="_blank">http://www.nikkei.com/article/DGXNASGC11016_R11C13A2EA2000/</a></div>
<div><a href="http://www.nikkei.com/article/DGXNASGC11016_R11C13A2EA2000/" target="_blank"> </a></div>
<div>以下は11月までの来日外国人の数</div>
<div> <a href="/uploads-archive/2013/12/076d9c0930789e3abb0c89f5cf396b58-e1387272685535.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-3851" alt="スクリーンショット 2013-12-17 13.00.41" src="/uploads-archive/2013/12/076d9c0930789e3abb0c89f5cf396b58-e1387272685535.png" width="656" height="424" /></a></div>
<div>※出典：日本政府観光局(JNTO)</div>
<div><a href="https://www.jnto.go.jp/jpn/news/data_info_listing/" target="_blank">https://www.jnto.go.jp/jpn/news/data_info_listing/</a></div>
<div><a href="https://www.jnto.go.jp/jpn/news/data_info_listing/" target="_blank"> </a></div>
<div>韓国は引き続きトップだが、中国が戻ってきたのと、</div>
<div>ビザが免除されたタイ、マレーシアの伸率は引き続き多い。</div>
<div>また、発給条件が緩和されたベトナム、フィリピン、インドネシアもやはり多い。</div>
<div></div>
<div>以下は本日の日経朝刊でのアンケート結果</div>
<table>
<tbody>
<tr>
<th></th>
<th>1位</th>
<th>2位</th>
<th>3位</th>
</tr>
<tr>
<td>全地域平均</td>
<td>カメラ、時計</td>
<td>家電</td>
<td>洋服、かばん、靴</td>
</tr>
<tr>
<td>マレーシア</td>
<td>漫画、アニメ関連</td>
<td>カメラ、時計</td>
<td>洋服、かばん、靴</td>
</tr>
<tr>
<td>タイ</td>
<td>カメラ、時計</td>
<td>洋服、かばん、靴</td>
<td>家電</td>
</tr>
<tr>
<td>シンガポール</td>
<td>カメラ、時計</td>
<td>洋服、かばん、靴</td>
<td>家電</td>
</tr>
<tr>
<td>中国</td>
<td>カメラ、時計</td>
<td>家電</td>
<td>洋服、かばん、靴</td>
</tr>
<tr>
<td>フランス</td>
<td>洋服、かばん、靴</td>
<td>漫画、アニメ関連</td>
<td>和服、民芸品</td>
</tr>
</tbody>
</table>
<div></div>
<div>マレーシアではオタク支持がすごいらしい。</div>
<div>1回の来日時の1人当たりの平均支出額は40,347円とかなりの額とのこと。</div>
<div></div>
<div>とはいっても、世界各国と比較した外国人旅行者の数としては全然下のほうだ。</div>
<table>
<tbody>
<tr>
<td>1</td>
<td>フランス</td>
<td>8301.8万人</td>
</tr>
<tr>
<td>2</td>
<td>アメリカ合衆国</td>
<td>6696.9万人</td>
</tr>
<tr>
<td>3</td>
<td>中国</td>
<td>5772.5万人</td>
</tr>
<tr>
<td>4</td>
<td>スペイン</td>
<td>5770.1万人</td>
</tr>
<tr>
<td>5</td>
<td>イタリア</td>
<td>4636.0万人</td>
</tr>
<tr>
<td>6</td>
<td>トルコ</td>
<td>3569.8万人</td>
</tr>
<tr>
<td>7</td>
<td>ドイツ(TCE)</td>
<td>3040.8万人</td>
</tr>
<tr>
<td>8</td>
<td>イギリス</td>
<td>2928.2万人</td>
</tr>
<tr>
<td>9</td>
<td>ロシア</td>
<td>2573.6万人</td>
</tr>
<tr>
<td>10</td>
<td>マレーシア</td>
<td>2503.3万人</td>
</tr>
<tr>
<td>11</td>
<td>オーストリア(TCE)</td>
<td>2415.1万人</td>
</tr>
<tr>
<td>12</td>
<td>香港</td>
<td>2377.0万人</td>
</tr>
<tr>
<td>13</td>
<td>メキシコ</td>
<td>2340.3万人</td>
</tr>
<tr>
<td>14</td>
<td>ウクライナ</td>
<td>2301.3万人</td>
</tr>
<tr>
<td>15</td>
<td>タイ</td>
<td>2235.4万人</td>
</tr>
<tr>
<td>16</td>
<td>カナダ</td>
<td>1631.1万人</td>
</tr>
<tr>
<td>17</td>
<td>ギリシャ</td>
<td>1551.8万人</td>
</tr>
<tr>
<td>18</td>
<td>ポーランド</td>
<td>1484.0万人</td>
</tr>
<tr>
<td>19</td>
<td>サウジアラビア</td>
<td>1366.4万人</td>
</tr>
<tr>
<td>20</td>
<td>マカオ</td>
<td>1357.7万人</td>
</tr>
<tr>
<td>21</td>
<td>オランダ(TCE)</td>
<td>1168.0万人</td>
</tr>
<tr>
<td>22</td>
<td>エジプト</td>
<td>1119.6万人</td>
</tr>
<tr>
<td>23</td>
<td>韓国(VF)</td>
<td>1114.0万人</td>
</tr>
<tr>
<td>24</td>
<td>スウェーデン</td>
<td>1091.4万人</td>
</tr>
<tr>
<td>25</td>
<td>クロアチア(TCE)</td>
<td>1036.9万人</td>
</tr>
<tr>
<td>26</td>
<td>ハンガリー</td>
<td>1035.3万人</td>
</tr>
<tr>
<td>27</td>
<td>モロッコ</td>
<td>937.5万人</td>
</tr>
<tr>
<td>28</td>
<td> 南アフリカ連邦</td>
<td>918.8万人</td>
</tr>
<tr>
<td>29</td>
<td>アラブ首長国連邦(THS)</td>
<td>897.7万人</td>
</tr>
<tr>
<td>30</td>
<td>チェコ</td>
<td>890.8万人</td>
</tr>
<tr>
<td></td>
<td>日本(VF)</td>
<td>836.8万人</td>
</tr>
</tbody>
</table>
<div></div>
<div>いろいろありますが、英語を勉強したり受け入れる体制を整えたりと、今後増加していくよう努力していければいいと思います</div>


2013年来日外国人が1000万人超える

<p>Facebook上のウォールにプログラムからGraph APIを使って画像を投稿する時</p>
<div>ちょっとかっこよく見せるためのテクニックをご紹介。</div>
<div></div>
<div>こちらはよくあるパターン</div>
<div><a href="/uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0.png"><img decoding="async" loading="lazy" class="size-full wp-image-3811 aligncenter" alt="スクリーンショット 2013-12-10 16.04.08" src="/uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0.png" width="513" height="404" srcset="/uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0.png 513w, /uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0-300x236.png 300w, /uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0-228x179.png 228w" sizes="(max-width: 513px) 100vw, 513px" /></a></div>
<div></div>
<div>今回のものは</div>
<div> <a href="/uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a.png"><img decoding="async" loading="lazy" class="size-full wp-image-3812 aligncenter" alt="スクリーンショット 2013-12-10 16.02.10" src="/uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a.png" width="513" height="281" srcset="/uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a.png 513w, /uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a-300x164.png 300w, /uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a-228x124.png 228w" sizes="(max-width: 513px) 100vw, 513px" /></a></div>
<div>こんな感じ。</div>
<div></div>
<div>あまり変わらないが、コンパクトにまとまっていて情報がわかりやすいのと、</div>
<div>あとは大きな理由としてAPI経由での投稿でユーザーが入力した内容以外で定型文を入れることが原則禁止されているため</div>
<div>そのような時の対処法としても便利な方法だ。</div>
<div></div>
<div>方法は、画像を投稿させるのではなく、指定の画像をOGPで指定した動的なダミーページを用意して、そのURLをシェアするイメージ。</div>
<div></div>
<div>上記の例では</div>
<div>


		<div id="crayon-64953fd595882277741596" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta property="og:title" content="ソチオリンピック日本代表を応援しよう！" /&gt;
&lt;meta property="og:type" content="article" /&gt;
&lt;meta property="og:description" content="ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！" /&gt;
&lt;meta property="og:image" content="http://img.hoge.com/1.png" /&gt;
&lt;meta property="og:site_name" content="ソチオリンピック日本代表を応援しよう！" /&gt;

&lt;meta name="keywords" content="ソチオリンピック、オリンピック、ソチ" /&gt;
&lt;meta name="description" content="ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！" /&gt;
&lt;title&gt;ソチオリンピック日本代表を応援しよう！&lt;/title&gt;

&lt;/head&gt;
&lt;body　onload="window.location.href='/';"&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-64953fd595882277741596-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-2">2</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-4">4</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-6">6</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-8">8</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-10">10</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-12">12</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-14">14</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-16">16</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-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-64953fd595882277741596-1"><span class="crayon-n">&lt;!doctype html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-2"><span class="crayon-r ">&lt;html&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-4"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span>=<span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-5"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:title"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-6"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:type"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"article"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-7"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:description"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-8"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:image"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"http://img.hoge.com/1.png"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-9"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:site_name"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-10">&nbsp;</div><div class="crayon-line" id="crayon-64953fd595882277741596-11"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span>=<span class="crayon-s ">"keywords"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック、オリンピック、ソチ"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-12"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span>=<span class="crayon-s ">"description"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-13"><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">ソチオリンピック日本代表を応援しよう！</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-14">&nbsp;</div><div class="crayon-line" id="crayon-64953fd595882277741596-15"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-16"><span class="crayon-r ">&lt;body　onload="window.location.href='/';"&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-17"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-18"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>のようなHTMLを動的に生成し、ユーザーごとの画像と定型文を記載している。</div>
<div>こちらは動的なページなので、例えばhttp://hoge.com/?id=xxx</div>
<div>などとなってしまい、直接アクセスされるとよくわからないページが表示されてしまう。</div>
<div>それを回避するために、16行目のように</div>
<div>


		<div id="crayon-64953fd595886097209395" 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;body　onload="window.location.href='/';"&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-64953fd595886097209395-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-64953fd595886097209395-1"><span class="crayon-r ">&lt;body　onload="window.location.href='/';"&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>と、ここではトッページにリダイレクトさせている。</div>
<div></div>
<div>余談だが、スマホを重視する場合投稿する画像のサイズは</div>
<div>468 x 245がベストらしい。</div>
<p>&nbsp;</p>

【Facebook】Graph APIでかっこ良く画像を投稿する方法

<p>MTでサイトを運用しており、例えば以下のように</p>
<p><label for="sample1_1"><input id="sample1_1" type="radio" name="saple1" />東京</label><br />
<label for="sample1_2"><input id="sample1_2" type="radio" name="saple1" />埼玉</label><br />
<label for="sample1_3"><input id="sample1_3" type="radio" name="saple1" />神奈川</label><br />
<label for="sample1_4"><input id="sample1_4" type="radio" name="saple1" />茨城</label></p>
<p><a href="/uploads-archive/2013/11/1.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-3659" alt="1" src="/uploads-archive/2013/11/1.png" width="526" height="398" srcset="/uploads-archive/2013/11/1.png 876w, /uploads-archive/2013/11/1-300x227.png 300w, /uploads-archive/2013/11/1-228x172.png 228w" sizes="(max-width: 526px) 100vw, 526px" /></a></p>
<p>&nbsp;</p>
<p>エリアを選択させるラジオボタンのリストがあったとして、</p>
<p>途中で複数選択にしてほしいという要望はよくありそうで、実際に起こってしまったのでその対応方法。</p>
<p>要は<br />
<label for="sample2_1"><input id="sample2_1" type="checkbox" name="saple2" />東京</label><br />
<label for="sample2_2"><input id="sample2_2" type="checkbox" name="saple2" />埼玉</label><br />
<label for="sample2_3"><input id="sample2_3" type="checkbox" name="saple2" />神奈川</label><br />
<label for="sample2_4"><input id="sample2_4" type="checkbox" name="saple2" />茨城</label></p>
<p><a href="/uploads-archive/2013/11/2.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-3660" alt="2" src="/uploads-archive/2013/11/2.png" width="526" height="482" srcset="/uploads-archive/2013/11/2.png 876w, /uploads-archive/2013/11/2-300x275.png 300w, /uploads-archive/2013/11/2-228x209.png 228w" sizes="(max-width: 526px) 100vw, 526px" /></a></p>
<p>のようにしたいというもの。</p>
<p>単純にラジオボタンのフィールドを削除して新しくチェックボックスグループを追加すれば済む話だが</p>
<p>入力済みの記事がたくさんある場合は打ち直しがとてつもなく大変なため、DBを操作して無理やりチェックボックスグループに変更する方法。</p>
<p>使うのは以下2つのテーブル</p>
<p>&nbsp;</p>
<p>■mt_fieldテーブル</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;&#8212;&#8212;-+</p>
<p>| Field             | Type         | Null | Key | Default | Extra          |</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;&#8212;&#8212;-+</p>
<p>| field_id          | int(11)      | NO   | PRI | NULL    | auto_increment |</p>
<p>| field_basename    | varchar(255) | YES  | MUL | NULL    |                |</p>
<p>| field_blog_id     | int(11)      | YES  | MUL | NULL    |                |</p>
<p>| field_default     | mediumtext   | YES  |     | NULL    |                |</p>
<p>| field_description | mediumtext   | YES  |     | NULL    |                |</p>
<p>| field_name        | varchar(255) | NO   | MUL | NULL    |                |</p>
<p>| field_obj_type    | varchar(50)  | NO   | MUL | NULL    |                |</p>
<p>| field_options     | mediumtext   | YES  |     | NULL    |                |</p>
<p>| field_required    | tinyint(4)   | YES  |     | NULL    |                |</p>
<p>| field_tag         | varchar(255) | NO   |     | NULL    |                |</p>
<p>| field_type        | varchar(50)  | NO   | MUL | NULL    |                |</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;&#8212;&#8212;-+</p>
<p>&nbsp;</p>
<p>■mt_entry_metaテーブル</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;-+</p>
<p>| Field                    | Type         | Null | Key | Default | Extra |</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;-+</p>
<p>| entry_meta_entry_id      | int(11)      | NO   | PRI | NULL    |       |</p>
<p>| entry_meta_type          | varchar(75)  | NO   | PRI | NULL    |       |</p>
<p>| entry_meta_vchar         | varchar(255) | YES  |     | NULL    |       |</p>
<p>| entry_meta_vchar_idx     | varchar(255) | YES  |     | NULL    |       |</p>
<p>| entry_meta_vdatetime     | datetime     | YES  |     | NULL    |       |</p>
<p>| entry_meta_vdatetime_idx | datetime     | YES  |     | NULL    |       |</p>
<p>| entry_meta_vinteger      | int(11)      | YES  |     | NULL    |       |</p>
<p>| entry_meta_vinteger_idx  | int(11)      | YES  |     | NULL    |       |</p>
<p>| entry_meta_vfloat        | float        | YES  |     | NULL    |       |</p>
<p>| entry_meta_vfloat_idx    | float        | YES  |     | NULL    |       |</p>
<p>| entry_meta_vblob         | mediumblob   | YES  |     | NULL    |       |</p>
<p>| entry_meta_vclob         | mediumtext   | YES  |     | NULL    |       |</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;-+</p>
<p>&nbsp;</p>
<p>まずカスタムフィールド自体のIDを用意する。</p>
<p>/mt.cgi?__mode=view&amp;_type=field&amp;blog_id=17&amp;id=906&amp;saved=1&amp;saved_added=1</p>
<p>例えばこのようなURLの場合、906がIDとなる。</p>
<p>これを使い、</p>

		<div id="crayon-64953fd5941a5252337217" 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">MySQL</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;">
SELECT * FROM mt_field where field_id=906;</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-64953fd5941a5252337217-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-64953fd5941a5252337217-1"><span class="crayon-st">SELECT</span><span class="crayon-h"> </span>*<span class="crayon-h"> </span><span class="crayon-st">FROM</span><span class="crayon-h"> </span>mt_field<span class="crayon-h"> </span><span class="crayon-st">where</span><span class="crayon-h"> </span>field_id<span class="crayon-o">=</span>906;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>などのようにSELECT文を実行して項目を確認。</p>
<p>field_typeがradioになっていることを確認し</p>

		<div id="crayon-64953fd5941aa356579294" 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">MySQL</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;">
UPDATE mt_field SET field_type='checkbox_group' where field_id=906;</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-64953fd5941aa356579294-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-64953fd5941aa356579294-1"><span class="crayon-st">UPDATE</span><span class="crayon-h"> </span>mt_field<span class="crayon-h"> </span><span class="crayon-st">SET</span><span class="crayon-h"> </span>field_type=<span class="crayon-s">'checkbox_group'</span><span class="crayon-h"> </span><span class="crayon-st">where</span><span class="crayon-h"> </span>field_id<span class="crayon-o">=</span>906;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を実行してfield_typeをcheckbox_groupに変更する。</p>
<p>次に該当カスタムフィールドのベースネームを確認しておき、今回の場合だと</p>

		<div id="crayon-64953fd5941ab000998575" 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">MySQL</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;">
select entry_meta_entry_id,entry_meta_vchar,entry_meta_vchar_idx from mt_entry_meta where entry_meta_type like "%entry_area%";</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-64953fd5941ab000998575-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-64953fd5941ab000998575-1"><span class="crayon-st">select</span><span class="crayon-h"> </span>entry_meta_entry_id,entry_meta_vchar,entry_meta_vchar_idx<span class="crayon-h"> </span><span class="crayon-st">from</span><span class="crayon-h"> </span>mt_entry_meta<span class="crayon-h"> </span><span class="crayon-st">where</span><span class="crayon-h"> </span>entry_meta_type<span class="crayon-h"> </span><span class="crayon-st">like</span><span class="crayon-h"> </span><span class="crayon-s">"%entry_area%"</span>;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>などのようにして現在該当カスタムフィールドを使っている記事を確認する。</p>
<p>ラジオボタンのリストはカンマ区切りでentry_meta_vchar_idxカラムにデータが入っているが</p>
<p>チェックボックスリストはentry_meta_vcharカラムを使用するため</p>

		<div id="crayon-64953fd5941ac987169711" 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">MySQL</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;">
update mt_entry_meta set entry_meta_vchar=entry_meta_vchar_idx where entry_meta_type like "%entry_area%";</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-64953fd5941ac987169711-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-64953fd5941ac987169711-1"><span class="crayon-st">update</span><span class="crayon-h"> </span>mt_entry_meta<span class="crayon-h"> </span><span class="crayon-st">set</span><span class="crayon-h"> </span>entry_meta_vchar<span class="crayon-o">=</span>entry_meta_vchar_idx<span class="crayon-h"> </span><span class="crayon-st">where</span><span class="crayon-h"> </span>entry_meta_type<span class="crayon-h"> </span><span class="crayon-st">like</span><span class="crayon-h"> </span><span class="crayon-s">"%entry_area%"</span>;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を実行して entry_meta_vcharにentry_meta_vchar_idxを入れてします。</p>
<p>checkbox_groupはentry_meta_vchar_idxカラムを使用しないため、値はそのままとっておいてOK。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

【MovableType】MoreCustomFieldsでラジオボタンをチェックボックスに変更する

<p>Pathみたいなナビゲーションが作れるjQueryプラグイン ferroMenuを使ってみた。</p>
<p><a class="demo" href="/demo/hoshino/49/">デモ</a></p>
<p>&nbsp;</p>
<p>以下設置方法</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd593a7d220585936" 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;link rel="stylesheet" href="css/jquery.ferro.ferroMenu.css" /&gt;
&lt;script src="js/jquery.ferro.ferroMenu-1.0.min.js" type="text/javascript"&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-64953fd593a7d220585936-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a7d220585936-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-64953fd593a7d220585936-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">"stylesheet"</span><span class="crayon-h"> </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"css/jquery.ferro.ferroMenu.css"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a7d220585936-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.ferro.ferroMenu-1.0.min.js"</span><span class="crayon-h"> </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>まずはダウンロードしたファイルを読み込む。</p>
<p>CSSは必ず読み込んだ方が良い。ただ、デフォルトで#navに対してスタイルをかけているが</p>
<p>変更が容易は容易だった。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd593a81910894925" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(document).ready(function()
{
	$("#left-bottom").ferroMenu();
});</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-64953fd593a81910894925-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a81910894925-2">2</div><div class="crayon-num" data-line="crayon-64953fd593a81910894925-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a81910894925-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd593a81910894925-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">document</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">ready</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a81910894925-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd593a81910894925-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#left-bottom"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">ferroMenu</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-64953fd593a81910894925-4"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>次にターゲットに対して ferroMenu関数を実行する。</p>
<p>1ページに複数ターゲットを置いて別々に指定したらエラーになり最後のものしか実行されなかった。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd593a82857719733" 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;ul id="left-bottom" class="nav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;1&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;2&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;3&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;4&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;5&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;6&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&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-64953fd593a82857719733-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a82857719733-2">2</div><div class="crayon-num" data-line="crayon-64953fd593a82857719733-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a82857719733-4">4</div><div class="crayon-num" data-line="crayon-64953fd593a82857719733-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a82857719733-6">6</div><div class="crayon-num" data-line="crayon-64953fd593a82857719733-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a82857719733-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-64953fd593a82857719733-1"><span class="crayon-r ">&lt;ul </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"left-bottom"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"nav"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a82857719733-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</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&gt;</span><span class="crayon-i ">1</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd593a82857719733-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</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&gt;</span><span class="crayon-i ">2</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a82857719733-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</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&gt;</span><span class="crayon-i ">3</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd593a82857719733-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</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&gt;</span><span class="crayon-i ">4</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a82857719733-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</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&gt;</span><span class="crayon-i ">5</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd593a82857719733-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</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&gt;</span><span class="crayon-i ">6</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a82857719733-8"><span class="crayon-r ">&lt;/ul&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ターゲットはulで指定した方が無難だった。</p>
<p>&nbsp;</p>
<p>また、以下はパラメータ一覧</p>
<p>&nbsp;</p>
<table>
<tr>
<th>パラメータ</th>
<th>値</th>
<th>デフォルト値</th>
<th>説明</th>
</tr>
<tr>
<td>closeTime</td>
<td>int</td>
<td>500</td>
<td>メニューが閉じる時の時間(ミリ秒)</td>
</tr>
<tr>
<td>delay</td>
<td>int</td>
<td>0</td>
<td>各アイテムのアニメーション開始時のディレイ</td>
</tr>
<tr>
<td>drag</td>
<td>bool</td>
<td>TRUE</td>
<td>メニューをドラッグできるか否か</td>
</tr>
<tr>
<td>easing</td>
<td>string</td>
<td>cubic-bezier(0.680, -0.550, 0.265, 1.550)</td>
<td>イージングの指定</td>
</tr>
<tr>
<td>margin</td>
<td>int</td>
<td>10</td>
<td>配置によるが、エッジに対するマージン</td>
</tr>
<tr>
<td>position</td>
<td>&#8216;left-top&#8217; | &#8216;center-top&#8217; | &#8216;right-top&#8217; | &#8216;right-bottom&#8217; |   &#8216;center-bottom&#8217; | &#8216;left-bottom&#8217; | &#8216;right-center&#8217; | &#8216;left-center&#8217; |   &#8216;center-center&#8217;</td>
<td>&#8216;left-bottom&#8217;</td>
<td>配置位置。dragがtrueであればデフォルトの位置</td>
</tr>
<tr>
<td>radius</td>
<td>int</td>
<td>100</td>
<td>アイテムの距離感</td>
</tr>
<tr>
<td>rotation</td>
<td>int</td>
<td>0</td>
<td>アイテムの回転角度</td>
</tr>
<tr>
<td>opened</td>
<td>bool</td>
<td>FALSE</td>
<td>デフォルトでメニューを開いてるか否か</td>
</tr>
<tr>
<td>openTime</td>
<td>int</td>
<td>500</td>
<td>アイテムが開くスピード(ミリ秒)</td>
</tr>
</table>

Pathみたいなナビゲーションが作れるjQueryプラグイン ferroMenu

<p>テキストボックスを分けずに、入力パターンを制御してくれるjQueryプラグインformatter.jsを使ってみた。</p>
<p>生年月日や電話番号など、テキストボックスを分けずに1つでも意図した値を得ることができそうと思ったのがきっかけ。</p>
<p>&nbsp;</p>
<p>まずはこちらからソースをダウンロード</p>
<p><a href="https://github.com/firstopinion/formatter.js" target="_blank">https://github.com/firstopinion/formatter.js</a></p>
<p>ファイルがいろいろ入っているが、jQueryとformatter.jsを読みこめば良い。</p>
<p>あとは入力フォームを用意して(maxlengthは設定したほうが良い)</p>

		<div id="crayon-64953fd593468984901578" 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;input type="text" class="input" id="serial" maxlength="19"&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-64953fd593468984901578-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-64953fd593468984901578-1"><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 ">class</span>=<span class="crayon-s ">"input"</span><span class="crayon-h"> </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"serial"</span><span class="crayon-h"> </span><span class="crayon-e ">maxlength</span>=<span class="crayon-s ">"19"</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>JSを実行する。</p>

		<div id="crayon-64953fd59346c407465045" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$ (document ).ready( function()
{
	var serial = document.getElementById('serial');
	if ( serial )
	{
		new Formatter( serial,
		{
			'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}'
		});
	}
});</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-64953fd59346c407465045-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59346c407465045-2">2</div><div class="crayon-num" data-line="crayon-64953fd59346c407465045-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59346c407465045-4">4</div><div class="crayon-num" data-line="crayon-64953fd59346c407465045-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59346c407465045-6">6</div><div class="crayon-num" data-line="crayon-64953fd59346c407465045-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59346c407465045-8">8</div><div class="crayon-num" data-line="crayon-64953fd59346c407465045-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59346c407465045-10">10</div><div class="crayon-num" data-line="crayon-64953fd59346c407465045-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-64953fd59346c407465045-1"><span class="crayon-sy">$</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-r">document</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">ready</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59346c407465045-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd59346c407465045-3"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">serial</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">'serial'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59346c407465045-4"><span class="crayon-h">	</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">serial</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-64953fd59346c407465045-5"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59346c407465045-6"><span class="crayon-h">		</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Formatter</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">serial</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd59346c407465045-7"><span class="crayon-h">		</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59346c407465045-8"><span class="crayon-h">			</span><span class="crayon-s">'pattern'</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'{{9999}}-{{9999}}-{{9999}}-{{9999}}'</span></div><div class="crayon-line" id="crayon-64953fd59346c407465045-9"><span class="crayon-h">		</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59346c407465045-10"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd59346c407465045-11"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>パターンは{{}}で囲う必要があり、それぞれ以下のように指定する。</p>
<p>数字(0-99) → 9</p>
<p>英字(A-Za-z) → a</p>
<p>全て(A-Za-z0-9) → *</p>
<p>&nbsp;</p>
<p>デモはこちら</p>
<p><a class="demo" href="/demo/hoshino/48/test.html">demo</a></p>
<p>&nbsp;</p>
<p>しかし、使ってみてわかったが、2つ大きな欠点がある。</p>
<p>&nbsp;</p>
<p>1. 日本語が使えない</p>
<p>姓名の間にスペースを入れるなどのフォーマットはできない。</p>
<p>それは良いとしても、記号や空白文字列も使えないので、結構困る。</p>
<p>正規表現が使えれば良いのだが、対応してないみたい。</p>
<p>&nbsp;</p>
<p>2. 桁数がフレキシブルじゃない</p>
<p>例えば日本の電話番号だと</p>
<p>03-…の場合もあれば080…の場合もある。</p>
<p>しかしこちらのプラグインでは桁数は予め決めた桁数からの過不足は認められない。</p>
<p>なので使うのであれば完全に桁数が決まっていなければならない。</p>
<p>&nbsp;</p>
<p>用途は限られるが、特にシリアルなどはわかりやすいので使ってみようと思う。</p>

入力パターンをかっこよく制御してくれるjQueryプラグイン formatter.js

<p>MTのサイトで複数条件検索を作る必要があり、MTのテーブル構造について調べた。</p>
<p>&nbsp;</p>
<p>今回は例えば金額やエリアなどカスタムフィールドを多様しているため</p>
<p>mt_entryテーブルではなくmt_entry_metaから検索する必要があり、中身を調査した。</p>
<p>以下が簡単な構造</p>
<table>
<tbody>
<tr>
<td>entry_meta_entry_id</td>
<td>エントリーID</td>
</tr>
<tr>
<td>entry_meta_type</td>
<td>指定したテンプレートタグ</td>
</tr>
<tr>
<td>entry_meta_vchar</td>
<td>チェックボックスで設定された値</td>
</tr>
<tr>
<td>entry_meta_vchar_idx</td>
<td>テキストボックスで設定された値</td>
</tr>
<tr>
<td>entry_meta_vdatetime</td>
<td>日付で設定された値</td>
</tr>
<tr>
<td>entry_meta_vdatetime_idx</td>
<td>?</td>
</tr>
<tr>
<td>entry_meta_vinteger</td>
<td>チェックボックスの値?</td>
</tr>
<tr>
<td>entry_meta_vinteger_idx</td>
<td>チェックボックスの値?</td>
</tr>
<tr>
<td>entry_meta_vfloat</td>
<td>?</td>
</tr>
<tr>
<td>entry_meta_vfloat_idx</td>
<td>?</td>
</tr>
<tr>
<td>entry_meta_vblob</td>
<td>?</td>
</tr>
<tr>
<td>entry_meta_vclob</td>
<td>テキストエリアで設定された値</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>検索をかけたい項目(値段やエリアなど)に対してentry_meta_typeで絞り込み、</p>
<p>それに対する値をその後の適切なカラムから取得する。</p>
<p>注意点としては同一のエントリーIDで複数レコードあるため、</p>
<p>条件をレコードごとにマッチさせなければいけない。</p>
<p>AND検索であれば4つ条件を出したら4レコードの条件が合致しているかということをプログラムで判断する必要がある。</p>
<p>&nbsp;</p>
<p>あと、検索は上記で問題ないのだが、最も大変だったのが検索したエントリーのパスを取得すること。</p>
<p>パーマリンクの精製方法など色々と調査したが、mt_fileinfoというテーブルを発見。</p>
<p>結局これで行けそうだ。</p>


MTのテーブル構成について

<p>9月27日に経済産業省がEC市場調査結果を発表したのでまとめ。</p>
<p>2012年EC市場規模<br />
<a href="http://www.meti.go.jp/press/2013/09/20130927007/20130927007.html" target="_blank">http://www.meti.go.jp/press/2013/09/20130927007/20130927007.html</a></p>
<h2>国内EC</h3>
<p>・2012年のBtoC市場規模は9.5兆円(前年比 112.5%)<br />
・EC化率は3.1%(前年比 +0.35)<br />
・物販では「1位：総合小売業1兆8910億円」(前年比 106.1%)「2位：自動車・パーツ、家具・家庭用品・電気製品小売業の1兆4260億円」(前年比 114.4%)「3位：食品小売業」の6050億円(前年比 113.7%)</p>
<h2>越境EC</h3>
<p>・日本人が米国及び中国からECで購入した額は155億円(前年比 106.9%)<br />
・米国人が日本及び中国からECで購入した額は757億円(前年比 70.4%)<br />
・中国人が日本及び米国からECで購入した額は2,868億円(前年比 123%)</p>
<p>・2020年は、日本人が米国及び中国からECで購入した額は427億円<br />
・2020年は、米国人が日本及び中国からECで購入した額は1,732億円<br />
・2020年は、中国人が日本及び米国からECで購入した額は21,022億円</p>
<p>・日本の越境EC利用率は17.6%<br />
・中国の越境EC利用率は57.3%<br />
・米国の越境EC利用率は44.7%</p>
<p>・米国が日本から越境ECで購入しているものは<br />
「書籍、雑誌(電 子書籍のダウンロードは含まない)(29.7%)」「衣類、アクセサリー(23.6%)」「音楽、 映像のソフト(CD、DVD など)(コンテンツのダウンロードは含まない) (21.4%)<br />
・中国が日本から越境ECで購入しているものは<br />
「衣類、アクセサリー(29.6%)」「書籍、雑誌(電子書籍のダウンロードは含まない)(29.4%)」「医薬、化粧品(24.9%)」</p>
<p>また、矢野経済研究所から2013年のスマホECの市場規模予想が10月22日発表された。<br />
<a href="http://www.yano.co.jp/press/press.php/001167" target="_blank">http://www.yano.co.jp/press/press.php/001167</a></p>
<p>2012年に8,450億円だった市場規模が、2013年には159.4%の1兆3,469億円になると予想されている。<br />
スマホEC利用者比率が最も高いのは<br />
「1位：女性20代」(74.0%)「2位：女性10代」(55.0％)「男性30代」「女性30代」(50.0％)<br />
とのこと。</p>


EC市場規模

<p>当社ではヤンゴン法人を作り、ヤンゴンから日本への人材の招聘を推進している。</p>
<p>しかし、逆に日本からヤンゴンへ日本人管理者に出向いてもらうという必要性も出てきているため</p>
<p>日本人がヤンゴンに住むとしたらどのような生活になるか、一家で移住するパターンを想定して必要と思われる場所を調査してきた。</p>
<p>&nbsp;</p>
<h2>スーパー</h3>
<p><a href="/uploads-archive/2013/10/1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3360" alt="1" src="/uploads-archive/2013/10/1.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/1.jpg 656w, /uploads-archive/2013/10/1-300x224.jpg 300w, /uploads-archive/2013/10/1-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>こちらはダウンタウンのRuby Mart。日本でも定番の野菜からよくわからない野菜まで豊富に揃う。値段はバナナてんこ盛り150円、玉ねぎ3ヶ月分100円くらい。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/2.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3361" alt="2" src="/uploads-archive/2013/10/2.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/2.jpg 656w, /uploads-archive/2013/10/2-300x224.jpg 300w, /uploads-archive/2013/10/2-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>牛乳は10種類くらいあり、チーズやヨーグルトもある。左上のパックは、炒めるだけで本格ミャンマーカレーが作れるパッケージ商品。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/3.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3362" alt="3" src="/uploads-archive/2013/10/3.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/3.jpg 656w, /uploads-archive/2013/10/3-300x224.jpg 300w, /uploads-archive/2013/10/3-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>プリンぽいものとウインナーっぽいもの。とりあえず種類がいっぱい。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/4.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3363" alt="4" src="/uploads-archive/2013/10/4.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/4.jpg 656w, /uploads-archive/2013/10/4-300x224.jpg 300w, /uploads-archive/2013/10/4-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>コカ・コーラ系の飲み物は手に入りやすくなったらしい。水は1リットル25円くらい</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/5.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3364" alt="5" src="/uploads-archive/2013/10/5.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/5.jpg 656w, /uploads-archive/2013/10/5-300x224.jpg 300w, /uploads-archive/2013/10/5-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>ここからはCity Mart。City Martは8月に双日と資本・業務提携したため、6月にはなかった味噌や納豆まで売っていた。 日本の調味料はかなりカバーしているように見える。 また、酒の種類が豊富でウィスキーはもちろんワインや純米大吟醸までなんでも揃う。</p>
<h2>デパート</h3>
<p><a href="/uploads-archive/2013/10/6.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3365" alt="6" src="/uploads-archive/2013/10/6.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/6.jpg 656w, /uploads-archive/2013/10/6-300x224.jpg 300w, /uploads-archive/2013/10/6-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>ヤンゴンで最も新しいデパートJunction Square。かなり大きいデパート</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/7.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3366" alt="7" src="/uploads-archive/2013/10/7.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/7.jpg 656w, /uploads-archive/2013/10/7-300x224.jpg 300w, /uploads-archive/2013/10/7-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>様々な専門店も併設されている</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/8.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3367" alt="8" src="/uploads-archive/2013/10/8.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/8.jpg 656w, /uploads-archive/2013/10/8-300x224.jpg 300w, /uploads-archive/2013/10/8-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>大きい銀行もありすごく親切に対応してくれた。</p>
<p>ミャンマーには上記の他にCB BANKとWestern Unionという大きな銀行があり、Western Unionはセブン銀行からの送金が可能だ</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/9.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3368" alt="9" src="/uploads-archive/2013/10/9.jpg" width="656" height="873" srcset="/uploads-archive/2013/10/9.jpg 656w, /uploads-archive/2013/10/9-225x300.jpg 225w, /uploads-archive/2013/10/9-228x303.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>中は吹き抜けになっておりとてもおしゃれな雰囲気</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/10.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3369" alt="10" src="/uploads-archive/2013/10/10.jpg" width="656" height="873" srcset="/uploads-archive/2013/10/10.jpg 656w, /uploads-archive/2013/10/10-225x300.jpg 225w, /uploads-archive/2013/10/10-228x303.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>ブランド品や化粧品点もたくさん。日本のブランドもあるが、韓国系が多い気がする</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/11.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3370" alt="11" src="/uploads-archive/2013/10/11.jpg" width="656" height="873" srcset="/uploads-archive/2013/10/11.jpg 656w, /uploads-archive/2013/10/11-225x300.jpg 225w, /uploads-archive/2013/10/11-228x303.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>地上3階建。おしゃれな内装</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/12.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3371" alt="12" src="/uploads-archive/2013/10/12.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/12.jpg 656w, /uploads-archive/2013/10/12-300x224.jpg 300w, /uploads-archive/2013/10/12-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>子供用品やおもちゃも充実。キティちゃん、ワンピース、ナルトはこちらでも人気なよう</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/13.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3372" alt="13" src="/uploads-archive/2013/10/13.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/13.jpg 656w, /uploads-archive/2013/10/13-300x224.jpg 300w, /uploads-archive/2013/10/13-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>3階はレストランフロアになっており、いろんな国の料理が食べられる</p>
<p>&nbsp;</p>
<h2>住居</h3>
<p><a href="/uploads-archive/2013/10/14.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3373" alt="14" src="/uploads-archive/2013/10/14.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/14.jpg 656w, /uploads-archive/2013/10/14-300x224.jpg 300w, /uploads-archive/2013/10/14-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>部屋は新築だと床や壁は自分でやるケースが多いらしい。</p>
<p>敷金、礼金が無いのでその分とおもえば良いかもしれない。</p>
<p>もちろん居抜きもある。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/15.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3374" alt="15" src="/uploads-archive/2013/10/15.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/15.jpg 656w, /uploads-archive/2013/10/15-300x224.jpg 300w, /uploads-archive/2013/10/15-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>風呂場はミャンマー式のものが多い。バスタブがある物件は少ないように思える。</p>
<p>日本人が住むとしたら、風呂がネックになりそう</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/10/16.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3375" alt="16" src="/uploads-archive/2013/10/16.jpg" width="656" height="491" srcset="/uploads-archive/2013/10/16.jpg 656w, /uploads-archive/2013/10/16-300x224.jpg 300w, /uploads-archive/2013/10/16-228x170.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>トイレはかなりきれい。ただ、トイレットペーパーは流せない</p>
<p>&nbsp;</p>
<h2>まとめ</h3>
<p>衣食についてはよっぽど贅沢でなければさほどかわらない生活ができそうだ。</p>
<p>住については固有のものが多く、日本や欧米式な物件はまだ少ないように思える。</p>
<p>とはいってもそこまでたくさんは見ていないので、探せばあるのではと思うのと</p>
<p>リフォームはけっこう安いのでやってもらってしまったほうが早いかもしれない</p>


ヤンゴンでの暮らし

<p>商品詳細で使えそうな3DのjQueryプラグインを試してみた。</p>
<p><a class="demo" href="/demo/hoshino/47/detail.html">デモ</a></p>
<p>&nbsp;</p>
<p>設置方法は以下</p>
<p>js</p>

		<div id="crayon-64953fd591a67670239410" 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;">
$( window ).load(function()
{
	$('#slider').impulseslider({
		height: 300,
		width: 480,
		depth: 329,
		perspective: 2800,
		pauseTime: 3000,
		transitionDuration: 1000,
		transitionEffect: "ease-in-out",
		autostart: true,
		rightSelector: ".right",
		leftSelector: ".left",
		pauseSelector: ".pause",
		directionRight: true,
		containerSelector: "#slider-container",
		spinnerSelector: "#slider",
		images: ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"],
		imageDivClasses: ["face"]
	});
});</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-64953fd591a67670239410-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-2">2</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-4">4</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-6">6</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-8">8</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-10">10</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-12">12</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-14">14</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-16">16</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-18">18</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-20">20</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-21">21</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-64953fd591a67670239410-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">window</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">load</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#slider'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">impulseslider</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-4"><span class="crayon-h">		</span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">300</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-5"><span class="crayon-h">		</span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">480</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-6"><span class="crayon-h">		</span><span class="crayon-i">depth</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">329</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-7"><span class="crayon-h">		</span><span class="crayon-i">perspective</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2800</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-8"><span class="crayon-h">		</span><span class="crayon-i">pauseTime</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">3000</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-9"><span class="crayon-h">		</span><span class="crayon-i">transitionDuration</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">1000</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-10"><span class="crayon-h">		</span><span class="crayon-i">transitionEffect</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"ease-in-out"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-11"><span class="crayon-h">		</span><span class="crayon-i">autostart</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-12"><span class="crayon-h">		</span><span class="crayon-i">rightSelector</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">".right"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-13"><span class="crayon-h">		</span><span class="crayon-i">leftSelector</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">".left"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-14"><span class="crayon-h">		</span><span class="crayon-i">pauseSelector</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">".pause"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-15"><span class="crayon-h">		</span><span class="crayon-i">directionRight</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-16"><span class="crayon-h">		</span><span class="crayon-i">containerSelector</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"#slider-container"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-17"><span class="crayon-h">		</span><span class="crayon-i">spinnerSelector</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"#slider"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-18"><span class="crayon-h">		</span><span class="crayon-i">images</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">"img/1.jpg"</span><span class="crayon-sy">,</span><span class="crayon-s">"img/2.jpg"</span><span class="crayon-sy">,</span><span class="crayon-s">"img/3.jpg"</span><span class="crayon-sy">,</span><span class="crayon-s">"img/4.jpg"</span><span class="crayon-sy">,</span><span class="crayon-s">"img/5.jpg"</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-19"><span class="crayon-h">		</span><span class="crayon-i">imageDivClasses</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">"face"</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-20"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-21"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>HTML</p>

		<div id="crayon-64953fd591a6c175601526" 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="slider-container"&gt;
    &lt;div id="slider"&gt;
       &lt;!-- to be populated by the plugin--&gt;
    &lt;/div&gt;

&lt;/div&gt;
 &lt;div class="nav"&gt;
    &lt;span class="left arrow"&gt;&amp;#60;&lt;/span&gt;
    &lt;span class="pause arrow"&gt;||&lt;/span&gt;
    &lt;span class="right arrow"&gt;&amp;#62;&lt;/span&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-64953fd591a6c175601526-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a6c175601526-2">2</div><div class="crayon-num" data-line="crayon-64953fd591a6c175601526-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a6c175601526-4">4</div><div class="crayon-num" data-line="crayon-64953fd591a6c175601526-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a6c175601526-6">6</div><div class="crayon-num" data-line="crayon-64953fd591a6c175601526-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a6c175601526-8">8</div><div class="crayon-num" data-line="crayon-64953fd591a6c175601526-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a6c175601526-10">10</div><div class="crayon-num" data-line="crayon-64953fd591a6c175601526-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-64953fd591a6c175601526-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"slider-container"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a6c175601526-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"slider"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd591a6c175601526-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">&lt;!-- to be populated by the plugin--&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a6c175601526-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd591a6c175601526-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a6c175601526-6"><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd591a6c175601526-7"><span class="crayon-i "> </span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"nav"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a6c175601526-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"left arrow"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">&amp;#60;</span><span class="crayon-r ">&lt;/span&gt;</span></div><div class="crayon-line" id="crayon-64953fd591a6c175601526-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"pause arrow"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">||</span><span class="crayon-r ">&lt;/span&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a6c175601526-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"right arrow"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">&amp;#62;</span><span class="crayon-r ">&lt;/span&gt;</span></div><div class="crayon-line" id="crayon-64953fd591a6c175601526-11"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>cssは</p>
<p>font-awesome.min.css</p>
<p>を固定で読み込み、ナビゲーションなどは自分で調整すればOK。</p>
<p>ナビゲーションはjsの引数</p>
<p>・rightSelector → 右送りのオブジェクト</p>
<p>・leftSelector → 左送りのオブジェクト</p>
<p>・pauseSelector → 停止のオブジェクト</p>
<p>と指定する。</p>
<p>あとは</p>
<p>・containerSelector → コンテナ(画像の上のオブジェクト)</p>
<p>・spinnerSelector → 実際に画像が入るオブジェクト</p>
<p>・images → 画像のパスを指定</p>
<p>spinnerSelectorで指定した要素はpositionがabsoluteになるのでレイアウトに注意が必要。</p>
<p>&nbsp;</p>
<p>わりと派手だが、画像を複数効果的に見せたいときなどはいいかもしれない。</p>

商品詳細で使えそうな3D jQueryプラグイン

<p>Shopifyという無料でECサイトを作成できるサービスが8月に<br />
Shopify Ecommerce Design Awards<br />
と題してECサイトのデザインアワードが開催された。<br />
Shopifyはアメリカのサービスで2004からやっている、Store.jpやBaseの先駆け的な存在だ。<br />
Ruby on railsで開発されており、当時はそっちでのみ話題になっていた。</p>
<p>こちらがデザインアワードの結果ページ。<br />
<a href="http://www.shopify.com/design-awards" target="_blank">http://www.shopify.com/design-awards</a></p>
<p>こちらが受賞サイト</p>
<h2>1位 Whipping + Post</h3>
<p><a href="/uploads-archive/2013/10/1.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3201" alt="1" src="/uploads-archive/2013/10/1.png" width="656" height="340" srcset="/uploads-archive/2013/10/1.png 656w, /uploads-archive/2013/10/1-300x155.png 300w, /uploads-archive/2013/10/1-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://www.whippingpost.com/" target="_blank">http://www.whippingpost.com/</a></p>
<p>&nbsp;</p>
<h2>2位 GREATS</h3>
<p><a href="/uploads-archive/2013/10/2.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3202" alt="2" src="/uploads-archive/2013/10/2.png" width="656" height="340" srcset="/uploads-archive/2013/10/2.png 656w, /uploads-archive/2013/10/2-300x155.png 300w, /uploads-archive/2013/10/2-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://greatsbrand.com/" target="_blank">http://greatsbrand.com/</a></p>
<p>&nbsp;</p>
<h2>3位 Goodwin + Goodwin</h3>
<p><a href="/uploads-archive/2013/10/3.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3203" alt="3" src="/uploads-archive/2013/10/3.png" width="656" height="340" srcset="/uploads-archive/2013/10/3.png 656w, /uploads-archive/2013/10/3-300x155.png 300w, /uploads-archive/2013/10/3-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://www.goodwinandgoodwin.com/" target="_blank">http://www.goodwinandgoodwin.com/</a></p>
<p>&nbsp;</p>
<p>以下は佳作。10点あるが、個人的に良かったと思ったものを3点紹介。</p>
<p>&nbsp;</p>
<h2>Pure Fix Cycles</h3>
<p><a href="/uploads-archive/2013/10/4.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3204" alt="4" src="/uploads-archive/2013/10/4.png" width="656" height="340" srcset="/uploads-archive/2013/10/4.png 656w, /uploads-archive/2013/10/4-300x155.png 300w, /uploads-archive/2013/10/4-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://purefixcycles.com/" target="_blank">http://purefixcycles.com/</a></p>
<p>&nbsp;</p>
<h2>Jennifer Torosian</h3>
<p><a href="/uploads-archive/2013/10/5.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3205" alt="5" src="/uploads-archive/2013/10/5.png" width="656" height="340" srcset="/uploads-archive/2013/10/5.png 656w, /uploads-archive/2013/10/5-300x155.png 300w, /uploads-archive/2013/10/5-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://www.jennifertorosian.com/" target="_blank">http://www.jennifertorosian.com/</a></p>
<h2>Society of the Sun</h3>
<p><a href="/uploads-archive/2013/10/6.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3206" alt="6" src="/uploads-archive/2013/10/6.png" width="656" height="340" srcset="/uploads-archive/2013/10/6.png 656w, /uploads-archive/2013/10/6-300x155.png 300w, /uploads-archive/2013/10/6-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://shop.societyclothing.com/" target="_blank">http://shop.societyclothing.com/</a></p>
<p>&nbsp;</p>
<p>全体の印象としては、ほとんどがレスポンシブWebデザインであり完成度が高いということ。</p>
<p>あとはECサイトといえば商品が大量に陳列してあるイメージが強いが、</p>
<p>全てがコンセプトを全面に出しており世界観で勝負しているということ。</p>
<p>大量仕入れ大量販売では勝負できないサイトがコンセプトを追求し</p>
<p>ブランドを売っていくという方法は有効だ。</p>
<p>そこでweb上で一番大事になってくるのはデザインだ。</p>
<p>そういういみではデザインがECで成功するための最も重要なファクターの1つと再認識した。</p>


Shopify Ecommerce Design Awards

<p>Androidブラウザでアンカーリンクがうまく動作しないので調べてみたところ</p>
<p>同じURLには1度しか飛ばないという仕様があることが判明。</p>
<p>要は#link1に1度リンクしたら2度目以降はリンクしないそうだ。</p>
<p><a href="http://d.hatena.ne.jp/koba04/20120803/1343919758" target="_blank">http://d.hatena.ne.jp/koba04/20120803/1343919758</a></p>
<p>&nbsp;</p>
<p>それを解決するための簡単なスクリプトを作成した。</p>
<p><a class="demo" href="/demo/hoshino/45/1.html">デモ</a></p>
<p>&nbsp;</p>
<p>要は指定したリンク元が指している飛び先のx座標を調べて強制的にスクロールさせるというもの。</p>

		<div id="crayon-64953fd5905e6789367175" 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;">
android_ss( $( 'a' ) );
android_ss( $( '.smooth' ) );
android_ss( $( 'a.scroll' ) );</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-64953fd5905e6789367175-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905e6789367175-2">2</div><div class="crayon-num" data-line="crayon-64953fd5905e6789367175-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-64953fd5905e6789367175-1"><span class="crayon-e">android_ss</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'a'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5905e6789367175-2"><span class="crayon-e">android_ss</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'.smooth'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5905e6789367175-3"><span class="crayon-e">android_ss</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'a.scroll'</span><span class="crayon-h"> </span><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>例えばこのような形でスクロールさせるターゲットを引数として渡してもらえればOK。</p>
<p>プラグイン化するまでもないので、以下をコピペで貼り付けてもらえれば動作します。</p>

		<div id="crayon-64953fd5905eb957430662" 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 android_ss( a )
{
	for ( var i = 0; i &lt; a.size(); i++ )
	{	
		a.eq( i ).click(function()
		{
			var h = $( this ).attr( 'href' );
			var p = $( h ).offset().top;
			$( 'html, body' ).animate( {scrollTop: p}, 500, 'swing' );
			return false;
		});

		var h = $( this ).removeAttr( 'href' );
	}
}</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-64953fd5905eb957430662-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-2">2</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-4">4</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-6">6</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-8">8</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-10">10</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-12">12</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-14">14</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-15">15</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-64953fd5905eb957430662-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">android_ss</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5905eb957430662-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd5905eb957430662-3"><span class="crayon-h">	</span><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-i">a</span><span class="crayon-sy">.</span><span class="crayon-e">size</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">i</span>++<span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5905eb957430662-4"><span class="crayon-h">	</span><span class="crayon-sy">{</span><span class="crayon-h">	</span></div><div class="crayon-line" id="crayon-64953fd5905eb957430662-5"><span class="crayon-h">		</span><span class="crayon-i">a</span><span class="crayon-sy">.</span><span class="crayon-e">eq</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">click</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5905eb957430662-6"><span class="crayon-h">		</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd5905eb957430662-7"><span class="crayon-h">			</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">h</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">attr</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'href'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5905eb957430662-8"><span class="crayon-h">			</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">p</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">h</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">offset</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">top</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5905eb957430662-9"><span class="crayon-h">			</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'html, body'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-i">scrollTop</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">p</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">500</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'swing'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5905eb957430662-10"><span class="crayon-h">			</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5905eb957430662-11"><span class="crayon-h">		</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5905eb957430662-12">&nbsp;</div><div class="crayon-line" id="crayon-64953fd5905eb957430662-13"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">h</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">removeAttr</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'href'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5905eb957430662-14"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd5905eb957430662-15"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>

Android標準ブラウザでアンカーリンクが効かない場合の解決策

オブジェクトをきれいに整列させてくれるjQueryプラグイン

<p>スマホのクレジットカードリーダーがいっときブームになり少し経った今<br />
少しずつ実用化がすすんでいる模様。</p>
<p>■Square<br />
<a href="https://squareup.com/jp" target="_blank">https://squareup.com/jp</a></p>
<p>■Coiney<br />
<a href="http://coiney.com/" target="_blank">http://coiney.com/</a></p>
<p>■楽天スマートペイ<br />
<a href="http://smartpay.rakuten.co.jp/" target="_blank">http://smartpay.rakuten.co.jp/</a></p>
<p>■PAYGATE<br />
<a href="http://paygate.royalgate.co.jp/" target="_blank">http://paygate.royalgate.co.jp/</a></p>
<p>正直スマホにリーダーをつけても、<br />
実際に決済する時は打ち込むし、ブラウザでカード情報を管理できるようにもなっているので<br />
誰も使わないだろうと思っていた。<br />
利用されるとすればタグレットでのPOSだろうと思っていたが<br />
これが徐々に増えている感じがする。</p>
<p>■テンポス<br />
<a href="http://www.tenpos.jp/ipadpos/" target="_blank">http://www.tenpos.jp/ipadpos/</a></p>
<p>■pos cube<br />
<a href="http://www.pos-cube.com/" target="_blank">http://www.pos-cube.com/</a></p>
<p>■スマレジ<br />
<a href="http://smaregi.jp/" target="_blank">http://smaregi.jp/</a></p>
<p>■Ubiregi<br />
<a href="https://ubiregi.com/ja" target="_blank">https://ubiregi.com/ja</a></p>
<p>■smapos<br />
<a href="http://smapos.com/site/" target="_blank">http://smapos.com/site/</a></p>
<p>しかし、出たてはどこも大きいパイを狙うもので<br />
飲食店向けが最も多い。<br />
飲食店は基本ECをやらないイメージなので、<br />
ECと連動したPOSはほとんどない。<br />
パッケージとしては、見つかったのは以下の3サービスのみ。</p>
<p>■TALOS<br />
<a href="http://www.cmedia.co.jp/service/web-system/netrendou/" target="_blank">http://www.cmedia.co.jp/service/web-system/netrendou/</a></p>
<p>■EC-Orange<br />
<a href="http://ec-cube.ec-orange.jp/pos/" target="_blank">http://ec-cube.ec-orange.jp/pos/</a></p>
<p>■カゴラボ<br />
<a href="http://www.cagolab.jp/option/posregi.html" target="_blank">http://www.cagolab.jp/option/posregi.html</a></p>
<p>これはECのシステム会社にとってはチャンスだと思う。<br />
今後は飲食店もサービス過多から新たな窓口を求めてECにどんどん流れこんでくると思う。<br />
事実飲食業界のトップ20のECの参入状況は以下。</p>
<table>
<tbody>
<tr>
<th>会社名</th>
<th>売上(億円)</th>
<th>ECサイト</th>
</tr>
<tr>
<td>ゼンショーホールディングス</td>
<td>4029</td>
<td><a href="http://www.oecmondake.com/" target="_blank">http://www.oecmondake.com/</a></td>
</tr>
<tr>
<td>日本マクドナルドホールディングス</td>
<td>3023</td>
<td>&#8211;</td>
</tr>
<tr>
<td>吉野家ホールディングス</td>
<td>1658</td>
<td><a href="http://e-shop.yoshinoya.com/shop/" target="_blank">http://e-shop.yoshinoya.com/shop/</a></td>
</tr>
<tr>
<td>ワタミ</td>
<td>1401</td>
<td><a href="http://www.watami-takushoku.co.jp/" target="_blank">http://www.watami-takushoku.co.jp/</a></td>
</tr>
<tr>
<td>プレナス</td>
<td>1270</td>
<td>&#8211;</td>
</tr>
<tr>
<td>ロイヤルホールディングス</td>
<td>1092</td>
<td><a href="http://www.shoproyal.jp/" target="_blank">http://www.shoproyal.jp/</a></td>
</tr>
<tr>
<td>ドトール・日レスホールディングス</td>
<td>1077</td>
<td>卸</td>
</tr>
<tr>
<td>スターバックス　コーヒー　ジャパン</td>
<td>1077</td>
<td>卸</td>
</tr>
<tr>
<td>コロワイド</td>
<td>1018</td>
<td>&#8211;</td>
</tr>
<tr>
<td>サイゼリヤ</td>
<td>998</td>
<td><a href="https://www.adda-tours.co.jp/" target="_blank">https://www.adda-tours.co.jp/</a></td>
</tr>
<tr>
<td>カッパ・クリエイト</td>
<td>926</td>
<td><a href="http://www.rakuten.co.jp/kappazusi/" target="_blank">http://www.rakuten.co.jp/kappazusi/</a></td>
</tr>
<tr>
<td>日本ケンタッキー・フライド・チキン</td>
<td>881</td>
<td>近日開始予定</td>
</tr>
<tr>
<td>不二家</td>
<td>876</td>
<td><a href="http://www.family-town.jp/" target="_blank">http://www.family-town.jp/</a></td>
</tr>
<tr>
<td>カネ美食品</td>
<td>815</td>
<td>&#8211;</td>
</tr>
<tr>
<td>大庄</td>
<td>792</td>
<td><a href="http://www.rakuten.co.jp/asiya/" target="_blank">http://www.rakuten.co.jp/asiya/</a><br />
他複数</td>
</tr>
<tr>
<td>松屋フーズ</td>
<td>756</td>
<td><a href="https://www.matsuyafoods.co.jp/onlineshop/" target="_blank">https://www.matsuyafoods.co.jp/onlineshop/</a></td>
</tr>
<tr>
<td>くらコーポレーション</td>
<td>744</td>
<td><a href="http://610kura.com/" target="_blank">http://610kura.com/</a></td>
</tr>
<tr>
<td>王将フードサービス</td>
<td>710</td>
<td>&#8211;</td>
</tr>
<tr>
<td>モスフードサービス</td>
<td>626</td>
<td><a href="http://www.rakuten.co.jp/mosburger-onlineshop/" target="_blank">http://www.rakuten.co.jp/mosburger-onlineshop/</a></td>
</tr>
<tr>
<td>トリドール</td>
<td>610</td>
<td><a href="http://www.marugame-shop.com/" target="_blank">http://www.marugame-shop.com/</a></td>
</tr>
</tbody>
</table>
<p>20件中15件が運用中、1件が公開予定と飲食点といえ多くがECに参入している。<br />
今後はシステムという意味においては<br />
ECとレジの境目がなくなってくる。<br />
大小問わずECに参入してくることはほぼ間違いないので<br />
システム的な立ち位置と機能を考えなければならない。</p>


スマホクレジットカードリーダーで増えるPOS連動型ECシステム

<p>簡単に動画を背景として利用できるjQueryプラグイン「jquery.mb.YTPlayer」を使ってみた。</p>
<p><a href="http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer" target="_blank">http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer</a></p>
<p>&nbsp;</p>
<h2>設置方法</h3>
<p>■js</p>

		<div id="crayon-64953fd58f033780013895" 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;">
jQuery(function(){
	jQuery( '.player' ).mb_YTPlayer();
});</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-64953fd58f033780013895-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58f033780013895-2">2</div><div class="crayon-num" data-line="crayon-64953fd58f033780013895-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-64953fd58f033780013895-1"><span class="crayon-e">jQuery</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-64953fd58f033780013895-2"><span class="crayon-h">	</span><span class="crayon-e">jQuery</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'.player'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">mb_YTPlayer</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58f033780013895-3"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>■html</p>

		<div id="crayon-64953fd58f038630194872" 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;a id="P2" class="player" data-property="{videoURL:'54dhAKNxu6c',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1, showYTLogo:false, showControls:false}"&gt;&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-64953fd58f038630194872-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-64953fd58f038630194872-1"><span class="crayon-r ">&lt;a </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"P2"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"player"</span><span class="crayon-h"> </span><span class="crayon-e ">data-property</span>=<span class="crayon-s ">"{videoURL:'54dhAKNxu6c',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1, showYTLogo:false, showControls:false}"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2> パラメータ</h3>
<table>
<tbody>
<tr>
<th>パラメータ</th>
<th>データ型</th>
<th>デフォルト</th>
<th>用途</th>
<th>使用方法</th>
</tr>
<tr>
<td>videoURL</td>
<td>string</td>
<td>&#8211;</td>
<td>対象動画</td>
<td>youtubeの動画IDを指定<a href="#h1">※</a></td>
</tr>
<tr>
<td>opacity</td>
<td>int</td>
<td>1</td>
<td>透明度</td>
<td>0〜1の数値を指定</td>
</tr>
<tr>
<td>mute</td>
<td>bool</td>
<td>true</td>
<td>音</td>
<td>音の有無を指定</td>
</tr>
<tr>
<td>showControls</td>
<td>bool</td>
<td>true</td>
<td>コントローラー</td>
<td>コントローラーの表示の有無を指定</td>
</tr>
<tr>
<td>ratio</td>
<td>string</td>
<td>4/3</td>
<td>アスペクト比</td>
<td>4/3若しくは16/9を指定</td>
</tr>
<tr>
<td>quality</td>
<td>string</td>
<td>default</td>
<td>画質</td>
<td>default、small、medium、large、hd720、hd1080、highresを指定</td>
</tr>
<tr>
<td>containment</td>
<td>string</td>
<td>&#8211;</td>
<td>出力場所</td>
<td>CSSセレクタで指定</td>
</tr>
<tr>
<td>optimizeDisplay</td>
<td>bool</td>
<td>true</td>
<td>画面フィット</td>
<td>画面サイズにフィットさせるか否か</td>
</tr>
<tr>
<td>loop</td>
<td>bool</td>
<td>true</td>
<td>ループ</td>
<td>ループの有無を指定</td>
</tr>
<tr>
<td>vol</td>
<td>int</td>
<td>&#8211;</td>
<td>ボリューム</td>
<td>1〜100で指定</td>
</tr>
<tr>
<td>startAt</td>
<td>int</td>
<td>0</td>
<td>開始位置</td>
<td>開始秒を指定</td>
</tr>
<tr>
<td>autoplay</td>
<td>bool</td>
<td>true</td>
<td>自動再生</td>
<td>自動再生の有無を指定</td>
</tr>
<tr>
<td>showYTLogo</td>
<td>bool</td>
<td>true</td>
<td>youtubeロゴ</td>
<td>ロゴ及びオリジナルへのリンクの有無を指定</td>
</tr>
</tbody>
</table>
<p><a id="h1" name="h1"></a><br />
<i>例えば<br />
www.youtube.com/watch?v=54dhAKNxu6c&amp;list=UUX7o_POJBRnI3bs5PQOnH2w<br />
の<br />
54dhAKNxu6c<br />
の部分。つまり<br />
v=**********<br />
を抽出<br />
</i><br />
ECサイトにおいても、詳細ページでの訴求力アップに役立ちそうだ。</p>
<p><a class="demo" href="/demo/hoshino/43/1.html">デモ(商品動画)</a></p>
<p><a class="demo" href="/demo/hoshino/43/2.html">デモ(イメージ)</a></p>

youtubeの動画を背景に利用できるjQueryプラグイン

<p>paperboy&amp;co.がCtoCハンドメイドECサイトcoobooを譲受し<br />
自社のCtoCハンドメイドECサイトminneと統合するという。<br />
<a href="http://sankei.jp.msn.com/economy/news/130826/prl13082615480062-n1.htm" target="_blank">http://sankei.jp.msn.com/economy/news/130826/prl13082615480062-n1.htm</a><br />
同社は、今後CtoC事業の強化を進めていくという。</p>
<p>また、少し前にアメリカの同様のサービスで大手のETSYが売上10億ドルを突破したという。<br />
理由としては、月並みだが<br />
1. 売り手、買い手のリテラシー向上<br />
2. CtoCのリスク担保<br />
3. 制作ツールの充実<br />
といったところだと思う。</p>
<p>特に3については3Dプリンタの普及によりさらにCtoCのECサイトが活況になるだろう。<br />
あとは仲介しているサイトや、決済手段自体が支払いのリスクを軽減する努力をしており<br />
購入者の安心感が強まっているのも大きな理由だと思う。</p>
<p>そこで、現在注目したいCtoCのECサイトまとめ。</p>
<table>
<tbody>
<tr>
<th>サイト名</th>
<th>運営元</th>
<th>url</th>
<th>サービス開始</th>
<th>商品数</th>
</tr>
<tr>
<td>minne</td>
<td>paperboy&amp;co.</td>
<td>http://minne.com/</td>
<td>2012年1月</td>
<td>149,048</td>
</tr>
<tr>
<td>tetote</td>
<td>OCアイランド株式会社</td>
<td>http://tetote-market.jp/</td>
<td>2011年6月</td>
<td>299,700</td>
</tr>
<tr>
<td>Creema</td>
<td>赤丸ホールディングス株式会社</td>
<td>http://www.creema.jp/</td>
<td>2010年7月</td>
<td>103,274</td>
</tr>
<tr>
<td>iichi</td>
<td>iichi株式会社</td>
<td>http://www.iichi.com/</td>
<td>2011年7月</td>
<td>66,229</td>
</tr>
<tr>
<td>cooboo</td>
<td>スパークラボ</td>
<td>http://cooboo.jp/</td>
<td>2010年10月</td>
<td>29,022</td>
</tr>
<tr>
<td>stylestore</td>
<td>株式会社エンファクトリー</td>
<td>http://stylestore.jp/</td>
<td>2011年12月</td>
<td>8317</td>
</tr>
<tr>
<td>ETSY</td>
<td>ETSY, Inc.</td>
<td>http://www.etsy.com/</td>
<td>2005年1月</td>
<td>13,582,980</td>
</tr>
</tbody>
</table>


着実に成長しているハンドメイドEC

<p>EC先進国中国で農産物のネット販売が急成長しているという。<br />
<a href="http://www.sankeibiz.jp/macro/news/130815/mcb1308150502005-n1.htm" target="_blank">http://www.sankeibiz.jp/macro/news/130815/mcb1308150502005-n1.htm</a></p>
<p>消費期限や温度管理にコストがかかる商品については<br />
企業側の対応が追いついておらず伸びは限定的だが<br />
今後設備投資が進み流通量が急速に拡大しそうだ。</p>
<p>中国と比べると国土の違いなどでネットスーパーのニーズは異なるが<br />
日本においても高齢者の利用や地方の事業者の発展など<br />
ネットスーパーの発展は有益なことが多い。<br />
当然EC業界においても同じことが言える。</p>
<p>平成23年のBtoCのEC市場規模は8.5兆円。<br />
EC化率は2.8%。<br />
スーパーの市場規模は18兆円なので、<br />
仮に5%ネットでの販売が増えれば、0.3%EC化率が増える。</p>
<p>国内のECサイトの動きとしては<br />
西友がDeNAと組んでSEIYUドットコムの運営に力を入れている。<br />
<a href="http://www.the-seiyu.com/" target="_blank">http://www.the-seiyu.com/</a><br />
ネット企業としてのマーケティングや企画、商品の見せ方などの知恵を借りている。<br />
システム開発と運用もDeNAがサポートしているという。</p>
<p>ローソンはヤフーと組んでスマートキッチンというサイトを運営している。<br />
<a href="http://www.smartkitchen.co.jp/" target="_blank">http://www.smartkitchen.co.jp/</a></p>
<p>未だ消費者に根付いていないが、各企業が力を入れてきているため<br />
じわじわと流通が拡大していきそうだ</p>


徐々に活気づくネットスーパー

<p>テキストのエフェクトがかっこいいjQueryプラグイン texteffects.jsを使ってみた。</p>
<p><a href="http://fourdesire.com/playgrounds/texteffects" target="_blank">http://fourdesire.com/playgrounds/texteffects</a></p>
<p><a class="demo" href="/demo/hoshino/42/">demo</a></p>
<p>&nbsp;</p>
<p>設置は非常に簡単で</p>
<p>JS</p>

		<div id="crayon-64953fd58dcef552381051" 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(){
	$(".test1").textEffect();
	$(".test2").textEffectLoop();
});</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-64953fd58dcef552381051-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58dcef552381051-2">2</div><div class="crayon-num" data-line="crayon-64953fd58dcef552381051-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58dcef552381051-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58dcef552381051-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-64953fd58dcef552381051-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".test1"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">textEffect</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58dcef552381051-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".test2"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">textEffectLoop</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-64953fd58dcef552381051-4"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>HTML</p>

		<div id="crayon-64953fd58dcf3367119290" 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;p class="test1"&gt;
    スタンダードな関数です。1度だけ再生されます
&lt;/p&gt;
&lt;ul class="test2"&gt;
    &lt;li&gt;スタンダードな関数が、ループし続けます&lt;/li&gt;
    &lt;li&gt;liタグで複数指定します&lt;/li&gt;
    &lt;li&gt;liタグの数だけループし、最後までいくとまた最初から再生します&lt;/li&gt;
&lt;/ul&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-64953fd58dcf3367119290-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58dcf3367119290-2">2</div><div class="crayon-num" data-line="crayon-64953fd58dcf3367119290-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58dcf3367119290-4">4</div><div class="crayon-num" data-line="crayon-64953fd58dcf3367119290-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58dcf3367119290-6">6</div><div class="crayon-num" data-line="crayon-64953fd58dcf3367119290-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58dcf3367119290-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-64953fd58dcf3367119290-1"><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"test1"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58dcf3367119290-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;スタンダードな関数です。1度だけ再生されます</span></div><div class="crayon-line" id="crayon-64953fd58dcf3367119290-3"><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58dcf3367119290-4"><span class="crayon-r ">&lt;ul </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"test2"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd58dcf3367119290-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-i ">スタンダードな関数が、ループし続けます</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58dcf3367119290-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-i ">liタグで複数指定します</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd58dcf3367119290-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-i ">liタグの数だけループし、最後までいくとまた最初から再生します</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58dcf3367119290-8"><span class="crayon-r ">&lt;/ul&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>関数はtextEffect()とtextEffectLoop()の2つだけで</p>
<p>前者が1度だけ、後者はループする。</p>
<p>&nbsp;</p>
<p>パラメータは主に以下が利用できる。</p>
<p>&nbsp;</p>
<p>textEffect()</p>
<p>fps: フレームごとのマイクロ秒<br />
repeat: 指定した文字がでる前に出るその他文字の数<br />
debug: デバッグモード<br />
reverse: trueで逆エフェクト<br />
possibleChar: 使用する文字。例：&#8221;ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&amp;*()_+-=[];;&gt;&lt;0123456789&#8243;</p>
<p>&nbsp;</p>
<p>textEffectLoop()</p>
<p>timeout: エフェクト開始から終了までのマイクロ秒<br />
loop: 何回ループさせるか</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: hoshino

2014/01/08

2013/12/18

2013/12/11

2013/11/26

2013/11/21

2013/11/13

2013/10/31

2013/10/23

2013/10/16

2013/10/09

2013/10/02

2013/09/24

2013/09/18

2013/09/11

2013/09/05

2013/08/28

2013/08/21

2013/08/07