CSS Nite LP35「マルチデバイス対応 2014」終了しました。

CSS Nite LP35「マルチデバイス対応 2014」6月14日(土)に行わなれたCSS Nite LP35「マルチデバイス対応 2014」が終了しました。

わたしは「トラブルシューティング2014」と題して、いつものように、弊社木村と掛け合い漫談でお送りしました。

今回はブラウザなどのバグの他にレスポンシブWebデザインのトラブルシューティングの内容をお送りしました。

いくつか質問をいただいたので解答いたします。

マルチデバイス対応 = レスポンシブということでみなさん話されていたと思うのですが、その他(UserAgentきりかえ)はもうやめるべきなのでしょうか?

レスポンシブWebデザインは万能ではありません。サイトの要件によってはPCサイトとSPサイトを別HTMLで作ったほうが良いケースもありますので、事前にどちらが適しているか精査する必要があります。

PC切り替えボタンはcookieで読み込むCSSを制御する方法もありますよね。

レスポンシブWebデザインの場合は読み込むCSSを制御する方法はあまり取られませんが、要件によってはそのように行なったほうがユーザー満足度が高くなるケースもあるかと思います。

セミナー中で紹介した以外のいくつかの切り替えのスクリプトを紹介します。

http://nextat.co.jp/staff/archives/33
http://katoshun.com/blog/switch-screen.html
http://grantest.jp/blog/2014/05/02/jquery%E3%...

要件に合わせて適したものをチョイスしてください。

「:hover状態」の対応は、タッチイベントを持つWin7以上のPCブラウザでは対応すべき?

これは厄介な問題なのですが、タッチデバイスがついたWindowsのIEではtouchイベントではなくpointerイベントが実装されています(ただしmouseイベントも動作します)。また、タッチデバイスがついたWindowsにインストールしたGoogle Chromeではタッチで操作した際にtouchイベントがマウスで操作した際にはmouseイベントが発火する挙動となっており、セミナー中で紹介したコードではGoogle Chromeのmouseイベントを拾うことができません。

$("a").on(window.ontouchstart===null?"touchstart":"mouseenter",function(){
	$(this).addClass("hover");
}).on(window.ontouchend===null?"touchend":"mouseleave",function(){
	var self = this;
	setTimeout(function(){
		$(self).removeClass("hover");
	},100);
});

これは以下のように直していただくと動作します。ただし端末によってはtouchイベントとmouseイベントの両方が走ってしまうケースもありますので注意が必要です。(hover処理程度でしたら両方走っても問題無いです、またmouseイベントは実際にイベントが発火してから実行まで300msのウェイトがあるので400msたってから終了処理を指定しています)

$("a").on("touchstart mouseenter",function(){
	$(this).addClass("hover");
}).on("touchend mouseleave",function(){
	var self = this;
	setTimeout(function(){
		$(self).removeClass("hover");
	},400);
});

さまざまな環境に考慮しようとするとかなりややこしくなるので、hover擬似クラスの挙動で妥協するというのもひとつの手かもしれません。

マルチデバイス対応では日々新しい端末やOSが登場しており、これまで当然のように利用できたことが利用できなくなることがあります。日々、情報をウォッチしておく必要があります。

これからも一緒に終わらない戦いに挑んでいきましょう!

最後になりましたが、参加された皆様、長時間おつかれさまでした&ありがとうございました。

スポンサードリンク

«Re:フリーランスの心得(初期編)「フリーランスは決してカッコいい働き方ではないし、自由でもない」 | メイン | 「やさしくはじめるWebデザイナーのためのjQueryの学校」3刷»