Grails をマスターする: Grails とモバイル Web

WWW に置き換わる M

世界中の携帯電話利用者が現在 33 億人を突破して増え続けているなか、携帯電話からのインターネット・アクセスが急激に増えています。モバイル Web を目的とした開発には、それ特有の要求があります。連載「Grails をマスターする」の今回の記事では、Scott Davis が Grails アプリケーションを携帯電話に対応させる方法を紹介します。

Scott Davis , Editor in Chief, AboutGroovy.com

Scott DavisScott Davis は国際的に知られた著者、講演者、そしてソフトウェア開発者です。彼の著書には、『Groovy Recipes: Greasing the Wheels of Java』、『GIS for Web Developers: Adding Where to Your Application』、『The Google Maps API』、『JBoss At Work』などがあります。



2008年 6月 17日

ありがたいことに、最近では Web サイトで「[ブラウザー X] で最適に表示」という注意書きを目にすることはめったにありません。Prototype や Dojo、そして YUI などの最近の Ajax ライブラリーは、Firefox、Internet Explorer、Safari にまだ残っている相互の違いを上手く抽象化してくれます。けれども Nokia、Motorola、あるいは Apple の携帯電話から Web サイトにアクセスしたとすると、これほどまでのブラウザー非依存性は望めません。このように、「HTML 完全対応」を謳っている最新のモバイル・ブラウザーでさえも、Web コンテンツに多少の簡単な調整を加えることによってメリットが得られます。そこで、この記事で紹介するのが、Grails アプリケーションをモバイル・ブラウザー用に最適化する方法です。

ますます増えつつあるモバイル Web の使用

Internet World Stats によると、インターネットの利用者数は 14 億人を数えます。これは世界人口の約 20 パーセントです (「参考文献」を参照)。北米では、4 人のうちの 3 人がインターネットを利用しています。

いまや、地球上の人口 66 億人の半数が携帯電話を持っています。携帯電話の普及率は北米のインターネット普及率とほぼ同じですが、この数値が世界各地で当てはまるわけではありません。例えば香港での普及率は 140 パーセントに上り、EU の一部の国々 (リトアニア、イタリア、ルクセンブルグ) は 150 パーセントにまで至ります。場所によっては、携帯電話の数が人口を上回っているということです。

IDG Communications の Colin Crawford はこう説明しています (「参考文献」を参照)。「今後 2、3年の間に、携帯電話は PC に置き換わる主要なオンライン接続手段となるはずです。すでに世界全体でのインターネット・アクセスは、その 30 パーセントが携帯電話からのアクセスです。さらに、日本をはじめとする特定の国々について言えば、携帯電話からのアクセスが 70 パーセントに迫る勢いとなっています」。

Web サイトをわざわざモバイル対応にする必要があるのかどうか疑問に思っている方は、囲み記事「ますます増えつつあるモバイル Web の使用」の数値を見れば、その理由が納得できるはずです。世界的な統計値も驚異的ですが、私のモバイル対応 Web への関心はもっと個人的なものです。私が iPhone を買ったのは、2007年の夏に登場したそのときですが、それ以来、この機器で使用できる Web サイトを懸命に探し続けています。確かに、iPhone がサポートしていない Flash または Java™ アプレットに依存するサイトでない限り、どの Web サイトにもアクセスできます。けれども問題は、800x600 (あるいはそれ以上) の解像度を対象に最適化されたコンテンツは、3.5 インチの画面では見映えが劣るという点です。

私が携帯電話から通常使用している Web サイトは、UI がこのデバイス特有の制約に対応しているので、ある程度満足して使用しているサイトです。手始めに、よく使われる Web サイトの URL で、従来の www を m に置き換えてみてください。http://m.cnn.com、http://m.yahoo.com、http://m.google.com でアクセスできるページは、いずれも携帯電話で適切に表示されます。一部の Web サイト (http://www.twitter.com など) は魔法の如く出力に合わせて適切に姿を変え、通常のコンピューターでアクセスするとすべての機能が表示される一方、携帯電話からアクセスすると画面にぴったり収まるようにコンテンツが切り詰められます。同じ URL でも、UI が最適化されるというわけです。このような芸当を皆さんのサイトに適用する方法を、これから説明します。

モバイル Web 開発者のための技術

Java 開発者として、私はこれまで「Write Once, Run Anywhere (一度書けば、どこででも実行できる)」という約束に甘やかされてきました。Java アプリケーションを特定のオペレーティング・システムまたはハードウェア・モデルを対象に最適化するなどという考えは毛頭もありませんが、モバイル Web 開発に取り組む場合には、さまざまな種類の携帯機器でサポートされる 3 つの主要な技術を理解する必要があります。その 3 つの技術とは、以下のとおりです。

  • WML (Wireless Markup Language) 1.x
  • WML 2.x または Mobile Profile (XHTML-MP)
  • iPhone を対象とした HTML タグ

この後説明するように、WML と XHTML-MP マークアップを Grails で作成した GSP (Groovy Server Page) に組み込むと、モバイルに適したページを提供することができます。また、Grails が生成した HTML を調整して、iPhone でのページの動作を改善する方法も紹介します。

Grails での WML 1.x の使用法

WML は HTML に似たマークアップ言語ですが、本物の HTML とは違います (WML 1.0 は 1998年に標準化されました。最新バージョンは WML 1.3 です)。WML は Web ブラウザーでは表示できません (表示するには、少なくともエミュレーターの力を借りる必要があります)。それと同じく、HTML を WML ブラウザーで表示することもできません。そのため、携帯電話のプロバイダーは通常、ネットワーク内に HTML と WML との変換を行うゲートウェイを用意しています。

この連載について

Grails は、Spring や Hibernate などのよく知られた Java™ 技術に「Convention over Configuration」といった現代のプラクティスを盛り込んだ最新の Web 開発フレームワークです。Groovy で作成された Grails は既存の Java コードをシームレスに統合するだけでなく、スクリプト言語ならではの柔軟性と動的機能を与えてくれます。Grails を学んだら、Web 開発に対する今までの見方がまったく違ってくるはずです。

HTML が HTTP で転送されるのと同様に、WML は WAP (Wireless Access Protocol) で転送されます。WAP と WML は、一般に普段の会話では同じ意味として使用されます。携帯電話の仕様でも、WAP ブラウザーまたは WML 1.x のいずれかのサポートを売りにしていることは珍しくありません (「参考文献」に、正式な WML および WAP 仕様へのリンクを記載しています)。

Research in Motion 社の BlackBerry のユーザーを対象にしている場合は、WML について復習する必要があります (BlackBerry はスマートフォン市場の 40 パーセントを占めています。iPhone と Windows® Mobile 搭載機器の市場シェアはそれぞれ 2 番目、3 番目です)。BlackBerry スマートフォンには WAP ブラウザーが搭載されていますが、経験豊富なユーザーは Opera Mini (「参考文献」を参照) といった正真正銘の Web ブラウザーもダウンロードしています。

携帯用 Trip Planning

連載「Grails をマスターする」のこれまでの記事の手順に従っていれば、今ではお馴染みの Trip Planner アプリケーションを早速、携帯電話対応にする作業に取り掛かれます。まず、Trip Planner アプリケーションの web-app ディレクトリーに testwml.gsp というファイルを作成し、リスト 1 のコードを入力します。このコードは、静的 WML です。

リスト 1. 静的 WML
<% response.setContentType("text/vnd.wap.wml") %>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
   "http://www.phone.com/dtd/wml11.dtd" >

<wml>
  <card id="f1" title="Flight 1">
    <p mode="wrap">From: DEN</p>
    <p mode="wrap">To: ORD</p>
    <p mode="wrap">UAL 1234</p>
    <p mode="wrap">Jun 30, 10:30am</p>
    <p>
      <anchor>Next<go href="#f2"/></anchor>
    </p>  
  </card>

  <card id="f2" title="Flight 2">
    <p mode="wrap">From: ORD</p>
    <p mode="wrap">To: DEN</p>
    <p mode="wrap">UAL 9876</p>
    <p mode="wrap">Jul 02, 1:15pm</p>
    <p>
      <anchor>Previous<go href="#f1"/></anchor>
    </p>  
  </card>
</wml>

http://www.davisworld.org/testwml.gsp にアクセスすると、このページの実際の動作を (携帯電話で) 確認することができます。GSP では HTML に見慣れていると思いますが、この場合は HTML の代わりに WML を使っています。

WML を GSP から送信するときには、リスト 1 の先頭行にあるように、デフォルト MIME タイプを text/html から text/vnd.wap.wml に指定変更してください。静的 WML を提供するには、ファイルに GSP 拡張子ではなく WML 拡張子を指定するだけで済みます。これにより、response.setContentType メソッドを呼び出さなくても大抵の Web サーバーが正しい MIME タイプを返すことになります。$TOMCAT_HOME/conf/web.xml を調べると、WML ファイルの MIME マッピングがすでに指定されていることがわかります。Apache HTTPD を使用している場合には、$APACHE_HOME/conf/mime.types ファイルに同じような WML ファイルのデフォルト・マッピングがあるはずです。リスト 2 に、Tomcat の MIME タイプ・マッピングを記載します。

リスト 2. Tomcat での MIME タイプの設定
<mime-mapping>
  <!-- WML Source -->
  <extension>wml</extension>
  <mime-type>text/vnd.wap.wml</mime-type>
</mime-mapping>

リスト 1 に戻って、今度は DOCTYPE に注目してください。DTD (Document Type Definition) 文を組み込むことにより、testwml.gsp が WML 文書として識別されるようにしています。

注意する点は、この文書がお馴染みの <html> タグではラップされていないことです。文書の開始と終了にはいずれも<wml> が使用されています。リスト 1 には <head> セクションと <body> セクションがないことにも、おそらくお気付きでしょう。それぞれの WML ページが、固有の id 属性とユーザーにわかりやすい title 属性を持つ 1 つの card となります。

単一のファイルで複数のページ/カードをダウンロードするのは、かなり一般的なことです。以前の携帯電話では、データ・パイプが著しく狭かったことが携帯機器とそのネットワークの制約になっていましたが、一度にダウンロードする量を増やせば、携帯電話がサーバーと送受信するデータの量が少なくなります。一度に表示できるカードは 1 つだけなので、残りのカードは事実上、事前に取得されるということです。すべてのカードがダウンロードされた時点で、ナビゲーションはクライアント・サイドでのみ行われることになります。

<p> タグは、HTML 開発者にはお馴染みのはずです。WML の <anchor> タグは、構文の点では多少の違いがあるとしても、本質は HTML の <a> タグと似ています (WML について詳しく学ぶには、「参考文献」を参照してください)。

ここで登場するのが、賢い WML の芸当です。対象としているのは携帯電話専用のコンテンツであることから、ユーザーが選択すると電話番号をダイヤルするハイパーリンクを作成できます。リスト 3 は、電話番号 303-555-1212 をダイヤルする例です。

リスト 3. WML でのダイヤル可能リンク
<do type="accept">
 <go href="wtai://wp/mc;3035551212"/>
</do>

リンクのプロトコルはお馴染みの http:// ではなく、wtai:// となっていることに注意してください。これは、Wireless Telephony Applications Interface の略です。

WML エミュレーター

このページを PC でレンダリングするには、WAP エミュレーターが必要です (「参考文献」に、この記事で紹介するすべてのエミュレーターについてのリンクを記載しています)。そこで、dotMobi エミュレーターにアクセスしてください。これは、Java アプレットとして実装されているエミュレーターです。URL davisworld.org/testwml.gsp を入力すると (http:// プレフィックスは、入力ボックスの左にすでに指定されています)、画面は図 1 のような表示になります。

図 1. エミュレートされた WAP ページ
エミュレートされた WAP ページ

dotMobi エミュレーターには、2 種類のスキンがあります。この 2 つのスキンはそれぞれに異なるデバイスのルック・アンド・フィールだけでなく、その機能も表します。特定のデバイスをエミュレートしたいのであれば、一般に、そのハードウェアの製造元が用意している開発者用 Web サイトから必要なエミュレーターをダウンロードしてインストールすることができます。

GSP からの動的 WML

最初の WML の例は静的コードでした。リスト 4 は、お馴染みの <g:each> タグと <g:if> タグを使った例です。

リスト 4. GSP と WML との組み合わせ
<% response.setContentType("text/vnd.wap.wml") %>
<%
def flightList = []
flightList << [iata1:"DEN", iata2:"ORD"]
flightList << [iata1:"ORD", iata2:"DEN"]
%>

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
   "http://www.phone.com/dtd/wml11.dtd" >

<wml>
  <g:each in="${flightList}" var="${flight}" status="i">
    <card id="f${i}" title="Flight ${i}">
      <p mode="wrap">From: ${flight.iata1}</p>
      <p mode="wrap">To: ${flight.iata2}</p>      
      <g:if test="${flightList.size() > i+1}">
        <p>
          <anchor>Next<go href="#f${i}"/></anchor>
        </p>  
      </g:if>  
    </card>
  </g:each>  
</wml>

上記では、完全な MVC 構造を構築するのではなく、HashMap でフライト・データを模倣しているだけに過ぎないことに注目してください。重要な点は、「Groovy Server Pages によるビューの変更」での JavaScript の場合と同様に、GSP タグは WML と一緒に組み込めるということです (このページの実例は、http://davisworld.org/testwml2.gsp で確認することができます)。

WML 1.x: 1 つの時代の終わり

WML は消滅したという主張は度々聞きますが、それとは裏腹に、携帯電話では相変わらず WML のサポートのみが普及しています。しかし誤解しないでください。WML 1.x が陳腐化しつつあることは確かです。最近では、真の Web ブラウザーに対して「分離平等政策」を取る WML プラットフォームを避ける携帯電話がどんどん増えてきています。次のセクションで説明するように、WML 2.x デバイスまたは iPhone を対象としたモバイル対応 Web サイトを作成するために必要なのは、HTML をまったく別のマークアップ言語に変換することではなく、既存の HTML を多少調整することです。


Grails での WML 2.X (XHTML-MP) の使用法

WML 2.x に関して言えば、WML は別のマークアップ言語の名前 (WML 1.x ではそうでした) というよりは、商標名のようなものです。実際、WML 2.x は XHTML の方言でしかありません。具体的に言うと、これは XHTML-MP のことです。

XHTML-MP の最も厳しい要件は、整形式 XML を作成するという点です。これはつまり、すべてのコンテナー・タグを正しく閉じること (<p></p><li></li>)、属性を引用符で囲むこと (<a href="http://somewhere.com">)、そして要素名には小文字だけを使用すること (<h1> ではなく <H1>) を意味します。

XHTML-MP は XHTML-Basic のスーパーセットです。そのため、多少調整するだけで Web サイトは XHTML-Basic に準拠するようになります。XHTML-MP ではネストしたテーブルやフレームは使用することができません。また、サポートする画像形式は gif と png だけです。これ以外のベスト・プラクティス (画像サイズと代替テキストの指定など) は、XHTML-Basic に対応するための要件です。HTML タグは、ほとんどではないにしても、その多くを使用することができます。XHTML-Basic および XHTML-MP で使用できるタグのリストへのリンクは、「参考文献」を参照してください。

言うまでもなく、Web サイトを小さい画面に合わせて最適化するには、それぞれのリクエストに対して返すデータを少なくする必要があります。Web ページ (HTML、CSS、画像を含む) は 20KB 未満でなければなりません。Expires または Cache-Control ヘッダーを使って積極的にファイルをキャッシュに入れることや、モバイル・コンテンツを提供するときには長い Web ページを 2 ページか 3 ページに分割することも必要です。例えば http://m.cnn.com では、記事を上手に 3 ページまたは 4 ページに分割していますが、同時に「記事全文」リンクも提供して、オーバーヘッドが追加されても構わない場合にはこのページ分割を無効にドできるようにしています。

WML 1.x の場合と同様、ファイルの先頭には適切な DTD を組み込みます。また、<html> タグを変更して xmlns 属性を含める必要もあります (リスト 5 を参照)。

リスト 5. XHTML-MP ファイルの先頭
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
...
</html>

さらに、送信するときには正しい MIME タイプとして application/vnd.wap.xhtml+xml を指定することも必要です。ただし、多くの携帯機器は一般的な application/xhtml+xml も受け入れます。application/xhtml+xml を使用すると、標準的なデスクトップ・ブラウザーでコードをデバッグする際にも役立ちます。

XHTML-MP の表示

XHTML-MP を表示するには、例えば http://m.yahoo.com にアクセスしてください (Web ブラウザーでは質素に見えますが、携帯電話上では素晴しい表示になります)。View > Source の順に選択すると、文書の先頭に XHTML-MP の DTD が表示されます。

Web サイトが実際のデバイスではどのように表示されるか、さらに明確に把握するには、別のエミュレーターを探さなければなりません。一例として、Sandip Chitale のブログでは iPhone に非常によく似た Firefox プラグインを紹介しています (「参考文献」を参照)。このエミュレーターは実際のデバイスよりサイズがかなり大きいという点に気を付けてください。これは本物のエミュレーターというよりは見映えを重視したものですが、Web サイトが iPhone でどのように表示されるかを大まかに把握できます (この後すぐに、これより正確なバリデーターをいくつか紹介します)。図 2 は、Chitale のエミュレーターでエミュレートした m.yahoo.com です。

図 2. iPhone エミュレーターでの Yahoo モバイル Web サイトの表示
iPhone エミュレーターでの Yahoo モバイル Web サイトの表示

XHTML-MP の検証

いくつかのオンライン・バリデーターは、確実に整形式 XHTML-MP を送信できるようにする手助けとなります。W3C の mobileOK Basic Checker、または ready.mobi テスト・ツールのいずれかを試してみてください (「参考文献」を参照)。どちらもよくできていますが、ready.mobi エミュレーターのほうが W3C のエミュレーターより遥かに多くの情報を提供してくれます。

例えば、図 3 は W3C バリデーターによる http://m.google.com の検証結果です。

図 3. Google のモバイル Web サイトに関する W3C バリデーターのレポート
Google のモバイル Web サイトに関する W3C バリデーターのレポート

図 4 には、http://m.yahoo.com に関する ready.mobi ツールのレポートから、最初の部分を抜粋しました。

図 4. Yahoo のモバイル Web サイトに関する ready.mobi のレポート
Yahoo のモバイル Web サイトに関する ready.mobi のレポート

このレポートでは、Yahoo! に 5 点満点中 4 点の評価を付けています。少しスクロールダウンすると、さまざまなビジュアライザーによって、ページが実際にはどのように表示されるかを確認することができます。図 5 は、Nokia N70 での表示です。

図 5. エミュレーターによる Yahoo モバイル Web サイトの表示
エミュレーターによる Yahoo モバイル Web サイトの表示

ready.mobi バリデーターはページの最後に一連の詳細テストの結果を示し、それぞれに合格 (緑色)、不合格 (赤)、または注意 (黄色) のマークを付けます。図 6 の例で言うと、http://m.yahoo.com は各種デバイスで適切にレンダリングされるものの、XHTML には 100 パーセント準拠していません。

図 6. XHTML-MP 準拠エラーの表示
XHTML-MP 準拠エラーの表示

さらに下にスクロールダウンすると (図 7 を参照)、Yahoo! の画像には alt 属性がいくつか欠けていて、場合によっては画像のサイズを指定していないことがわかります。

図 7. 具体的なエラー内容の表示
具体的なエラー内容の表示

Grails と XHTML-MP

それでは、Grails についてはどうでしょう。Grails はモバイル Web にそのまま対応できるのでしょうか。図 8 に、ready.mobi バリデーターが Trip Planner アプリケーションの元のリスト・ページを検証した結果を示します。

図 8. Grails はそのままでは XHTML-MP に準拠しないことを示すレポート
Grails はそのままでは XHTML-MP に準拠しないことを示すレポート

何らかの作業が必要なことは、これでわかりました。まずは、grails-app/controllers/AirportController.groovy に mlist クロージャーを作成してください。このクロージャーの動作は、10 の要素ではなく 5 つの要素を返すという点を除いては、デフォルトのリスト・クロージャーと何も変わりません。それでも別個のクロージャーを作成することで、原型のままの list.gsp と比較することができます (リスト 6 を参照)。

リスト 6. AirportController の新しいクロージャー
def mlist = {
  if(!params.max) params.max = 5
  [airportList:Airport.list(params)]
}

次に、grails-app/views/airport/list.gsp を mlist.gsp にコピーします (後で、モバイル・ユーザーを正しいコンテンツにシームレスにリダイレクトするためのストラテジーを説明しますが、とりあえずは、この力ずくの方法で十分です)。

バリデーターは、Web サイトが XHTML-MP を返さないことについて警告を出していました。そこで、mlist.gsp を編集して必要な DTD と xmlns 属性が <html> タグに組み込まれるようにします。また、コンテンツ・タイプを text/html に設定する meta タグを無効にする必要もあります。最後のステップとして、grails-app/views/layout/main.gsp の CSS が含まれる行をこのファイルにコピーします (Grails が使用するテンプレート・ライブラリー、SiteMesh は、デフォルトで text/html ファイルのみを修飾するように構成されています)。これで、mlist.gsp はリスト 7 のようになります。

リスト 7. GSP ページから XHTML-MP への変更
<% response.setContentType("application/xhtml+xml")%>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
        "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <!--meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/-->
    <link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
    <meta name="layout" content="main" />
    <title>Airport List</title>
  </head>
  ...
</html>

このファイルの編集中には、テーブルのレイアウトも単純化したほうがよいでしょう。バリデーターは <thead> タグと <tbody> タグについても警告を出していたので、これらのタグは削除する必要があります。携帯電話の画面は横方向より縦方向に広いため、リスト 8 のレイアウトにすると見やすくなります。

リスト 8. テーブルの単純化
<table>
  <tr>
    <g:sortableColumn property="id" title="Id" />
    <g:sortableColumn property="name" title="Name" />
  </tr>
  <g:each in="${airportList}" status="i" var="airport">
  <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
    <td>
      <g:link action="show" 
              id="${airport.id}">${airport.id?.encodeAsHTML()}
      </g:link>
    </td>
    <td>${airport.iata?.encodeAsHTML()}<br/>
        ${airport.name?.encodeAsHTML()}
    </td>
  </tr>
  </g:each>
</table>

改良されたページは、iPhone エミュレーターでは図 9 のように表示されます。

図 9. iPhone 用にカスタマイズしたリスト・ページ
iPhone 用にカスタマイズしたリスト・ページ

図 10 に、この場合の ready.mobi バリデーターのレポートを示します。

図 10. 検証に合格したリスト・ページ
検証に合格したリスト・ページ

だいぶ成績が上がったと思いませんか?バリデーターを満足させるために必要な変更も、ほんのわずかで済みました。「Groovy Server Pages によるビューの変更」で説明したように、これらの変更をデフォルト・テンプレートで行うには、grails install-templates と入力します。


iPhone 用のページの開発

3 種類のデバイスのうち、サポートするのが最も簡単なのは iPhone でしょう。通常の Web ページの開発とは違った方法で行わなければならないことは 1 つとしてないからです。iPhone の Safari ブラウザーはデスクトップ・ブラウザーと同じコードベースをベースにしているため、どちらのブラウザーを使っても基本的にはユーザーが目にする表示は変わりません。ただし、Web サイトのルック・アンド・フィールに影響するレンダリングのヒントは、Web サイトが iPhone で表示される場合にだけ送信することができます。

例えば iPhone の画面サイズは 320x480 ですが、面白いことに、ブラウザーは Web ページの幅をデフォルトで 980 ピクセルに設定します。そのため、iPhone がランドスケープ・モードになっているとテキストはほとんど判読不可能になり、ポートレート・モードになっていると極小の表示になります。けれども心配は要りません。iPhone だけが認識する単純な meta タグを使用すれば、Web ページを「正しいサイズに変更」することができます。つまり、viewport タグによって、モバイル Safari ブラウザーにヒントを送信するということです。リスト 9 のコードは、iPhone で表示した場合の Web ページの読みやすさを大幅に改善します (残念ながら、Firefox ベースの iPhone エミュレーターはこの meta タグを認識しません。実際の動作を確認するには、iPhone の実物が必要です)。

リスト 9. iPhone 用の viewport の設定
<meta name="viewport" content="initial-scale=1.0" />

inital-scale の範囲は 0 から 10 で、小数値がサポートされます。あるいは、最大 10,000 ピクセルまでの明示的な widthheight の値 (リスト 10 を参照) を渡すこともできます。

※訳注: 上記段落の initial-scale は、原文では inital-scale となっていますが、initial-scale の誤りとして訳しています。

リスト 10. viewportwidth および height の設定
<meta name="viewport" content="width=600;height=400" />

iPhone でのハイパーリンク

ハイパーリンクに関して言うと、iPhone には特殊化された振る舞いが用意されています。まず、リンクのプレフィックスに http:// ではなく tel: を使用すると (リスト 11 を参照)、このリンクをクリックすることによって電話番号がダイヤルされます。

リスト 11. iPhone でのダイヤル可能リンク
<p>
telephone number: 
<a href="tel:303-555-1212">303-555-1212</a>
</p>

従来の mailto: プレフィックスを使った場合 (リスト 12 を参照) には、リンクをクリックするとメール・アプリケーションが立ち上がります。

リスト 12. メールへのリンク
<p>
mail: 
<a href="mailto:scott@aboutgroovy.com">Scott Davis</a>
</p>

また、Google Maps へのリンクを提供した場合 (リスト 13 を参照)、このリンクをクリックすると、Safari にレンダリングされる代わりに Google Maps アプリケーションそのものが立ち上がることになります。

リスト 13. Google Maps へのリンク
<p>
local google maps:
<a href="http://maps.google.com/maps?q=denver+international+airport">DEN</a>
</p>

開始ポイントと終了ポイントを渡すと (リスト 14 を参照)、ユーザーがリンクをクリックしたときに操作方向が表示されます。

リスト 14. Google Maps の操作方向
<p>
driving directions:
<a href="http://maps.google.com/maps?daddr=
    denver+airport&saddr=coors+field+denver,+co">Directions</a>
</p>

モバイル Web の場合のストラテジー

3 つの基本タイプのデバイスを対象にしたコンテンツを作成するために必要なことがわかれば、後は要求に応じてそのコンテンツを提供する方法を見極めるだけです。それには、以下の 3 つの基本的なストラテジーを自由に使えます。

モバイル・コンテンツ専用の Web サイトを作成する

前述したように、数多くの Web サイトで使用しているのは m ストラテジーです。Google、Yahoo!、CNN ではいずれもモバイル・コンテンツを提供するために、メインのサイトとは別の m ドメインを設定しています。DNS (Domain Name System) で苦労したくないというのであれば、http://mysite.org/mobile のような URL を作成して、これを移行ポイントにすることができます。また、モバイル・コンテンツ専用の .mobi ドメインを登録するという方法もあります。

ユーザー・エージェントを嗅ぎ分ける

すべての Web ブラウザーは、データを要求するときにサーバーに対して自己 (つまり Web ブラウザーの種類) を明らかにします。サーバー側ではこの情報を使用すれば、そのデバイス用にカスタマイズしたコンテンツを提供することができます (これは、http://twitter.com が使用している手法です)。

http://davisworld.org/echo.gsp にアクセスしてください。リスト 15 のページでは、単純なループを使用して HTTP リクエストの対象部分をエコーバックしています。

リスト 15. Request Headers の表示
<h2>Request Headers</h2>
<table border="1">
  <tr>
    <th>Header</th>
    <th>Value</th>
  </tr>
  
  <g:each in="${request.headerNames}" var="${name}">
    <tr>
      <td>${name}</td>
      <td>${request.getHeader(name)}</td>
    </tr>
  </g:each>
</table>

図 11 を見るとわかるように、http://davisworld.org/echo.gsp を開くときに、私の Firefox ブラウザーはそれ自体に関する大量のヒントを提供しています。

図 11. HTTP ヘッダーの表示
HTTP ヘッダーの表示

図 11 に示されている user-agent 文字列を見ると、要求側が Intel CPU を搭載した Mac を実行していることがわかります。さらに、HTML レンダリング・エンジン (Gecko) とその OS のバージョン (10.5)、実際のブラウザー (Firefox) もわかります。リスト 17 に、一般的なその他のユーザー・エージェント文字列を記載します。

リスト 17. 一般的なユーザー・エージェント文字列
BlackBerry7520/4.0.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 
    UP.Browser/5.0.3.3 UP.Link/5.1.2.12

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) 
    AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)

このように request.getHeader("user-agent")の値を取り込むことで、該当するブラウザーに適切なコンテンツを提供することができます。

ブラウザーが受け入れる内容を送り返す

3 つ目のストラテジーは、ブラウザーが実際に必要としている内容を提供することです。それぞれのリクエストには、user-agent 値の他に accept 値が含まれます。Firefox は、この accept 値を送信します。

text/html,application/xhtml+xml,application/xml;

上記はサーバーに対して、Firefox が text/html を要求していることを伝えています。サーバーが text/html データを持っていなければ、application/xhtml+xml を送信することができます。いずれもない場合には、サーバーは送信可能な MIME タイプが見つかるまでリストを順次探索します。

WAP 1.x ブラウザーは text/vnd.wap.wml を要求する一方、最近の携帯電話は application/vnd.wap.xhtml+xml を要求します。賢い開発者はこれを認識することによって、適切なデータを送信できるようになります。

もちろん、この 3 つのストラテジーは互いに相容れないわけではありません。この 3 つすべてを利用して、皆さんの Web サイトが世界 33 億の携帯電話利用者に確実に対応できるようにしてください。


まとめ

Grails アプリケーションを携帯電話での使用に対応させるには、ほとんど作業が要らないことも (iPhone の場合)、多少調整すればよいだけのことも (XHTML-MP デバイスの場合)、あるいは完全に作成しなおさなければならないこともあります (WML 1.x デバイスの場合)。この記事で説明した一連のエミュレーターとバリデーターを使用すれば、モバイル Web への対応を着実に進められるはずです。

次回の記事では、Grails でレガシー・データベースを操作する方法を取り上げます。Mapping DSL の概要、そして Hibernate アノテーションと HBM ファイルを使用する方法を学んでください。これらの方法がわかれば、既存のテーブル名とフィールド名が Grails の標準命名規則に準拠していないとしても、Grails でこれらの名前を使えるようになります。次回の記事まで、Grails を楽しみながらマスターしてください。

参考文献

学ぶために

製品や技術を入手するために

  • Grails: Grails の最新リリースをダウンロードしてください。
  • Opera Mini: 無料で入手できるモバイル・ブラウザーです。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Java technology, Web development
ArticleID=319992
ArticleTitle=Grails をマスターする: Grails とモバイル Web
publish-date=06172008