ケータイ Watch
連載バックナンバー
【後編】気になるiモードコンテンツとの互換性
[2001/11/15]

【前編】XHTML Basicって何?
[2001/11/14]


2000年

テイク・イット・EZweb 2
第2回:とりあえず作ってみよう
佐藤 崇 佐藤 崇
Phone.com JapanでEzweb・WAPサイトテクノロジーを技術的・マーケティング的な側面からサポート。元Internet Academy Web Directionインストラクター。Webデザイナー業等を経て現職へ。Ezweb対応検索エンジン「w@pnavi」の代表も兼任。


 auが12月からスタートする次世代サービスでは、WAP 2.0が採用され、「XHTML Basic」という記述言語が使われています。本誌では、auの新端末に搭載されているブラウザーを開発しているオープンウェーブシステムズ社から大原博之氏をお招きし、XHTML Basicによるコンテンツの作り方を解説していただきます。


 前回、EZwebページを作るために必要なものを順番に追いかけてきましたが、今回は実際に簡単なページを作るところまでを見ていきたいと思います。前回の復習ですが、今回必要になってくるのは、

  • HDMLを実際に書くためのテキストエディター
  • 作成したHDMLを確認・表示するブラウザー

です。

 なお、ブラウザーは今後カラーページの作り方にも関係してきますので、最新版の「UP.SDK3.3」を用意しておいてください。「UP.SDK4.0」は、WML対応のコンテンツ作成総合ツールですが、カラーには対応していません。


■EZwebとHDML

EZweb対応端末 いきなり「HDML」という言葉を使ってきましたが、まず簡単にEZwebについてまとめておきたいと思います。

 EZwebとは、DDI-セルラー、IDO、ツーカーの携帯電話に搭載されているインターネット接続総合サービスの名称です。今日では、公式メニューに登録されているEZweb対応サイトが450サイト前後、その他独立系のもの(いわゆる勝手サイト)が1500~2000サイトほどあると言われています。

 EZwebは、Webという言葉が象徴している通り、今ご覧になっているこのホームページと基本的には同じ仕組みを使って情報にアクセスしたり、楽しんだりすることができるようになっています。そういう意味では、EZweb対応のページを作ることは、実はそれほど難しいことでもなく、むしろだれでも実践できることなのです。

 そして、そのEZweb用のページ作成の際に利用する記述言語が「HDML(Handheld Device Markup Language)」と呼ばれているものです。携帯電話向けのホームページ作成用言語としては、日本ではiモードの「Compact HTML」が広く普及していますが、世界的に見ると、HDMLもよく使用されており、「WAP(Wireless Apllication Protocol)」にも強い影響力をもっています。簡単に言えば、HDMLはHTMLを携帯電話向けに最適化した言語、と考えればよいでしょう。

 こうしてみてくるとHDMLをイチから勉強しなければならない、HDMLで作成したものは、今までとは全く別サーバーを組み立てなければならない、というような印象を受けるかもしれませんが、実は全然そのようなことはありません。HDMLは、HTMLを携帯電話に最適化しただけの言語であって、HTMLで便利な部分についてはそのまま継承されているのです。したがって、通常HTMLでホームページを作るのとほとんど同じ感覚でEZweb対応のページを作成していくことができるのです。

 作成する上で異なってくるのはたった2点のみです。

  • 拡張子。HDMLで作成されたファイルは拡張子をHTMLではなくHDMLにする必要があります。その関係でWebサーバーのMIME形式の変更をする必要があります。
  • タグ。HDMLはHTMLとは若干タグが異なります。といっても、HDMLのタグは13種類しかありませんので、覚えるのが大変というレベルでもないと思います。


■実際に作ってみる

 それでは簡単なページを作ってみましょう。HTMLと比較して考えると分かりやすいので、比較しながら見ていきましょう。例えば、次のようなHTMLのページがあったとします。


<HTML>
<HEAD>
<TITLE>はじめてのEZweb</TITLE>
</HEAD>
<BODY>
はじめてのEZweb。私と彼との出会いはちょうど一年前にさかのぼる。
</BODY>
</HTML>

 このページは、実際はただ本文に「はじめてのEZweb。私と彼との出会いはちょうど一年前にさかのぼる。」と表示されるごく簡単なページです。それでは、これをEZweb用にHDMLで書くと、どのような書き方になるのでしょうか?


<HDML>
<DISPLAY>
はじめてのEZweb。私と彼との出会いはちょうど一年前にさかのぼる。
</DISPLAY>
</HDML>

 このような形で完成します(注:このまま保存するとエラーが起こります)。まとめると、ただ<HTML>タグが<HDML>に置き換わり、<BODY>の変わりに<DISPLAY>が入っただけ、ということになります。実に単純です。あと、これに少しだけ色を加えれば、このページは完成します。

 1つは、このページをお気に入りに指定する場合や、このページにアクセスするときに問題になる設定です。

 携帯電話のページは普通のページよりも表示サイズが小さいので、沢山のページに分割することになります。また、お気に入りメニューにページのURLを登録することで、次回からダイレクトにそのページにアクセスできる「ブックマーク機能」も備えているのですが、小さく細分化された特定のページにリンクがはられると、ページの内容が混乱することがあります。

 例えば、

  1. トップページ
  2. 自己紹介のページ
  3. 日記のページ
  4. 家族の紹介

のような4ページを作った場合、表現力も少なく、違いが見えにくい携帯電話のページでは、(3)の日記の部分が他人のところと置き換わっていていても見ている人は気付かないかもしれません。

 そこで、HDMLでは初期設定では、すべてのページでダイレクトにアクセスされることを拒否し、ブックマークに入れられないようになっています。そこで、アクセス可能なページにする場合は「public="true"」、ブックマークに入れても構わないページは「markable="true"」を、<HDML>タグの中に記述します。こうした記述が入っていないページには、携帯電話からは一切アクセスできないので注意が必要です。

 さらに、ブックマークに入れることを許可したら、そのページの内容が分かるように、HTMLの<TITLE>に相当する機能を付け加える必要があります。HDMLには<TITLE>タグがなく、これは<DISPLAY>タグの中に記述することになっています。

 そして最後に、これが一番重要なのですが、HDMLのバージョンを記述しなければなりません。HTMLでいうと<HTML>タグの前に宣言する

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

に相当するようなものとお考え下さい。はじめて見た、という人はHTMLサイトのソースコードを覗いて見ると意外によく付いている宣言文だと思います。HTMLの場合は必須ではありませんが、HDMLの場合これを書かないと、そもそもブラウザーがエラーを起こしてしまいます。ここでは「version="3.0"」と記述してください。

 完成すると、このような感じとなります。


<HDML version="3.0" public="true" markable="true">
<DISPLAY title="私のページ">
はじめてのEZweb。私と彼との出会いはちょうど一年前にさかのぼる。
</DISPLAY>
</HDML>

 実は、HDMLはタグは大文字・小文字のどちらを使用しても構いませんし、""を入れなくても特にエラーなく動作します。ただし、この連載では、どれがタグで、どれがオプションで、どれがオプションの値なのかが分かりやすいように、タグは大文字で、オプションは小文字で、オプションの値は""で挟むことにします。


■ファイルを保存して「UP.Simulator」で確認

ローカルで確認
 UP.Simulatorの「goto:」の欄にパスを入力して、正しく表示できるかを確認。

 それでは、作成したファイルを保存して、ブラウザーで確認してみしょう。「UP.SDK」の中に入っている「UP.Simulator」を起動します。最新の「UP.SDK3.3」では、ローカルファイルでも正しく日本語で表示できます。

 ファイルメニューからは開くことができないので、「goto:」の欄にパスを入力します。例えば、Cドライブの直下にある「ez」フォルダーの中に「index.hdml」を保存した場合、そのパスは、

file://c:/ez/index.hdml

となります。正しく表示できていますか?



■サーバーにアップロード

 前回でも書きましたが、サーバーにアップロードする場合は、あらかじめサーバーの設定をHDMLに対応させておく必要があります。ただし、それ以外は通常のFTPのソフトウェア等を使用してアップロードすれば、正しく表示されます。

 アップロードしたら、まず「UP.Simulator」で見てみましょう。


■UP.Simulatorの使い方

UP.Link Setting
 HTTPダイレクトモードを使用する場合はプロキシの扱いに注意。

 ここでUP.Simulatorを使って、Webサーバーにアップロードしたページを確認する上での注意点を説明しておきます。原則として、設定はすべて「Setting」メニューで行ないます。

 前回も説明しましたが、UP.Simulatorには大きく分けて、UP.Linkサーバー経由でインターネットに接続するモードと、直接Webサーバーに接続するモードの2モードがあります。「UP.Link Setting」は、このモードを設定する場所です。

 実際の携帯電話では、UP.Linkサーバー経由でインターネットに接続できるシステムになっていますが、通常、ホームページを作る際には、もうひとつの「HTTPダイレクトモード」を使用する場合が多いようです。

 HTTPダイレクトモードを使用する場合、プロキシの扱いに注意しましょう。社内LAN等でプロキシ経由のインターネットにアクセスをしている場合は、プロキシボタンを選択しするようにしてください。

 また、UP.Linkサーバー経由での接続は特殊な通信ポートを使用している関係で、場合によっては利用できないこともあります。詳しくはPhone.com社の制作者向けサイトに現象が報告されていますが、カラー対応のUP.Linkサーバーは「devgatej」( http://devgatej.jpn.phone.com )という特殊なサーバーを使用する必要があるので特に注意が必要です。

Reload
 ページ情報を更新しても過去のものが表示されることがあるので、その場合は「Edit」メニューの「Reload」機能でキャッシュをクリア。

 それから、UP.Simulatorは実際の携帯電話同様、キャッシュを効果的に利用することができるようになっているので、例えば、ページ情報を更新しても過去のものが表示されることがあります。その場合は「Edit」メニューの「Reload」機能でキャッシュをクリアするようにしてください。

 このほか、UP.Simulatorでは、サーバーとのやり取りを確認したり、変数やソースコード等を確認する機能が「Info」メニューの中で利用することもできます。今後、これらの機能を色々と使うことになりますので、慣れ親しんでおくのをオススメします。

 そして、UP.Simulatorは、使用している携帯電話の見た目を変更するという面白い機能も搭載しています。これは、プラグインデータをPhone.com社の制作者向けサイトからダウンロードして、指定されたフォルダーにコピーし、「File」メニューから「Open Configuration」を選択することで利用できます。各端末のボタンは実際に押すことができ、何らかの指定されたアクションを起こしますので試してみると面白いでしょう。ボタンの中でも「MENU」ボタンは色々と使用する機会も多いのでこちらの方にも慣れ親しんでおくことをオススメします。


■UP.Simulatorで確認

 さて、UP.Simulatorの設定を終えたところで、きちんと表示されるか確認してみましょう。

 方法は至って簡単です。作成しアップロードしたファイルのURLをUP.Simulatorの「goto:」の右側の空欄に入力して、Enterキーを押してみましょう。ちなみに「http://」は省略可能です。

 ちなみに、今回作成したホームページは、下記のURLで参照することができます。

http://k-tai.impress.co.jp/column/ezweb/2000/09/07/index.hdml

 ちゃんと表示されましたか? 文字化けを起こしている場合は、前回の「Webサーバーの設定」の部分を読み返してみてください。



■よくあるエラー

コンソール
 コンソールでエラーをチェック。UP.Simulatorで表示できても、実際の携帯電話では表示できない場合もあるので注意。

 UP.Simulatorがよくはじき出すエラーを書いておきますので、うまくアクセスできない場合は参考にしてみてください。また、先ほども述べましたが、UP.Simulatorは過去のキャッシュを優先してしまうので、ページの内容を更新したら、その都度キャッシュをクリアして使うようにしましょう。


HTTP Error :404
 URLの指定が間違っています。正しいURLを再度入力してください。
HTML or Plain text. Can’t conpile this...
 UP.SimulatorをHTTPダイレクトモード接続で、通常のHTMLサイトやプレーンテキスト情報にアクセスした場合に表示されるエラー。EZwebではHTML等のサイトが一部表示できるのですが、この部分の機能をUP.Linkサーバーが担っているため、UP.Simulator単体で使用する場合はこのようなメッセージが表示されます。
HTTP Error :403
 Webサーバーのパーミッション設定が問題となって起こるエラーです。CGIを使用していたり、「.htaccess」の指定にエラーがあると表示されます。サーバーの設定を確認してください。
Check Window for possible bad content-type.
 サーバーのMIME形式の設定に誤りがあります。拡張子やMIME形式を見直してみてください。
Bad Source. Check Info Window for compile error.
 HDMLソースが間違っているときに表示されるエラーです。実際の携帯電話の場合は、ただ一律にコンパイルエラーと表示されます。UP.SimulatorのHTTPダイレクトモードの場合、ログ画面でどの部分に具体的に誤りがあるのか表示してくれるので、それを参考に修正してみましょう。
Deck Too Large. Check Info Window for errors.
 1つのページに詰め込む容量が大きすぎる場合に表示されるエラーです。実際の携帯電話の場合だと「ブラウザーの処理能力を超えました」と表示されます。カラー対応ブラウザーの場合は7.5KB以下、従来のモノクロ端末の場合は1.2KB以下にすることが推奨されていますので、ファイルのサイズを確認してください。



■携帯電話でチェック

携帯電話でチェック
 EZweb対応の携帯電話でチェック。

 EZweb対応の携帯電話を持っている方は、実際に携帯電話からアクセスしてみましょう。携帯電話のEZwebメニューには「ブラウザーメニュー」という機能が必ずついています。今アクセスしているページのURLを確認したり、画像を保存したりする機能のほか、URLを入力し、そのページにアクセスするという機能もあります。

 半角の英数字で正しいURLを入力し、実行させると、携帯電話からインターネット上にアップロードされたページにアクセスできます。正しく表示されれば、最初のEZwebページ作成は完了です。パソコンの画面上で作ったものが携帯電話の上で見えたときは、きっと感動するはずです。



■今回勉強したタグ

<HDML>

 HDMLで記述する範囲を表す。<HDML></HDML>で囲まれた部分を通常「1デッキ」(後日説明)という。

version
 HDMLのバージョンを記述する。この記述がないとブラウザーがコンパイルエラーを起こすので要注意。日本向けの場合一律に3.0として問題なし。
markable
 「true」「false」のいずれかが入る。trueでブックマーク指定が可能となる。初期設定では「false」が入っている。ブックマーク指定ができない場合、ブラウザーは「このページはお気に入りに指定できません」と表示する。
public
 「true」「false」のいずれかが入る。trueで端末から実際にアクセス可能となる。初期設定では「false」が入っている。UP.Simulatorではfalseでも問題ないが、実際の携帯電話では「アクセスエラー」と表示されるので要注意。

<DISPLAY>  文字や画像を表示する枠組みをつくる。表紙にしたいページは<DISPLAY></DISPLAY>の間に記述するようにする。

 次回は、リンクの張り方とレイアウト方法を学び、今回作成したページをさらにホームページらしくしていくことにします。




URL
  Phone.com Developer Program(HDML WMLコンテンツ制作支援サイト)
  http://developer.phone.com/ja/


(佐藤 崇)
2000/09/07 00:00

ケータイ Watchホームページ

ケータイWatch編集部 k-tai@impress.co.jp
Copyright (c) 2000 Impress Corporation  All rights reserved.