<p>先日、スマートフォンを活用した○○という企画のキャンペーンを考えておりまして、キャンペーンの事例を探していたのですが、その中で久しぶりに度肝を抜かれるGoogleサービスを見つけました。相当な難易度で工数が必要だと直感して、感服です。さすがGoogleというところですが、PCとスマートフォンを連動させた迷路が公開されていました。</p>
<h4 id="watch-headline-title">Chrome World Wide Maze</h3>
<p><a href="http://chrome.com/maze/" target="_blank">http://chrome.com/maze/</a></p>
<h3>特徴</h4>
<ul>
<li>PC、スマートフォン共にGoogle Chromeでなければ遊べない</li>
<li><b>WebGL</b>で描かれた3Dグラフィック</li>
<li>スマートフォンを傾けてボールを動かす</li>
<li>どんなサイトでも迷路にできる</li>
</ul>
<p>とにかくすごいです。度肝を抜かれるクオリティです。</p>
<p>WebGLによる3D迷路だけでも難易度が高いと思いますが、サイトのURLを入力すると、どんなサイトでも迷路になるし、操作はスマートフォンを用いてほぼ遅延なく操作をすることが出来ます。</p>
<p>参考の動画ありましたので、以下をどうぞ。</p>
<p><iframe loading="lazy" width="640" height="360" src="http://www.youtube.com/embed/7AvTl9aU5D8?feature=player_detailpage" frameborder="0" allowfullscreen=""></iframe></p>
<h2>その他の連動サイト</h3>
<p>株式会社キャッチボール公式サイト</p>
<p><a href="http://catch-ball.co.jp/" target="_blank">http://catch-ball.co.jp/</a></p>
<p>&nbsp;</p>
<p>キャッチボールさんってECをやっていると「後払い.com」が有名なのですが、全く別の会社さんでした。</p>
<p>親会社はバスキュールさんでこのようなコンテンツの制作能力に納得しました。</p>
<p>HTML5が普及する、今から5年ほど前からFLASHを用いてガラケーと連動させる釣りゲームを展開して、驚嘆したのを今でも覚えています。</p>
<p><a href="http://gyorol.bascule.co.jp/" target="_blank">http://gyorol.bascule.co.jp/</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>


PCとスマートフォンが連動した3D迷路のブラウザゲーム

jPlayerを使ってみた

CSS3だけで折りたたみ表示

<p>IEは使えないですが、スマートフォンなら簡単数行のコードでHTML5チャートを作られるJSライブラリのご紹介です。</p>
<p><a href="/demo/jeff/chart_sample.html" class="demo" target="_blank">デモ</a></p>
<h2>ソースコード</h3>
<p></p>

		<div id="crayon-64953fd587b32721887631" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;!doctype html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;Chart.js サンプル&lt;/title&gt;
		&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
		&lt;script src="js/Chart.js"&gt;&lt;/script&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;
		&lt;script type="text/javascript"&gt;
var ctx = $("#myChart").get(0).getContext("2d");
var data = [
	{
		value: 30,
		color:"#F38630"
	},
	{
		value : 50,
		color : "#E0E4CC"
	},
	{
		value : 100,
		color : "#69D2E7"
	}
]
new Chart(ctx).Pie(data);
		&lt;/script&gt;

	&lt;/body&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd587b32721887631-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-2">2</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-4">4</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-6">6</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-8">8</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-10">10</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-12">12</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-14">14</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-16">16</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-18">18</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-20">20</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-22">22</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-24">24</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-26">26</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-28">28</div><div class="crayon-num" data-line="crayon-64953fd587b32721887631-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd587b32721887631-30">30</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd587b32721887631-1"><span class="crayon-n">&lt;!doctype html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-2"><span class="crayon-r ">&lt;html&gt;</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-4"><span class="crayon-i ">		</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">Chart.js サンプル</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-5"><span class="crayon-i ">		<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-6"><span class="crayon-i ">		<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/Chart.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-7"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-8"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-9"><span class="crayon-i ">		</span><span class="crayon-r ">&lt;canvas </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"myChart"</span><span class="crayon-h"> </span><span class="crayon-e ">width</span>=<span class="crayon-s ">"400"</span><span class="crayon-h"> </span><span class="crayon-e ">height</span>=<span class="crayon-s ">"400"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/canvas&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-10"><span class="crayon-i ">		<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-11"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">ctx</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#myChart"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">get</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">getContext</span><span class="crayon-sy">(</span><span class="crayon-s">"2d"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-12"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-13"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-14"><span class="crayon-h">		</span><span class="crayon-i">value</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">30</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-15"><span class="crayon-h">		</span><span class="crayon-i">color</span><span class="crayon-sy">:</span><span class="crayon-s">"#F38630"</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-16"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-17"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-18"><span class="crayon-h">		</span><span class="crayon-i">value</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">50</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-19"><span class="crayon-h">		</span><span class="crayon-i">color</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"#E0E4CC"</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-20"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-21"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-22"><span class="crayon-h">		</span><span class="crayon-i">value</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-23"><span class="crayon-h">		</span><span class="crayon-i">color</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"#69D2E7"</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-24"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-25"><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-26"><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Chart</span><span class="crayon-sy">(</span><span class="crayon-i">ctx</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">Pie</span><span class="crayon-sy">(</span><span class="crayon-i">data</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd587b32721887631-27"><span class="crayon-h">		</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-28">&nbsp;</div><div class="crayon-line" id="crayon-64953fd587b32721887631-29"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd587b32721887631-30"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>注意点</h3>
<p>DOMは普通に使えますが、</p>
<p></p>

		<div id="crayon-64953fd587b36794293255" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
var ctx = document.getElementById("myChart").getContext("2d");</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd587b36794293255-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd587b36794293255-1">var<span class="crayon-h"> </span>ctx<span class="crayon-h"> </span>=<span class="crayon-h"> </span>document<span class="crayon-sy">.</span>getElementById<span class="crayon-sy">(</span><span class="crayon-s ">"myChart"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span>getContext<span class="crayon-sy">(</span><span class="crayon-s ">"2d"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>jQueryではちょっと変わった使い方で書きます。</p>
<p></p>

		<div id="crayon-64953fd587b38433899869" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
var ctx = $("#myChart").get(0).getContext("2d");</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd587b38433899869-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd587b38433899869-1">var<span class="crayon-h"> </span>ctx<span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s ">"#myChart"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span>get<span class="crayon-sy">(</span>0<span class="crayon-sy">)</span><span class="crayon-sy">.</span>getContext<span class="crayon-sy">(</span><span class="crayon-s ">"2d"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>本家サイト</h3>
<p>他のタイプのチャートの作成や、オプションのご確認は、<a href="http://www.chartjs.org/" target="_blank">本家サイト</a>で行ってください。</p>

Blogブログ

Articles

Contact Us