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の書かれている方はタブ、スペース、改行がない。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です