HDML

HDMLについて

HDML(Handheld Device Markup Language) は、 Phone.com (旧Unwired Planet)らによって提唱されたコンテンツ記述言語で、 携帯電話や腕時計などの、 画面が小さくて入力装置が限られた端末で使われることを前提に設計されています。 WWWの標準化団体 W3C に バージョン2.0の仕様書 がありますが、現在よく使われているのはバージョン3.0です。 また、将来は HDML から WML へと移行するよう準備が進められています。 日本では、 KDDI が、au ブランドで販売している携帯電話を使って、 HDML コンテンツにアクセスできます。

Step1. MIME TYPE

HTTPで送られるファイルには、 MIME TYPE というものがあります。 例えば、拡張子が .html または .htm のものは text/html で、 .jpg のものは image/jpeg という MIME TYPE になります。 Windows や UNIX ではファイルの種類を拡張子で区別しますが、 インターネットではこの MIME TYPE で区別するため、 これをきちんと設定しておかないと、 ブラウザを混乱させてしまうことになります。 現在では、かなりのサーバが HDML に対応していますが、 ユーザの方で設定をしなければならない場合もあります。

HDML の MIME TYPE は、 text/x-hdml です。 これを text/html と設定してしまうと、たとえ拡張子が .hdml になっていても、ブラウザはそれを HTML と解釈して表示するため、思ったような表示になりません。

実際に MIME TYPE を設定する方法は、 サーバによって様々ですが、 .htaccess が使える場合には、その中に

AddType text/x-hdml;charset=Shift_JIS .hdml

という1行を追加することで、拡張子が .hdml のファイルを text/x-hdml として送出するように設定されます。 .htaccess が使えない場合は、 サーバの管理者の方へ設定を頼んで下さい。 尚、上記の例の文字コードはシフトJISです。 他の文字コードで書きたい場合には、 Shift_JIS のところを適宜変えてください。

ところで、 Phone.com では、Windows 上で動作する UP.Simulator というブラウザを配布しています。 これは、会員登録が必要ですが、無料で入手できます。 このブラウザは、日本語の表示できる文字コードでは、 Shift_JIS および UTF-8 にのみ対応しており、 他の文字コードで書かれたコンテンツは完全に拒否されます。

Step2. Hello World!

<hdml version="2.0" markable="true"> <display title="Hello World">     Hello HDML World! </display> </hdml>

プログラミング言語の入門書には必ずあると言って良いほどお馴染みの Hello World! です。 http://www.houshinji.org/hdml/hello.hdml でアクセスできます。 また、これを含む全てのサンプルは、 http://www.houshinji.org/hdml/index.hdml からリンクされていますので、 そちらをご覧になるのが手っ取り早いかもしれません。

HDML には デック と カード という概念があります。 トランプをする人にはお馴染みの言葉ですが、トランプの1枚1枚をカード、 それを束にしたものをデックと言いますね。 それと同じように、HDML はカードという構成単位から成り、 カードを集めたものがデックということです。 仕様書では、デックは HTML で言うページにあたると説明されていますが、 実際の表示はカード単位で行います。

この Hello World! というデックは、1枚のカードから成っています。 <display title="Hello World!"> から </display> までがカードで、<hdml …> から </hdml> までがデックです。

カードにはいくつか種類がありますが、ここでは画面に文字を表示する display というカードを使っています。 title="Hello World!" とあるのは、このカードのタイトルで、 ブックマークするとき等に使われます。

さて、今度はデックの方を見てみましょう。 version="2.0" というのは、 このデックが HDML のどのバージョンに基づいているかということです。 ここでは 2.0 という古いバージョンを使っていますが、 現在多く使われているのは、3.0 です。 markable="true" というのは、 このデックがブックマークできることを示しています。 これが無いデックは、ブックマークできません。

Step3. How are you?

<hdml version="2.0" markable="true"> <display name="how" title="How are you?">     <action type="accept" task="go" label="How" dest="#fine">     How are you? </display> <display name="fine" title="Fine. And you?">     <action type="accept" task="go" label="Fine" dest="#how">     Fine. And you? </display> </hdml>

さあ今度はカードが2枚になりました。 2枚のカードを区別するために名前をつけましょう。 1枚目を "how"、2枚目を "fine" とします。 つけた名前は name= で指定します。

このデックがどう見えるか、HDML 端末で http://www.houshinji.org/hdml/howareyou.hdml にアクセスしてみてください。 まず、画面に「How are you?」と表示されますね。 そして、「How」という選択肢が見えます。 では、「How」を選んでください。 画面が変わりました。 今度は「Fine. And you?」と表示され、「Fine」という選択肢が見えます。 これを選ぶと、最初の画面に戻ります。

大体仕組みがお分かりになりましたでしょうか？ <action type="accept" label="xxx"> というのは、「Ok」「確認」「次へ」…等の種類のメニューが表示される位置へ 「xxx」という文字を表示せよという意味で、 task="go" dest="url" というのは、そのメニューが選択されたとき、url へジャンプせよという意味です。 url のところへ #<カード名> と書けば、そのカードへジャンプします。 今回は2枚のカード同士でジャンプしています。 ちなみに、label には文字制限があり、半角6文字まで となっています。

Step4. Where are you from?

<hdml version="2.0" markable="true"> <choice title="Where are you from?">     Where are you from?     <ce task="gosub" dest="#japan">Japan     <ce task="gosub" dest="#other">other country </choice> <display name="japan" title="日本">     こんにちは！ </display> <display name="other" title="other country">     Hello! </display> </hdml>

display 以外のカードも使ってみましょう。 いくつかの選択肢を並べるときには choice というカードを使います。 そして選択肢の1つ1つは <ce> で表します。 <ce> は <action> に似てますね。 task="go" でも良いのですが、ここでは gusub を使ってみました。 gosub を使うと、ジャンプした後、元の場所に戻ってくることができます。

http://www.houshinji.org/hdml/wherefrom.hdml でアクセスしてみてください。 「Japan」を選ぶと「こんにちは！」、「other country」を選ぶと「Hello!」と表示されます。

Step5. What’s your name?

<hdml version="2.0" markable="true"> <entry title="What’s your name?" key="name">     <action type="accept" task="gosub" dest="#good" vars="name=$(name)">     What’s your name? </entry> <display name="good" markable="false">     Oh, $(name)!<br>     So fantastic name! </display> </hdml>

http://www.houshinji.org/hdml/whatname.hdml にアクセスしてみてください。 まず、「What’s your name?」と表示され、文字入力ができるようになります。 そこへ「はなもげら」と入力してみてください。 すると、「Oh, はなもげら！ So fantastic name!」と感動してくれますので、 「いやあ、それほどでも」と頭の一つも掻いておいてください。

entry というカードを使うと、文字入力ができます。 <entry … key="name">とありますね。 こうすると、name という名前の変数が用意され、 入力した文字がその変数に代入されます。

次に <action … vars="name=$(name)"> を見てください。 $(name) というのは、このカードで今使われた変数の内容です。 vars="name=$(name)" と書くことで、 次に呼び出すカードでも name という名前の変数が使えるようになり、 その内容はこのカードの変数 name と同じになります。

ところで、ここの display カードは、 name になにがしかの値を入れて呼び出されることを前提にしているので、 ブックマークされるのは好ましくありません。 そこで、markable="false" を入れておきます。

Step6. How old are you?

<hdml version="2.0" markable="true"> <entry title="How old are you?" key="age" format="*N">     <action type="accept" task="go" dest="cgi-bin/nph-howold.cgi?age=$(age)">     How old are you? </entry> </hdml>

http://www.houshinji.org/hdml/howold.hdml です。 「How old are you?」 と聞かれるので、20 と答えてみてください。 「You are monkey :-)」 と言われました。 何が言いたいのか良くわかりませんね。馬鹿にされてるんでしょうか？

いいえ、これはどうも 「あなたは猿年生まれですね」と言いたいらしいのです。 「変な外人」と返してあげてください。

ここでは CGI を使っていますので、別にスクリプトを用意しなければなりません。 CGI そのものについてはここでは説明しませんので、他を参照してください。 HTML の CGI と違うのは、Content-Type が text/x-hdml であることと、HTML でなく HDML を出力することだけです。

format="*N" というのがありますね。 これは、「ここに入力できるのは数字だけ」 という意味です。 もっとも、端末によっては数字以外も入力できたりしますが、それはご愛敬です。

SSI を使いたい場合には、もし、.htaccess が使えるなら、

AddHandler server-parsed .hdml

という1行を追加してみてください。 それ以外の場合は、サーバによって様々ですので、管理者に問い合わせてください。

Step7. How much is it?

<hdml version="2.0" markable="true"> <choice ikey="n" title="How much is it?">     <action type="accept" task="gosub" dest="#add" vars="n=$(n)&sum=$(sum)" receive="sum" label="Input">     <action type="soft1" task="go" dest="#ans" label="Fin">     $(sum)     <ce>1     <ce>2     <ce>3     <ce>4     <ce>5     <ce>6     <ce>7     <ce>8     <ce>9 </choice> <nodisplay name="add">     <action type="accept" task="return" retvals="$(sum)$(n)"> </nodisplay> <display name=”ans”>     &dol;$(sum)? It’s too high! </display> </hdml>

http://www.houshinji.org/hdml/howmuch.hdml です。 「How much?」と聞かれて、その値段を答えるところ、という設定です。 選択肢から適当な数字を選んで答えてあげてください。 でも、0 は入力できません(この役立たず！)。 ま、まあとにかく、色々な場面で応用できる技術だと思います。 ちょっと複雑ですが、じっくり流れを追ってみてください。

ikey="n" という部分がありますね？ ここは choice カードですから、選択肢が並べられるわけですが、 ユーザが選択肢の中から選んだとき、 この ikey で示された変数に選択肢の番号が入ります。

ちょっとわかりにくいですか？ 例えば、ここでは 1～9 までの選択肢が並べられています。 その中からユーザが 3 を選んだとき、変数 n に 3 という値が入ります。

ここで重要なのは、 変数 n に入る値は、選択肢の順番によって決まるということです。 ユーザが 3 を選んだとき、変数 n に 3 が入るのは、 そこに 3 が表示されているからではなく、 それが上から 3 番目の選択肢だからです。

次に、receive="sum" というのがありますが、 これは次のカードにある retvals="$(sum)$(n)" と対をなすものです。

次のカードと言えば、何だか見たことの無いカードですね。 nodisplay とあります。 これは、何もしないカード です。 このカードにジャンプすると、すぐに <action type="accept"…> を実行します。 一見、何の役にも立たなそうですが、 変数の値をセットしたい時などに重宝します。

さて、receive と retvals の話題に戻りましょう。 これらは、呼び出されたカードが、呼び出し元のカードの変数をセットするのに使います。 ここでは、 $(sum) と $(n) を連結したものを、 新たな $(sum) の値として返しています。 複数の値を返したい場合には 「receive="a;b"」 「retvals="alpha;bravo"」 のように、セミコロンで区切ります。 これで、変数「a」「 b」に、 「alpha」「bravo」という値が入ります。

変数が行ったり来たりして、ややこしい例でしたね。 HDML では、変数を表すのに $ という文字を使います。 したがって、文中には $ を使ってはいけません。 記号としての $ を表示したい場合には、 &dol; のように書きます。 CGI を使わなくても、変数を使ってある程度動的に表示が変えられるのは、 HDML の利点の一つだろうと思いますので、頑張って使いこなしましょう。

Step8. More HDML

さて、HDML の世界をざっと一巡りしてみました。 後は、実際にコンテンツを作っていくことにしましょう。 一番頼りになるのは、 Phone.com の配布している UP.SDK ですが、何分にも英語です。 ezweb.ne.jp の HDML タグ説明 を参照しながら、詳しい説明が欲しい部分だけ、UP.SDK のドキュメントや、 バージョン2.0の仕様書 を読むのが良いかも知れません。 また、 WAP でわっぷっぷ や、そこからのリンクも役立ちます。