カテゴリー別アーカイブ: プログラム

端末によってタッチイベントとクリックイベントを切り替える

タッチイベントにするとパソコンからアクセスしたときに操作ができず、クリックイベントにしておけばとりあえずスマホ、パソコンどちらからでも操作はできるがスマホで操作したとき微妙に感度が悪かったり、操作に時間差が生じる。そこで自分は次の方法で、アクセスする端末によってタッチかイベントかを切り替えています。

まず、addEventListenerのtypeに”click”と”touchstart”をいれた二つの.jsファイルを用意します。
sample.js
elem.addEventListener(“click”, modifyText, false);
sampleTouch.js

elem.addEventListener(“touchstart”, modifyText, false);

どっちの.jsファイルを読み込むか判断するstart.jsを用意し.htmlファイルのhead部分に記述する。
start.js
var ua = navigator.userAgent;
<!–
if (ua.indexOf(‘iPhone’) > 0 || ua.indexOf(‘iPad’) > 0
|| ua.indexOf(‘iPod’) > 0 || ua.indexOf(‘Android’) > 0
|| ua.indexOf(‘Windows Phone’) > 0 )
{
var s = document.createElement(“script”);
s.type = “text/javascript”;
s.src = “sampleTouch.js”;←スマホの時に読み込むファイル
document.getElementsByTagName(“head”)[0].appendChild(s);
}else{
var s = document.createElement(“script”);
s.type = “text/javascript”;
s.src = “sample.js”;←スマホでないときに読み込むファイル
document.getElementsByTagName(“head”)[0].appendChild(s);
}
1.アクセス端末の情報を取得する

navigator.userAgentを使ってアクセスした端末の情報を取得する。

2.端末を判断する

indexOfを使って読み込んだ情報のなかに記述の文字があればスマホと判断し、なければパソコンと判断しどちらかの.jsファイルのコードが生成される。

3.htmlのhead部分に.jsファイルを書き込む

document.getElementsByTagName(“head”)[0].appendChild(s);を使って上で生成した.jsファイルをhead部分に書き込まれ操作が始まる。

デバイスが多様する時代、どちらか一方を門前払いでなく、ひと手間かかりますがせっかくなのでこういった最適化を覚えてマルチデバイス対応のWebアプリを開発するためのテクニックでした。