<p>スマホとPCを切り替えるjQueryプラグインを作っており、<br />
何かと必要かと思いまとめた。<br />
AndroidとiOSとその他、端末のユーザーエージェント一覧。</p>
<p>&nbsp;</p>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th>OS</th>
<th>キャリア</th>
<th>発売日</th>
<th>機種名</th>
<th>照合条件</th>
</tr>
<tr>
<td rowspan="123">Android</td>
<td rowspan="61">DoCoMo</td>
<td rowspan="18">2012.4 ~</td>
<td>MEDIAS X N-07D</td>
<td>N-07D</td>
</tr>
<tr>
<td>Optimus it L-05D</td>
<td>L-05D</td>
</tr>
<tr>
<td>Xperia SX SO-05D</td>
<td>SO-05D</td>
</tr>
<tr>
<td>F-09D ANTEPRIMA</td>
<td>F-09D</td>
</tr>
<tr>
<td>ARROWS Me F-11D</td>
<td>F-11D</td>
</tr>
<tr>
<td>ELUGA V P-06D</td>
<td>P-06D</td>
</tr>
<tr>
<td>AQUOS PHONE st SH-07D</td>
<td>SH-07D</td>
</tr>
<tr>
<td>GALAXY S III SC-06D</td>
<td>SC-06D</td>
</tr>
<tr>
<td>ARROWS X F-10D</td>
<td>F-10D</td>
</tr>
<tr>
<td>AQUOS PHONE sv SH-10D</td>
<td>SH-10D</td>
</tr>
<tr>
<td>REGZA Phone T-02D</td>
<td>T-02D</td>
</tr>
<tr>
<td>Optimus Vu L-06D</td>
<td>L-06D</td>
</tr>
<tr>
<td>L-06D JOJO</td>
<td>L-06D</td>
</tr>
<tr>
<td>AQUOS PHONE ZETA SH-09D</td>
<td>SH-09D</td>
</tr>
<tr>
<td>ELUGA power P-07D</td>
<td>P-07D</td>
</tr>
<tr>
<td>Xperia GX SO-04D</td>
<td>SO-04D</td>
</tr>
<tr>
<td>らくらくスマートフォン（F-12D）</td>
<td>F-12D</td>
</tr>
<tr>
<td>SH-06D NERV</td>
<td>SH-06D</td>
</tr>
<tr>
<td rowspan="26">2011.8 ~ 2012.4</td>
<td>GALAXY Note SC-05D</td>
<td>SC-05D</td>
</tr>
<tr>
<td>P-04D</td>
<td>P-04D</td>
</tr>
<tr>
<td>AQUOS PHONE SH-06D</td>
<td>SH-06D</td>
</tr>
<tr>
<td>Disney Mobile on docomo F-08D</td>
<td>F-08D</td>
</tr>
<tr>
<td>Disney Mobile on docomo P-05D</td>
<td>P-05D</td>
</tr>
<tr>
<td>MEDIAS ES N-05D</td>
<td>N-05D</td>
</tr>
<tr>
<td>Xperia NX SO-02D</td>
<td>SO-02D</td>
</tr>
<tr>
<td>Xperia acro HD SO-03D</td>
<td>SO-03D</td>
</tr>
<tr>
<td>PRADA phone by LG L-02D</td>
<td>L-02D</td>
</tr>
<tr>
<td>MEDIAS LTE N-04D</td>
<td>N-04D</td>
</tr>
<tr>
<td>GALAXY S II LTE SC-03D</td>
<td>SC-03D</td>
</tr>
<tr>
<td>ARROWS X LTE F-05D</td>
<td>F-05D</td>
</tr>
<tr>
<td>Optimus LTE L-01D</td>
<td>L-01D</td>
</tr>
<tr>
<td>ARROWS μ F-07D</td>
<td>F-07D</td>
</tr>
<tr>
<td>MEDIAS PP N-01D</td>
<td>N-01D</td>
</tr>
<tr>
<td>GALAXY NEXUS SC-04D</td>
<td>SC-04D</td>
</tr>
<tr>
<td>ARROWS kiss F-03D</td>
<td>F-03D</td>
</tr>
<tr>
<td>REGZA Phone T-01D</td>
<td>T-01D</td>
</tr>
<tr>
<td>F-03D Girls’</td>
<td>F-03D</td>
</tr>
<tr>
<td>Q-pot.Phone SH-04D</td>
<td>SH-04D</td>
</tr>
<tr>
<td>AQUOS PHONE SH-01D</td>
<td>SH-01D</td>
</tr>
<tr>
<td>AQUOS PHONE slider SH-02D</td>
<td>SH-02D</td>
</tr>
<tr>
<td>LUMIX Phone P-02D</td>
<td>P-02D</td>
</tr>
<tr>
<td>P-01D</td>
<td>P-01D</td>
</tr>
<tr>
<td>Xperia PLAY SO-01D</td>
<td>SO-01D</td>
</tr>
<tr>
<td>Xperia ray SO-03C</td>
<td>SO-03C</td>
</tr>
<tr>
<td rowspan="17">2009.7 ~ 2011.8</td>
<td>MEDIAS WP N-06C</td>
<td>N-06C</td>
</tr>
<tr>
<td>Xperia acro SO-02C</td>
<td>SO-02C</td>
</tr>
<tr>
<td>GALAXY S II SC-02C</td>
<td>SC-02C</td>
</tr>
<tr>
<td>P-07C</td>
<td>P-07C</td>
</tr>
<tr>
<td>F-12C</td>
<td>F-12C</td>
</tr>
<tr>
<td>AQUOS PHONE f SH-13C</td>
<td>SH-13C</td>
</tr>
<tr>
<td>Optimus bright L-07C</td>
<td>L-07C</td>
</tr>
<tr>
<td>AQUOS PHONE SH-12C</td>
<td>SH-12C</td>
</tr>
<tr>
<td>Xperia arc SO-01C</td>
<td>SO-01C</td>
</tr>
<tr>
<td>MEDIAS N-04C</td>
<td>N-04C</td>
</tr>
<tr>
<td>Optimus chat L-04C</td>
<td>L-04C</td>
</tr>
<tr>
<td>REGZA Phone T-01C</td>
<td>T-01C</td>
</tr>
<tr>
<td>LYNX 3D SH-03C</td>
<td>SH-03C</td>
</tr>
<tr>
<td>GALAXY S SC-02B</td>
<td>SC-02B</td>
</tr>
<tr>
<td>LYNX SH-10B</td>
<td>SH-10B</td>
</tr>
<tr>
<td>Xperia SO-01B</td>
<td>SO-01B</td>
</tr>
<tr>
<td>HT-03A</td>
<td>HT-03A</td>
</tr>
<tr>
<td rowspan="32">AU</td>
<td rowspan="6">2012.4 ~</td>
<td>AQUOS PHONE SERIE ISW16SH</td>
<td>ISW16SH</td>
</tr>
<tr>
<td>ARROWS Z ISW13F</td>
<td>ISW13F</td>
</tr>
<tr>
<td>URBANO PROGRESSO</td>
<td>URBANO PROGRESSO</td>
</tr>
<tr>
<td>AQUOS PHONE SL IS15SH</td>
<td>IS15SH</td>
</tr>
<tr>
<td>AQUOS PHONE CL IS17SH</td>
<td>IS17SH</td>
</tr>
<tr>
<td>HTC J ISW13HT</td>
<td>ISW13HT</td>
</tr>
<tr>
<td rowspan="13">2011.10 ~ 2012.4</td>
<td>Xperia acro HD IS12S</td>
<td>IS12S</td>
</tr>
<tr>
<td>INFOBAR C01</td>
<td>INFOBAR C01</td>
</tr>
<tr>
<td>MOTOROLA RAZR IS12M</td>
<td>IS12M</td>
</tr>
<tr>
<td>GALAXY SII WiMAX ISW11SC</td>
<td>ISW11SC</td>
</tr>
<tr>
<td>Optimus X IS11LG</td>
<td>IS11LG</td>
</tr>
<tr>
<td>AQUOS PHONE IS14SH</td>
<td>IS14SH</td>
</tr>
<tr>
<td>ARROWS ES IS12F</td>
<td>IS12F</td>
</tr>
<tr>
<td>MEDIAS BR IS11N</td>
<td>IS11N</td>
</tr>
<tr>
<td>ARROWS Z ISW11F</td>
<td>ISW11F</td>
</tr>
<tr>
<td>DIGNO ISW11K</td>
<td>ISW11K</td>
</tr>
<tr>
<td>htc EVO 3D ISW12HT</td>
<td>ISW12HT</td>
</tr>
<tr>
<td>MOTOROLA PHOTON ISW11M</td>
<td>ISW11M</td>
</tr>
<tr>
<td>AQUOS PHONE IS13SH</td>
<td>IS13SH</td>
</tr>
<tr>
<td rowspan="13">2010.6 ~ 2011.9</td>
<td>MIRACH IS11PT</td>
<td>IS11PT</td>
</tr>
<tr>
<td>Xperia acro IS11S</td>
<td>IS11S</td>
</tr>
<tr>
<td>INFOBAR A01</td>
<td>INFOBAR A01</td>
</tr>
<tr>
<td>G’zOne IS11CA</td>
<td>IS11CA</td>
</tr>
<tr>
<td>AQUOS PHONE IS11SH</td>
<td>IS11SH</td>
</tr>
<tr>
<td>AQUOS PHONE IS12SH</td>
<td>IS12SH</td>
</tr>
<tr>
<td>REGZA Phone IS11T</td>
<td>IS11T</td>
</tr>
<tr>
<td>htc EVO WiMAX ISW11HT</td>
<td>ISW11HT</td>
</tr>
<tr>
<td>SIRIUSα IS06</td>
<td>IS06</td>
</tr>
<tr>
<td>IS05</td>
<td>IS05</td>
</tr>
<tr>
<td>REGZA Phone IS04</td>
<td>IS04</td>
</tr>
<tr>
<td>IS03</td>
<td>IS03</td>
</tr>
<tr>
<td>IS01</td>
<td>IS01</td>
</tr>
<tr>
<td rowspan="30">Softbank</td>
<td rowspan="4">2012.4 ~</td>
<td>AQUOS PHONE 102SHII</td>
<td>102SHII</td>
</tr>
<tr>
<td>AQUOS PHONE Xx 106SH</td>
<td>106SH</td>
</tr>
<tr>
<td>ARROWS A 101F</td>
<td>101F</td>
</tr>
<tr>
<td>PANTONE 5 107SH</td>
<td>107SH</td>
</tr>
<tr>
<td rowspan="19">2011.6 ~ 2012.4</td>
<td>SoftBank 102P</td>
<td>102P</td>
</tr>
<tr>
<td>MEDIAS CH 101N</td>
<td>101N</td>
</tr>
<tr>
<td>AQUOS PHONE 102SH</td>
<td>102SH</td>
</tr>
<tr>
<td>AQUOS PHONE 103SH</td>
<td>103SH</td>
</tr>
<tr>
<td>AQUOS PHONE 104SH</td>
<td>104SH</td>
</tr>
<tr>
<td>AQUOS PHONE THE HYBRID 101SH</td>
<td>101SH</td>
</tr>
<tr>
<td>LUMIX Phone 101P</td>
<td>101P</td>
</tr>
<tr>
<td>HONEY BEE 101K</td>
<td>101K</td>
</tr>
<tr>
<td>STAR7 009Z</td>
<td>009Z</td>
</tr>
<tr>
<td>DELL Streak Pro 101DL</td>
<td>101DL</td>
</tr>
<tr>
<td>Vision 007HW</td>
<td>007HW</td>
</tr>
<tr>
<td>Yahoo! Phone 009SH Y</td>
<td>SBM009SH</td>
</tr>
<tr>
<td>007SH KT</td>
<td>007SH</td>
</tr>
<tr>
<td>AQUOS PHONE THE PREMIUM 009SH</td>
<td>SBM009SH</td>
</tr>
<tr>
<td>シンプルスマートフォン 008Z</td>
<td>008Z</td>
</tr>
<tr>
<td>AQUOS PHONE THE HYBRID 007SH J</td>
<td>007SH</td>
</tr>
<tr>
<td>Sweety 003P</td>
<td>003P</td>
</tr>
<tr>
<td>AQUOS PHONE THE HYBRID 007SH</td>
<td>007SH</td>
</tr>
<tr>
<td>AQUOS PHONE 006SH</td>
<td>006SH</td>
</tr>
<tr>
<td rowspan="7">2010.4 ~ 2011.2</td>
<td>GALAPAGOS 005SH</td>
<td>005SH</td>
</tr>
<tr>
<td>Libero 003Z</td>
<td>003Z</td>
</tr>
<tr>
<td>DELL Streak 001DL</td>
<td>001DL</td>
</tr>
<tr>
<td>GALAPAGOS 003SH</td>
<td>003SH</td>
</tr>
<tr>
<td>HTC Desire HD 001HT</td>
<td>001HT</td>
</tr>
<tr>
<td>Desire X06HTII（X06HT）</td>
<td>X06HT</td>
</tr>
<tr>
<td>SoftBank 004HW</td>
<td>004HW</td>
</tr>
<tr>
<td rowspan="3">iOS</td>
<td rowspan="3">&#8211;</td>
<td rowspan="3">&#8211;</td>
<td>iPhone</td>
<td>iPhone</td>
</tr>
<tr>
<td>iPad</td>
<td>iPad</td>
</tr>
<tr>
<td>iPod</td>
<td>iPod</td>
</tr>
<tr>
<td rowspan="5">その他</td>
<td rowspan="5">&#8211;</td>
<td rowspan="5">&#8211;</td>
<td>DIGNO DUAL WX04K</td>
<td>WX04K</td>
</tr>
<tr>
<td>DM012SH</td>
<td>DM012SH</td>
</tr>
<tr>
<td>DM010SH</td>
<td>DM010SH</td>
</tr>
<tr>
<td>DM011SH</td>
<td>DM011SH</td>
</tr>
<tr>
<td>DM009SH</td>
<td>DM009SH</td>
</tr>
</tbody>
</table>


【Android】 端末 ユーザーエージェント一覧

スマートフォン対応の画像スライダー「flexslider」

[HTML5] File system API サンプル

エフェクトがかっこいい画像スライドショー &#8211; nivo slider &#8211;

<p>turn.jsというプラグインを使って、</p>
<p>コンテンツを本をめくったように遷移するページを作ってみました。</p>
<p>ちなみにHTML5でしか使用できないようです。</p>
<p>&nbsp;</p>
<p>コーポレートサイトで使用するのも特徴があっていいと思いますが、</p>
<p>電子書籍のアプリに使用できるかもしれません。</p>
<p>というか本家ではそのようなデモがありました。</p>
<p>&nbsp;</p>
<p>簡単ではありますが、デモを作成したので、</p>
<p>まずはそちらをご覧頂ければと思いますが、&nbsp;</p>
<p>IEでは見れないので、FirefoxかChromeでご覧ください。</p>
<p>四隅の角でページ送りができ、 ドラッグでページをめくるような動きもできます。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/abe/13/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>turn.jsの使用方法</h3>
<p>&nbsp;</p>
<p>まずは、head部分に、</p>
<p></p>

		<div id="crayon-64953fd57beda892293326" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="js/turn.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd57beda892293326-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57beda892293326-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-64953fd57beda892293326-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57beda892293326-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/turn.js"</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>&nbsp;</p>
<p>記入します。</p>
<p>&nbsp;</p>
<p>そしてhtmlは、</p>
<p></p>

		<div id="crayon-64953fd57bede856020415" 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="magazine"&gt;
　&lt;div&gt;&lt;/div&gt;
　&lt;div&gt;&lt;/div&gt;
　&lt;div&gt;&lt;/div&gt;
　&lt;div&gt;&lt;/div&gt;
　&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd57bede856020415-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57bede856020415-2">2</div><div class="crayon-num" data-line="crayon-64953fd57bede856020415-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57bede856020415-4">4</div><div class="crayon-num" data-line="crayon-64953fd57bede856020415-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57bede856020415-6">6</div><div class="crayon-num" data-line="crayon-64953fd57bede856020415-7">7</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-64953fd57bede856020415-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"magazine"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57bede856020415-2"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd57bede856020415-3"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57bede856020415-4"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd57bede856020415-5"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57bede856020415-6"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd57bede856020415-7"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>&nbsp;</p>
<p>奇数番目が、右側のページ(1番目は表紙)で、</p>
<p>偶数番目が、左側のページになります。</p>
<p>&nbsp;</p>
<p>最後が重要なのですが、bodyの閉じタグの直前に、</p>
<p>&nbsp;</p>
<p></p>

		<div id="crayon-64953fd57bee0207369303" 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;">
&lt;script&gt;
  $('#magazine').turn();
&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-64953fd57bee0207369303-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57bee0207369303-2">2</div><div class="crayon-num" data-line="crayon-64953fd57bee0207369303-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-64953fd57bee0207369303-1"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57bee0207369303-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#magazine'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">turn</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd57bee0207369303-3"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>&nbsp;</p>
<p>を入れるだけです。</p>
<p>&nbsp;</p>
<p>要はコンテンツの後に記述しないと動きません。</p>
<p>ここは気をつけて下さい。</p>
<p>&nbsp;</p>
<p>デモでもこれしか記述してませんが、オプションがあります。</p>
<p>また、自分で作ることになりますが、javascriptで</p>
<p>ページ数を表示したり、メニューをつけたりできるようです。&nbsp;</p>
<p>今回そこまで余裕がなかったので、</p>
<p>割愛させていただきました。</p>
<p>&nbsp;</p>
<p>海外のサイトですがメニュー付きのデモは以下になります。</p>
<p><a href="http://www.turnjs.com/" target="_blank">http://www.turnjs.com/</a></p>
<p>&nbsp;</p>
<p>冒頭で紹介した、電子書籍のデモは以下になります。</p>
<p><a href="/demo/abe/13/magazine/" target="_blank">電子書籍のようなページ</a></p>
<p>&nbsp;</p>
<p>IEとか気にせず作れるようになりたいですね！</p>

turn.jsを使った本をめくるようなコンテンツページ

様々な効果にできるイメージスライダー

css3で立体的にくるっと回転させるメニュー

要素を小刻みに動かしたり、浮かしているようにするjQuery

よく使用している汎用的で簡単なjQueryのコード

<blockquote><p>この記事は2012年に交付された助成金に関する記事です。<br />
2016年7月から申請が始まった「中小企業越境ECマーケティング事業に係る補助金」につきましては、<br />
弊社で無料セミナーを行っていますので、ご興味のある方はご参加ください。<br />
<a href="http://launchcart.jp/seminar/20160713/">http://launchcart.jp/seminar/20160713/</a></p></blockquote>
<p>&nbsp;</p>
<p>■越境EC 経産省による補助金事業スタート<br />
今月6日、経済産業省が越境ECに対する補助金事業を行う旨の発表があった。<br />
<a href="http://www.meti.go.jp/press/2012/04/20120406001/20120406001.html" target="_blank">http://www.meti.go.jp/press/2012/04/20120406001/20120406001.html</a></p>
<p>とは言っても全国的又は大々的にというわけではなく、<br />
被災地支援という建前の元に採択された事業だ。</p>
<p>復興事業等一部を除き、土着の事業者にとっては被災地で<br />
従来の事業を行うのは難しい。<br />
確かに越境ECという考えに至るのは容易だ。</p>
<p>被災地活性化と中小企業の海外進出<br />
うまくいば両者を同時に実現できるとても良い事業だ。</p>
<p>支援の対象となる地域は<br />
青森県、秋田県、岩手県、山形県、 宮城県、福島県、群馬県、栃木県、茨城県、千葉県<br />
であり、ここに事業所がある事業者だけでなく、<br />
被災地関連商品を取り扱う事業者も補助が受けられる。</p>
<p>具体的な補助内容としては図1のようになっており、<br />
要は海外モールの出店料を立て替えてくれるシステムだ。</p>
<p><img decoding="async" src="http://www.cbec.go.jp/ori/50035/etc_img/scheme1.JPG" alt="" /><br />
(越境ECポータルより)</p>
<p>以下は補助の対象となるモールと補助内容の一覧。</p>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="25%">■eBay</th>
<th width="25%">Superior</th>
<th width="25%">Advance</th>
<th width="25%">Basic</th>
</tr>
<tr>
<td>登録可能商品数</td>
<td>150</td>
<td>150</td>
<td>150</td>
</tr>
<tr>
<td>初期費用（1）</td>
<td>70万円</td>
<td>30万円</td>
<td>18万円</td>
</tr>
<tr>
<td>月額費用（2）</td>
<td>5万円</td>
<td>5万円</td>
<td>5万円</td>
</tr>
<tr>
<td>補助対象総額<br />
(1 + 2 * 最大 6 ヶ月)</td>
<td>100万円</td>
<td>60万円</td>
<td>48万円</td>
</tr>
<tr>
<td>売上手数料(補助対象外)</td>
<td>約10%</td>
<td>約10%</td>
<td>約10%</td>
</tr>
<tr>
<td>初期システム構築費用に含まれる付加サービス</td>
<td>リスティング広告+プログマーケティング支援</td>
<td>ブログマーケティング支援</td>
<td>なし</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="25%">■淘宝網</th>
<th width="25%">Superior</th>
<th width="25%">Advance</th>
<th width="25%">Basic</th>
</tr>
<tr>
<td>登録可能商品数</td>
<td>150</td>
<td>150</td>
<td>150</td>
</tr>
<tr>
<td>初期費用（1）</td>
<td>70万円</td>
<td>30万円</td>
<td>27万円</td>
</tr>
<tr>
<td>月額費用（2）</td>
<td>5万円</td>
<td>5万円</td>
<td>3万円</td>
</tr>
<tr>
<td>補助対象総額<br />
(1 + 2 * 最大 6 ヶ月)</td>
<td>100万円</td>
<td>60万円</td>
<td>45万円</td>
</tr>
<tr>
<td>売上手数料(補助対象外)</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
</tr>
<tr>
<td>初期システム構築費用に含まれる付加サービス</td>
<td>右記すべて+タオバオマイバー出稿</td>
<td>淘宝内リスティング広告+淘宝内インプレッションバナー</td>
<td>淘宝内リスティング広告+マイクロブログ投稿</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="25%">■J-shoppers</th>
<th width="25%">Superior</th>
<th width="25%">Advance</th>
<th width="25%">Basic</th>
</tr>
<tr>
<td>登録可能商品数</td>
<td>300</td>
<td>100</td>
<td>30</td>
</tr>
<tr>
<td>初期費用（1）</td>
<td>70万円</td>
<td>48万円</td>
<td>4万円</td>
</tr>
<tr>
<td>月額費用（2）</td>
<td>5万円</td>
<td>2万円</td>
<td>1万円</td>
</tr>
<tr>
<td>補助対象総額<br />
(1 + 2 * 最大 6 ヶ月)</td>
<td>100万円</td>
<td>60万円</td>
<td>10万円</td>
</tr>
<tr>
<td>売上手数料(補助対象外)</td>
<td>10%</td>
<td>10%</td>
<td>10%</td>
</tr>
<tr>
<td>初期システム構築費用に含まれる付加サービス</td>
<td>右記+個別特集ページ+マイクロブログ投稿</td>
<td>右記+リスティング広告</td>
<td>モールメルマガ内紹介+モール Facebookページでの紹介</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="25%">■佰宜杰</th>
<th width="25%">Superior</th>
<th width="25%">Advance</th>
<th width="25%">Basic</th>
</tr>
<tr>
<td>登録可能商品数</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>初期費用（1）</td>
<td>70万円</td>
<td>45万円</td>
<td>15万円</td>
</tr>
<tr>
<td>月額費用（2）</td>
<td>5万円</td>
<td>5万円</td>
<td>5万円</td>
</tr>
<tr>
<td>補助対象総額<br />
(1 + 2 * 最大 6 ヶ月)</td>
<td>100万円</td>
<td>75万円</td>
<td>45万円</td>
</tr>
<tr>
<td>売上手数料(補助対象外)</td>
<td>9%</td>
<td>9%</td>
<td>9%</td>
</tr>
<tr>
<td>マイクロブログ投稿+ターゲティング広告</td>
<td>右記+個別特集ページ+マイクロブログ投稿</td>
<td>マイクロブログ投稿</td>
<td>なし</td>
</tr>
</tbody>
</table>
<p>■PCホーム<br />
サイト内に特設ページを設置。<br />
その中で各事業者の商品を販売する。<br />
補助内容は<br />
初期費用 10万円 (20万円のところ)<br />
運用費用 5千円 / 月 (1万円のところ)<br />
国政物量費用 3万円<br />
となる。</p>
<p>本事業は海外進出の補助だけが目的ではなく、<br />
「成功モデル等の普及啓発」ということも目的として明確に掲げられている。<br />
政府としても日本の中小企業の越境ECの支援について<br />
手探り状態の中、今回の事業を成功させ是非全国規模での事業となってほしい。</p>
<p>ソース<br />
<a href="http://www.cbec.go.jp/content_ja_JPY_32.html" target="_blank">http://www.cbec.go.jp/content_ja_JPY_32.html</a><br />
<a href="http://ecaa.jp/news/2012/20120406_140.html" target="_blank">http://ecaa.jp/news/2012/20120406_140.html</a></p>


越境EC 経産省による補助金事業スタート

<p>最近ちょくちょくみかける パララックス効果や、スクロールの効果のプラグインを紹介します。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>jQuery Scroll Path</h3>
<p>パスを設定し、そのパスに沿って動かせるというもの。</p>
<p>今までのスクロールとは奇想天外な動きをするので、ちょっとびっくりします。</p>
<p>ランディングページとかに利用するとインパクト与えられるかも。</p>
<p>&nbsp;</p>
<p><a class="demo" href="http://joelb.me/scrollpath/" target="_blank">DEMO</a><br />
<a class="demo" href="https://github.com/JoelBesada/scrollpath/downloads" target="_blank">DOWNLOAD</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Curtain.js</h3>
<p>コンテンツがするすると切り替わるプラグイン。</p>
<p>紙芝居みたいですね。</p>
<p>&nbsp;</p>
<p>こちらは、以前実際に試したものがありますので、そちらをご覧下さい。</p>
<p>使用方法等も記載しています。</p>
<p><a href="https://sterfield.co.jp/designer/jquery/%E3%82%AB%E3%83%BC%E3%83%86%E3%83%B3%E3%80%81%E3%81%A8%E3%81%84%E3%81%86%E3%81%8B%E3%82%B7%E3%83%A3%E3%83%83%E3%82%BF%E3%83%BC%EF%BC%9F%E3%81%BF%E3%81%9F%E3%81%84%E3%81%AB%E3%83%9A%E3%83%BC%E3%82%B8.html" target="_blank">カーテン、というかシャッター？みたいにページが切り替わるJS</a></p>
<p>&nbsp;</p>
<h2>jQuery-Parallax</h3>
<p>背景画像とコンテンツのスクロールした時の速度をずらし、インパクトとユニークさを感じることができます。 Nikeのサイトでも使用されたみたいですね。</p>
<p><a class="demo" href="http://johnpolacek.github.com/scrolldeck.js/decks/parallax/" target="_blank">DEMO</a><br />
<a class="demo" href="https://github.com/IanLunn/jQuery-Parallax/downloads" target="_blank">DOWNLOAD</a></p>
<p>&nbsp;</p>
<h2>Sequence.js</h3>
<p>このプラグインで3つの表現ができるプラグイン。</p>
<p>ちょっとオシャレなスライドと、パララックス効果のあるスライド、</p>
<p>そして、appleのようなスライド（？）とあります。</p>
<p><a class="demo" href="http://www.sequencejs.com/" target="_blank">DEMO</a><br />
<a class="demo" href="https://github.com/IanLunn/Sequence/downloads" target="_blank">DOWNLOAD</a></p>
<p>&nbsp;</p>
<h2>Parallax Content Slider with CSS3 and jQuery</h3>
<p>上記のパララックス効果のあるスライドと同等のものですね。</p>
<p>メインビジュアルとかによさそうですね。</p>
<p>&nbsp;</p>
<p><a class="demo" href="http://tympanus.net/Development/ParallaxContentSlider/" target="_blank">DEMO</a><br />
<a class="demo" href="http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/" target="_blank">DOWNLOAD</a></p>
<p>&nbsp;</p>
<h2>Parallax Slider with jQuery</h3>
<p>こちらもパララックス効果のスライドですが、サムネイル付にすることができます。</p>
<p><a class="demo" href="http://tympanus.net/Tutorials/ParallaxSlider/" target="_blank">DEMO</a><br />
<a class="demo" href="http://tympanus.net/codrops/2011/01/03/parallax-slider/" target="_blank">DOWNLOAD</a></p>
<p>&nbsp;</p>
<p>メインビジュアルであったり、サイト自体に 比較的簡単にこのような動きをつけられるようになってきてますので、</p>
<p>今後そのような流れになっていくのでしょうか。</p>
<p>&nbsp;</p>
<p>新しい技術はどんどんでてきますねー。</p>
<p>最新の表現、技術に乗り遅れないようにして、</p>
<p>よいwebサイトを制作しつづけれらるよう精進します。</p>
<p>&nbsp;</p>
<p>近々上記のようなプラグインを使ってなにか試してみたいと思います。</p>


いずれ使用してみたいパララックス及びスクロール効果プラグイン

<p>リバースコマースとは、ネット上において売り手が商品やサービスを販売するのではなく、<br />
買い手がほしい物を提示し、1人以上の売り手がそれを作るeコマースの手段である。<br />
主に買い手のお題に対し、クリエイターやデザイナーに対し企画やデザインを募り<br />
マッチしたものを発注するという流れが多い。</p>
<p>TechDollでキュレーションサイトFancyの紹介記事に出現した言葉だ。<br />
<a href="http://www.techdoll.jp/2012/03/23/fancy_fancystory/" target="_blank">http://www.techdoll.jp/2012/03/23/fancy_fancystory/</a></p>
<p>私が知る限りではこの分野にコマースという言葉を冠した呼び名は初めてだ。</p>
<p>要はネット上でのCtoCのビジネスモデルだ。</p>
<p>6年ほど前、私はインターネットの特性から、<br />
CtoCが伸びると予想し、クリエイターのマッチングサイトを作った。<br />
(リバースコマースの機能もオーダーメイドという言葉で実装していた)</p>
<p>当時はyahooオークションが全盛であり、<br />
CtoC=オークションというのが常識であり、yahooのオークション担当者も自負していた。</p>
<p>もう一つの動きとして、当時mixiが上場し、SNSという言葉が一般的になっていた。</p>
<p>個人利用におけるインターネットの変遷として当時私は<br />
1. 情報、2. ショッピング、ときて、3.コミュニケーションが浸透し、<br />
個人がインターネットを利用する上ではこの3つのいずれか1つ以上に強みがなくてはならないと思っていた。<br />
(それは今でも正しいと思っており、これに4.ゲームがさらに追加されていると思っている)</p>
<p>コミニュケーションは近況の報告や趣味の共有などから始まるが、<br />
1.情報は既に生活に密着しており無料であるために、<br />
自然とコミュニケーションの中に入り込んだ。<br />
= 1.情報と3.コミュニケーションのコラボレーションは自然に成立した。</p>
<p>次に考えられるのが2.ショッピングと3.コミュニケーションのコラボレーションだが、<br />
これは大きな成功事例=文化として未だ成立していない。</p>
<p>その前に成功したのが、4.ゲームと3.コミュニケーションだ。<br />
greeやdenaが大手だが、コミュニケーション+競争、団結、共有の要素を合わせ、<br />
従来のゲームにさらなる価値を創造し、成功した。</p>
<p>そうなると、唯一成功していないのが<br />
2.ショッピングと3.コミュニケーションのコラボレーションだ。</p>
<p>2.ショッピングは、1.情報、4.ゲームに比べ<br />
直接的な市場規模ははるかに大きい。<br />
これに気づき、この分野に手を出してみるサービスは時折見られる。<br />
このような動き、若しくはこれに近い動きは色々とあった。</p>
<p>・ジオメディア<br />
・共同クーポン<br />
・比較、口コミサイト</p>
<p>どれも真のEC、コミュニケーションは生まれていない。</p>
<p>話は戻るが、前述の私のクリエイターのマッチングサイトは結論として失敗した。</p>
<p>学生だった私のノウハウや資金力をのぞいたとして、<br />
私が考える失敗の理由は、</p>
<p>a. 個人の信用力<br />
b. コミュニケーションする理由</p>
<p>だと思っている。</p>
<p>aは当時分厚い壁があり特に日本では高い壁と言われていた。<br />
しかしFacebookが低くしてくれたお陰で、<br />
買い手の安心感はかなり担保されてきている。</p>
<p>問題はbだ。<br />
前述の例で言うと、</p>
<p>・ジオメディア<br />
コロカなど他のユーザーに対する優位性を示すという理由を定義している。<br />
しかし土台のジオメディア自体に前述1~4の特性が弱いため、<br />
文化として成立するまでには至っていない。</p>
<p>・共同クーポン<br />
非常に良くできたモデルだが、コミュニケーション制は弱い。<br />
ユーザー同士はクーポンが成立するためのパイでありそこにコミュニケーションは無い。<br />
(チケット販売などグルーピングされたコミュニティに対する商品であれば変わってくるかもしれない)</p>
<p>・比較、口コミサイト<br />
これらは1と2のコラボレーションであり、<br />
さらにコミュニケーションまで加われば大化けする可能がある。<br />
しかし現在は継続のメリットがない。<br />
コミュニケーションが生まれていない。</p>
<p>まとめると、<br />
CtoCでの成功 = 3.コミュニケーションと2. ショッピングをコラボレーションさせるには、</p>
<p>・買い物をコミュニケーションにつなげる<br />
・自分+買い物 = セルフブランディングという意味づけ<br />
・売り手とその商品の安全性の担保<br />
・継続するメリット<br />
・ここで買うメリット</p>
<p>の5つを満たすことが必要である。</p>
<p>クリエイター系のサービスは、商品のオリジナル性と汎用性から<br />
これらの項目を満たしやすい。<br />
さらにfancyではキュレーションやマイクロファンドといった付随サービスが充実しており、<br />
ユーザーに継続するメリットを与えている。<br />
売り手の安全性もソーシャルとの組み合わせである程度担保できる。</p>
<p>しかしクリエイター系サービスは決まった問題にぶち当たる。<br />
それは商品力だ。<br />
クリエイター商品は良いものも多いがブランディングが弱い。<br />
要は プレタポルテ &gt; オートクチュールなのだ。<br />
そのユーザーのマインドを少なくとも<br />
プレタポルテ &gt;= オートクチュール<br />
という状態に変えることが<br />
同類サイトが越えなければならない壁であり最重要課題だと私は思う。</p>


リバースコマースからみるCtoCビジネスの変遷

コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」

<p>HTML5のCANVASで、円グラフジェネレーターを作ってみた。<br />
<a href="/demo/hoshino/02/">/demo/hoshino/02/</a></p>
<p><iframe loading="lazy" width="320" height="240" style="border: none; overflow: hidden; width: 560px; height: 400px;" src="/demo/hoshino/02/sf_pie_chart_201203191011.html" frameborder="0"></iframe></p>
<p>1. ページ上部でキャンバスの大きさを設定<br />
※デフォルトは画面サイズ<br />
2. 左サイドで項目を編集<br />
3. ページ上部でフォントサイズや背景色を調整<br />
4. 左サイドパブリッシュボタンで設定を反映</p>
<p>その後、ソースをダウンロードするか、埋め込みタグを取得できます。<br />
よろしければ自由に使って下さい。</p>
<p>ソースを埋め込む場合、HTML5で構築されたページでないと表示されないのでご注意を。<br />
ちなみに上記の円グラフはソースをダウンロードしてiframeで読み込んでいます。</p>


HTML5 CANVAS 円グラフジェネレーター

【symfony2】参考リンク集　＆　学習ノート

<p>Active contents design(アクティブコンテンツデザイン)<br />
というデザインの概念を提唱したい。</p>
<p>これは、ページ単位でユーザーが見ているコンテンツ、<br />
見せたいコンテンツをページを見るフローの中で<br />
細分化、最適化してユーザーに提供するデザインである。</p>
<p>具体的には、ユーザーがその瞬間見ている場所において<br />
最適なコンテンツとインターフェイスを提供する。<br />
デザイナーは、ユーザーが今見ている位置を<br />
ブラウザのx軸、y軸から判別する。</p>
<p>例えば、1ページが長い場合、自分がページ全体のどの部分にいるかを示し、<br />
あるいはページが終盤であれば次のステップをサジェストするような情報を<br />
ユーザーに対しx軸、y軸によって動的にその時必要な情報だけを提供する。</p>
<p>レスポンシブwebデザインは、とても良い概念だが、<br />
これはサイトとしてデバイスや画面サイズの違いに合わせ<br />
コンテンツとインターフェイスを最適化する考え方だ。</p>
<p>一方でアクティブコンテンツデザインは、<br />
ユーザーが見ている場所によって、<br />
コンテンツとインターフェイスを最適化する概念だ。</p>
<p>技術的には、先にも述べたがブラウザのx軸、y軸のスクロール情報により<br />
ユーザーの今見ている場所を判断してその時の処理を定義する。<br />
これはjavascriptをメインとして行い、<br />
onScrollイベントにより座標を取得する。</p>
<p>要は、「どこを見ているときに、何をするか」<br />
を制御する必要がある。</p>
<p>実装については、これを実現するためのスクリプトを作成したので、<br />
詳しくは以下の記事を参考にしていただきたい。</p>
<p>■sf_scroll_trick.js<br />
<a href="/officer/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0/100.html">/officer/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0/100.html</a></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2012/06/12

2012/06/07

2012/05/31

2012/05/31

2012/05/24

2012/05/17

2012/05/10

2012/05/03

2012/04/26

2012/04/19

2012/04/05

2012/03/29

2012/03/22

2012/03/20

2012/03/15

2012/03/11

2012/03/11

2012/03/08