目次

作成日

20 July 2011

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

前回はDreamweaver CS5.5で導入された「jQuery Mobile Widget」を利用して、jQuery Mobileの知識が無くとも、直感的にスマートフォン対応サイトを作成する方法を解説しました。今回は、前回作成したサンプルをもとに、jQuery Mobile Widgetをさらに使いつつ、またjQuery Mobileが提供する便利な機能も取り入れて、より本格的なスマートフォン対応サイトに仕上げていきます。

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

jQuery Mobileが提供する便利な機能

jQuery Mobileには、スマートフォン対応サイトを作成する上で役立つ機能が多く用意されています。Dreamweaver CS5.5のjQuery Mobile Widgetは、その機能の一部を手軽に使えるようにしたものです。そのため、より本格的なスマートフォン対応サイトを作成するには、jQuery Mobileの機能を知り取り入れていく必要があります。本記事ではjQuery Mobileの詳細については省略しますが、今回のサンプルでも利用している2つの特徴について解説しておきます。

カスタムデータ属性

カスタムデータ属性（custom data attribute）とは、HTML5で定義されている属性です。HTMLタグ内に「data-◯◯="□□"」という形式の属性を書くことで、独自の属性を定義することができるようになります。

※カスタムデータ属性の詳細については、「3.2.3.8 Embedding custom non-visible data with the data-* attributes ― HTML5」をご覧ください。

jQuery Mobileでは、その機能の多くがこのカスタムデータ属性を利用することで実現しています。例えば、jQuery Mobileの各ページはdiv要素に「data-role="page"」と一意のIDを指定することで動作するようになり、リストであればul要素に「data-role="listview"」を指定することでjQuery Mobile用のスタイルとして表示されるようになります。

jQuery Mobile Widgetを利用する場合はカスタムデータ属性を気にすることなく作成を進めることができますが、ウィジェットを挿入した後のコードを見ると「data-role="page"」や「data-role="listview"」といったカスタムデータ属性が指定されているのがわかると思います。逆を言えば、ウィジェットを使わずとも、例えばul要素に「data-role="listview"」を指定すれば、そのリストはjQuery Mobile用のスタイルで表示されます（jQuery MobileのJavaScriptファイルを読み込んでいる場合に限ります）。

jQuery Mobileには、jQuery Mobile Widgetにはない機能が用意されています。どのような機能があり、どのようなカスタムデータ属性を指定する必要があるかは、jQuery Mobileサイトの「Demos and Documentationをご覧ください。

あらかじめ用意されたCSS／動的なclass属性の付加

jQuery Mobileには、スマートフォンでの表示に適したデザインを実現するためのCSSがあらかじめ用意されています。そして、jQuery MobileのJavaScriptが実行される際に、カスタムデータ属性などをフックにして、自動で該当するHTMLタグに置き換えたり、class属性を付加することで、jQuery Mobile用のスタイルで表示されるようになっています。

そのため、スタイルを変更したい場合などは、JavaScript実行後にどのようなHTMLタグが出力されているか、どのようなclass属性が付加されているかを調べる必要があります。それを調べる方法の一つとして、Dreamweaverの「ライブコード」があります。ライブコードを使えば、実際に表示させた場合にどのようなソースになっているのかを確認することができます。

しかし、複数のclass属性が付加されている場合があり、どのclass属性にあてられたスタイルが適用されているのかが把握しにくいところが難点です。そこで、FirefoxのFirebugや、SafariのWebインスペクタ、Chromeのデベロッパーツールなどを使うと、どのスタイルが適用されているのかを素早く確認することができます。そのためには、修正したい箇所のCSSを変更するか、もしくは別途CSSを用意して、プロパティの値を上書する必要があります。ただし、同じclass属性を他の機能でも利用しているケースがあるため、一箇所を変更したいだけでも様々な箇所が連動して変更されてしまうこともあります。CSSを変更する場合はこの点に要注意です。

以上のことを踏まえて、今回のサンプルとその作り方を見ていきましょう。

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

今回作成するサンプルは、前回のサンプルから１ページ増え、5つのページで構成されています。下図は前回のサンプルからの違いを示しています。

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

ステップ1　お問い合わせフォームページを新規作成

ページの挿入

前回の４ページ目ではお問い合わせのメールアドレスにリンクしたボタンを作成しましたが、今回は４ページ目からそのボタンを除き、別途お問い合わせフォームページを作成します。

４ページ目のお問い合わせのボタンを削除します。そして、jQuery Mobile Widgetの［ページ］を使い、５ページ目を新規作成します。

テキスト入力欄の挿入

次に、jQuery Mobile Widgetの［テキスト入力］を使い、「お名前」「お名前（カナ）」「メールアドレス」を入力する欄を挿入し、各ラベル部分のテキストを変更します。［テキスト入力］を使うと、それぞれの要素に一意のid属性が自動で付加されます。

inputのtype属性を変更

挿入した入力欄をそのまま利用しても問題はありませんが、メールアドレス入力欄は、type属性をemailにしておきましょう。type属性をemailにすることで、メールアドレスを入力しやすいキーボード配列に切り替わります。

テキスト領域の挿入

続いて、jQuery Mobile Widgetの［テキスト領域］を使い、お問い合わせ内容欄を挿入し、ラベル部分のテキストを変更します。

キャンセルボタンと送信ボタンのレイアウト

フォームの最後にキャンセルボタンと送信ボタンを挿入します。ボタンを挿入する前に、2つのボタンを並べて配置するために、jQuery Mobile Widgetの［レイアウトグリッド設定］を使って1行2列のレイアウトを用意しておきます。こうしておくことで、ボタンが均等に並ぶようになります。

キャンセルボタンと送信ボタンの挿入

レイアウトができたところで、ボタンを挿入します。左側のclass属性「ui-block-a」のコンテンツの中にはキャンセルのボタンを挿入します。jQuery Mobile Widgetの［ボタン］を選択した後に出てくるダイアログでは、［ボタン］を［１］、［ボタンタイプ］を［入力］、［入力タイプ］を［送信］、そして［アイコン］を［削除］とします。

挿入後にvalue値を「キャンセル」にしてボタンテキストの表示を変更しておきます。

右側のclass属性「ui-block-b」のコンテンツの中には、送信ボタンを挿入します。キャンセルボタン同様にダイアログを進め、［アイコン］だけ［右矢印］とします。

form要素の追加

jQuery Mobile Widgetを使ってフォームのパーツを挿入していくだけでは、form要素が入力されないのでフォームとして機能しません。以下のようにform要素を追加します。

<form action="#" method="post"> <div data-role="fieldcontain"> <label for="textinput">お名前 :</label> <input type="text" name="textinput" id="textinput" value="" /> </div> ～中略～ <div class="ui-grid-a"> <div class="ui-block-a"> <input type="submit" value="キャンセル" data-icon="delete" /> </div> <div class="ui-block-b"> <input type="submit" value="送信" data-icon="arrow-r" /> </div> </div> </form>

以上でひとまずお問い合わせフォームの完成です。

ステップ2　テーマカラーの変更

jQuery Mobileにはあらかじめ5種類のテーマカラーが用意されています。そして、カスタムデータ属性の「data-theme」を使い、その値にa～fのいずれかを指定すると表示するテーマカラーを変更することができます。テーマカラーは、要素単位で変更することが可能です。それぞれのテーマカラーがどのような表示になるかは、jQuery Mobileサイトの「jQuery Mobile: Demos and Documentation: Themes」をご覧ください。

では、今回のサンプルでもテーマカラーを変更していきます。まず、先程作成したフォームページの入力欄が少し暗めなので、明るいテーマに変更します。入力欄を白色に変更したいので、テーマは「d」を利用し、それぞれのinput要素に「data-theme="d"」を挿入します。

<div data-role="fieldcontain"> <<label for="textinput">お名前 :</label> <<input type="text" name="textinput" id="textinput" value="" data-theme="d" /> </div> <div data-role="fieldcontain"> <<label for="textinput2">お名前（カナ） :</label> <<input type="text" name="textinput2" id="textinput2" value="" data-theme="d" /> </div> <div data-role="fieldcontain"> <<label for="textinput3">メールアドレス :</label> <<input type="email" name="textinput3" id="textinput3" value="" data-theme="d" /> </div> <div data-role="fieldcontain"> <<label for="textarea">お問い合わせ内容 :</label> <<textarea cols="40" rows="8" name="textarea" id="textarea" data-theme="d" ></textarea> </div>

ボタンのテーマカラーを変更

続いてボタンの色を変更します。ボタンはキャンセルと送信の違いがわかるように、それぞれ違うテーマカラーをつけるように、キャンセルボタンには「d」を、送信ボタンには「a」を指定します。

<div class="ui-grid-a"> <div class="ui-block-a"> <input type="submit" value="キャンセル" data-icon="delete" data-theme="d" /> </div> <div class="ui-block-b"> <input type="submit" value="送信" data-icon="arrow-r" data-theme="a" /> </div> </div>

ステップ3　スタイルとclass属性の追加

フォームのキャンセルボタンですが、iPhoneなどの表示幅が狭い状態になると、文字が一部表示されなくなってしまいます。横幅が320pxのディスプレイの時でも表示されるようにCSSを追加します。

ただし、ボタンの場合は、JavaScript実行時にボタン用のHTMLタグが別途生成されるような仕組みになっているため、JavaScript実行前のHTMLタグにインラインでstyle属性を指定しても反映されません。そのため、もともとのjQuery MobileのCSSを変更（あるいは上書き）しなければなりません。どのようなCSSが適用されるかは、記事冒頭で紹介した方法で調べることができます。

今回は別途style.cssを用意し、下記の通り、このボタン部分だけに適用されるように要素を選択したCSSを記述し、もともとのjQuery Mobileのスタイルを上書きします。

.ui-btn-icon-left .ui-btn-text{ white-space:normal; font-size:14px; }

ちなみに、white-spaceはソース中の半角スペース／タブ／改行の表示方法を指定するプロパティです。jQuery Mobileでは各所に「white-space:nowrap;」を指定して改行を禁止し、改行が必要な場合（文字が多すぎる状態）は「...」に置き換えています。上記CSSでは、「...」に置き換える仕組みを解除し、さらに文字サイズも小さくすることで1行に収まるようにしています。

※jQuery MobileのCSSでは、様々な要素で同じclass属性が利用されているため、class属性1つだけのセレクタで要素を指定すると、思わぬところの表示が変わってしまう場合があります。スタイルを変更した際は、他の部分に影響していないか確認してください。

ステップ4　各ページにお問い合わせボタンの追加

お問い合わせページを作成しましたが、まだリンクがついていないため、各ページにボタンを配置してリンクさせます。今回のサンプルでは、トップページでは少し目立つようにコンテンツ部分にボタンを、他のページではフッター部分にボタンを配置します。

トップページに追加

トップページではリストの後にボタン追加をします。jQuery Mobile Widgetの［ボタン］を使いボタンを挿入し、リンク先を「#page5」にします。テーマカラーを青色の「b」に変更するために「data-theme="b"」を追加しておきます。

また、そのまま表示するとリストと重なってしまうため、挿入されたa要素をp要素で囲い、余白を取るためにp要素にstyle属性で「padding-top:15px」と指定します。

<div data-role="content"> <ul data-role="listview"> <li><a href="#page2">お知らせ</a></li> <li><a href="#page3">業務内容</a></li> <li><a href="#page4">スタッフ紹介・お問い合わせ</a></li> </ul> <p style="padding-top:15px;"><a href="#page5" data-role="button" data-theme="b">お問い合わせ</a></p> </div>

フッターに追加

トップページ以外では、お問い合わせページへのリンクをフッターに追加します。トップページ同様にjQuery Mobile Widgetの［ボタン］を使って挿入します。

<div data-role="footer"> <a href="#page5" data-role="button">お問い合わせ</a> <h4>©HAM WORKS</h4> </div>

フッターではコンテンツの時と違い、ボタンを挿入しても横幅一杯のボタンではなく、テキストと同じサイズの画像になります。

ステップ5　ページ遷移アニメーションの変更

jQuery Mobileでは、数種類のページ遷移アニメーションが用意されています。デフォルトでは、横からのスライド「slide」です。その他にも上からのスライド「slideup」、下からのスライド「slidedown」、ポップアップ「pop」、フェード「dade」、立体の回転「flip」などがあります。これらはa要素にカスタムデータ属性の「data-transition」を付加するだけで変更することができます。

今回のサンプルでは、お問い合わせページへの遷移を「pop」に変更します。先ほどのお問い合わせボタン全てに「data-transition="pop"」を付加します。

<div data-role="content"> <ul data-role="listview"> <li><a href="#page2">お知らせ</a></li> <li><a href="#page3">業務内容</a></li> <li><a href="#page4">スタッフ紹介・お問い合わせ</a></li> </ul> <p style="padding-top:15px;"><a href="#page5" data-role="button" data-transition="pop" data-theme="b">お問い合わせ</a></p> </div>

ステップ6　各ページにナビゲーションの挿入

現状のままではトップページに戻らないと各ページに行くことができません。そこで、2～4ページ目からでも各ページに行けるように、ヘッダーにナビゲーションを追加します。

ヘッダー内に「<div data-role="navbar">」で囲ったulのリストを入力します。このナビゲーションバーのリンクでの遷移アニメーションは「flip」を利用しています。

<div data-role="navbar"> <ul> <li><a href="#page2" data-transition="flip">お知らせ</a></li> <li><a href="#page3" data-transition="flip">業務内容</a></li> <li><a href="#page4" data-transition="flip">スタッフ紹介</a></li> </ul> </div>

また、現在表示しているページがどこなのかがわかりやすいように、2～4ページ目にはそれぞれアクティブなリンクの色を変えておきます。jQuery Mobileでは、アクティブにしたいリストに「class="ui-btn-active"」を追加するだけで色が変わります。

<div data-role="navbar"> <ul> <li><a href="#page2" data-transition="flip" class="ui-btn-active">お知らせ</a></li> <li><a href="#page3" data-transition="flip">業務内容</a></li> <li><a href="#page4" data-transition="flip">スタッフ紹介</a></li> </ul> </div>

※執筆時点でのjQuery Mobileのバージョンβ1では、アクティブ部分の色を変えても、一度ページ遷移をして戻ってくるとアクティブがなくなってしまうバグがあるので注意してください。

ステップ7　リストの見出し追加方法

続いてリストに見出しをつけます。リストの見出しを挿入したい箇所にa要素なしのli要素を1つ入れ、「data-role="list-divider"」を付加することで、見出し表示に変わります。

<ul data-role="listview" data-inset="true"> <li data-role="list-divider">内容一覧</li> <li> <h3>コーディング費用30%割引中</h3> <p>９月末までコーディング費用30%割引中</p> </li> <li> <h3>「jQuery Mobile構築パック」開始</h3> <p>jQuery Mobileを利用したサイト構築開始！</p> </li> <li> <h3>スマートフォンに対応しました</h3> <p>スマートフォン向けのページを公開しました。</p> </li> </ul>

リストの見出しテーマカラーを変更

リストの見出しテーマカラーを変更する場合は、li要素に「data-theme="◯"」を付加するのではなく、ul要素に「data-dividertheme="◯"」を付加します。トップページのリスト見出しを、テーマカラー「d」に変更してみます。

<ul data-role="listview" data-dividertheme="d"> <li data-role="list-divider">メニュー一覧</li> <li><a href="#page2">お知らせ</a></li> <li><a href="#page3">業務内容</a></li> <li><a href="#page4">スタッフ紹介</a></li> </ul>

ステップ8　jQuery Mobileのバージョンアップ

現時点でのDreamweaver CS5.5のモバイルスターターとjQuery Mobile Widgetでは、jQueryはバージョン1.5を、jQuery Mobileはバージョンα3を利用しています。しかし現在では、jQueryはバージョン1.6.2、jQuery Mobileはバージョンβ1へとアップデートされています。そこで、これらの最新バージョンを利用するようにします。

またβ1版では、α版で自動挿入されていたviewportが自動で挿入されなくなったため、ソースにviewportを入れ、横幅がデバイスのサイズになるように「width=device-width」を指定します。

<meta name="viewport" content="width=device-width" /> <link href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js" type="text/javascript"></script>

ステップ9　ヘッダーにホームボタンの追加

β1版にすると、デフォルトではページ上部にBack（戻る）ボタンがつかなくなります。そこで、今回のサンプル作成の最後の仕上げとして、トップページ以外のヘッダー部分に、トップページへ戻るホームアイコンのボタンを挿入します。

jQuery Mobile Widgetの［ボタン］を使い、［ボタン］を［1］、［ボタンタイプ］を［ボタン］、［アイコン］を［戻る］、［アイコン位置］を［テキストなし］にして挿入します。挿入後のソースで、リンク先を「#main」に、テキストを「HOME」に変更します。また、アイコンをホームアイコンにするために、data-iconをhomeに変更します。また、ページ遷移アニメーションも「slideup」に変更するため、「data-transition="slideup"」を追加します。

<a href="#main" data-role="button" data-transition="slideup" data-icon="home" data-iconpos="notext">Home</a>

これで今回のサンプルは完成です。

おわりに

解説したように、Dreamweaver CS5.5のjQuery Mobile Widgetを利用するだけでは、jQuery Mobileの機能の全てを利用することができないため、いくつかの機能はそれぞれ別途ソースコードで挿入する必要があります。しかし、いずれもカスタムデータ属性やclass属性を加えるだけで利用できるものばかりなので、比較的カスタマイズも簡単にできてしまいます。今回紹介したコード以外にも、まだまだカスタマイズできることは多いので、ぜひそれらも利用してみてください。

関連記事