JS Girls Osaka #1 サンプルコード

ドロワー

メニューボタンのクリックでの開閉
スライドアニメーションをjQueryのanimate()で実現
positionプロパティのleft/rightの値を操作
スライドアニメーションはIE8でも動作

パターン2

demo

メニューボタンのクリックでの開閉
スライドアニメーションをCSSのtransitionプロパティで実現
positionプロパティのleft/rightの値を操作
スライドアニメーションはIE10以上で動作、一部ブラウザではtransitionプロパティに-webkit-プレフィックスが必要（参照：Can I use）

パターン3

demo

メニューボタンのクリックでの開閉
スライドアニメーションをCSSのtransitionプロパティで実現
transformプロパティのtranslateXの値を操作
transform: translateZ(0)によりハードウェア・アクセラレーションを有効化しスムーズにアニメーションさせる
スライドアニメーションはIE10以上で動作、一部ブラウザではtransitionプロパティ（参照：Can I use）およびtransformプロパティ（参照：Can I use）に-webkit-プレフィックスが必要

パターン4

demo

パターン3のプラスアルファ版
ドロワーの開閉にタッチイベントを使うことでスマホなどタッチデバイスにおける操作をより快適に
- 300msディレイ問題
  - タッチイベントには、touchstart（画面に指が触れた）touchmove（画面上で指が動いている）touchend（画面から指が離れた）touchcancel（タッチイベントをキャンセル）がある（Appleによる詳細説明）
  - iPhoneやAndroidのwebkitでは、touchendしてからclickイベントが起きるまでに300ms程度の待ち時間がある
  - その待ち時間では、ダブルタップによるズーム（一度画面から指を離してから、もう一度タップされるかどうか）の判定をしている
  - つまりclickイベントだとその待ち時間によってタッチデバイスではモッサリ（反応が鈍い）ように感じるため、タッチイベント（touchstartかtouchend）を使う方がよい
  - Chrome for Android 32、Firefox for Android 11ではviewportの設定で300msの遅延を防げるようになった
    - 【参考】 Chrome Developer Teamから学ぶサイトパフォーマンス
    - このため、GoogleのWeb Starter Kitのドロワーの開閉にはclickイベントのみの設定になっている
- touchstartとtouchendどちらがいいのか問題
  - コードではtouchstartでイベントが起きるようにしているが、それだとその要素がある場所（より画面の**に近い位置など）によっては、ただ画面をスクロールしたいだけなのに、指を置いた場所にtouchstartでイベントが起きる要素があると、スクロールできずにイベントが発火してしまい、ユーザーの意図した操作ができなくなってしまう
  - 一方touchendにした場合、要素の外から指を動かしてきて、その要素の上で指を離すとtouchendイベントが発火してしまう
  - 逆に言うと、touchendだともし間違ってタップしてしまったとしても、指をそのまま画面の外に出してしまえばキャンセルできるという利点があったりする
  - その辺りを厳密に処理しようと思うと、touchstartを検知してからtouchmoveで指を動かしたかどうかを確認し、動かしてなければtouchendとしてそれを「タップした」と判定する必要がある
  - その処理を自前で書くのもいいが、プラグインを使う手もある（ftlabs/fastclick）
- Win8対応めんどい問題
  - Win8は、画面のタッチもでき、マウスでの操作もできるということを前提に設計されたOS
  - Win8上で動くChromeやFirefoxにはタッチイベントが実装されているため、このパターン4のコードだとマウスで操作してもclickイベントが使われず、何も反応しないことになる（mousedown/mousemove/mouseupで設定したイベントも同様）
  - 一方、Win8上のIE10は、画面のタッチを内部的にマウスイベントに置き換えて処理するため、タッチでもマウスでもパターン4のコードで動作する
  - Win8のIE10以降では、Microsoft独自仕様のPointer Eventsが使える
  - このPointer Eventsによって、マルチタッチに対応したり、スタイラスペンのタッチに反応したり、筆圧やペンの傾きを検出できたりする
    - 【参考】 Windows8 + IE10 でCanvasお絵描きツールを - Intelligent Technology's Technical Blog
メニューボタンだけでなくコンテンツ部分のタップ/クリックでもドロワーを閉じるようにすることでより使いやすく
- 今回のHTMLでは、メニューボタンがコンテンツ#contentの中に含まれているので、メニューボタンのイベントが#contentに伝播（バブリング）して#contentに設定したイベントが発火してしまう
- これをイベントバブリングという
  - 【参考】 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について
- これを防ぐために、メニューボタンのイベント設定でevent.stopPropagation()しておき、イベントがバブリングしないようにする
- じゃあ何でもかんでもイベントバブリングを止めておけばよいかというとそうでもなく、イベントデリゲートも止まってしまうという弊害もあるので注意が必要
  - 【参考】 jQueryのイベントハンドラでreturn falseするとイベントのバブリングが止まる
  - 【参考】 jQuery の on() と off() を理解する - tacamy.blog

パターン5

demo

jQueryを使わずに書いたもの

konitter / jsgirls-sample

JS Girls Osaka #1 サンプルコード

ドロワー

ドロワーとは

コーディングパターン

パターン1

パターン2

パターン3

パターン4

パターン5

About

Languages