アットマーク・アイティ @IT@IT情報マネジメント@IT自分戦略研究所QA@ITイベントカレンダー  
 @IT > Master of IP Network > Mobile Connection > XHTML Basicを使ってWAP 2.0対応に挑戦する
 
XHTMLで変わるモバイルコンテンツの世界(2)

XHTML Basicを使ってWAP 2.0対応に挑戦する

佐藤 崇
2002/1/17

 

今回のおもな内容
必要となる技術仕様と情報源
対応言語とデータ形式
XHTML Basicを使って簡単なページを作る
一般的なXHTML記述に関するルール
イメージ画像・スタイルシートなどの機能を利用

 前回「WAP 2.0で採用されたXHTML Basicを考える」では、WAP 2.0の抱える状況・さまざまな問題点について概観した。今回からは、WAP 2.0に対応したコンテンツの開発に関した内容をお送りしていく。

 今回はWAP 2.0対応サービス、具体的にはKDDIのEZwebにおける次世代サービスを題材にして解説する。KDDIは「それ以外のEZweb対応端末でもベストエフォート変換を通じて対応できる」とアナウンスしているが、WAP 2.0のフル機能が存分に生かせるのは、やはり専用端末ということになるだろう。今後は、WAP 2.0対応端末のシェアが大きくなり、主流になっていくと考えられる。

 EZweb以外の携帯電話インターネットサービス、具体的にはiモードやJスカイでは、WAP 2.0対応コンテンツはうまく表示できない。しかし、PCからのアクセスでは、Internet Explorerなどの最新のバージョンであれば、表示や機能上問題になることは特にない。なお、専用の開発ツールを使った効率的なコンテンツ開発に関しては、次回以降で説明してみたい。

   

必要となる技術仕様と情報源

   

 WAP 2.0は、XHTML Basic+CSS Mobile Profileをベースとして、WAP用拡張機能部分(HDMLからの移行やWMLならではのモバイル向け独自拡張)+iモードなどのほかのモバイルサービス互換用拡張が組み合わさったものと考えれば分かりやすい。

 従って、まずは、「XHTML Basic+CSS Mobile Profile」を追いかけ、その後付随する部分について考えていけばよいだろう。

 これらの情報源として、KDDIは「EZweb On The Street」で、WAP 2.0関連の情報を公開している。現在公開されている内容は、XHTML Basicに関する基本的な記述方法、既存の言語(HDMLやCHTMLなど)からの移行に関する情報が中心となっている。今後、WAP 2.0に関して一貫した情報の公開が期待されている。

 EZweb端末にブラウザを提供している米Openwave Systemsは、コンテンツ開発者向けサイト「Openwaveディベロッパープログラム」において、ブラウザに関する情報および開発者向けSDK「Openwave SDK Universal Edition 1.0」を公開している。これらに含まれているドキュメント(XHTML BasicやCSS Mobile Profileに関する仕様書)も貴重な情報源として活用できる。ただし、開発者向けサイトは日本語化されているが、リンクされている各種ドキュメントは基本的には英文であることに注意しよう。

 そのほか、WAPフォーラムのサイトや、すでに公開されているWAP 2.0対応端末向けサイトも貴重な情報源となるだろう。例えば、C5001Tを提供する東芝では、独自にWAP 2.0に完全に対応し、しかもKDDI拡張とも取れるXMLのname space機能を使用したサイト「TOSHIBA User Club Site For C5001T」を公開している。

   

対応言語とデータ形式

   

 WAP 2.0は、インターネット標準に合わせたことが大きな特徴だということは、前回説明した。WAP 2.0のコンテンツを作成するうえで、注意するのは以下に挙げる点だ。

  • 記述言語のベースとしてはXHTML Basicを使用し、拡張子は「.html」「.htm」になる。ただし「.hdml」「.wml」などの拡張子を従来どおり使用することは問題ない。例えば「.html」と「.wml」を混在させて使用しても特に問題はない。
  • ContentTypeは「text/html;charset=Shift_JIS」となる
  • 文字コードは原則シフトJISを使用する(ただし、半角カナも使用できる)
  • プロトコルとしては、コンテンツサーバから端末まで一貫してTCP/IPをサポートする
  • SSL 3.0に対応
  • HTTP 1.1に完全対応

 対応する表示画像、マルチメディアデータの形式に関しては、公式コンテンツプロバイダ向けに利用や作成方法などの利用情報が制限されているものもあるが、基本的には以下に示すようになっている。

●イメージ画像

  GIF GIF87、GIF87a、GIF89a、アニメーションGIFまでサポート
  PNG 322パレットの256色までサポート。Transparent Progressiveには未対応
  JPG 24bitsまでサポート。ただし256色以上の部分は端末ごとに設定されたパレットに応じて減色表示される
  BMP モノクロBMPは1bitのビットマップ。カラーBMPはPNG変換されて処理されているようだ

アイコン画像(EZweb用絵文字)

  • 350種類前後の絵文字が使用できる
  • 絵文字指定方法には、EZweb用絵文字番号、絵文字名指定型などがある(後述)
  • iモード用の絵文字を、絵文字変換表にしたがってEZweb用絵文字に自動的に変換して表示できる(EZwebのゲートウェイサーバで変換している)

●マルチメディアデータ・関連リンク機能

 WAP 2.0対応EZweb端末では、既存機種と同様、ブラウザからほかのアプリケーションやダウンロードコンテンツや一部端末の特殊機能を使用する場合などデバイスレイヤを経由したデータの呼び出しなどに対応している。主なものは下記のとおりだ。なお、これらは端末ごとの対応になるので、すべての端末がすべての機能に対応しているわけではない。また、セキュリティやネットワークの保守上、動画やHTTP通信対応のezplusなどは、公式コンテンツプロバイダでなければ利用できないことに留意してほしい。

  ezmovie EZwebでサポートされる動画データ形式。ブラウザ機能と基本的に連携している
  location 基地局情報をベースとした簡易位置情報とGPSOne方式の2つに対応。前者に関しては、使用方法がKDDIから公開されている
  ezplus 端末ごとにPhase1とPhase2(HTTP通信対応)の2つに分類されている
  CMX カラオケ、着信メロディー用データ形式
  SMAF ヤマハが提唱する着信メロディーのフォーマット形式
  @Mail WAP 2.0では新たにメーラに渡すことのできる値として、複数mailto、cc、bcc、subject、bodyなどが追加された(C40x以降の@mail端末でも、WAP 2.0非対応端末ではこれらの機能には対応していない)
  そのほか vCard(住所録)、vCalendar(スケジューラ)などへのリンク機能もある

●そのほかのやや細かい仕様

 コンテンツ作成上必要となるHTTPレスポンスヘッダとしては、以下のものが利用できる。

  利用できるレスポンスヘッダ
  Age
Cache-control
Connection
Content-Length
Content-Location
Content-Type
Date
Expires
Set-Cookie

 また、HTTPリクエストヘッダとしては、以下のものが利用できる。

  利用できるリクエストヘッダ
  Cookie
Host
Referrer
User-agent
x-up-subno

などが使用できる。特にの付いたヘッダは、従来のEZweb端末(WAP 2.0非対応端末)では使用できなかったものだ。例えば、コンテンツの広告配信やコンテンツ管理などでこれらが使えることは大きな意味を持ってくる。特にHTTPリクエストヘッダで使用できるようになったReferrerは、モバイルでは初めて対応されたものだ(細かい仕様に関しては次回以降で取り上げる予定)。

   

XHTML Basicを使って簡単なページを作る

   

 これまでの内容を踏まえ、XHTML Basicを使って簡単なページを作ってみよう。サンプルをリスト1に示す。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>サンプルのページ</title>
</head>
<body>
<center>
@ITへようこそ
<i>For C5001T</i><br />
<hr size=1 />
</center>
本サイトは東芝製C5001T専用サイトです。但し一部のコンテンツは他機種からもご利用いただけます。
<br />
(c)2002 @IT
</body>
</html>

リスト1 XHTML Basicによるサンプルプログラム(半角カナを含んでいます)

 実は、HTMLでコンテンツを設計する場合と同じで、ほとんど変更点はない。上記の例ではXML宣言部分を文法どおり書いているが、KDDIのWAP 2.0実装においては、リスト2のように省略して記述することもできる。

<html>
<head>
<title>サンプルのページ</title>
</head>
<body>
<center>
@ITへようこそ
<i>For C5001T</i><br />
<hr size=1 />
</center>
本サイトはC5001T専用サイトです。但し一部のコンテンツは他機種からもご利用いただけます。
<br />
(c)2002 @IT
</body>
</html>
リスト2 XML宣言を省略したKDDI向けのサンプルプログラム(半角カナを含んでいます)

画面1 リスト1を表示した画面

 KDDI向けには、リスト2のように記述してもXHTMLとして認識される。リスト2がXHTMLである、といわれても一見では分からないのが正直な印象ではないだろうか(表面的な違いといえば、空要素の対応ぐらいである)。しかもリスト中で<br>と記述しようが、<br />と記述しようが、あるいは記述を混在させようが、従来のEZweb端末とは異なりエラーハンドリング機能がきちんと働く。文法的にイレギュラーな記述がされても、ブラウザがそれを修正して表示しているようだ。すなわち、あくまでも文法的にはXHTML Basicを目指しているが、一方で既存のHTMLをそのまま使い続けて混在させてもあまり問題がないようになっている。

 CHTMLとの互換・非互換・書き換えに関する考察については、次回以降で行いたい。

   

一般的なXHTML記述に関するルール

   

 さて、ここで一般的なXHTML記述に関するルールのまとめをしておくことにしよう。特に留意すべき点についてまとめてみた。

●XML宣言

 文書の先頭でXML宣言を行い、XMLのバージョンと使用する文字セットを宣言する(必須ではないが、文字コードを指定するときなどに求められる)。EZweb AU 3000/5000シリーズ向けには、これらの宣言文を省略することも可能だ。しかし、実際には多くのサイトではXML宣言を行った記述をしている。

 コンテンツ配信サーバでPHPを使用している場合は、「<?」部分がPHPのインジケータ部分と重複する可能性があるので、設定の変更が求められるややこしい側面も持つ。

<?xml version="1.0" encoding="Shift_JIS"?>

●DOCTYPE宣言

 Basic DTD(Document Type Definition)と呼ばれる文書型定義を利用することができる。EZwebでは、Openwave Systems社のものを使用することが推奨されている(一般にはWAPフォーラムのものと、ブラウザの提供元であるOpenwave Systems社のものがある。この点はWMLの場合と同様である)。EZweb AU 3000/5000シリーズでは、これらの宣言文を省略することも可能だが、多くのサイトではDOCTYPE宣言を行った記述をしている。

●要素名・属性名・属性値の留意点

 XHTML 1.0のDTDでは、要素名と属性名はすべて小文字で定義されており、XHTMLにてコンテンツを記述する場合には、必ず小文字で書く必要がある。また、要素は必ず引用符で囲う必要がある。HTMLでは属性の記述を省略できたが、XHTMLではできない。したがって、例えば「checked」と指定していた属性も、「checked="checked"」のように正確に記述する必要がある。

●タグの省略不可

 XHTMLはXMLのサブセットであるため、タグを省略することはできない。必ず開始タグと終了タグをつける必要がある。空要素(br、hr、img、paramなどHTMLでは単独で利用するタグ)に関しては、以下の2種類の記述方法で対応する必要がある。

<br></br>
<br />

 「<br」と「/>」の間に半角のスペースを入れることで、XHTML非対応ブラウザでもタグがエラーなく認識できるようになるので、付けることが強く推奨されている。

●オーバーハングの不可

 以下のようなタグのオーバーハングをしてはいけない。オーバーハングとは、XHTMLのタグの構造上、入れ子構造をまたいで不正な記述方法がなされている場合などを指す。

× <em>今日の連絡先<i>info@atmarkit.co.jp</em></i>
<em>今日の連絡先<i>info@atmarkit.co.jp</i></em>

●文字コード

 また、一般的なXHTML記述に関するルールとは直接的には関係ないが、文字コードに関しては、XML宣言の部分で指定する。それ以外には、

<meta http-equiv="Content-Type" content="text/html/charset=Shift_JIS>

などとして、<head></head>部分に記述してもよい。

 文字コードは、シフトJIS以外にも、通常のインターネット標準で用いられるものがすべて使用できる。何も指定しない場合は自動的に使用文字を認識して判別し、判別できない場合はシフトJISと解釈される。またSSL通信ではEnd to Endのセキュリティ上コード認識などができないので、文字変換や文字コード認識ができない。すべてシフトJISとして処理されてしまうので、注意が必要だ。

   

イメージ画像・スタイルシートなどの機能を利用

   

 次に、イメージ画像・スタイルシートなどの機能を利用したコンテンツの記述にチャレンジしてみよう。

●イメージ画像の指定方法

<img src="logo.gif" width="120" height="120" alt="画像" />

のように記述する。HTMLで使用できたalign属性は使用できないので注意が必要だ。idやclassを使ってスタイルシート指定を使用するか、<center>タグを使用する必要がある。

 またアイコン画像(EZweb用絵文字)も従来どおり使用することができる。350種類前後の絵文字を使用可能だ。絵文字指定方法は、EZweb用絵文字番号、絵文字名の2つがある。

<img localsrc="69" />
<img localsrc="star2" />

 例えば、上記のように記述すると、いずれも「」が表示される。

 また、iモード用の絵文字も、絵文字変換表にしたがってゲートウェイサーバが自動的にEZweb用絵文字に変換して表示する。

 例えば、「#F8E9#」と記述されていると、iモード端末では「」が表示される。同じコンテンツをEZwebのWAP 2.0対応端末で見ると「」が表示される。Windowsでは、「i絵文字外字フォント」などの絵文字データをインストールすると開発が容易だろう。

 なお、EZweb用の絵文字アイコンをリンクに使用した場合(<img>タグを使用した場合)、アイコン部分とそれ以外の部分でリンクが断絶されてしまうので注意が必要だ。すなわち、

<a href="go.html"><img localsrc="123" />テストページ</a>

のように記述すると、見掛け上は、

<a href="go.html"><img localsrc="123" /></a><a href="go.html">テストページ</a>

のようになってしまう。絵文字の前後で自動的にリンクが分割されてしまうのだ。ちなみにiモード用の絵文字で指定した場合、タグを使用しないで絵文字と指定した場合は文字として絵文字部分が認識されるようで、特に分断されることはない。

●スタイルシートを導入する

 WAP 2.0ではCSS Mobile Profileが使用できる。簡単な導入例を考えてみよう。スタイルシートはカスケード形式に対応するが、一番簡潔な<link>タグを使用したケースを考えてみよう(スタイルシートの解説は後述)。

<link rel="stylesheet" href="style.css" />

のような<link>タグを<head></head>内に記述することで、style.cssファイルで指定したスタイル情報を反映させることができる。記述方法は、一般的なインターネット標準で用いられるスタイルシートの方法と同じだ。

 style.cssにおいて、

.toptitle { color: #000033; font-weight: bold}

のように指定すれば、class="toptitle"で指定したオブジェクトにスタイル情報が反映される。

●ブックマーク(お気に入り登録)に関連した設定

 HDMLでカスタマイズできたお気に入り登録の許可に関する便利な機能は、XHTML Basicでも使用できる。これは<meta>タグで利用することになっている。モバイルコンテンツの場合のお気に入り登録処理は非常に便利な機能なので、ぜひ効果的に使いこなしてほしい。ただしHDMLの場合と異なり、デフォルトではお気に入り登録が可能な状態となっていて、これを禁止するか、しないか、という形での設定になる。

 お気に入り登録を禁止したいページの設定方法は、

<meta name="vnd.up.markable" wml:forua="true" content="false" />

とすればよい(wml:forua="true"部分は、XMLのname spaceにのっとった記述をしており、これはXHTML Basicでのみ可能である)。

 また、HDMLにあった特定のURLをお気に入りURLとして認識させたい場合(自動的にコンテンツのトップページがお気に入りの登録ページとなるようにする場合など)は、

<meta name="vnd.up.markable" wml:forua="true" content="http://www.atmarkit.co.jp" />

のように特定のURLをcontentの値として指定すればよい、ということになる。なおこうした指定方法では、画面メモに関する指定まではカバーできないし、加入済み課金コンテンツを表示するEZリストの方式ではないことには留意してほしい。

 逆にお気に入り誘導させたい場合は、リンク機能を使用してHDMLと同様device:を使用した形式(デバイスレイヤを経由させた形式)で記述すればよい。HDMLと同様に、title部分で日本語を指定したい場合はエンコードする必要がある。

<a href="device:home/bookmark?url=http://www.atmarkit.co.jp/&
title=Atmarkit">お気に入り登録</a>

●キャッシュコントロールに関する設定

 HDMLでは、TTLオプションの設定によって、ブラウザ内でのキャッシュ有効設定をコントロールすることができたが、XHTML Basicにはこのような属性がない。ただし、HTTPのレスポンスヘッダを利用したり、<meta>タグを使用して制御することはできる。また、新たに加わったブラウザの新機能(再読み込み機能)で、特定のURLごとに再読み込みをさせ、ユーザーが自発的にキャッシュコントロールすることもできるようになった。

 HTTPレスポンスヘッダを使用したキャッシュコントロール方法(cache-Control)を使用する場合は、

Cahe-Control:no-cache

とすると、キャッシュを無効にし、常に最新データをダウンロードするようになる。

 また、

Cahe-Control:max-age=xxxx

とすると、xxxxで指定した期間(TTLと同様秒単位で指定することが可能)キャッシュを有効にできる。キャッシュデータの処理に関する扱いは、有効、無効の判断後に関しては、HDMLのTTLのときと同様である。

 <meta>タグを使用する場合は、

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Cache-Control" content="max-age=xxxx" />

のように記述すればよい。

 なお特に指定がない場合は、GETメソッドでリクエストされた場合は30日間有効、POSTメソッドでリクエストされた場合はno-cacheと同様の扱いをされるようになっている。特にPOSTメソッドの場合は、HDMLの際キャッシュ機能が下手に働いた関係で、コンテンツ開発に問題が生じた場合があったが、今回改善されたようだ。

 上記のことを踏まえると、リスト3に示すようなページを公開できる。今回は、簡単なXHTML Basicをベースとしたページを作成するということにフォーカスしたが、次回はWAP 2.0で新たに加わったタグやCSSについて深く考察していきたい。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>

<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="vnd.up.markable" wml:forua="true" content="http://www.atmarkit.co.jp" />
<link rel="stylesheet" href="style.css" />
<title>サンプルのページ</title>
</head>
<body>
<center>
<img src="title.png" width="120" height="60" alt="ロゴ" /><br />
<div class="toptitle">Welcome @IT</div>
<i>For C5001T</i><br />
<hr size="1" />
</center>
<img localsrc="69" /><a href="device:home/bookmark?url=http://www.atmarkit.co.jp/&title=Atmarkit">お気に入り登録</a>
本サイトは東芝製C5001T専用サイトです。但し一部のコンテンツは他機種からもご利用いただけます。
<br />
(c)2002 <a href="mailto:info@atmarkit.co.jp">@IT</a>
</body>
</html>
リスト3 キャッシュコントロールなどを施したサンプルプログラム(半角カナを含んでいます)

Profile
佐藤 崇(さとう たかし)
 EZweb最大の検索総合サイト「w@pnavi」やモバイル総合コミュニティ「itokio.com(イトキオコム)」を立ち上げたBITRATING代表。WebデザインやOpenwave在籍の経験などを生かし、コンテンツ提案・作成・運営・アドバイザリ活動などを幅広く展開。自身の立ち上げたサービスの月間総PVは2500万を超える。1999年慶大卒。


「連載 XHTMLで変わるモバイルコンテンツの世界」


 


 
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

   
@ITトップMobile Connectionフォーラム トップ会議室利用規約プライバシーポリシーサイトマップ