前回で簡単にとりあえず文字を表示するページをつくることまではなんとかできるようになったのではないかと思います。今回は、これを少し「ページ」らしくしていくことを中心にレベルアップを図ります。
■レイアウトを工夫しよう
HDMLは、そもそも携帯電話のような環境で使われるコンテンツ（ページ）を作成することを前提とされた記述言語なので、レイアウトや表示に関するタグやオプションは実はそれほど多くありません。この際、まとめて勉強しておきましょう。
<BR>
改行タグ。HTMLの<BR>と全く同じです。改行指定がない場合、文章は画面の右いっぱいまで貼り付けられた後で自動的に改行しますが、この<BR>を使用することで思ったところで意図的に改行させることができます。
<LINE>
改行禁止タグ。ちょうど<BR>と反対の位置付けのタグとなります。ただし、<LINE>で規定された行以降は<WRAP>（後述）まで各行でその命令が有効になります。これは、間に<BR>タグが入っても有効となります。画面に収まりきらない部分は、表示が交互に切り替わって表示されるようになっています。HTMLの<MARQUEE>と同じような効果をもつものだと考えてもよいでしょう。また、<LINE>タグの前後では自動的に強制改行が実行されるので、表示には気をつけるようにしましょう。
<CENTER>
センタリングタグ。このタグは各行の先頭に記述する必要があります。このタグが書かれた行は、画像・文章ともにセンタリングされます。HTMLの<CENTER>と非常によく似ていますが、注意すべき点としては</CENTER>というタグがないということ。すなわち<CENTER></CENTER>で囲まれた部分がセンタリングされる、というタグではなく、<CENTER>タグが置かれた行のみセンタリングされるという部分に留意する必要があります。
例えば、HTMLで、
<CNETER>
1.Japan<BR>
2.United States of America<BR>
3.China
</CENTER>
|
とある場合、HDMLになると、
<CENTER>1.Japan<BR>
<CENTER>2.United States of America<BR>
<CENTER>3.China
|
と記述しなければならない、ということです。
<RIGHT>
右寄せタグ。これも実行したい行の最初に宣言します。その行の画像・文字が右寄せで表示されます。これも改行されると命令は無効となります。
<WRAP>
説明に困るタグなのですが、<BR>タグの機能がより強固になったタグと考えればわかりやすいでしょう。このタグを使用すると、強制的にその前後で改行されます。実はこのタグ、UP.Linkサーバーを経由して携帯電話にデータが渡されるソースコードの各行には大概付いています。例外は<LINE>タグで規定されている行です。
つまり、簡単に言ってしまえば、<WRAP>は<LINE>と反対の意味を表わすタグと考えればよいでしょう。<LINE>タグは、改行しても他のタグとは異なり、その効果が他の行に及んでしまうのですが、これをこの<WRAP>タグを使用することで解除することができます。
<LINE>今日の一押し着信メロディー<BR>
今日の一押しニュース
<WRAP>■東京都港区で集中豪雨。一時間に120ミリもの大雨がふりました。
|
上記の例の場合、「今日の着信メロディー」「今日の一押しニュース」の行は、画面の右端にまで達してしまっても<LINE>タグが有効に働いて改行されないのですが、<WRAP>タグ以降の行では、自動的にその部分が改行される仕組みとなります。HTMLの</P>と同じように、特に付けても付けなくても表現上は大差がないタグと考えてください。
<TAB>
表組みタグ。HTMLで<TABLE>タグを使用して表組み表示するのを、HDMLで実現しようとする場合に利用します。
■リンクを張る
次にリンクについて考えていきましょう。HDMLでは、ページからページへリンクを張る方法が数種類あります。まず、ここでは一番HTMLに近い、オーソドックスなタグについて見てみましょう。
<A>タグの使用方法は、HTMLと特に変わりありません。ただ、若干オブションの書き方が異なりますので、その部分だけ注意しましょう。
例えば「index.hdml」から「index2.hdml」へのリンクを設定したい場合、
<A task="go" dest="index2.hdml">リンク</A>
|
と記述します。HDMLの<A>タグでは、「href=""」の代わりに「dest=""」（destはdestinationの略）を使用し、「task=""」という新しいオプションを設定する必要があります。「task=""」については、応用編で詳しく見ていきますが、HDMLの高度なブラウジング処理をするときに使用する、非常に汎用性の広いオプションです。ここではとりあえず「task="go"」としておきます。
あと、HDMLでは、iモードのCompact HTML同様に、「アクセスキー機能」（accesskey=""）を使用することができます。アクセスキー機能とは、携帯電話の番号ボタンを押すことで、リンク先にジャンプできる機能のことです。HDMLでは、0から9まで使用することができます。なお、1から9までのアクセスキーについては、どの番号が割り当てられているのかを表示するために、リンク設定行の左端に指定した番号が表示されるようになっています（0は表示されないので注意が必要です）。
また、HDMLにはHTMLでは規定されていない先取り機能「prefech機能」（rel="next"）が組み込まれています。これは、ユーザーがリンクを選択する前に、次のページのデータを勝手に取得しに行かせる機能のことです。ユーザーがリンクボタンを押した際に、その都度「リンク先を呼び込み中です」と表示されるのを省くことができるかなり便利な機能なので、是非使いこなしたいところです。
これらを駆使すると、
<A task="go" dest="index2.hdml" rel="next" accesskey="1">次のページ</A>
|
となります。
■時刻表ページを作ってみる
それでは、今回勉強したレイアウトとリンクの機能を使用して簡単なページを作ってみましょう。ファイルは２つ、同じディレクトリー内に用意します。名称はここではそれぞれ「index.hdml」「index2.hdml」とします。
index.hdml
<HDML version="3.0" public="true" markable="true">
<DISPLAY>
<CENTER>■■ 時刻表 ■■<BR>
<CENTER>■空港ﾘﾑｼﾞﾝﾊﾞｽ■
<LINE>2000/09/01よりダイヤ改正されました。
<WRAP>
<CENTER>======<BR>
<A task="go" dest="index2.hdml" rel="next">調べる</A>
</DISPLAY>
</HDML>
|
index2.hdml
<HDML version="3.0" public="true" markable="false">
<DISPLAY>
▼空港行き<BR>
<RIGHT>新宿駅<BR>
<TAB>新宿発<TAB>空港着<BR>
<TAB>7:00 <TAB>8:30<BR>
<TAB>8:00 <TAB>9:30<BR>
<TAB>9:00 <TAB>10:30<BR>
<TAB>10:00 <TAB>11:30<BR>
<TAB>11:00 <TAB>12:30<BR>
<TAB>12:00 <TAB>13:30<BR>
<TAB>13:00 <TAB>14:30<BR>
<TAB>14:00 <TAB>15:30<BR>
<TAB>15:00 <TAB>16:30<BR>
<BR>
<A task="go" dest="index.hdml" accesskey="9">戻る</A>
</DISPLAY>
</HDML>
|
 完成したら前回学んだように、まずUP.Simulatorで確認し、その後、実際にサーバーにアップロードして、携帯電話からも確認してみましょう。
ちなみに、今回作成したホームページは、下記のURLで参照することができます。
http://k-tai.impress.co.jp/column/ezweb/2000/09/14/index.hdml
■今回勉強したタグ
| <BR> |
改行タグ（HTMLと同様）。 |
| <LINE> |
改行禁止タグ。<WRAP>がくるまで文字列等に一切改行を禁止する。画面からはみ出た部分は、HTMLの<MARQUEE>と同じような入れ替え表示をする。 |
| <CENTER> |
センタリング。HTMLの<CENTER>と同様だが、終了を示す</CENTER>は存在しない。 |
| <RIGHT> |
右寄せタグ。<BR>か<WRAP>が現れるまで命令が有効となる。 |
| <WRAP> |
<BR>とほぼ同じ。ただし、<LINE>解除の意味合いが加わる。データ処理的には各行の先頭にいれるのが好ましいが、特に入れなくてもよい。 |
| <TAB> |
表組みタグ。HDMLでも簡単な表組みで情報を整理できる。 |
| <A> |
アンカータグ。HTMLと同様、リンクをはることができる。
- task
- 「go」「gosub」「prev」等が入るが、ここでは単純に「go」でOK。処理を実行させた際のブラウザーへの信号定義のようなもの。
- dest
- 行き先のファイル名や場所を指定するオプション。実は「href=""」でもエラーは起こらないが、ジャンプはしない。なお、この部分に日本語等の２バイト文字が入っていると、CGI等を使用したパスであったとしてもブラウザーは一律にコンパイルエラーを表示するので注意が必要。
- accesskey
- アクセスキー機能。携帯電話の番号ボタンとリンク処理を連携できる便利なオプション。
- rel
- ここに「next」と入れると、先取りダウンロード機能を実行できる。
|
次回は、画像を活用したコンテンツの作り方を見ていきます。
■ ＵＲＬ
Phone.com Developer Program（HDML WMLコンテンツ制作支援サイト）
http://developer.phone.com/ja/
（佐藤 崇）
2000/09/14 00:00
| 
