このマスターシリーズでは、Dreamweaver CS5.5の新機能の中からモバイル開発機能を中心に解説します。

DreamweaverはCS5.5になり、今までよりも楽にスマートフォン対応サイトを制作できるツールとして進化しています。CS5.5で新たに導入されたのが「jQuery Mobile Widget」という機能です。このjQuery Mobile Widgetを利用することで、jQuery Mobileの知識が無くとも、直感的にスマートフォン対応サイトを作成することができます。本記事では、サンプルサイトを作成しながら、jQuery Mobile Widgetの使い方を解説します。

※jQuery Mobile 1.0beta1を含む以前のバージョンにはクロスサイトスクリプティングの脆弱性があります。そのため、本記事の内容はローカル環境でご利用ください。

jQuery Mobileとは

「jQuery Mobile」は、スマートフォン向けサイトを作成するためのフレームワークです。jQuery Mobileを使えば、iPhoneやAndroidをはじめとした、様々なスマートフォンのブラウザーに最適化されたサイトを手軽に制作できるため、今とても注目されています。

図1 jQuery Mobileのサイト:http://jquerymobile.com/

jQuery Mobileは、JavaScriptを記述することなく、HTMLに特定の属性(HTML5のカスタムデータ属性)やclass属性を追加していくだけで、スマートフォンに最適なUIが表示されるようになっている優れものです。なお、このUIはスマートフォンのブラウザーだけでなく、PCのSafariやChromeなどのWebki系ブラウザーtやFirefoxでも表示されるように設計されています。このjQuery MobileをDreamweaverで簡単に利用できるようにしてくれるのが「jQuery Mobile Widget」です。

jQuery Mobile Widgetとは

スマートフォン対応サイトの作成に入る前に、jQuery Mobile Widgetについて見てみましょう。各Widgetは、メニューの[挿入]→[jQuery Mobile]から選択することができます。

また、[挿入]パネルのプルダウンメニューから[jQuery Mobile]を選ぶとjQuery Mobile Widgetの一覧が表示されるので、ここからも選択することができます。

Dreamweaver CS5.5に用意されているjQuery Mobile Widgetは下記の通りです。

  • ページ
  • リスト表示
  • レイアウトグリッド設定
  • 縮小可能ブロック
  • テキスト入力
  • パスワード入力
  • テキスト領域
  • メニューを選択
  • チェックボックス
  • ラジオボタン
  • ボタン
  • スライダー
  • フリップトグルスイッチ

これらのWidgetは、デザインビューやコードビューで挿入したい位置にカーソルを置いた状態で、メニューや[挿入]パネルから選択するだけで挿入できます。では、このjQuery Mobile Widgetを使ってスマートフォン対応サイトを作成してみましょう。

※サンプルデータ内には、全てのjQuery Mobile Widgetを実装したサンプル(dw55_sample_allwidget.html)も用意しています。実際に触ってみてください。

作成するサンプルについて

今回作成するサンプルは、下図のように4つのページで構成されています。

この4ページを作成しながら、スマートフォン対応サイトの作成方法やjQuery Mobile widgetについて解説していきます。

ステップ1 モバイルスターターで新規ファイルの作成

さて、ここからは実際に作業をしながらスマートフォン対応サイトの作成方法を解説していきます。まずは、スマートフォン対応サイトを作成するためのファイルの準備です。

Dreamweaver CS5.5には、jQuery Mobileを使ったサンプルが用意されており、それを利用することでより簡単にスマートフォン対応サイトを作り始めることができます。新規ドキュメント作成画面の[サンプルから作成]→[モバイルスターター]の中にサンプルが入っているので、スマートフォン対応サイトを作るだけであれば[jQuery Mobile(CDN)]か、[jQuery Mobile(ローカル)]を選択します。

CDNとはコンテンツデリバリネットワークのことで、インターネット上で配信されいてるファイルを直接読み込んで利用できるようになっています。それに対してローカルは、自分のPC内に入っているファイルを利用するようになっています。今回は、この[jQuery Mobile(CDN)]を利用することにします。

作成したドキュメントを開くと、リンク一覧のページを含む4ページのコードが表示されます。それぞれのページには、ヘッダーとフッター、それとコンテンツが入っている状態です。

jQuery MobileはJavaScriptを使ったフレームワークであるため、デザインビューではそのJavaScriptは実行されません。ライブビューで見ると、実際にどのように表示がされるのかを確認することができます。

jQuery Mobileにおけるページ構成

コードビューを見ると気づくと思いますが、1つのファイルの中に4ページ分のコンテンツが入っています。jQuery Mobileのサイトは、PCサイト同様に1ページ1ファイルで作成することも可能ですが、1つのファイル内に複数のページ要素を入れて作成することもできます。

複数のファイルでも、1つのファイルでも、jQuery Mobileにおける「ページ」は「<div data-role="page" id="◯◯">」というブロックによって構成されます。各ブロックにサイト内における固有のid属性を付与することで、そのブロックへリンクでたどることができます。ちなみに、複数のファイルで作成した場合でも、Ajaxを利用してページの要素を取得し、表示しているページの最後にどんどん追加してページの切り替えを行う仕組みとなります。

今回は、モバイルスターターのコードをそのまま利用し、1つのファイル内で全てのページを作成していきます。

テキストの変更

ファイルの用意ができたところで、ダミーコンテンツから実際のコンテンツに変更してきましょう。まずは1ページ目の見出し、各ページへのリンクテキスト、フッターのテキストをそれぞれ変更します。

ライブビューで確認

テキストを変更したら、実際にどのように表示されるのかライブビューで確認してみましょう。

ライブビューを使うことで、実際の表示だけでなく、クリック時のアニメーションやマウスホバー時の動きなどもDreamweaver上で確認することができるので、ブラウザーで都度確認する手間を省くことができます。

ステップ2 「お知らせ」ページの作成

2ページ目では、jQuery Mobile Widgetの[リスト表示]を使って、コンテンツ部分にお知らせの内容を挿入します。

リストの挿入

[リスト表示]を選択すると、ダイアログが表示されます。リストタイプやリストの数などを選択して追加することができます。今回は[インセット]と[テキストの説明]にチェックを入れて挿入します。インセットについては後ほど解説します。

テキストの説明付きリストが追加されるので、ここでも内容をそれぞれ修正します。1ページ目同様に、ヘッダーの見出し部分とフッターの修正もしておきます。

ステップ3 「業務内容」ページの作成

3ページ目では、jQuery Mobile Widgetの[縮小可能ブロック]を使って、コンテンツ部分にアコーディオン形式の開閉するブロックを挿入し、そこに業務内容を入れます。

縮小可能ブロックの挿入

先程のリストの挿入時と違い、縮小可能ブロックの挿入ではダイアログが表示されずに、「ヘッダー」と「コンテンツ」が3ブロック分挿入されます。挿入後は、先ほど同様に3ページ目のテキストも入力します。

3ブロック以上追加したい場合は、以下のブロックを構成する要素を必要なだけコピーして追加しておくことで開閉箇所の数を増やすことができます。

<div data-role="collapsible" data-collapsed="true"> <h3>ヘッダー</h3> <p>コンテンツ</p> </div>

ステップ4 「会社について」ページの作成

4ページ目では、まずjQuery Mobile Widgetの[レイアウトグリッド設定]を使って、コンテンツ部分に均等に2ブロック横に並んだ要素を挿入します。

レイアウトグリッドの挿入

[レイアウトグリッド設定]を選択するとダイアログが表示され、挿入するブロックの行数と列数を指定できます。今回は1行2列で挿入します。

挿入時のソースは下記の通りになっていますが、これでは単純に2ブロックに分かれるだけになります。

<div class="ui-grid-a"> <div class="ui-block-a">ブロック 1,1</div> <div class="ui-block-b">ブロック 1,2</div> </div>

レイアウトグリッド内の修正

そこで均等に分けた後にブロックにデザインを付けるために、ソースを下記のように変更します。今回は画像も入れ、テキストと一緒に中央寄せにしたいので、そのようにstyleで指定しています。ポイントは内側のdiv要素のclass属性に「ui-bar ui-bar-c」を付与する点です。これを入れることで、ブロックのデザイン「ui-bar」のスタイルに変わります。このようにjQuery Mobileでは、class属性を追加するだけで見た目を変更することができます。詳しくは次回解説します

<h3>スタッフ紹介</h3> <div class="ui-grid-a"> <div class="ui-block-a"> <div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c"> <img src="hiromu_hasegawa_75x75.jpg" width="75" height="75" /><br />長谷川広武 </div> </div> <div class="ui-block-b"> <div style="text-align:center;font-size:14px;" class="ui-bar ui-bar-c"> <img src="taro_yamada_75x75.jpg" width="75" height="75" /><br />山田太郎 </div> </div> </div>

これでスタッフ紹介の部分は完成です。

ボタンの挿入

最後にjQuery Mobile Widgetの[ボタン]を使って、お問い合わせのボタンを挿入します。[ボタン]を選択するとダイアログが表示されるので、[ボタン]を[1]、[ボタンタイプ]を[リンク]、[アイコン]を[なし]で挿入します。

ボタンを挿入した後に、ボタンのテキストとリンク先をそれぞれ変更したら完成です。

ステップ5 作成したページの確認

完成した後に、一度ライブビューを使って確認してみましょう。ただライブビューにするだけでなく、実際のスマートフォンと同じサイズで見られるように、ドキュメントの上部にある[マルチスクリーン]プルダウンメニューからサイズを変更します。

ライブビューだけでなく、エミュレーターもしくは実機でも確認をしておきましょう。

以上でサンプル作成手順の解説は終わりですが、補足として[ページ]と[リスト表示]について解説しておきます。

ページの挿入

[ページ]はページを追加したい場合に使用します。[ページ]を選択するとダイアログが表示され、ページのID指定と、そのページにヘッダーやフッターを入れておくかどうかを指定します。

図19のように指定して挿入すると、page5というid属性を持つページが追加されます。

ページを追加しただけでは、そのページへのリンクがない状態です。そこで、1ページ目のリストの最後に、このページへのリンクを追加してみます。

デザインビューで1ページ目のコンテンツ部分にあるリンクテキストの下に「5ページ」とテキストを追加し、[プロパティ]パネルで5ページ目へのリンクを記入します。これだけでリンク追加は完了です。

これで他のページ同様に、アニメーションをしながらページが遷移します。

リストの挿入

上述のステップ2で[リスト表示]を挿入しましたが、その機能について補足しておきます。[リスト表示]ダイアログでは、リストタイプやリストの数などを選択して追加することができます。

ダイアログで[インセット]にチェックを入れた場合は、コンテンツの内側に入ったリスト表示になります。チェックを入れていない場合は、トップページのリスト同様にページサイズの表示になります。

おわりに

紹介したサンプルのように、Dreamweaver CS5.5を利用するとjQuery Mobileを利用したスマートフォン対応サイトを簡単に作ることができます。jQuery Mobileには、ここで取り上げた以外にも様々な機能が用意されているので、次回はjQuery Mobileのコードなどについて解説します。

関連記事