Coding with jQuery
徳田 和規(とくだ・かずのり)
マインドフリー株式会社
ディレクター
5509運営
.coder(勉強会)やってる
いまさらきけないjQueryまとめ
jQueryが担う分野
javascriptでできることはもちろんできるが…
- クロスブラウザ:実装の違いを簡単に吸収
ウツなコーダーも元気に出社☆
- 最小限のコードでいろいろできる ex.スライドダウン→わずか1行でOK
#PPT右上にデモリンクがあるのがいい
自分好みのUIを作ってみよう
JavaScriptはユーザにプラスに働くとは限らない ※注意
なんのための実装?
- ユーザビリティをプラス(便利にする)
- 動的な書き換えで一歩踏み込んだ情報提供
- ユーザの利益を第一に考える
- JSOFF環境にやさしく
- でしゃばらない
- 後方互換性
ex1.iPhone検索ボックスのクエリ削除ボタンみたいなもの
- 仕様を考える
- フォームに入力したら×ボタンが表示される
- ×ボタンを押したら、文字を消す
- HTMLを用意する
※元のHTML以外はjQueryで追加する ;でしゃばらない
- 動作の追加:クリックしたら消える
- INPUTが空なら表示しない
- 一文字以上表示されたらボタン表示
- ボタンを押されたら、文字をクリア
ライブコーディング(省略)
Case2:セレクトボックスの置き換え
セレクトボックスの使いにくさをなんとかしたい
(都道府県一覧が長い!)
jQuerytable →みやすく展開(沖縄のひとがうれしい!)
◇ポイント
「使いにくいなら置き換えてしまえばいい」
- Ajaxばりばりサンプル
ex.都道府県:市郡:詳細住所の置き換え 「ZAQ」
ページ遷移することなる動的レスポンスが可能
クロスドメイン上の制約
TwitterAPIを利用
- TwitterアカウントにHoverするとつぶやきがフロートする
- カーソルをあわせたユーザーの情報を取得
- 取得したHTMLをいれる
- もとのHTMLは