Adobe Developer Connection(ADC)と連動する開発者向けイベント「ADC MEETUP ROUND2」のセッション4では、国内最大規模を誇るHTML5開発者コミュニティ「html5_dev_jp」で活動する吉川 徹氏が登壇し、Dreamweaver CS5.5のjQuery Mobile機能を使ったスマートフォン向けサイト構築のライブコーディングが行われた。

jQuery Mobileの現状と概要

吉川氏は、最初におさらいとして、jQuery Mobileの概要と現状を述べた。
「jQuery Mobileは、モバイルサイト構築向けのフレームワークで、jQueryをベースにしています。このフレームワークを扱う上での注意点は、まだβ版であること。特にβ1以前はセキュリティに問題があるので、β2もしくは、Nightly Rebuild(毎日更新される最新バージョン)を利用した方がいいでしょう」

続いて、jQuery Mobileについて「クロスプラットフォーム」「マークアップドリブン」「プログレッシブエンハンスメント」「PhoneGapへの対応」「Dreamweaver CS5.5での対応」という5つのポイントで解説が行われた。

クロスプラットフォーム

jQuery Mobileの魅力は、iOSやAndroidをはじめ、Symbian/BlackBerry/Windows Mobile/webOSなど幅広いプラットフォームに対応している点だと吉川氏は語る。ただし、全てのプラットフォームがjQuery Mobileの全機能に対応しているわけではなく、中にはサポートが不完全な機能もあるとのこと。詳しくは、jQuery Mobileのサイトにある「Mobile Graded Browser Support」をご覧いただきたい。

マークアップドリブン

jQuery MobileはJavaScriptのフレームワークだが、JavaScriptをごりごりと書くタイプのフレームワークではなく、HTMLベースで定義するスタイルになっている。具体的には、HTML5のカスタムデータ属性を付加するだけでよく、あとはJavaScriptがHTML5内のタグを解析し、該当するスマートフォン向けUIに変更していく。吉川氏は、スマートフォンライクなリンクボタンの作り方を例に挙げ、マークアップの方法を解説した。

リンクボタンのもととして用意されたのは、単なるa要素だった。このa要素にdata-role属性というカスタムデータ属性を付加し、「button」という値を入れる。そしてリロードするとリンクボタンになっているという具合である。

プログレッシブエンハンスメント

jQuery MobileはHTML5の最新技術を活かしたフレームワークということで、気になるのは古いブラウザーへの対応だ。この心配事について吉川氏は次のように語る。
「jQuery Mobileに対応しているモダンブラウザーであればリッチな見た目で提供できます。では、古いブラウザーやInternet Explorer 6ではどうかというと、マークアップそのままでの表示となりますが、ユーザーは情報を取得できるため、コンテンツの閲覧環境に制限はありません」

吉川氏は、JavaScriptをONにしたブラウザーとOFFにしたブラウザーを左右に並べて比較表示させた。これもマークアップドリブンな作りをしていることが活きている。CSSで見た目を整えて、JavaScriptで動きを加えるという手法をとることにより、様々な環境への対応を実現しているのだ。吉川氏によると、JavaScriptオンリーのフレームワークだとJavaScriptをOFFにした瞬間に見えなくなってしまうとのこと。

PhoneGapへの対応

他のセッションでも触れられていたが、「PhoneGap」はHTML/CSS/JavaScriptで作られたコンテンツをネイティブアプリに変換するためのフレームワークだ。jQuery MobileはPhoneGapに対応しており、jQuery Mobileが提供するUIはアプリでも有効なため、即座にスマートフォン向けアプリを作成することが可能だ。吉川氏によれば、jQuery MobileにはPhoneGap用のプロパティがあり、これを使ってカメラやバイブレーションなどのプロパティにアクセスできるという。

Dreamweaver CS5.5での対応

Dreamweaver CS5.5には「jQuery Mobile Widget」という機能があり、これを使って簡単にUI構築が可能になっていると吉川氏は語る。
「Dreamweaver CS5.5にはjQuery Mobile Widgetの他にも、jQuery Mobileを使ったサイトやアプリの制作に役立つスターターテンプレートや、jQuery Mobile向けのHTMLマークアップのコードヒント機能があります」

なお、jQuery MobileのJavaScriptに関するコードヒントにはまだ対応していないとのことで、今後のアップデートに期待したいところだ。また、Dreamweaver CS5.5ではPhoneGapのエミュレートとコンパイルができるようになっており、Dreamweaver CS5.5単体でアプリの開発が行えるそうだ。

Dreamweaver CS5.5とjQuery Mobileを使ったライブコーディング

jQuery Mobileの特徴について解説が終わったところで、ライブコーディングへと移った。今回のデモは、「Adobe Geek Festival」というサイトを作成するというもので、もちろんjQuery Mobileを用いてスマートフォン向けサイトを作成することが目的である。まず吉川氏は、作成するサイトの概要を解説した。
「Adobe Geek Festivalというのは、デモ用に作った仮のイベントの申し込みサイトです。イベント内容は、アドビ製品のプロフェッショナルを募集して、すごい使い方や変態的な使い方を紹介して皆で楽しむというイベントになっています」

デモサイトは、トップページ以下に「お申し込み用のフォーム画面」「コンテスト概要画面」「会場地図」「Adobe Geek Festivalとは?」というページで構成されている。サイトの概要が説明の後、吉川氏は早速ライブコーディングを始めた。

Dreamweaver CS5.5上で[新規作成]ダイアログを表示し、[詳細情報]をクリックすると[サンプルから作成]という項目があり、この中の「サンプルフォルダー」の「モバイルスタート」というフォルダーにアクセスすると、jQuery Mobileのテンプレートが3つある。  

  • CDN(GoogleなどがホスティングしているjQueryを使うスタイル)のjQuery Mobileのテンプレート
  • ネイティブの機能を使うためのPhoneGap用テンプレート
  • ローカルに配置したjQuery Mobileを使うテンプレート

今回はCDN経由でjQuery Mobileを利用するテンプレートを使用した。

スクリーン上のDreamweaverには、左側にコードビュー、右側にデザインビューが表示されていたが、右側のビューをライブビューへと変更。これによりjQuery Mobileで作られた画面が実機に近い形で表示されるようになった。後々PhoneGapで使うために、「index.html」というファイル名で保存した。

この段階で、吉川氏はいったんマルチスクリーンプレビューでの確認を行なった。マルチスクリーンプレビューを使うことで、jQuery Mobileを使ったサイトでもデスクトップ向け/タブレット向け/モバイル向けの表示を確認できる。ブラウザーボタンを押せば、外部のブラウザーでも確認できるようになっている。

続いて、利用するjQuery Mobileのバージョンを変更した。現時点でDreamweaver CS5.5のテンプレートが参照しているjQuery Mobileのバージョンはα3となっており、このバージョンにはセキュリティ面に問題があるとのこと。そこで、いったんバージョン表記部分を削除し、1.0b1と記述した。

また、Dreamweaver CS5.5にはjQuery Mobileのスニペットがないため、吉川氏は自作しているようで、よく使うものはスニペットにしたらよいとのアドバイス。詳しくは、吉川氏によるADC記事「jQuery Mobileを使ったスマートフォンサイト制作に役立つスニペット」をご覧いただきたい。

トップページの作成

jQuery Mobileは、標準の状態である程度の見栄えになっているものの、情報やメニュー、細かなデザインの調整が必要である。吉川氏はトップページの構築に関して順番にデモを行っていった。順を追って解説していこう。

トップページにはテキストを置くが、テキスト関係は通常のHTMLマークアップをすれば反映されていくとのこと。ライブビューで確認しつつ作業すると便利だそうだ。

メニューも同様に、メニュー名を記述していくことで編集が行えるが、メニューの見栄えを変えたい場合は特殊なマークアップをする必要がある。例えば、現在リスト表示されているメニューを角丸にしたい場合は、「data-inset="true"」と指定を行う。Dreamweaver CS5.5上では「data-」まで入力するとコードヒントが表示された。「data-」属性を使うとjQuery Mobile上で様々なスタイルを設定できるそうで、デモではページ要素に「data-theme="a"」と指定すると、ページ全体が黒基調のものに変化した。

スマートフォンのタイトル部分にあたる箇所も、コーディングのみで編集を行った。会場では、標準のタイトルを「Adobe Geek Festival」と変更し、専用のアプリケーションらしさを高めた。同様にフッターについてもHTMLで記述していけばよく、コピーライトなどの変更が行われた。

ここで、1つDreamweaver CS5.5ならではの機能が紹介された。jQuery Mobile Widget機能を使えば、ドラッグ&ドロップでボタンやページなどを追加できる。デモでは、申し込みボタンを作るために、jQuery Mobile Widgetの[ボタン]を追加するとダイアログが表示され、ボタンに表示するアイコンの設定を行った。また、ボタンに「data-theme="e"」と指定することでテーマカラーを変更した。

画像要素の追加もDreamweaver CS5.5では簡単で、吉川氏はアセットパネルにある画像よりドロップ&ドラッグでロゴ画像をページに追加した。「モバイルは画面がまちまちなので、パーセントで指定することが大事です」とのこと。

続いて吉川氏は、ページの各メニューにリンクの指定を行った。jQuery Mobileでは、1つのHTMLファイル内に複数のページを持たせることができ、スムーズにページ間を移動できる。デモでは、各ページのid属性を各ボタンのリンク先に指定してメニューの作成を終えた。ここで吉川氏よりもう1つTipsが紹介された。
「実は、β1まではページ移動後に自動で『戻る』ボタンがついていたのですが、以降のバージョンでは自動ではつかなくなってしまいました。そこで、ページ要素に『data-add-back-btn』を追加しましょう。これで戻るボタンがつきました」

申し込みページの作成

申し込みページには、いくつかの項目があるフォームが含まれている。Dreamweaver CS5.5とjQuery Mobileを使うと、このようなコンテンツも簡単に作ることができるという。吉川氏は、名前入力欄や性別を入力させるラジオボタンを作成した。jQuery Mobileによって、自動でスマートフォンに最適化されたフォームになる点が魅力的だ。

ここでもう1つTipsが紹介された。「このフォームのボタンのように送信ボタンとキャンセルボタンを左右に並べたいというケースがあります。その場合はレイアウトグリッドを活用するといいでしょう」と、Dreamweaver CS5.5に用意されているjQuery Mobile Widgetから[レイアウトグリッド]を作業画面にドラッグ&ドロップした。

[レイアウトグリッド]をドラッグ&ドロップすると、ダイアログが立ち上がり、グリッドに関する細かな設定が行える。吉川氏は、行1列2という設定を行い、それぞれのグリッドに送信ボタンとキャンセルボタンを挿入した。送信ボタンに関しては、別の見栄えにしたいとのことで、「data-theme="b"」と指定して、テーマカラーを変更した。

なお、これ以上の細かなスタイルの変更については、「Style要素を使用するときはbody要素内には書かないでください。Dreamweaverのライブビューで正しく表示されなくなります。必ずhead要素内に書くようにしてください」とアドバイスを述べた。また、細かなjQuery Mobileの設定は、jQueryとjQuery Mobileの読み込みの間に書くことがよいとのことである。

カスタムアイコンについて

jQuery Mobileでは、ボタンにあらかじめ用意されたアイコンを指定することができるが、ここにオリジナルのアイコンを挿入することもできる。
「jQuery Mobileには、全部で18個のアイコンが用意されていますが、スタイルを定義することで追加できます」 デモで行なわれたのは、「ui-icon-reg」というスタイルで定義されているアイコンをボタンのアイコンとして使うというもので、data-icon属性にregを指定することでアイコンが独自になる様子が実演された。「ui-icon-reg」の「reg」の部分が一致することで、JavaScriptが読み込んでくれる仕組みだという。

PhoneGapを使ったコンパイル

最後に吉川氏は、今まで作ってきたサイトをPhoneGapを使ってアプリケーションにする方法を紹介した。[サイト]メニューより、[モバイルアプリケーション]という項目を選択後に表示される[アプリケーションフレームワークの設定]ダイアログにて、Android SDKとiOS SDKのアウトプットを選ぶことができる。

特に注目すべきはAndroidとのことで、Android SDKへのパスを入力するフォームの右側にあるボタンを使うとAndroid SDKの構築を自動で作ってくれる仕組みが用意されているという。ここでSDKの設定を終えたらアプリケーションの設定を行い、[モバイルアプリケーションのビルドおよびエミュレート]よりiPhoneもしくはAndroidを選択することでエミュレーターが立ち上がるという流れだ。

デモではiPhoneを選択し、PhoneGapでアプリケーションがコンパイルされて、エミュレーターが立ち上がる様子がスクリーンに表示された。最後に注意点として、Mac版はパッチをあてないとAndroid SDKの自動インストールが行なえない点を挙げて、セッションを締めくくった。詳しくは、「Android SDK の簡易インストールに失敗する(Dreamweaver CS5.5)」をご覧いただきたい。

関連記事