5/23に、「第５回 HTML5ビギナーズ」に行ってきたので、３回に分けて勉強会の内容を紹介します。
第５回 HTML5ビギナーズ（jQueryをやります！） : ATND
今回は普段から「jQuery」を教えてる方が登壇します！！ハードルを低めにした「基本編」とちょっと背伸びした「応用編」。そしてLTは様々なバリエーションの内容が登場します！ ...
「jQueryビギナーズ」と題して、jQueryをテーマにしたセッションが開催されました。
今回は３回目です。最後のセッションはLTでした。
ビギナーがUNIQLOCKもどきを作ってみた（by HTML5ビギナーズ 尾崎太祐さん）
本家UNIQLOCK
- デジタル時計が一定のタイミングで切り替わり、動画が流れる
作ったUNIQLOCKもどきのデモ
- UNIQLOCKの動画の代わりに料理の画像が表示される
使ったもの
- jQuery
- jQuery UI
jQuery UI
- jQueryのhide/showメソッドは隠したり、表示したりするだけ
- jQuery UIのhide/showメソッドのSlideエフェクトを使う
- オレンジ色の領域が上方向に消えていき、白の背景になる実装ができる
ビギナーの楽しみ方
- 自分がわくわくするものを作る
- 探そう。答えはある
- 試行錯誤は時間のムダではない
- 再燃焼させたいときは勉強会へ
セッション資料
Fiddlerでモジュール入れ替えテストを手軽に（by Microsoft MVP 村地彰さん）
ライブラリの更新
- 新しいバージョンを使いたい
- 稼働中サービスの互換性が心配
- 差し替えテストをしよう！
差し替えテスト
- 全部のソースを確認してライブラリの指定箇所を書き換える必要がある
そこでFiddlerのAutoResponder
- サーバーからのレスポンスを作成したルールに基づいて自動的に置き換える
- 古いバージョンのライブラリへのリクエストに、新しいバージョンのライブラリを変えすように構成できる
- 稼働中のサーバーを一切変更することなく、クライアントの操作だけでライブラリを置き換えることができる
- 画像の置き換えも可能
- HTMLそのものを置き換えることも可能
デモ
- 読み込んでいるjQueryのバージョンを表示するサイトを用意
- ブラウザのキャッシュを消しておく必要があるので注意
- Rule Editor
- 読み込んでいるjQueryのファイル名を指定
- 新しいバージョンのjQueryを置き換えるファイルとして指定
- 置き換えるファイルは事前にローカルに用意しておく
- ソースを一切書き換えずに、指定したバージョンのjQueryを読み込ませることができた！
- ルールの書き方次第では、ランダムに画像を差し替えたりもできる
セッション資料
jQuery ～使う時に少しだけ気をつけてほしいこと～（by アンドロイダー 増子良太さん）
jQueryでできること
- クロスブラウザ対応
- セレクタが超強力
- DOMの操作がすごく楽
そんなjQueryだからこそ
- 可読性、パフォーマンスに気をつけないといけない
セレクタを複雑化させない
- 必要であればHTML要素にIDを付けてしまえば、セレクタを単純化できる
- IDはHTML内に複数出現しないので
セレクタは以下の上から順に速い（jQuery内部はJavaScriptの処理だから）
- ID
- タイプ
- Class
- 属性
- jQuery拡張セレクタ
同じDOMに複数回探索しない
- 変数にキャッシュするようにする
読みやすさ
- 例えばCSSを変更するケース
- 複数のCSS変更はCSSの定義そのもののとして読めるように書く（メソッドチェーンしない）
まとめ
- とにかく作ってみよう
- 動かなきゃ意味がない
- まずは動くもの、それから少しずつ意識すればよい
- 家に帰ったらまずやってみよう
セッション資料
jQueryMobileで楽々スマホサイト制作（by Hanoi Advanced Lab 小林加奈子さん）
jQuery Mobile
- jQueryのインポートが必要
- JavaScriptライブラリ
- モバイルフレームワーク
スマホとPCで使いやすさの設計は違いがある
- それを楽にするのがjQuery Mobile
リストビューを配置
- 絞り込み用の検索ボックスを配置する
- data-filter="true"
- 数値をいい感じに表示する
- class="ui-li-count"
イベントを検知
- スマフォ用のイベントが豊富に用意されている
- swipe,tap,etc
- デモ
- scrollstart,scrollstopを使って、スクロールの開始と終了を検知する
ページ遷移
- リンクはデフォルトでAjaxで画面遷移（無効化も可能）
- 遷移先のHTMLを現在のページのDOMに先に取り込んでおくことで実現している
- 複数ページにまたがる場合は、外部リンク先のHTMLでもidが重複しないことが重要
セッション資料
jQuery UI Tabs で効率よくタブ機能を実現しよう！（by Ticklecode 小林由憲さん）
使用頻度の高いタブ
- 切り替えの動き、レスポンシブを考えると面倒
制作を便利にしてくれるツール
Tab tool basics
The above tabs are initialized with this JavaScript one-liner $(".tabs").tabs(".panes > div");. The rest is CSS coding. The core of the tabs is plain and simple. There are no redundant features. ...
JavaScript · Bootstrap
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. ...
Tabs | jQuery UI
A single content area with multiple panels, each associated with a header in a list. ...
jQuery UI TABSのデモ
- ボタンを押す
- 該当のタブがアクティブになる
- 該当箇所にスクロールする
jQuery UI TABS
- ボタンとタブの連携が簡単
theme
- 自分がほしいものと全く同じテーマはないので、近いテーマを選んで、CSSを追加修正するのが速い
tabs()メソッドで、タブを描画
ボタンで指定したタブをアクティブにする
- optionでactiveを指定
- $('セレクタ')tabs("option","active",ボタンを示すIndex)
- Indexは0始まりなので注意
セッション資料
jQuery UI Tabs で効率よくタブ機能を実現しよう！ 14.05.23 HTML5 jQueryビギナーズ
関連エントリー
その１
「第５回 HTML5ビギナーズ」に行ってきた（その１「jQuery基礎」by 山崎大助さん） - プログラマーな日々
その２
「第５回 HTML5ビギナーズ」に行ってきた（その２「jQuery応用」by 杉山彰啓さん） - プログラマーな日々
レポート記事
「第5回 HTML5ビギナーズ ～jQueryビギナーズ」開催報告：レポート｜gihyo.jp … 技術評論社
