jQuery Mobile とは

jQuery Mobileとは、iPhone、Android、Windows Phone、BlackBerry などのスマートフォンに対応したサイト構築するためのフレームワーク。jQuery のプラグインとして動作します。

■ jQuery Mobileのダウンロードページ

jQuery Mobile

Dreamweaber CS 5.5 の jQuery Mobile 作成手順

【ファイル ＞ 新規】で、「サンプル作成」から「モバイルスターター」 → 「jQuery Mobile (CDN)」を選択すると、

4ページ分のテンプレートが自動で出来上がる。

ウィンドウサイズもいくつか用意されており、「320 × 480」を選択すると iPhone のサイズに。

デザインビューを「ライブビュー」に切り替えると、実際の画面を確認できる。

基本のテンプレートが用意されているので、こんなぐらいのサイトなら、あっちゅーまに出来てしまいます。

jQuery Mobile のカスタマイズ

現時点（2011.06.27現在）で、jQuery Mobile のBETA版がでているので、最新版を読み込むように変更（デフォルトでは前のバージョンの Alpha 版を読み込むように設定されている）。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

<h1>のタイトルを書き換えると、ページのタイトルが変わります。

<div data-role="header">
	<h1>KYS-LAB</h1>
</div>

Back ボタンを追加したい場合は、下記を header に追加（Alpha 版ではツールバーにデフォルト表示）。

    <a href="#page" data-rel="back">Back</a>

つづいて、各ページのコンテンツ部分。2ページ目に弊サイトブログの feed を読み込ませました（ Google AJAX Feed API を利用。参考記事： Google Feed APIで3分マッシュアップ）。

ajaxのリンク先が php の場合、うまく認識してくれなかったので、通常のページ移動をさせるために、a タグの属性に「rel="external"」を追加しました。

3、4ページ目はそれぞれプロフィールと問い合わせ先を追加しました。スクリプトを書かずにマークアップだけで構築できるのはとても便利。

jQuery Mobile サンプルページ

KYS-LAB（スマホバージョン）

凝ったスマホサイトやアプリを作るわけじゃなければ十分かも。今後、スマホをターゲットにしたサイトやアプリは必須だと思うので、その他の機能もちょっとずつ覚えよっと。

参考サイト

jQuery Mobile [基礎編]

jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル - かちびと.net

[JS]jQuery Mobileでスマフォ対応ページをはじめて作成する際に役立つコード集とつまづきやすいポイント | コリス

jQuery Mobile Beta1へのアップデートについてまとめたメモ ::ハブろぐ

↓このぐらいカスタマイズできたらスゴイっすね。
jQuery Mobile Examples - JQM Gallery