▼MIDP Javaゲームプログラミング▼
★ＨＤＭＬ入門★


HDMLとは
HDMLとは、「Handheld Device Markup Language」の略で、携帯端末用に開発されたコンテンツ記述言語のことです。

iモードでインターネットにアクセスして見るコンテンツが「C-HTML(Compact-Hyper Text Markup Languege)」で記述されているように、auの携帯電話でアクセスして見るコンテンツは「HDML」で記述されています。HTMLとHDMLはよく似た文法ですが、HDMLの方が携帯端末向けの要素を多数盛り込み、通信回数の削減とキャッシュ効率を高める工夫がなされています。HDMLを記述したファイルには、「hdml」という拡張子を付けます。

HDMLの特徴

カードとデッキ
HTMLと大きく違う点としてまず挙げられるのが「カード」と「デッキ」があることです。

HTMLでは1つのページは1つのファイルとして扱いますが、HDMLでは1つのファイルの中に複数のページを入れることができます。この1つ1つのページのことをHDMLでは「カード」と呼びます。そして、いくつかの「カード」をまとめた1つのファイルを「デッキ」と呼びます。


アクティビティ
HTMLと大きく違う点としてもうひとつ挙げられるのが「アクティビティ」です。

例として、Aさんのデッキに、BさんとCさんとDさんが自分たちのデッキからリンクしているとします。CさんのデッキからAさんのデッキに移ってきたとき、ボタン一つで、元いたCさんのデッキに戻ることができたら便利です。つまり、Bさんのところから来た人はBさんのデッキに戻れて、Cさんのところから来た人はCさんのデッキに戻れてというようなことを可能にする仕組を「アクティビティ」と呼びます。

エミュレータ
「Openwave SDK」という開発者向けに作られたツールキットに含まれている「UP.Simulater」という、パソコン上で動作するエミュレータを使えば、auの携帯電話を持っていなくても、実際の画面に非常に近い見え方で表示することができます。Openwave SDKは、http://developer.openwave.com/jaから無償で入手することができます。最新のものは「SDK 4.1」」ですが、日本語には対応してないので「SDK 3.3.1J 」をダウンロードします。auの携帯電話を持っていない方は、こちらを使用してください。


インストール
「SDK 3.3.1J」のインストールはインストーラの指示に従ってください。


デバイスの変更
携帯電話のインタフェースを変更するには、「Openwave Simulator用携帯電話プラグイン」を組み込む必要があります。

「SDK 3.3.1J」をダウンロードしたサイトからシミュレートしたい機種のプラグインもダウンロードします。ここでは「Toshiba C410T」をダウンロードしました。
解凍すると、「c410t.pho」と「c410_on.bmp」と「c410_off.bmp」の3つのファイルが現れるので、それを「SDK 3.3.1J」のconfigsディレクトリ(C:\Program Files\Phone.com\UPSDK331\configs)にコピーします。
スタートメニューから「UP.Simulator」を機動して、メニューの「File-Configuration...」を選び、ファイルダイアログで「c410t.pho」を選択すれば、「c401t」のインタフェースになります。


フォントの設定
フォントの設定を行わないと日本語を表示することもできません。メニューの「Settings-Device Settings」を選び、Device Settingsダイアログを開いて下さい。"Language"に"(ja) Japanese"、"Charset"に"Shift_JIS(Japanese)"を選択しFontボタンを押します。



フォント画面では"フォント"に"MSゴシック"、"スタイル"に"標準"、"サイズ"に"10"、"書体の種類"を"日本"に指定してください。


OKボタンを押せば設定が反映されます。


HDMLファイルの閲覧
HDMLファイルを閲覧するには、インターネット上にHDMLファイルを公開し、画面上のテキストボックスにそのファイルのURLを入力してください。するとそのHDMLファイルの内容が、シミュレータで表示されます。



はじめてのHDML
まずはじめに、文字列を表示するだけのHDMLを記述します。同じ内容を表示するHDMLとHTMLを見比べてみてください。

display.hdml
<hdml version="3.0" markable="true">
<display name="card1">
チェキーーーーーーー
</display>
</hdml>

display.html
<html>
<body>
チェキーーーーーーー
</body>
</html>




HDMLの基本構成
HDMLは、一番外側に「HDMLタグ」があり、その中に「カードタグ」、さらにその中に「表示エリア」という構成になっています。

HDMLの基本構成
<HDMLタグ>
<カードタグ>
表示エリア
</カードタグ>
</HDMLタグ>


HDMLタグ
HTMLが表示内容を<HTML>〜</HTML>内に全て記述するように、HDMLは表示内容を<HDML>〜</HDML>内に全て記述します。

<HDML>〜</HDML>
HDMLデッキの開始と終了を定義します。

VERSION〜HDMLのバージョンを指定します。値は3.0です。
TTL〜キャッシュエリアに保存する時間です。指定は秒単位でデフォルトは30日です。
ARKABLE〜デッキのアクセスとブックマーク許可をTRUEかFALSEで指定します。デフォルトFALSEです。


DISPLAYタグ
カードタグにはいくつか種類があり、用途にあわせて使い分けます。今回は文字列を表示するために使われる「DISPLAYタグ」を使っています。<DISPLAY>〜</DISPLAY>の範囲内に端末に表示する内容を記述します。

<DISPLAY>〜</DISPLAY>
DISPLAYカードの開始と終了を定義します。

NAME〜カードの名前を指定します。
MARKABLE〜カードのアクセスとブックマーク許可をTRUEかFALSEで指定します。デフォルトFALSEです。
TITLE〜ブックマーク時のタイトル名です。
BOOKMARK〜ブックマーク時のURLです。カードのURLと変更したい場合に指定します。
KEY〜変数名です。
DEFAULT〜変数のデフォルト内容です。

このパラメータは全てのカードタグで共通して使用できます。


整形タグとハイパーリンクとナビゲーションタグ
表示エリアには、表示文字列以外にも、整形タグやハイパーリンクやナビゲーションタグを含めることが可能です。詳しくは後で説明します。




2つのカードを持つHDML
次に2つのカードを持つHDMLを記述します。複数のカードが存在する場合、まずはじめに、ファイル内で先に記述されているカードが使用されます。各カード間の移動はハイパーリンクによって行います。

anchor.hdml
<hdml version="3.0" markable="true">

<display name="card1">
チェキーーーーーーー<br>
<a task="go" dest="#card2">くすんへ</a>
</display>

<display name="card2">
くすん<br>
<a task="go" dest="#card1">チェキへ</a>
</display>

</hdml>



HTMLでは同一のファイル内の場合、名前を指定(<A NAME="xxx">)する事によって、ページ内ジャンプを使用可能ですが、HDMLではできません。変わりにカード間の移動が可能です。カードの名前はカードタグのNAMEパラメータで指定し、カードの先頭へジャンプする仕組みとなります。カード名を指定したジャンプは、同一のデッキであっても別のデッキであっても指定可能です。


<A>タグ
ハイパーリンクを行う為のタグはHTMLと同様<A>というアンカータグを使用しますが、指定するパラメータは異なっています。

HDMLではURLを指定するHREFに当たる物("http://server/hoge.hdml"や"#name"など)をDESTというパラメータ名で記述します。加えてHDMLではハイパーリンクの仕方をTASKパラメータで指定しなければなりません。HDMLのハイパーリンクでは次のタスク種類を指定します。

go | 指定したカード、デッキへジャンプする
gosub | 指定したカード、デッキへアクティビティジャンプする
prev | 1つの前のカード、デッキへ戻る(DEST不要)
return | 呼び出されたアクティビティ元へ戻る(DEST不要)
cancel | アクティビティをキャンセルする(DEST不要)
noop | 何もしない(DEST不要)

アクティビティジャンプの解説は省略します。



選択肢を持つHDML
CHOICEカードは選択肢から1つを選択してジャンプする場合に適したカードです。選択肢のリストは「CEタグ」を使用します。リンク先の指定などは<A>タグと同じです。

choice.hdml
<hdml version="3.0" markable="true">

<choice name="top">
次から好きな言葉を選んでください<br>
<ce task="go" dest="#r1">にょ
<ce task="go" dest="#r2">なー
<ce task="go" dest="#r3">にゃーの
<ce task="go" dest="#r4">クシシシ
</choice>

<display name="r1">
「にょ」を選びました
</display>

<display name="r2">
「なー」を選びました
</display>

<display name="r3">
「にゃーの」を選びました
</display>

<display name="r4">
「クシシシ」を選びました
</display>

</hdml>






ナビゲーション設定を使ったHDML
ボタン動作を設定したHDMLを記述します。次の例はSOFT1キーを押した時にはsoftカードへジャンプし、ページバックを押した時には何もしないように(通常は前のページに戻ります)設定しています。

action.hdm
<hdml version="3.0" markable="true">

<display name="top">
<action type="soft1" task="go" dest="#soft" label="補助">
<action type="prev" task="noop">
<a task="go" dest="#next">次へ</a>
</display>

<display name="soft">
補助(SOFT1キー)結果<br>
<a task="prev">戻る</a>
</display>

<display name="next">
リンク結果<br>
<a task="prev">戻る</a>
</display>

</hdml>




ACTIONタグ
HDML端末には3つ以上のボタンが存在します。ACTIONタグではこれらのボタン動作を設定します。HDMLで設定可能なボタンは次の物があります。


また、タグとナビゲーションによる、同一ボタンに複数のタスクが割当てられている場合、アンカータグやCEタグの設定が優先されて使用されます。

<ACTIONタグ>
ナビゲーションボタンの動作を定義します。

TYPE〜ボタン種類を指定します。ACCEPT、SOFT1、PREVなどがあります。
TASK〜ボタンの動作を指定する。GO、GOSUB、RETURN、CANCEL、PREV、CALL、NOOPなどがあります。
LABEL〜ラベルエリアに表示するテキストです。
DEST〜ジャンプ先URLを指定します。
METHOD〜HTTPのアクセス方法をGETまたはPOSTで指定します。
POSTDATA〜POSTアクセスする場合の送信データを指定します。
REL=NEXT〜DEST先をユーザが決定する前にデッキをダウンロードします。
SENDREFERER〜現在のデッキURL送信許可をTRUEかFALSEで指定します。デフォルトはFALSEです。
ACCEPT-CHARSET〜ブラウザが送信する場合の文字コードを指定します。utf-8、us-ascii、iso-8859-1、shift-jisのどれかです。
SRC〜ラベルに表示する場合の画像URLです。
ICON〜ラベルにアイコンを表示する場合のアイコン名です。



変数を使ったHDML
変数を使ったHDMLを作ります。変数は主にカードの結果(CHOICEカードやENTRYカード)を格納する為に使用する、アクティビティ間のデータの受渡しに使用する、それらを合わせてCGIへの引数として使用するなどの使い方があります。変数を使用する為にはプログラム言語と同じく格納する変数名を定義しなければなりません。また、文章内で変数の内容を表示(参照)するには「$変数名」という記述を行います。

カードの結果を格納する為にはカードタグのKEYパラメータに変数名を指定します。CHOICEカードの場合、CEタグのVALUE値がKEYで指定した変数に代入されます。


次に変数SELEを使用して選択結果を表示するHDMLの例を以下に示します。

hensu.hdml
<hdml version="3.0" markable="true">

<choice name="top" key="SELE">
<action type="accept" task="go" dest="#view">
次から好きな言葉を選んでください<br>
<ce value="にょ">にょ
<ce value="なー">なー
<ce value="にゃーの">にゃーの
<ce value="クシシシ">クシシシ
</choice>

<display name="view">
「$SELE」を選びました。
</display>

</hdml>



次に、選択肢の値をCGIのパラメータとして使用する例を示します。このようにするとview.cgiのリンクは変数の内容が展開されてアクセスされます。(view.cgi?param=にょのように)

hensucgi.hdml
<hdml version="3.0" markable="true">

<choice name="top" key="SELE">
<action type="accept" task="go" dest="view.cgi?param=$SELE">
次から好きな言葉を選んでください<br>
<ce value="にょ">にょ
<ce value="なー">なー
<ce value="にゃーの">にゃーの
<ce value="クシシシ">クシシシ
</choice>

</hdml>

アクティビティ間のデータの受渡しについての解説は省略します。



画像
HDMLで使用可能な画像ファイルは2階調のBMPファイルです。ファイルサイズはモノクロ端末なら1.4Kバイト、カラー端末なら8Kバイトまでの制限があります。

<img src="mahoro.bmp" alt="AutomaticMaiden">



特殊文字
次の文字はそのまま表示できない為、それぞれ置き換えて記述する必要があります。

空白 &nbsp;
左ブラケット(<) &lt;
右ブラケット(>) &gt;
クォーテーション(") &quot;
アンパサンド(&) &amp;
ダラー($) &dol;



絵文字について
HDMLでは絵文字と呼ばれる文字コードは用意されていないません。その代わりIMGタグを使用してアイコンを表示する事が可能です。ICONパラメータに表示するアイコン名を指定します。詳しくはEzwebホームページの絵文字解説ページを見てください。

<img icon="smileyface">



ファイルサイズ制限
HDMLはゲートウェイサーバによってWAPバイナリデータに変換される為、HDMLファイルのサイズがそのまま端末の受信データサイズにはなりません。大抵のWAPバイナリデータは、HDMLファイルよりも少なくなるが、バイナリ後のデータが約1.4KBパイトを超える場合は端末で表示させる事はできません。



簡易リファレンス
※一般的なタグとパラメータのみで、アクティビティジャンプ関連やアクティビティ変数などは外しています。

HDML

カードタグ

整形タグ

イメージタグ

ナビゲーションタグ


ハイパーリンクタグ


さらに詳しく知りたい人は、EZwebホームページを作ろうのHDMLコンテンツについてが参考になります。


−戻る−


(c)2002 by Hidekazu Furukawa, Printed in Japan