読者です 読者をやめる 読者になる 読者になる

プログラマーな日々

プログラマー兼SEです。好きなツール:WorkFlowy、好きな言語:C#、好きなAWSのサービス:EMR。

「第5回 HTML5ビギナーズ」に行ってきた(その3 LT)

イベント jQuery Fiddler jQuery UI jQuery Mobile

f:id:JHashimoto:20140409044240j:plain

5/23に、「第5回 HTML5ビギナーズ」に行ってきたので、3回に分けて勉強会の内容を紹介します。

第5回 HTML5ビギナーズ(jQueryをやります!) : ATND
今回は普段から「jQuery」を教えてる方が登壇します!!ハードルを低めにした「基本編」とちょっと背伸びした「応用編」。そしてLTは様々なバリエーションの内容が登場します! ...

 

「jQueryビギナーズ」と題して、jQueryをテーマにしたセッションが開催されました。

今回は3回目です。最後のセッションはLTでした。

ビギナーがUNIQLOCKもどきを作ってみた(by HTML5ビギナーズ 尾崎太祐さん)

本家UNIQLOCK

UNIQLOCK

 
  • デジタル時計が一定のタイミングで切り替わり、動画が流れる

作ったUNIQLOCKもどきのデモ

  • UNIQLOCKの動画の代わりに料理の画像が表示される

使ったもの

  • jQuery
  • jQuery UI

jQuery UI

  • jQueryのhide/showメソッドは隠したり、表示したりするだけ
  • jQuery UIのhide/showメソッドのSlideエフェクトを使う
    • オレンジ色の領域が上方向に消えていき、白の背景になる実装ができる

ビギナーの楽しみ方

  • 自分がわくわくするものを作る
  • 探そう。答えはある
  • 試行錯誤は時間のムダではない
  • 再燃焼させたいときは勉強会へ

セッション資料

ビギナーがUNIQLOCKもどきを作ってみた

Fiddlerでモジュール入れ替えテストを手軽に(by Microsoft MVP 村地彰さん)

ライブラリの更新

  • 新しいバージョンを使いたい
    • 稼働中サービスの互換性が心配
      • 差し替えテストをしよう!

差し替えテスト

  • 全部のソースを確認してライブラリの指定箇所を書き換える必要がある

そこでFiddlerのAutoResponder

  • サーバーからのレスポンスを作成したルールに基づいて自動的に置き換える
  • 古いバージョンのライブラリへのリクエストに、新しいバージョンのライブラリを変えすように構成できる
    • 稼働中のサーバーを一切変更することなく、クライアントの操作だけでライブラリを置き換えることができる
  • 画像の置き換えも可能
  • HTMLそのものを置き換えることも可能

デモ

  • 読み込んでいるjQueryのバージョンを表示するサイトを用意
    • ブラウザのキャッシュを消しておく必要があるので注意
  • Rule Editor
    • 読み込んでいるjQueryのファイル名を指定
    • 新しいバージョンのjQueryを置き換えるファイルとして指定
      • 置き換えるファイルは事前にローカルに用意しておく
    • ソースを一切書き換えずに、指定したバージョンのjQueryを読み込ませることができた!
    • ルールの書き方次第では、ランダムに画像を差し替えたりもできる

セッション資料

Fiddler でモジュール入れ替えテストを手軽に

jQuery ~使う時に少しだけ気をつけてほしいこと~(by アンドロイダー 増子良太さん)

jQueryでできること

  • クロスブラウザ対応
  • セレクタが超強力
  • DOMの操作がすごく楽

そんなjQueryだからこそ

  • 可読性、パフォーマンスに気をつけないといけない

セレクタを複雑化させない

  • 必要であればHTML要素にIDを付けてしまえば、セレクタを単純化できる
  • IDはHTML内に複数出現しないので

セレクタは以下の上から順に速い(jQuery内部はJavaScriptの処理だから)

  1. ID
  2. タイプ
  3. Class
  4. 属性
  5. jQuery拡張セレクタ

同じDOMに複数回探索しない

  • 変数にキャッシュするようにする

読みやすさ

  • 例えばCSSを変更するケース
    • 複数のCSS変更はCSSの定義そのもののとして読めるように書く(メソッドチェーンしない)

まとめ

  • とにかく作ってみよう
  • 動かなきゃ意味がない
  • まずは動くもの、それから少しずつ意識すればよい
  • 家に帰ったらまずやってみよう

セッション資料

jQueryで気をつけてほしいこと

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が重複しないことが重要

セッション資料

jQueryMobileで楽々スマホサイト制作

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ビギナーズ

関連エントリー

その1

「第5回 HTML5ビギナーズ」に行ってきた(その1「jQuery基礎」by 山崎大助さん) - プログラマーな日々

その2

「第5回 HTML5ビギナーズ」に行ってきた(その2「jQuery応用」by 杉山彰啓さん) - プログラマーな日々

レポート記事

「第5回 HTML5ビギナーズ ~jQueryビギナーズ」開催報告:レポート|gihyo.jp … 技術評論社