確かに、いったい誰が高速道路を走りながら小さい画面でネット・サーフィンしたいと思うでしょうか。おそらく、あなたもそんな車に誰も乗せたいとは思わないでしょう。しかし、少し見方を変えてみるとこれはとても魅力的なことです。街を歩きながら友達が素敵な新しい本の話をして、あなたはその本が欲しくなったとしましょう。その場でその本を購入でき、家に送ってくれるよう頼めたらすばらしいではありませんか。

また、シカゴのオヘア空港に着いたら接続便が運行中止になっていたとしましょう。どのゲートまたはチケット・カウンターに急いで行けばよいのかしらと思いながらも、旅行代理店に電話していらいらしながら待つことになるでしょう。電話のディスプレイですぐに代わりの便を見つけて、ゲートに直行できたら便利ではないでしょうか。また、探す手間をかけずに特定の株価の情報を得ることもできたらどうでしょうか。

今では、こうしたことすべて、いやそれ以上のことを行うことができます。ここでは、WAP (Wireless Application Protocol) と WML (Wireless Markup Language) を使用して、Palm オーガナイザー、電話などのさまざまな携帯デバイスやモバイル・デバイスを使ってインターネットから Web アプリケーションにアクセスする方法について説明します。

WML と WAP の基礎知識

Web ページを作成する場合に使うタグ言語である HTML についてはすでによくご存じのことと思います。比較のために HTML の基礎知識を復習しましょう。HTML ページを作成しそれを .HTML ファイル拡張子で保存して、Web サーバーの特定のフォルダー (ドキュメント・ルート と言います) に置けば 世界中のユーザーがそのファイルを表示できるようになります。ブラウザーからそのページにアクセスしたい場合は、http://yourserver/yourpage.htm と入力します。ここで、yourserver は Web サーバーの名前、yourpage.htm は Web サーバーのドキュメント・ルート・フォルダーにあるファイルの名前です。アクセスが行われると、サーバーは HTML ファイルからブラウザーにタグを送り、ブラウザーは画面にそのファイルをどのように表示するのか認識します。この要求と応答の手順を HTTP (Hypertext Transfer Protocol) と言います。

WML は、小さいディスプレイと携帯デバイス専用の言語である点以外は HTML とほとんど同じです。テキスト・エディタで WML ページ (実際には、カード とデック と言います) を作成し、.WML ファイル拡張子で保存します。リスト 1 に簡単な例を示します。

                
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
    "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
  <card id="Hello" title="Hello">
    <p>
      Hello from WML!
    </p>
  </card>
</wml>

WAP は、携帯電話やその他のワイヤレス・デバイスからインターネットに接続することができるプロトコルです。概念的には、HTTP と同じと考えることができます。

では、WML と WAP はどうして必要なのでしょうか。すでに世界的に利用されている HTML と HTTP をどうして使用できないのでしょうか。実際、HTML のサブセットを使用しているモバイル・デバイスもあり、通常の HTTP サーバーを介して WML を使用することもできます。しかし、新しいワイヤレス・ネットワークや携帯デバイスのメリットを本当に利用するためには、WMLとWAPによりデスクトップ環境に合わせて作られたテクノロジーを同じように使用できなければなりません。携帯デバイスとデスクトップ・コンピューターの動作はまったく異なることを覚えておきましょう。携帯デバイスは、CPU の処理能力が低く、メモリーが少なく、ディスプレイも小さく、入力機能も限られています。ワイヤレス・データ・ネットワークも、一般家庭やオフィスのネットワークより帯域幅が小さく、可用性が低く、接続の安定性も劣っています。

WML と WAP の詳しい説明に入る前に、リスト 1 の簡単な例を作成およびテストする方法を説明しましょう。その仕組みが分かればより複雑な事例に取り組むこともできるし、さらにワイヤレス・アプリケーションの開発に理解を深めることができます。

上に戻る

WML の作成およびテスト

コンピューターに Web サーバーがインストールされていれば、WML ファイルのテストはかなり簡単に行えます。しかし、まず WML デックとその MIME タイプを認識するように Web サーバーを構成しなければなりません。IBM HTTP Server を使用している場合は、この構成変更を行うには httpd.conf ファイルを編集して次の行を追加する必要があります。

AddType text/vnd.wap.wml wml

WML を使って多くの作業を実行する予定がある場合は、さらに、いくつかの MIME タイプを追加する必要があります。

    AddType image/vnd.wap.wbmp wbmp
    AddType application/vnd.wap.wmlc wmlc
    AddType text/vnd.wap.wmlscript wmls
    AddType application/vnd.wap.wmlscriptc wmlsc

Apache Web サーバーを使用している場合は、同じステップに従います。Netscape サーバーまたは Microsoft サーバーなどの Web サーバーを使用している場合は、そのサーバーのマニュアルを参照して、変更内容を確認してください。ISP を使用している場合は、ISP に問い合わせてWML ファイルを正しく処理できるかどうか確認してください。

これで、1 つ目のステップは終わりです。次に、カードを表示するためのブラウザーが必要です。標準のデスクトップ用 Web ブラウザーでカードにアクセスしようとしても、カードは正しく表示されません。せいぜい、ファイル内のタグが表示されるだけで、リスト 1 のピクチャーのようなものは表示されません。カードを正しく表示するには WML ブラウザーが必要です。

選択の幅が意外に広いことに驚かれることでしょう。WML ブラウザーは、Phone.com、Nokia、Ericsson、Slob Trot、およびその他のいくつかのサイトからダウンロードすることができます (リンクについては、この記事最後の参考文献 を参照してください)。個人的には、Slob Trot Software Oy Ab の WinWAP を気に入っています。また、Phone.com の UP.Simulator も使用しています。WinWAP ブラウザーはデスクトップ・ブラウザーによく似ていますが、UP.Simulator はまさに携帯電話そのものです。

ブラウザーを入手したら、通常のブラウザーと同じようにhttp://localhost/Hello.wml と WML デックの URL を入力します。図 1 に各種ブラウザーの結果を示します。

WML タグ

WML は、ユーザー・インターフェース・コンポーネントのタグを定義している点では HTML のタグと似ていますが、それ自体は XML (Extensible Markup Language) をベースとしているので、HTML とはかなり異なります。WMLの出力はページではなくカードと呼ばれ、WML ファイルには複数のカードを入れることができます。WML ファイルのことをデック と言います。

カードには、テキスト、イメージ、リンク、データ入力エレメント、リスト選択エレメント、フィールドセットがあります。フィールドセットは、追加 WML エレメントのコンテナの役目を果たします。WML は XML をベースとしているので、すべてのタグは開始タグと終了タグがそれぞれ対応していなければなりません。構文は大文字小文字の区別があり、小文字でなければなりません。

では、主なタグを学習しましょう。タグごとに完全な構文を示すのではなく、例をいくつか取り上げて説明します。

テキスト、テーブル、イメージ

テキストは paragraph タグで囲みます。

     <p align="left" mode="nowrap"/>

WML には、HTML のように <table>、<img>、<tr> の各エレメントがありますが、機能は HTML より劣ります。WML では、テキストを細かく書式設定をすることはできません。イタリック、太字、強調、より強い強調のタグに制限されます。

リンク

リンクは、<a> タグで表します。

     <a href="url" title="label" accesskey="1">
テキストまたはイメージのタグ
     </a>

リンクには、そのリンクを表わすタイトルが割り当てられています。ツールの説明を表示したり、音声を再生したり、電話キーのラベルとして使用する場合、デバイスごとにそのタイトルが異なります。各種デバイスとの互換性を確保するため、リンクのタイトルは最大 5 文字とします。accesskey 属性は、リンク・テキストの左に数値を挿入します。

入力エレメント

入力エレメントでは、ユーザーがテキストを入力することができます。

     Enter something:     <input name="varname" title="label" type="type"
         value="value" format="specifier"
         emptyok="boolean" size="n" maxlength="n" tabindex="n"/>

ユーザーがデータを入力すると、そのデータはvarname という変数に格納されます。type="text" を指定すると、テキストが表示されます。type="password" では、テキストは * (アスタリスク) 文字に置換されます。また、英字や数字など、ユーザーの入力が一致しなければならないデータ・フォーマットを指定することもできます。emptyok 属性を指定すると、フィールドをブランクのままにすることができます。

fieldset タグを使用して、複数のテキスト・タグや入力タグをまとめることができます。

リストの選択

select タグでは、ユーザーが選択できるオプションのリストを指定します。

     <select title="label" multiple="boolean" name="variable"
          value="default" iname="index_var" ivalue="default"
          tabindex="n">
     <option value="1"> 
         <img src="/img1" localsrc="" alt="Choice 1"/> 
     </option> 
     <option value="1"> 
         <img src="/img2" localsrc="" alt="Choice 2"/> 
     </option> 
     </select>

選択肢はoption タグで囲み、テキストやイメージとして表示されます。

ナビゲーション

その他の主なタグは、カードからのナビゲーションに関連するものです。go タグにより特定の URL を開くことができます。URL が特定のカードが指す場合は、そのカードが表示されます。URL がデックを指す場合は、そのデック内の最初のカードが表示されます。HTML の form タグの action パラメータと非常によく似ています。

do エレメントにより、ユーザー・インターフェースのメカニズムとそのアクションを結び付けることができます。ユーザー・インターフェースのメカニズムの例には、電話に付いている OK、MENU、BACK ボタンがあります。

     <do type="type" label="label" name="name" optional="boolean">
        action
     </do>

アクションには、go、rev、nook、refresh、exit などのタグがあります。

リスト 2 に、いくつかのカードのスクリプトとよく使われるタグの例を示します。

                

<?xml version="1.0"?>
<wml>
 
<card id="links">
    <p>
      Some links:<br/>
      <anchor title="Fields"><go href="#fields"/>Fields</anchor><br/>
      <anchor title="List"><go href="#list"/>List</anchor>
    </p>
</card>
 
<card id="fields">
    <p>
      First Name:
      <input name="fname" maxlength="15" /> <br/>
      Last Name:
      <input name="lname" maxlength="15" /> <br/>
      Password:
      <input name="password" maxlength="8" type="password" />
    </p>
    <do type="accept" label="Next">
        <go href="#list" />
    </do>
</card>
 
<card id="list">
    <p>
     State:
     <select title="state" multiple="false" name="state" value="GA">
     <option value="GA">GA</option>
     <option value="NC">NC</option>
     <option value="SC">SC</option>
     <option value="TN">TN</option>
     <option value="VA">VA</option>
     </select>
     <do type="accept" label="Home">
        <go method="post" href="#links" />
     </do>
     </p>
</card>
</wml>

リスト 2 の例を実行すると、次のような画面が表示されます。

WML のスクリプト

カードのレイアウトの基礎知識を学習しましたが、実際にできることはまだたくさんあります。WML Scriptというスクリプト言語があり JavaScript に似ています。WML Script は、ユーザー入力の有効性のチェック、メッセージの送信、電話番号帳のアクセスなどを実行するための汎用のスクリプト言語です。また、WML Script でメッセージやダイアログを生成することで、サーバーに戻して処理させる余分な作業を省くことができます。

WML は、WML Script 関数を呼び出してパラメーターを渡したり、WML Script 関数の内側の変数値を設定したりすることができます。WML Script は、テキストやイメージを設定したり、別のカードに移動したり、別の WML ファイルを呼び出したりすることができます。

実際のところ、このような簡単な記事で WML Script 構文を説明することはできませんので、関連するサイトのリンクを参考文献 に挙げておきます。しかし、どのようなものか簡単にわかるように、リスト 3 でアニメーションの例を紹介します (ただし、アプリケーションを単に飾るだけのアニメーションは薦められませんが、どうしてもアニメーションを取り入れたいと思った場合は、アプリケーションの機能がその本題であることを忘れないようにしましょう)。

<?xml version="1.0"?>
<wml>
  <card title="A simple animation">
    <onevent type="onenterforward">
      <refresh>
        <setvar name="frame" value="exclamation1"/>
        <setvar name="sleep" value="2"/>
      </refresh>
    </onevent>
    <onevent type="ontimer">
      <go href="animate.wmls#main()"/>
    </onevent>
    <timer value="$(sleep)"/>
    <do type="accept" label="Done">
      <go href="Hello.wml"/>
    </do>
    <p align="center">
      <img alt="" src="" localsrc="$(frame)"/>
    </p>
  </card>
</wml>

この例では、いくつかの新しい機能に注意してください。onevent タグは、新たにイベントを発生させカード・デックに引き渡します。その次のタグでは、タイマーを定義し、ボタンが押されたときに実行されるアクションが定義されています。

カードが初めて表示されるときには、1 行目の中心に感嘆符のグラフィックが表示されます。次に、タイマーが起動され一定の時間 (ミリ秒単位) 実行されます。タイマーが切れると、リスト 4 の WMLScript 関数が呼び出されます。

extern function main()
{
  var frame = WMLBrowser.getVar("frame");
  if (frame == "exclamation1")
  {
    WMLBrowser.setVar("frame", "exclamation2");
  }
  else
  {
    WMLBrowser.setVar("frame", "exclamation1");
  }
  WMLBrowser.refresh();
} //main()

この関数は実際には簡単です。frame 変数の値を取得し、既に組み込まれている感嘆符を表わす２つのグラフィックスがトグルします。その後、カードをリフレッシュして最初からもう 1 度実行されます。

この例で使用されているグラフィックは、電話のメモリーにロードされているので WinWAP ブラウザーでは表示されません。使用している電話シミュレーターによっては、すべての電話機能を動作させられないものもあります。これは、モバイル・デバイスを扱う場合に大切なことで、機能的な違いはたくさんあるので、カードを作成する場合には十分に注意しなければなりません。次に、どのようなことに注意しなければならないか説明します。

上に戻る

小さい画面に合わせた設計

WML と WMLScript は危険をはらんでいることを、十分におわかり頂けたと思います。ここから、WML アプリケーションをより使いやすいものにするための基本的な考え方を説明しようと思います。電話などのモバイル・デバイスのディスプレイは小さく入力機能も限られているため、使いやすさは非常に重要です。実際、こうした制約があるため、WML の設計は多くの問題を含んでいます。

次に、ワイヤレス Web アプリケーションの設計する場合に覚えておかなければならない 5 項目を紹介します。

• これは、PC ではなく電話です。優先されるのは、ボタンを押すことではなく電話で話すことです。操作を簡単にするためには、ナビゲートするカードの数を最小限に抑え、データ入力を最小限に抑える必要があります。
• データの入力はとても大変です。キーパッドでABC と入力する場合、2のキーを A の文字を入力するために1 回、次に B の文字を入力するために 2 回、最後に C の文字を入力するために 3 回押さなければなりません。そのため、操作が簡単になるように、入力しなければならないデータの量を最小限に抑えてください。たとえば、都市名すべてを入力するのではなく郵便番号や空港コードの入力させるとか、ユーザーがキーで入力するのではなくデータを選ぶ選択リストを表示させる、などが考えられます。
• 通信時間は割高でバッテリーの寿命も限られています。 電話からの Web アクセスは料金が高いので (安くなることを期待しましょう)、ブラウジング・セッションは最小限に抑える必要があります。バッテリーの寿命に関しても同じです。最速のパフォーマンスが得られるよう、アプリケーションは小さくし最適化してください。アニメーションは楽しいですが、単なる飾りにすぎない場合はお勧めしません。必要の無い演算は避けましょう。つまり、演算はサーバ上で行うようにすればサーバー との間で余分な通信が発生しません。
• 技術的な知識が乏しいほど要求が多くなります。ワイヤレス・アプリケーションを使用しているユーザーは、特定の質問に対する答えがすぐに返されることを期待するでしょう。彼らはいつも ネット・サーフィンしているだけではないからです。技術的な知識が豊富なユーザーなら、なおさらブラウジングなどしていないでしょう。携帯電話を使用して旅行の予約をしているのは、たぶん空港のどこかで足止めされている人であって、家でくつろいでいる人ではありません。アプリケーションに悩まされた人は、二度とそのアプリケーションを使ってみようとはしないので、エンド・ユーザーのことを頭に入れて設計およびテストを行いましょう。
• 携帯デバイスはさまざまです。すべてのデバイスにここで示した機能があるとは限りません。アプリケーションは、サポートしたいすべてのターゲット・デバイスでテストするようにしましょう。

数年後には、ほとんどの人がデスクトップ・コンピューターではなく、携帯電話からインターネットにアクセスできるようになるでしょう。実際、日本ではすでに現実になっています。WML は、これらのユーザーがいつでも、どこでも利用できる Web アプリケーションを作成するための強力で新しい方法なのです。

上に戻る

ダウンロード

ダウンロード形式について

参考文献

• この記事のソース・コード は zip 形式でダウンロードできます。
  
  
• WML、WMLScript、WAP の仕様については、WAP フォーラムの Web 技術ページを参照してください。
  
  
• Wapsody とWiredAnywhere については alphaWorks を参照してください。
  
  
• WinWAP ブラウザーは、Slob Trot の Web サイト からダウンロードできます。
  
  
• ワイヤレス・アプリケーション開発専門のオンライン・マガジンwirelessdevnet.com を参照してください。
  
  
• 読者の方々から IBM は WAP や WML をどう具体化するのかというご質問をいただきました。その答えの 1 つが Lotus Mobile Services for Domino です。
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• WML と WAP の基礎知識
• WML の作成およびテスト
• 小さい画面に合わせた設計
• ダウンロード
• 参考文献
• 著者について
• コメント