効率化を考えるのが好きだけど、人にそれを押し付けると嫌がられることもわかっている、ユゲタです。
本日のIT謎掛け
「マウスイベント」とかけまして・・・
「あだち充の数多い漫画」と、ときます。
そのココロは・・・
（登場人物が）ほぼタッチと同じです。
webサービスのスマートフォン対応
PCのwebブラウザで閲覧・操作するサービスを、スマートフォン対応させる時に、ほとんどの人が「レスポンシブデザイン」を考えるだけですが、
マウスイベント操作をタッチイベント操作に置き換えて、それに伴うユーザーインターフェイスの変更も必要になることは、実際に、デザイン構築が完了して、実際に触ってみてから気がつくことが多いです。
今回のブログは、自分の備忘録も含めて、PCサービスをスマホサービスに対応させるために気をつける点をまとめてみました。
マウスイベントとタッチイベントの違い
マウスイベントの流れ
onmousedown -> onmousemove -> onmouseup
タッチイベントの流れ
ontouchstart -> ontouchmove -> ontouchend
基本的に大きく分かるのが、上記イベントで、それを置き換えるだけでいいようにも思えますが、イベント取得する情報が大きく違っているので、ある程度の書き換えが必要になるでしょう。
受け取り側のeventでの注意点は以下の通り
// マウスイベント
element.addEventListener("mousedown" , function(event){
// マウスで押されたエレメントの取得
var target = event.target;
// マウス座標
var pageX = event.pageX;
var pageY = event.pageY;
// エレメント内のクリックされた座標
var offsetX = event.offsetX;
var offsetY = event.offsetY;
});
// タッチイベント
element.addEventListener("touchstart" , function(event){
// マウスで押されたエレメントの取得
var target = event.touches[0].target;
// マウス座標
var pageX = event.touches[0].pageX;
var pageY = event.touches[0].pageY;
// エレメント内のクリックされた座標
// -> 取れません・・・orz
});
今回は、エレメントをドラッグさせる事が目的だったので、上記のイベント情報を取得したかったんですが、エレメント内のクリックがtouchイベントで取らないことが判明しました。
これは、非常にめんどくさいですね。
とりあえず、クリックしたエレメントのページ内座標を取得して、タッチ座標の差分値で、エレメントのドラッグ表示に対応しました。
ちなみに、エレメントのページ内座標は以下の関数で取得
//指定したエレメントの座標を取得
var element_pos = function(e){
//エレメント確認処理
if(!e){return null;}
var t = document.body;
//デフォルト座標
var pos={x:0,y:0};
do{
//指定エレメントでストップする。
if(e == t){break}
//対象エレメントが存在しない場合はその辞典で終了
if(typeof(e)=='undefined' || e==null){return pos;}
//座標を足し込む
pos.x += e.offsetLeft;
pos.y += e.offsetTop;
}
//上位エレメントを参照する
while(e = e.offsetParent);
//最終座標を返す
return pos;
};
イベント起動で気をつける点
イベントリスナーへの登録の際に、PCとスマートフォンを判別するには、以下のように行います。
// pc
if(typeof window.ontouchstart === "undefined"){
element.addEventListener("mousedown" , function(event){...});
}
// smartphone
else{
element.addEventListener("touchstart" , function(event){...});
}
"window.ontouchstart"が、存在するかどうかを判定するだけです。
同時に登録してもいいんですが、今現在はGoogleChromeブラウザでしか確認できていないので、自己責任にて行ってくださいませ。
その他の注意点
他にも、clickイベントは、同じように機能するのですが、そもそもPCとスマートフォンでは、マウスとタッチの違いは結構な操作感の違いがあるので、サービスによっては、方式自体を変更しなければいけない場合などもあるので、しっかりとイメージしておく必要があります。
また、CSSのhoverは、スマートフォンでは機能しないのですが、クリックした際に、hoverイベントが発動するという特性があるので、インターフェイスチャックは欠かさず行っておきましょう。
当たり前ですが、mouseoverやmouseoutに該当する機能もスマートフォンには存在しないので、ツール系サービスの場合などは、操作方法をかなり検討しないと、簡単に変更できるとタカを括っていると、僕みたいに痛い目を見ますよ！！！！
