Dreamweaver CS6とFireworks CS6を使用すれば、jQuery Mobileを利用したスマートフォン/タブレット向けサイトを素早くデザインすることができます。本記事では、CS6の新機能を使い、FireworksによるjQuery Mobileテーマの作成から、DreamweaverによるjQuery Mobileサイト制作までのフローを解説します。

図1は、今回作成するサンプルページです。イタリアンレストランのスマートフォン向けサイトをイメージしています。

Fireworks CS6を利用したjQuery Mobileのテーマの作成

Fireworks CS6には、jQuery Mobileのテーマを作成する機能が追加されました。CS5/CS5.1向けに同様の機能を提供する拡張機能「Fireworks CSS3 Mobile Pack」がAdobe Labsにて提供されていますが、CS6では日本語化されているなどの違いがあります。

アイコンの変更

早速、jQuery Mobileのテーマを作成してみましょう。メニューから[コマンド]→[jQuery Mobileテーマ]→[新規テーマを作成]を選択すると、jQuery Mobileテーマ作成用の画面が表示されます。jQuery Mobileのデフォルトテーマには5つのスウォッチ(カラーバリエーションなもの)が用意されており、Fireworksでも初期状態では5つのスウォッチがページとして定義されています。さらに、スウォッチで共通に利用するアイコンなどを設定するページ、テーマ作成方法が書かれた説明ページの計7ページから構成されています。

※jQuery Mobileでは、オンラインでテーマを作成できる「ThemeRoller For jQuery Mobile」というサービスが提供しています。なお、このサービスではアイコンを変更することができませんが、Fireworksではアイコンも変更することが可能です。

「グローバルアセットおよびスタイル」ページを選択し、アイコンを変更します。ここでは右矢印アイコンをフォークのアイコンにします。アイコンを編集するときは、配置する場所に注意してください。アイコンはグレーの枠線が示す領域からはみ出ないようにし、中央に配置します。そして、アイコンの背景の透明度を、下地が見える程度に透明にします。標準解像度用と高解像度用、両方とも変更します。

スウォッチの変更

次にスウォッチの色を変更します。ここでは2種類のスウォッチを作成し、状況に応じて使い分けます。aとbのページだけを残し、他のスウォッチのページは削除します。このように必要ないスウォッチを削除すれば、その分だけ書き出されるCSSファイルのサイズが小さくなります。

aとbのページを開き、カラーを変更していきます。aはグリーン系、bはブラウン系にしました(ここまでのサンプルが「jqmCS6.fw.png」です)。なお、テーマはCSSで表現されているため、テクスチャなどは使用できないことに注意してください。

プレビューと書き出し

変更後はファイルを保存し、メニューから[ウィンドウ]→[エクステンション]→[jQuery Mobileテーマのアプリ内プレビュー]を選択します。プレビューパネルが表示され、作成したテーマをjQuery Mobile上で利用したときの状態を見ることができます。このパネルを開いたままで修正作業もでき、[パネルの更新]ボタンを押せば、すぐに修正が反映されます。

表示を確認したら、テーマを書き出します。メニューから[コマンド]→[jQuery Mobileテーマ]→[テーマを書き出し]を選択し、任意のフォルダーに書き出します。任意のCSSファイル名を入力すれば(ここでは「jqm.css」)、テーマに必要なファイルが書き出されます。ルートフォルダーには、以下のファイルが書き出されます。

ファイル名 説明
icons-18-black.css 標準解像度黒色アイコン用CSS
icons-18-white.css 標準解像度白色アイコン用CSS
icons-36-black.css 高解像度黒色アイコン用CSS
icons-36-white.css 高解像度白色アイコン用CSS
名付けたCSSファイル名.css(ここではjqm.css) 作成テーマ用CSS

imagesフォルダーには、以下のファイルが書き出されます。

ファイル名 説明
ajax-loader.png Ajax画面遷移時表示用ローディングアイコン
icons-18-black.png 標準解像度黒色アイコン
icons-18-white.png 標準解像度白色アイコン
icons-36-black.png 高解像度黒色アイコン
icons-36-white.png 高解像度白色アイコン

Dreamweaver CS6を利用したjQuery Mobileサイトの作成

サイト定義とページの作成

次にDreamweaver CS6を使ってjQuery Mobileサイトを作成していきましょう。先ほどテーマを書き出したフォルダーに対してサイトを定義し、メニューから[ファイル]→[新規]を選択します。このとき、ドキュメントタイプは[HTML5]を選択しておきます。

続いて、メニューから[挿入]→[jQuery Mobile]→[ページ]を選択し、[jQuery Mobileファイル]ダイアログを開きます。[リンクの種類]ではCDNかローカルにあるファイルを利用するかを選択できます。[CSSのタイプ]では[分割(構造とテーマ)]を選択し、[テーマ]の横にあるフォルダーアイコンから先ほど書き出したCSSファイル(ここでは「jqm.css」)を選択します。

[jQuery Mobileページ]ダイアログでは、任意のIDを入力し、[OK]ボタンを選択します。

一度ファイルを保存し、ライブビューに切り替えます。この段階で、aとして設定したスウォッチが適用されていることが確認できます。

次にCSSの読み込み部分を以下のように修正します。

【変更前】 <link href="jquery-mobile/jqm.css" rel="stylesheet" type="text/css"> 【変更後】 <link href="jqm.css" rel="stylesheet" type="text/css">

jQuery Mobileではデフォルトでviewportの設定がないため、viewportの設定を付け加えます。ここでは、以下の記述を追加しました。

<meta name="viewport" content="width=device-width, initial-scale=1">

コンテンツの作成

メニュー部分を作ります。コンテンツ部分を選択し、メニューから[挿入]→[jQuery Mobile]→[リスト表示]を選択します。ここでは少し内側にメニューを配置するために、[インセット]にチェックを入れて[OK]ボタンを押します。

挿入したリスト表示にスウォッチを適用します。メニューから[ウィンドウ]→[jQuery Mobile スウォッチ]を選択します。これはCS6から新しく搭載された機能です。ライブビューで閲覧しながら、[jQuery Mobile スウォッチ]パネルに表示されているスウォッチを選択するだけで簡単にスウォッチを適用することができます。リスト表示をクリックし、[リストのテーマ]からbのスウォッチを選択します。

後はコンテンツを作り込んでいきます。画像を挿入する際は、iPhoneなどのRatinaディスプレイに対応するために、挿入したいサイズの倍のサイズで作成し、挿入してからプロパテイインスペクタでwidthとheightの値を半分にしておきます。CS6では、縦横比を維持してくれるようになったので、片側だけ指定すれば、自動的に縮小した数を補ってくれるようになっています。

デザインのプレビュー

コンテンツ作成が終わったら、プレビューを行います(ここまでのサンプルが「jqmsampleフォルダー」です)。[マルチスクリーン]をクリックし、サブメニューからプレビューしたいデバイスのサイズを選択すれば、そのサイズに合わせた大きさで表示されるようになります。

一度に様々なデバイスでの見え方を比較したい場合は、[マルチスクリーンプレビュー]を選択するとよいでしょう。

以上で、jQuery Mobileのテーマ作成からサイト制作までのフローについての解説は終了です。サイト制作に進んだ段階で、テーマのデザインを変更したくなることもあるでしょう。その場合は、Fireworksでテーマを修正し、書き出すCSSファイル名を同じにして同一フォルダーに書き出し、CSSファイルを上書きすれば変更されます。

既存のjQuery Mobileサイトにカスタムテーマを適用させる際の注意点

ここでは、まずFireworksでカスタムテーマを作成し、書き出したデータをもとに、Dreamweaverで新規jQuery Mobileサイトを作成しました。既に作成しているjQuery Mobileサイトに対してカスタムテーマを適用させることもあるでしょう。その場合は注意が必要です。

配布されているjQuery Mobileフレームワークのデータの中には、(バージョン1.0の場合)大きくjquery.mobile-1.0.min.cssとjquery.mobile.structure-1.0.min.cssの2種類のCSSファイルが入っています。この両者の違いは、structure版は構造に関するCSSのみで、テーマに関するCSSは含まれていないという点です。そのためjQuery MobileサイトのCSSファイルには、通常の場合はjquery.mobile-1.0.min.cssを、カスタムテーマを利用する場合はjquery.mobile.structure-1.0.min.css(とカスタムテーマのCSSファイル)を用います。jquery.mobile-1.0.min.cssとカスタムテーマのCSSファイルを合わせて利用することもできますが、不要なテーマデータも含まれる、つまり余計なファイルサイズの増加に繋がるためおすすめしません。

既に作成しているjQuery Mobileサイトに対してカスタムテーマを適用させる場合、読み込むCSSファイルをjquery.mobile-1.0.min.cssからjquery.mobile.structure-1.0.min.cssに変更することをおすすめします。CDNで参照している場合は、ファイル名を変更するだけでいいでしょう。ローカルで参照している場合は、ファイル名を変更するとともに、jquery.mobile.structure-1.0.min.cssが該当パスに存在するか確認しましょう。特にDreamweaverで作成していた場合には、jquery.mobile.structure-1.0.min.cssがコピーされないため、jQuery Mobileサイトから入手する必要があります。

おわりに

簡単にFireworks CS6とDreamweaver CS6を利用したjQuery Mobileサイトの作り方を紹介しました。Dreamweaver CS6に搭載された[jQuery Mobileスウォッチ]パネルを利用すると、高速なテーマ適用が可能となります。ぜひ、独自のテーマを作成して、開発に生かしていただけると幸いです。