jQuery Mobileを使用するときの注意点。はじめて使う時は、まずはクイック・スタートガイドを試そう。

スマートフォンデバイスに対応したサイトを作るのに適したｊQuery Mobile。非常に使いやすくていいですよね。

最近はレスポンシブ・ウェブデザインというものが流行っていることもあり、スマートフォン対応やタブレット端末への対応はだいぶ進んできており、モバイルファーストの時代もアプリケーション側はすでに進んでいます。TwitterとかFacebookはスマートフォンで見る方が多いのではないでしょうか？

ただ、まだフューチャーフォンのユーザーが多くいるのをお忘れなく。スマートフォンユーザーの方がまだ少ないんですよ？より多くの方に情報を発信したいのなら、フューチャーフォン対応もしっかりしましょう。

jQuery Mobileですが、自分もいくつか引っかかったポイントがあるので備忘録的に。

日本語ドキュメント（非公式）があるので、そちらを中心にピックアップします。英語がスラスラ読める方は本家をぜひ！

初めての方向け

まずははじめて触る方向けに、紹介とクイック・スタートガイドがあります。

1. 紹介
2. クイック・スタートガイド

クイック・スタートガイドは、サンプルものっています。ひとまずローカルにひとつHTMLファイルを作って、そこにコピペすればすぐに動作します。クライアントサイドで動くスクリプトはすぐに試せるのがいいですね。難しくない。

まず最初にやること

もちろん、設計が最初になります。しかし、設計はそれぞれのサイトで異なるので、自分で考えて作ることが必要です。

設計はいろんなものがあって、大まかに以下のようなものになるかと思います。

1. 表示設計（ユーザー・インターフェース）
2. 機能設計
3. 動作設計

Webデザイナーさんが手を動かすのは、表示設計と動作設計ですかね。機能設計までできると良いWebデザイナーさんだと思います。それらの手助けになるのは、以下の項目です。

1. data属性リファレンス
2. グローバル設定
3. イベント
4. メソッドとプロパティ

data属性は特に重要です。これがいまいちピンとこなかったわけですが、表示する各要素に対して「初期状態をどうしますか？」を設定する、ということですかね。jQuery Mobileの機能を使いたい場合は設定してくことで使用することができます。

あとは、コンポーネントを参考にしながら組み立てていけば、jQuery Mobileを使ったリッチなサイトが作れると思います。表示だけなら、あっという間に終わってしまうと思いますよ。今はテーマローラーというものもあって、ドラッグアンドドロップで色まで設定できる優れもの。ファイルをダウンロードしてサイトに設置すれば、本当にあっという間にサイトができてしまいます。

• テーマローラーの説明はこちら

今の最新バージョンは、1.3.1．興味のある方は、jQuery Mobileのサイトへ。