Miyakawa Blog

ウェブディレクターが日々のことを綴るブログ

jQuery Mobileを学ぶ

jQuery Mobileを使ってスマートフォンサイトの構築の仕事をここ2、3ヶ月の間に3件こなしてます。

そろそろ4件目、5件目に入ろうかという勢いです。

自分用の覚書としていくつかまとめておく。

よく参考にするサイト

jQuery Mobile
jQuery Mobileのライブラリ本体をダウンロードするサイト。 足を向けて眠れません(英語サイト)。
ホーム - jQuery Mobile 1.0a4.1 日本語リファレンス
やっぱり外せない日本語リファレンス。 コードの書き方にクセがあって使いにくいこともありますが、日本語でまとめて頂けているのでよく見ます。 このページのお陰でだいぶスマートフォンサイトをスムーズに作れるようになりました。
ASCII.jp:西畑一馬のjQuery Mobileデザイン入門
尊敬するto-Rの西畑さんのコラムです。必要な情報が目的別に整理されていて、jQuery Mobileの概要を教科書に学べる記事です。 今年の5月から開始されたコラムのようですが、先月末で第4回まで進んでいます。これからが楽しみです。 初心者の方はこのコラムから始めると学びやすいかも。

やっぱり実機はいるよね

iPhoneandroidエミュレータはありますが、実機に勝る検証環境はありません。 iPhoneandroidも用意が必要。

androidについてはメーカによってブラウザの独自機能があるため、ユーザ数の多い端末で用意すると間違いないでしょう、とto-Rの西畑さんにセミナーで教わりました。

いまならXperiaやGALAXYがいいんでしょうね。

jQuery Mobileのダウンロード準備するもの

HTML文の文字コードは原則、UTF-8

jQuery Mobileからダウンロードするライブラリーは次の3つです。

  1. http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css
  2. http://code.jquery.com/jquery-1.6.1.min.js
  3. http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js

ダウンロードは次のページから。 http://jquerymobile.com/download/

ライブラリの種類

例えば、ダウンロードページには似たようなファイル名で2つ設置されている。

Uncompressed: jquery-mobile-1.0b1.js (useful for debugging) Minified and Gzipped: jquery-mobile-1.0b1.min.js (20KB, ready to deploy) ▼画面キャプチャはこちらをクリック jQuery Mobile

拡張子jsの前に「min」が書かれていない方はデバックおよび、コード書き換え様のファイル。 拡張子jsの前に「min」が書かれている方が運用するタイプ。

minがないものはデバッグしやすいようにコードフォーマットが整えられている。 テキストエディタで開くと、minの書かれている方はタブ、スペース、改行がない。