Dreamweaber CS 5.5 の「jQuery Mobile」対応機能

June 28, 2011
jqm-main.gif

5月下旬に発売された「Dreamweaber CS 5.5」がスマートフォン対応機能が強化されたとのことなので、「jQuery Mobile」を少し触ってみました。

jQuery Mobile とは

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

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

jQuery Mobile

Dreamweaber CS 5.5 の jQuery Mobile 作成手順

新規作成

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

4ページ分のテンプレート

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>
ブログのfeed読み込み

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

STAFF_01 [KYS-LAB]: ページが見つかりません。