#1テーマ 「ドロワー」 サンプルコード

[konitter]

@w3gjp さんにサンプルコードを用意してもらいました。
https://w3g.jp/sample/jsgirl/drawer

これをベースにみんなもコードを書いてみてほしいです。
ファイルはどこかにアップして、URL含めここに投稿してください。

難易度の調整などを議論していきましょう。

[konitter]

ドロワー作ってみました。IE？なにそれ？
あんまりオリジナル感を出すと比較しづらいので、 @w3gjp さんのやつにだいぶ寄せてます。
メニューボタンにはこだわりました。（え

https://dl.dropboxusercontent.com/u/851158/jsgirls/drawer/index.html

作るうえでのポイントとか適当まとめ。

• ドロワーメニューやメニューボタンとかをを最初から用意しとくか、JSで挿入するか
  • それぞれかもしれないけど、個人的には最初から入っててもええんちゃう系
• イベントの発火に、タッチデバイス用にtouch系を使うかどうか
  • touch系使えば反応が良いが初心者には難易度高い？（約300ms問題のアレ）
  • Win8以降のことを考慮しだすとハマる（IE10とChromeとかのtouch系の仕様の違い）
• スライドアニメーションをJSでやるか、CSSでやるか
  • タッチデバイスのことを考えればCSS一択
  • ハードウェアアクセラレーション周りの話も？

参加者のレベル感が不透明なのであれだけど、ある程度のHTMLとCSSは用意してあげた方がいいのかなと思いました。

[matsuoshi]

こちらにもURL貼っておきます
http://matsuoshi.github.io/jsg-drawer/

[kamiyam]

@konitter さん drawer の配布ベースの作成お願いしても大丈夫ですか???

hanson01-drawer

[konitter]

ハンズオン用のファイルセットです。

https://github.com/jsgirls-osaka/handson01-drawer

ドロワーとは

• ドロワーは、スマホサイトやアプリなどでよく見られるUI
• 画面の狭いデバイスにおいて、グローバルナビなどのメニューを画面の右や左に一時的に隠しておき、メインのコンテンツを少しでも多くファーストビューに収まるようにするもの
• ドロワーの開閉には、三本線のアイコンのボタンが多く用いられ、俗に「ハンバーガーアイコン」や「ハンバーガーメニュー」などと呼ばれる
• ハンバーガーアイコンは今でこそ多くのスマホサイトやアプリで使われているが、リテラシーの低いユーザーにとっては、それがなんのためのアイコンであるか伝わりにくい側面があり、アイコンの横に「メニュー」などのテキストを添えたりなど工夫が必要な場合がある

ハンズオン仕様

• 今回はレスポンシブWebデザインの想定で、任意のウィンドウサイズ（ブレークポイントという）でグローバルナビとメニューボタンの表示・非表示を切り替える
• メニューボタンを押したときにドロワーメニューが右から開くように実装してみる
• メニューボタンのイベントは、clickでも良いが、touchstartとか使ったほうがモッサリしない
• スライドアニメーションは、JSでもCSSでもOKだが、CSSでやったほうがスムーズ（ハードウェアアクセラレーション）
• 最低限PCで動かせて欲しいが、できればスマホでも動くように実装・確認してほしい