ケータイ Watch
連載バックナンバー
■ 【後編】気になるiモードコンテンツとの互換性
［2001/11/15］
■ 【前編】XHTML Basicって何？
［2001/11/14］
■ 2000年
テイク・イット・EZweb ２
【後編】気になるiモードコンテンツとの互換性
大原博之
　オープンウェーブシステムズでXHTML関連の技術をマーケティング的側面からサポート。以前は大手OA機器メーカー研究所で新規事業向け技術開発に従事。最近はXML・Java・UML・分散オブジェクトといった技術分野に関心を持っている。技術セミナー等の講演で定評がある。
Openwave Logo

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


XHTML Basicとは何か

　前編では「Openwave SDK」の使い方を中心に話を進めてきましたが、ここでもう一度、WAP 2.0で採用された「XHTML Basic」とは一体何なのか、詳しく見ておきましょう。

　XHTML Basicは元々W3Cの標準仕様です。その生い立ちを説明するには、まず「XHTML」に関しても簡単に触れておく必要があります。

　現在、パソコン向けWebコンテンツを制作する際に使われているのが「HTML」です。HTMLというのは、いわゆるSGMLベースの言語なのですが、最近の「XML」の広まりを受けて、HTMLをXMLベースに再構築しようという活動が行なわれました。その結果生まれたのがXHTMLです。XHTML 1.0はHTML 4.01と機能的には同等ですが、タグの文法解釈などがXMLに基づいているため、HTMLより厳格になっています。

　今回我々が学ぼうとしているXHTML Basicは、そのXHTMLのサブセット仕様です。サブセットを作った理由はいくつかありますが、大きくは以下の２つ挙げられます。

  • 携帯電話やネット家電など、使用可能リソースの限定された機器でWebコンテンツを見る際に、全ての機器が最低限サポートすべき共通基準が必要である
  • 携帯電話やネット家電など、独自の機能を活用したコンテンツ記述言語を定める際に拡張のベースが必要である


　それでは、XHTML Basicの特徴は何か、以下に列記してみましょう。

  • XHTML 1.1の完全なサブセットであり、XHTML Basicで作られたコンテンツはXHTML対応のブラウザーで完全に表示可能
  • 表現要素は全て外部CSSの担当とし、XHTML Basic自体は構造記述に特化
  • CSSを使うことにより、本文を変更せずとも表示結果を簡単に変更できる
  • 異なるブラウザー間の表示差異を減らすための負担が、CSSによって軽減される


　ちなみに、WAP 2.0で採用されるCSSは、一般にパソコン用のCSSとして使われている「CSS Level 2」ではなく、そのサブセットの「CSS Mobile Profile」を元にした「W-CSS」と呼ばれるものです。CSSのサブセットベースとは言っても、通常使われる機能はほとんどサポートされていますので、CSS Level 2の替わりにこのW-CSSを使ってもそれほど違和感はないと思います。

　ここでXHTML Basicで使用可能な要素タグ一覧を以下に示しておきます。そのほとんどはHTMLでパソコン向けのコンテンツを作ったことがある方々にとっては馴染み深いものですので、個々のタグについては特に説明は必要ないでしょう。

　また、他のHTML系言語のタグの個数も参考として挙げておきます。ただし、ある機能を要素と属性のどちらで実現するのかといった問題もありますので、単純に数だけを比較してもそれほど意味はありません。

XHTML 1.0 Frameset 91
XHTML 1.0 Transitional 88
XHTML 1.0 Strict 77
XHTML 1.1 83
Compact HTML 38
XHTML Basic 52
Structure Module body, head, html, title
Text Module abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
Hypertext Module a
List Module dl, dt, dd, ol, ul, li
Basic Forms Module form, input, label, select, option, textarea
Basic Tables Module caption, table, td, th, tr
Image Module img
Object Module object, param
Metainformation Module meta
Link Module link
Base Module base


CSSの使い方

　それでは、CSSを使ったXHTML Basicのサンプルを作成してみましょう。

　最も単純なCSSの書式は、 

タグ名 {属性名:値; 属性名:値; ...}
タグ名 {属性名:値; 属性名:値; ...}
...


という風に、指定したい要素のタグ名とその指定内容を並べた形式になります。

　本文中で唯一特定の要素に指定を行いたい場合、CSS内では、 

タグ名#id名 {属性名:値; 属性名:値; ...}


という形で記述します。本文では、 

<タグ id="id名">特定要素</タグ>


と記述します。

　また、複数の要素に同じ指定を行ないたい場合、CSS内では、 

タグ名.クラス名 {属性名:値; 属性名:値; ...}


と指定します。本文では、 

<タグ class="クラス名">要素1</タグ>
<タグ class="クラス名">要素2</タグ>


と記述します。

　CSSにはもっと凝った指定方法も用意されていますが、ここでは説明を割愛します。興味のある方はCSSの仕様書を参考にしてみてください。以下に、CSSを使ったサンプルを用意しておきますので、こちらも参考にしてください。

【test_css.html】
<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>XHTML Basic/cHTML</title>
<link rel="stylesheet" href="./test_css.css" type="text/css" /> 
</head>

<body>

<h1>共有テスト</h1>

<dl>
<dt>WML</dt>
<dd>WAP1.xの言語</dd>
<dt>XHTML Basic</dt>
<dd>WAP2.0の言語</dd>
</dl>

<p>
チェック模様<br />
<span class="checkon">■</span><span class="checkoff">■</span><br />
<span class="checkoff">■</span><span class="checkon">■</span>
</p>

</body>
</html>

【test_css.css】
h1 {color:blue; background-color:aqua; text-align:center;}
dl dt {border-left:solid 5px; border-bottom:solid 1px; border-color:red;}
dl dd {background-color:lime;}
span.checkon {color:red;}
span.checkoff {color:yellow;}


CSSを適用した表示結果
　CSSを適用した表示結果（test_css.htmlとtest_css.css）

　実は、現バージョンのSDKではCSSを使うときに一部制限があります。というのも、CSSファイルにはHTTP経由でアクセスしなければならないのです。つまり、コンテンツ内部で、 

<link rel="stylesheet" href="./test.css" type="text/css" />


と書いた場合、コンテンツと同じディレクトリにCSSがあるだけではダメなのです。HTMLファイルとCSSファイルの両方が「 http://... 」という形でアクセスできなければなりません。

　では具体的にどうすれば良いかですが、現状では、みなさんが契約しているプロバイダーのWeb用スペースにHTMLファイルとCSSファイルを置くか、ローカルマシン上にWebサーバーを立ち上げるかで対処してください。


SDKで既存のHDMLサイトやiモードサイトを見る

　さて、CSSの話からは少し横道にそれますが、ここでSDKを使って既存のHDMLサイトを見たり、Compact HTMLサイトを見る方法について説明しておきましょう。

　HDMLサイトを見るには、端末シミュレーターとして既存端末を選択し、デバイスの設定はゲートウェイサーバーを使う設定にすればOKです。そして、アドレスバーにHDMLサイトのURLを入力すれば、そのサイトにアクセスできるはずです。例えば、「 http://wapnavi.net/ 」と入力すれば、EZweb向け検索サイトのトップページが表示されるでしょう。

　新ブラウザーはCompact HTMLにも対応しています。つまり、そのままiモード向けの一般サイト（いわゆる勝手サイト）を見ることもできるわけです。もちろん、この機能はSDKでもサポートされており、端末シミュレーターとして新型端末を選択すればOKです。デバイスの設定はダイレクトモードでもゲートウェイサーバーを使うモードでも構いません。アドレスバーに「 http://gigahz.net/choice/i/ 」と入力すれば、iモードサイトの紹介ページが表示されるはずです。ただし、当然のことですが、このSDKではiモードの公式サイトを見ることはできません。


w@pnavi ギガチョイス
　HDMLで記述されたEZweb向け検索サイト「w@pnavi」にアクセス 　iモードの一般サイト「ギガチョイス」にアクセス

既存のEZweb端末もXHTML BasicやCompact HTML対応？

　このSDKでは、端末シミュレーターを切り替えることによって、XHTML Basicで書かれたサイトや既存のEZwebサイト、iモードの一般サイトを見ることができることはお分かりいただけたと思います。

　しかし、既存のEZweb端末に搭載されているブラウザーはHDMLにしか対応していません。ということは、XHTML Basicで制作したコンテンツは既存端末で見ることはできないのでしょうか？　もしそうだとすると、せっかく制作したXHTML Basicコンテンツを見られる人の数が少なくなってしまい、非常に悲しいことになってしまいます。

　実は今までの端末でもXHTML Basicで制作されたコンテンツを見ることは可能なのです。というのも、ａｕ（KDDI）では「HTMLコンテンツ変換機能」という機能を提供しているのです。HTML系（HTML、XHTML Basic、Compact HTML）のコンテンツをゲートウェイサーバー上でHDMLに変換することにより、既存のEZweb端末のHDML対応のブラウザー上で表示できるようしているわけです。もちろん、この機能もSDKで実際に確認することができます。

　HTMLコンテンツ変換機能では、EZwebサイトだけでなくパソコン向けサイトやiモード向けサイトを既存端末で見ることができるようになっています。パソコンと携帯電話では画面の大きさが全く異なりますので、見た目も同じというわけにはいきませんが、それなりに内容を確認することができます。

　このHTMLコンテンツ変換機能の技術詳細については、「EZweb on the street」（ http://info.ezweb.ne.jp/index.html ）を参考にしてください。


iモード端末でXHTML Basicコンテンツを見ると？

iモード端末でサンプルを表示

iモード端末でサンプルを表示
　さて、XHTML Basicで制作したコンテンツがiモード端末でどのように見えるのか、みなさんも気になるところでしょう。とりあえず、さきほど制作したCSSを使ったサンプルを、実際のiモード端末で見てみましょう。

　既存のiモード端末がXHTML Basicで書かれたコンテンツをどう扱うかに関してNTTドコモからの正式な発表はないので、この表示結果だけでははっきりとは言えない面があるのですが、少なくともこの画面ではXML宣言が表示されているのがわかります。iモード端末でXML宣言を表示してほしくない場合、コンテンツがXMLと言えるかどうかは問題になりますが、XML宣言を省略するという選択肢が考えられます。

　次に気がつく点は、CSSで指定した見た目がiモード端末では反映されないということです。これはXHTML Basicでは見た目関係の要素を全て外部CSSで指定するのに対し、Compact HTMLでは外部CSSが使えないというのが理由です。

　この問題への対処方法は、CSS指定に加えてCompact HTML（iモード対応HTML）の表現指定を記述することです。これで、ａｕの新型EZweb端末ではCSSが読み込まれますし、iモード端末では表現指定が有効になり、それぞれに対応した表示結果を得ることができます。

　言い換えれば、既存のCompact HTMLコンテンツの<head></head>内に外部CSS読み込みタグである 

<link rel="stylesheet" href="./foobar.css" type="text/css" />


を１行追加してCSSを別途用意してやるだけで、既存コンテンツに対して新型EZweb端末に適した表現を追加することができるわけです。おかげで既存コンテンツに対する変更は最小限でありながら、大きな効果が得られます。


XHTML BasicとCompact HTMLの差を埋める方法

　では、少し具体的にXHTML BasicとCompact HTMLの差を埋める方法を見ていきましょう。両方の見た目を揃えることができる表現は以下の通りです。

  • body（背景色・文字色・リンク色）
  • h1～6（左/中央/右揃え）
  • p（左/中央/右揃え）
  • フォント色


　CSSを使って上記以外の表現をしたい場合は、単純にCSS読み込み指定＋Compact HTML表現記述では正しく動作しない場合があります。たとえば、先ほどのCSSの「dl」「dt」の部分の記述を見てみましょう。

　ここで用いる「フォント色」と「border」による枠の指定を同時に行なう場合、単純に<font>タグを挿入すると、確かにiモード端末と新型のEZweb端末で同色にはなります。しかし、これではCSSによる枠指定が有効になりません。

　ではどうすればいいのか。CSSでは、複数の要素を組み合わせて記述することでCSSの適用範囲を制限することができます。これとid・class属性を利用すると、iモード端末と新型のEZweb端末で同色表現を保ちながら、さらに新型EZweb端末用のCSSによる表現を追加することができます。

　要するに、CSSでは、

  • フォント色の指定はfontとその親要素の組み合わせに対して行なう
  • border等のフォント色以外の指定はfontの親要素に対して行なう
  • id・class属性を使う際、フォント色だけ指定する場合はfontに属性を指定する、それ以外の指定も行なう場合はfontの親要素に対しても属性を指定する


わけです。一方、本文では、

  • id・class属性を使う際、フォント色だけ指定する場合はfontタグに属性を指定する、フォント色以外のCSS表現が必要な場合はfontタグとその親タグの両方に属性を指定する


ということです。

　本文は若干煩雑になってしまいますが、この方法を使えばiモード端末と新型のEZweb端末で確実に色互換性を保ちつつ、新型端末でより豊かな表現をすることができるのです。なお、この方法を使うと、厳密には記述言語がXHTML BasicでもCompact HTMLでもなくなってしまうので、この場合はDTD宣言は省略した方がよいでしょう。

　上記の方法を用いたサンプルファイルとその表示結果を以下に用意しましたので、参考にしてください。

【test_hybrid.html】
<html>

<head>
<title>XHTML Basic/cHTML</title>
<link rel="stylesheet" href="./test_hybrid.css" type="text/css" /> 
</head>

<body>

<h1 align="center"><font color="blue">共有テスト</font></h1>

<dl>
<dt><font color="red">WML</font></dt>
<dd><font color="lime">WAP1.xの言語</font></dd>
<dt><font color="red">XHTML Basic</font></dt>
<dd><font color="lime">WAP2.0の言語</font></dd>
</dl>

<p>
チェック模様<br />
<span class="checkon">
<font class="checkon" color="red"></font>
</span>
<span class="checkoff">
<font class="checkoff" color="yellow">■</font>
</span><br />
<span class="checkoff">
<font class="checkoff" color="yellow">■</font>
</span>
<span class="checkon">
<font class="checkon" color="red">■</font>
</span><br />
</p>

</body>
</html>

【test_hybrid.css】
h1 {color:blue; background-color:aqua; text-align:center;}
h1 font {color:blue;}
dl dt {border-left:solid 5px; border-bottom:solid 1px; border-color:red;}
dl dt font {color:black;}
dl dd {background-color:lime;}
dl dd font {color:black;}
span.checkon {color:red;}
span font.checkon {color:red;}
span.checkoff {color:yellow;}
span font.checkoff {color:yellow;}


シミュレーターで見た場合 iモード端末で見た場合
シミュレーターで見た場合
iモード端末で見た場合

HDMLエキスパートへの注意

　今までEZweb向けにHDMLでコンテンツを制作していた方がXHTML Basicに移行する場合、若干注意する必要があります。

　HDMLはコンテンツ記述言語ですが、同時に携帯などネットワーク環境がパソコンと比較して劣るモバイル環境に適した機能を持ちあわせています。それに対してXHTML Basicは、HTMLからの流れをくんでいることからも分かると思いますが、基本的にはハイパーリンク構造を持った単なる文章記述言語で、HDMLのような機能はほとんど持っていません。

　このため、パソコン向けコンテンツの制作経験のある人にとっては、XHTML Basicは対応が非常に容易なのですが、逆にHDMLの機能を使いこなしてきた人にとってはXHTML Basicは機能の面で不満が残るかもしれません。

　ただ、代替手段がないわけではありません。例えば、choiceなどの入力系カードに関しては、XHTML Basicのform及びinputを利用することで対応できます。また、変数を使った処理は、パソコン向けコンテンツと同じようにCGIを使ってサーバー側で処理することで同様の結果を得ることができます。

　アクセスキーはどうすればいいのかは気になるところでしょう。実は、アクセスキーを有効にする手段がオープンウェーブシステムズ独自拡張機能として存在します。以下のサンプルを入力してみましょう。１、２、３を押すことで、それぞれlink1、link2、link3にジャンプするのが確認できると思います。 

<?xml version="1.0" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >

<head>
<title>Test of accesskey</title>
</head>

<body>

<h1>accesskey</h1>

<p>
<a href="#1" accesskey="1">Link 1</a>
<a href="#2" accesskey="2">Link 2</a>
<a href="#3" accesskey="3">Link 3</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="1">link1</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="2">link2</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="3">link3</a>
</p>
</body>
</html>


おわりに

　さて、前編・後編と読んでいただき、Openwave SDK Universal Edtionを使うことで、ａｕの新サービス向けのコンテンツを簡単に作れることがお分かりいただけたと思います。

　オープンウェーブシステムズでは、SDKに関する質問窓口を用意しています。SDKを使っていて何か疑問が生じたときには、以下のアドレスにメールを送ってください。

developer-jp@openwave.com

　私どもといたしましては、今後、XHTML Basicを使ったコンテンツがどんどん増えていくことを願うばかりです。


・ オープンウェーブシステムズデベロッパーズサイト（日本語版）
　 http://developer.openwave.com/ja/
・ HyperText Markup Language（W3C）
　 http://www.w3.org/MarkUp/
・ XHTML Basic（W3C）
　 http://www.w3.org/TR/xhtml-basic/
・ Cascading Style Sheets（W3C）
　 http://www.w3.org/Style/CSS/
・ W3Cの仕様書等の文書の日本語訳集
　 http://www.w3.org/Consortium/Translation/Japanese
・ WAP Forum technical documents
　 http://www.wapforum.org/what/technical.htm
・ iモード対応HTML（NTTドコモ）
　 http://www.nttdocomo.co.jp/p_s/imode/tag/index.html


（大原博之）
2001/11/15 11:11
ケータイ Watchホームページ
ケータイWatch編集部　k-tai@impress.co.jp
Copyright (c) 2001 Impress Corporation  All rights reserved.