ケータイWatch　テイクイットEZWeb

連載バックナンバー

■	【後編】気になるiモードコンテンツとの互換性［2001/11/15］

■	【前編】XHTML Basicって何？［2001/11/14］

■

2000年

テイク・イット・EZweb ２

【前編】XHTML Basicって何？

大原博之
　オープンウェーブシステムズでXHTML関連の技術をマーケティング的側面からサポート。以前は大手OA機器メーカー研究所で新規事業向け技術開発に従事。最近はXML・Java・UML・分散オブジェクトといった技術分野に関心を持っている。技術セミナー等の講演で定評がある。

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

いよいよａｕが新サービス開始

XHTML Basicの表示例

　XHTML Basicの表示例。今までの携帯の画面よりも表現力が向上しています

　読者のみなさんはもうご存じだと思いますが、ａｕ（KDDI）が12月から新しいサービスをスタートします。この「テイク・イット・EZweb ２」では、この「新サービスに対応したコンテンツ」の制作に興味のある方に、新サービス直前のいま、何ができるのか、何を意識すればいいのかを具体的に紹介していきます。

　さて、「新サービスに対応したコンテンツ」とわざわざ断り書きを入れたのは、12月スタートのａｕの新サービスでは、今までと異なる新しいコンテンツ記述言語が導入されるからです。「XHTML Basic」がそれです。

　XHTML Basicは、WAP 2.0のコンテンツ記述言語の一つとして採用されました。WAP 2.0がXHTML Basicを採用したことによって、コンテンツ制作者には以下のようなメリットが出てきました。

HTMLに近いため、PC向けコンテンツ制作経験者が携帯向けコンテンツを制作する際容易である
表現要素（フォント・色・縁取り等）をCSS（Cascading Style Sheet）として分離したため、各端末に適した画面表示の作り込みが容易である

　つまり、ａｕが新サービスの基礎としてWAP 2.0を採用したことにより、パソコンあるいはiモード向けにコンテンツを制作した経験のある人にとって、今までよりも簡単にａｕ端末向けコンテンツを制作できるようになるということです。

Openwave SDK Universal Edition

　さて、XHTML Basicを使ってコンテンツを制作し、その結果を見るためにはどうすればいいのでしょうか？

　言うまでもなく、コンテンツが真価を発揮するのはXHTML Basicに対応したａｕの新型端末で見たときです。この新型端末には、オープンウェーブシステムズが開発した携帯電話向けの新型ブラウザーである「Openwave Mobile Browser Universal Edition」が搭載されています。この新ブラウザーでは、そのままでHTML、XHTML Basic、Compact HTMLを見ることが可能です。

　ただし、現状では新サービスがまだ開始されていませんので、読者のみなさんが実際に対応端末を手にして表示を確認することはできません。では、どうしたらいいのか。実は他の手段が用意されています。

　WAP 2.0対応コンテンツ制作環境としてオープンウェーブシステムズが提供する「Openwave SDK Universal Edition」がそれです。このSDKには対応端末に実際に搭載されるのと同一の新ブラウザーが含まれていて、実機同様の表示結果をパソコン上で確認することができるのです。

　オープンウェーブシステムズの開発者向けサイト。SDKのほか、付属マニュアルの和訳なども用意されています

　Openwave SDK Universal Editionは、WAP2.0対応コンテンツ制作のために開発されたパソコン用統合開発環境（IDE）です。このSDKは、オープンウェーブシステムズの開発者向けサイト（ http://developer.openwave.com/ja/ ）から無料でダウンロードすることができます。このサイトには、SDK本体のほか、SDK付属マニュアルの和訳やクイックスタートガイド等が用意されておりますので、こちらも忘れずに入手しておきましょう。

　このSDKには以下のような特徴があります。

コンテンツ制作用エディタを内蔵
内蔵エディタで制作したコンテンツを１ボタンでプレビュー
端末シミュレーターを内蔵し、実端末での表示が確認可能
新ブラウザーと現行ブラウザーの両方を搭載している（既存端末及び新型端末の両方の表示結果が確認可能）
オープンウェーブシステムズのゲートウェイサーバーに接続することにより、実運用環境と同様の環境でのテストが可能

　つまり、このSDKを使うことによって簡単に新サービス向コンテンツを制作することができるのです。

　それでは実際にSDKをインストールしてみましょう。SDKはOSの違いに応じて２種類（Windows 98/Me用とWindows NT/2000用、Windows XPには今後正式対応予定）用意されていますので、みなさんの使用されているOSに対応したSDKをダウンロードしてください。ダウンロードしたファイルをダブルクリックすることでインストーラーが起動しますので、インストール自体は簡単です。なお、SDK使用前にクイックスタートガイドに一度目を通されることをお勧めします。

SDKの設定

SDKの起動画面

　無事にインストールが済んだら、次は設定です。SDKは起動時にデフォルトサイトにアクセスするので、ネットワーク環境下にない場合は端末シミュレーター画面にエラーが表示されます。これは無視してください。

　さて、このSDKは現行ブラウザーと新ブラウザーの両方を使うことができます。HDMLによるページを確認するために現行ブラウザーを使いたいときは、既存端末シミュレーターを選びます。メニューの［Simulator］→［Select Device］で［Generic 3.2］を選択してください。

　XHTML Basicによるページを確認するために新ブラウザーを使うときは、新型端末シミュレーターを選びます。［Simulator］→［Select Device］で［Universal 1.0］を選択してください。


既存端末選択画面	新端末選択画面

　SDKはネットワークに接続しなくてもコンテンツ制作・表示といった機能を使うことができます。その場合は、既存端末・新端末のどちらの場合でもメニューの［Simulator］→［Device Setting］のモード設定画面で［Use http Direct］を選択してください。手元のパソコンのハードディスク上にあるローカルファイルを見たいときはこのダイレクトモードを使ってください。

ゲートウェイサーバーの設定

　しかし、実運用環境と同等の環境で見た目を確認したいときもあるでしょう。その場合はインターネット経由でゲートウェイサーバーに接続する必要があります。ゲートウェイサーバーを使うためには、いくつか設定が必要になりますので、以下の手順で設定を行なってください。既存端末と新型端末でそれぞれ設定方法が異なりますので注意してください。

　まずは既存端末のブラウザーを使う場合です。ゲートウェイサーバーを使うためにはサーバーにユーザ登録する必要があります。「 http://devgatej.jpn.phone.com/ 」にアクセスし、「登録」ボタンを押してユーザ登録を行なってください。

　それからSDK側の設定です。メニューの［Simulator］→［Select Device］で［Generic 3.2］を選択し、既存端末を選んでください。次に、メニューの［Simulator］→［Device Setting］でモード設定画面を出し、Proxyを選択してProxy名のところに「 devgatej.jpn.phone.com 」と入力してください。

　一方、新端末を使う場合、ゲートウェイサーバーへのユーザー登録は不要です。SDKの設定だけでゲートウェイサーバーを使用できます。

　まず、メニューの［Simulator］→［Select Device］で［Universal 1.0］を選択し、新端末を選んでください。次に、メニューの［Simulator］→［Device Setting］でモード設定画面を出し、Proxyを選択して各項目にそれぞれ以下の値を入力してください。

Proxy	210.250.46.15
Port	80
Secure Port	8443
Username	09077777700～09077777709 までの11桁の数字のいずれか

　新端末を使う場合の設定はこれで終了です。なお、ProxyのIPアドレスについては将来変更される可能性があります。

日本語表示のための設定

フォントの選択

　このほか、新端末で日本語を表示するためには、さらに設定が必要です。メニューの［Simulator］→［Select Device Font］で設定ウィンドウを呼び出し、左上のFontは「MS ゴシック」か「MS 明朝」を、右下のScriptは「日本語」をそれぞれ選択してください。これで設定は終了です。

XHTML Basicを作る・見る

　一通り設定が済んだら、実際に簡単なXHTML Basicファイルを制作し、それが端末シミュレーターでどう見えるかを試してみましょう。

　SDK左端の［New］アイコン、または［File］→［new］を選んでください。すると、ファイルタイプを選択するダイアログが現われます。ここでは「XHTML-MP 1.0 DTD」を選択し、適当なファイル名と保存場所を指定してください。いくつかのタグが書かれたエディタウィンドウが開くはずです。

　ちなみに「XHTML MP」とは、XHTML Basicをベースにオープンウェーブシステムズが携帯電話向けに若干の機能拡張を追加したコンテンツ記述言語ですが、今回はXHTML MP独自のタグは使用しません。ですので、エディタウィンドウに書かれているタグは全て削除しましょう。

　それでは、以下の内容を実際に入力してみましょう。

<?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>テスト</title>
</head>

<body>
<h1>Demonstration of XHTML Basic</h1>

<p>
<a href="#ol">箇条書きへ</a>
<br />
<a href="#calender">カレンダーへ</a>
</p>

<h2><a id="ol">箇条書き</a></h2>

<ol>
<li>XHTML Basic</li>
<li>XHTML</li>
<li>HDML</li>
</ol>

<h2><a id="calender">カレンダー</a></h2>

<h3>2001/11</h3>

<table>
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>&nbsp;</td>
</tr>
</table>

</body>
</html>

シミュレーター上で確認

　エディタ上でタグが色分けされて表示されているのがわかりますね。このファイルは、最初の表示例からCSS関連の記述を省いたものです。

　正しく入力されているのを確認できたら、ツールバーの［Preview］アイコンを押すか、メニューの［File］→［Preview］を選択してください。端末画面上に結果が表示されるはずです。ここで端末シミュレーターで実際にどのように表示されるかを確認してください。CSSが使われていないので、最初の画面とはだいぶ印象が異なります。

　端末シミュレーター上では、カーソルの上下でリンクを移動したり、画面を上下スクロールしたりできます。もしも画面が小さくて見にくい場合は、メニューの［Simulator］→［Zoom Display］を選択することで拡大表示することもできます。

　それから、このファイルでは使っていませんが、新型ブラウザーは画像フォーマットとしてJPEGやGIFに対応しています。

　後編では、おそらく読者のみなさんが一番気になっているであろう、iモードの「Compact HTML」との互換性や、CSSの使い方について説明していきたいと思います。また、既存のEZweb端末を使っている方にも有益な情報をお知らせします。

・オープンウェーブシステムズデベロッパーズサイト（日本語版）
　 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

・オープンウェーブ、WAP 2.0対応コンテンツの開発ツール

（大原博之）
2001/11/14 11:34

ケータイ Watchホームページ