HDMLでEZweb対応のページを作る（3）
HTMLをHDMLに移植してみる

佐藤　崇
2001/7/19

　　今回は、前回「HDMLの特徴とその記述方法」で少しだけ触れたHDMLのタグの詳細な記述方法やTIPSを紹介し、まとめとして簡単なHTMLをHDMLに移植してみます。なおHTMLについては、一通りの理解があることを前提として進めていきます。

　HDMLは、HTMLを携帯電話向けに最適化した記述言語です。携帯電話の持つさまざまな特性を踏まえた配慮が随所でなされています。

• 限られた出力ディスプレイ
• 限られた端末の処理実行能力
• 限られた入力装置(キーやボタン)

　HDMLでは、マークアップ言語で記述されブラウザが表示するもの（ページ）のことをページとは考えません。「カード」という概念を使ってこれを説明しています。携帯電話などの小型ディスプレイで表示される画面をPC向けサイトの延長線上で「ページ」と呼ぶのではなく、1つ1つの機能をブロック化し、1つ1つの操作体系を分割したカードのようなものとしてとらえることになっています。各カードは物理的にまとめられ、ファイル形式になる際は「デッキ」という上位概念によって束ねられています。また各カードは、アクティビティという論理的な上位概念によっても束ねられ、ブラウザの操作性の向上・ユーザビリティの向上に一役かっています。

　HDML的には、カードは4種類のタグ、<DISPLAY> <CHOICE> <ENTRY> <NODISPLAY>によって表現され、デッキは<HDML>によって表現されます（アクティビティについては次回説明します）。例えば、リスト1のように記述すると、<DISPLAY>カードというカードが表示されます（図1）。

図1　リスト1を表示したところ（画像をクリックすると拡大表示します）

　以下各カードの機能と特徴やポイントについてまとめてみました。

<DISPLAY>
　文字や画像を表示するために使われます。表示するという文字どおりの名前が付いています。リンク・画像表示など一般的な機能すべてを使うことが可能です。

<CHOICE>
　選択項目の中から任意の1つを選択、実行させる機能を実現できるカードです。<DISPLAY>カードにおいて<A>タグなどを使用しても同様の機能が実現できますが、<A>タグは後からHDMLに追加された仕様であり、リンクを張る、選択項目を表示するといった機能は<CHOICE>カードを利用して行うのがもともとの形態です。単にリンクリストを表示するだけではなく、「変数」を割り当てることも可能です（変数については次回詳しく説明します）。

<ENTRY>
　HTMLでいうところの入力フォームを実現するカードです。<CHOICE>カードと同様、フッタ部分を自在にカスタマイズできます。また入力されるデータに対して、「key=""」というアトリビュートを使ってラベル付けをします。key=""となっていることから、<ENTRY>カードなどで入力されるデータのことを「キー変数」（key value）と呼ぶことがあります。

<NODISPLAY>
　画面に何も表示されないカードです。具体的には、何が起こっているのか表示したくないときに使用するカードです。例えば、ある決まりきった操作やプロセス（ログ取得やデータの初期化など）を実行したい場合に使います。

　HDMLでも、HTMLにあるようなハイパーリンクを実現できます。大きく分けて3通りの方法があります。

<A>タグを利用したリンク処理
　<A>タグの利用が最もポピュラーな方法です。HTMLで使用する<A>タグとほとんど同義ですが、「href=""」の代わりに、「dest=""」でハイパーリンク先を指定し、「task=go」を記述し、リンク処理に関してブラウザに仕事内容を伝えます（「task=""」については次回もう少し詳しく見ていきます）。

<ACTION>タグを利用したリンク処理
　<ACTION>タグは、「ラベル機能」に対応し、その部分の動作定義をする際に使用するものです。

　ラベル機能とは、各カードを表示する際に、不足しがちな携帯電話のユーザビリティをサポートする形でWAP陣営が初期のころから取り入れている機能です。各カードを表示する部分以外に、ブラウザの画面の特定部分にブラウザのさまざまな機能を割り当てて実行できる領域を設けます。そして、ソフトキーという特殊なキーを割り当て、使い勝手をあげています（通常EZweb対応携帯電話では2つ以上のソフトキーが搭載されています）。各カードについて、<ACTION>タグなどを使って指定できます。

「type=""」で具体的に定義したいキーの名称（日本で発売中の端末の場合、たいてい「accept」か「soft1」が入ります。acceptキーはPCの左クリックに相当するもの、soft1はacceptキー以外に割り当てることのできる任意の操作キーと考えると分かりやすいと思います）は2種類以上ある場合がほとんどなので、

のように続けて記述しても構いません。また記述する場所ですが、各カードタグの「直後」が原則です。また、

のように記述すると、<DISPLAY>カードと<CHOICE>カードの2つをまとめて定義することも可能です。

<CHOICE>カードを利用したリンク処理
　<CHOICE>カードを利用する場合は、

のように記述します。ここまでくるとお分かりだと思いますが、データを渡す操作をするタグにおいて、リンク処理とは「task=go dest=""」の組み合わせで基本的には動作するようになるということです。

　画像表示の部分は、HDMLはHTMLとまったく同じです。ただし、対応画像フォーマットはモノクロ端末が1bit BMP、カラー端末では1bit BMPと8bit PNGとなっています。

　HDMLでは、画像に加えて絵文字・アイコンの利用が可能です。携帯電話コンテンツは、コンテンツ利用者に利用分をパケット通信料として請求するシステムのため、あまりたくさんのパケット代を消費させる画像の多用は好まれません。そこでユーザビリティとフレンドリーな見え方を両立するものとして、アイコン画像と呼ばれるものが利用できるようになっています。iモードにおける絵文字とほぼ同義ですが、iモードとは異なりHDMLの仕様に組み込まれている全世界共通の仕様です（WMLでも採用されており、文字コードの一部を割り当てる形式とは少し事情が異なります）。

　アイコン番号ないしはアイコン省略名称を記述します。端末内に組み込まれたデータから直接参照するので、インターネット上から画像データをダウンロードすることなくスムーズに表示できます。

　なおアイコン画像については、現行のEZwebの端末では3種類のものが用意されています。1つはモノクロ端末向けのもので、デフォルトでは175種類のアイコン画像が用意されています。後の2種類はカラー端末向けのもので、C309Hなどの@MAILに対応していないカラー端末向けのアイコン画像（モノクロ画像をカラー化したもの）と、@MAIL対応機のものがあります。@MAIL対応機のアイコン画像はほかのキャリアを意識した仕様となっており、300種類以上ものアイコン画像が用意されています。従来のEZwebのアイコン画像にあったインターフェイス上の難点（アイコンの種類によって大きさが異なる、もともとアメリカで作られたアイコン画像なので日本人向けでない）を克服し、使い勝手の向上したものになっています。詳しくはKDDIのサイトで「ビルトイン・アイコン一覧」として仕様が公開されていますので、そちらで確認してください。

　また<IMG>タグを使って、C310T以降のCMX（EZweb上の音声データなどの再生拡張機能）に対応した端末では、BGMを再生することが可能です。CMXに対応したQCELPというデータ形式を再生でき（CMX機能のうち音声のみの部分の再生が可能で、QualcommのPureVoiceが使用されているようです）、wavなどの音声データを変換して、携帯電話で再生できます。「PureVoice Technology」（英語）のページで、その説明とエンコーダなどがダウンロードできます。

　ちなみにQCELPデータは無限ループ再生ですし、PCなどと異なりバイブレーションモード以外では強制的に音声データがダウンロード、再生されてしまい、利用者にとってはいささか不親切な設計ともいえるので、あくまで興味本位での挑戦をオススメします。

　ここでは、HTML向けに作られたものを、HDMLに「移植する」という観点から詳しく見ていきます。例を挙げながら、これまで説明していないタグについても触れます。

　リスト2をHDMLで書き直す場合、<DISPLAY>カードを使うパターンと<CHOICE>カードを使うパターンの2通りがありますが、<CHOICE>カードの場合、レイアウトの汎用性が低いので、ここでは<DISPLAY>カードでの書き換え方を示します。

1行目：　<HDML>タグには、バージョン名とブックマークに関連する記述を行います。ブックマークに関連する記述を何もしないと、携帯電話からは「アクセスエラー」となるので注意が必要です。

2行目：　<TITLE>タグは、ブックマークが各カード単位で行われることから、各カードタグのtitle=""アトリビュートで処理できます。ブックマークできる・できないは、<HDML>タグのmarkable=""で指定することができるようになっています。

3〜5行目：　<center>タグはHTMLと同様利用できるが、そのタグのある1行のみ有効となります。この点がHTMLの<center>タグとは違う点です。また、各行の最後に、閉じタグは特に必要ありません。

9〜11行目：　<line>は改行位置を制御できるもので、HTMLの<marquee>のように使うことができます。ただし、いったん<line>タグを利用すると、以後の行ですべて<line>命令が働いてしまうので、<line>命令を無効にしたい最初の行で<wrap>タグを挿入する必要があります。

12行目：　<A>タグ内でのアクセスキー機能はHDMLでも利用可能だが、割り当てが可能なキーは1〜9のキーで、それ以外のキーに割り当てを行うことは機能上保証されていません。またaccesskey=0を指定すると、その<A>が埋め込まれたカード内にある<A>タグに対して上から順に1、2、3……のようにaccesskey=""が割り当てられてしまいます。またHDMLにおいてaccesskey=""を割り当てると、自動的にその前後で文章が改行し、ディスプレイ画面左に指定した番号が表示されてしまいます。

　なお、HDMLには<HR>タグがないので、改行や画像などで代替をする必要があります。

図2　リスト2のHTMLをブラウザで表示
	図3　リスト3のHDMLをブラウザで表示

◇

　タグのポイントは以上述べてきた通りです。各タグの詳しい仕様などは、KDDIのサイトの「技術情報」や「Openwave ディベロッパーウェブサイト」などを参照してください。次回は最終回ですが、EZwebのネットワークの仕様、CGI回りの解説を予定しています。

　次回の掲載は8月中旬ごろを予定しています

「連載 HDMLでEZweb対応のページを作る」