Warning: Trying to access array offset on value of type bool in /home/fieldwalking/fieldwalking.jp/public_html/blog/wp-content/plugins/only-tweet-like-share-and-google-1/tweet-like-plusone.php on line 803

Warning: Undefined array key 0 in /home/fieldwalking/fieldwalking.jp/public_html/blog/wp-content/plugins/only-tweet-like-share-and-google-1/tweet-like-plusone.php on line 229

Warning: Trying to access array offset on value of type bool in /home/fieldwalking/fieldwalking.jp/public_html/blog/wp-content/plugins/only-tweet-like-share-and-google-1/tweet-like-plusone.php on line 803

Warning: Undefined array key 0 in /home/fieldwalking/fieldwalking.jp/public_html/blog/wp-content/plugins/only-tweet-like-share-and-google-1/tweet-like-plusone.php on line 229

あむちょです。

最近マイブームのHTML5をスマートフォンからでも操作しやすく色々やってみる。

とりあえずやってみるとわかるけど、スマートフォンでも長押しに対応させたのと、反応がだいぶ早くなったので、フレームレイトを50にしてみました。

Hanabi

最近流行りのHTML5。対応状況は、iPhoneでは早い段階から対応(さすが言い出しっぺ)、Androidでも大概はサポートしてるけど、各社によってマチマチ(いつものこと)。windowsPhoneは知りません。

microsoftは消極的で、PCでもIE9からサポートです。それ以前の人は更新しましょう。
InternetExplorer9ダウンロードサイト

まずはブラウザーの標準動作をオフにしないと、フリック等で画面が動くいてしまう。

タグに以下を追加して、デフォルトの動作を抑える。

<br />
&lt;body ontouchmove=&quot;event.preventDefault()&quot;&gt;<br />

次に、PCとスマートフォンを分別するためにフラグを用意し、ユーザーエイジェントを調べる。

<br />
if(navigator.userAgent.indexOf(&#8216;iPhone&#8217;) &gt; 0<br />
    || navigator.userAgent.indexOf(&#8216;iPad&#8217;) &gt; 0<br />
    || navigator.userAgent.indexOf(&#8216;iPod&#8217;) &gt; 0<br />
    || navigator.userAgent.indexOf(&#8216;Android&#8217;) &gt; 0)mobileFlag=true;<br />

で、タップに関するイベントを登録。呼び出す関数は同じもの使ってます。

<br />
if(mobileFlag){<br />
	canvas.addEventListener(&quot;touchmove&quot;, mouseMoveHandler, false);<br />
	canvas.addEventListener(&quot;touchstart&quot;, mouseDownHandler, false);<br />
	canvas.addEventListener(&quot;touchend&quot;, mouseUpHandler, false);<br />
}<br />

タップした座標値を所得する方法がPCと微妙に違う。めんどくさいのでマルチタッチにはしない。

<br />
var mousex,mousey;<br />
var rect = e.target.getBoundingClientRect();</p>
<p>if(mobileFlag){<br />
    mousex=e.touches[0].pageX-rect.left;<br />
    mousey=e.touches[0].pageY-rect.top;<br />
}<br />
else{<br />
    mousex=e.clientX-rect.left;<br />
    mousey=e.clientY-rect.top;<br />
}<br />

また注意点として、指を離した時に発生するtouchendイベントは、指が離れた後なので座標が所得できません(無駄にはまった)。touchmoveで更新される座標値を使ってます。

とりあえず数増やしてアプリにしようかな。

同じソースコードでiPhone、Android、PC上で動くのでおいしいです。

　[ad]