Top > WAP2.0 > EZweb用XHTMLテンプレート

WAP2.0

EZweb用XHTMLテンプレート

EZweb向けのコンテンツ開発で使用する基本的構造のXHTML文書です。とりあえずは、これらをテンプレートとして保存し、各種コンテンツをプラスしていくと良いと思います。

基本テンプレート
要素と属性による各種スタイル指定
入力フォームテンプレート
1. シンプル入力フォーム
2. アンケート式入力フォーム
リストテンプレート
1. 番号付きリスト
2. スタイルシートによるリストマークの指定
テーブルテンプレート

1.基本テンプレート

1-1.文法通りの基本テンプレート文書

記述することが推奨されているものをきちんと入れたものです。
DOCTYPE宣言については、

<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

でも構いません。DOCTYPE宣言について、詳しくは、「DOCTYPE宣言」をご覧下さい。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
 "http://www.wapforum.org/DTD/xhtml-mobile10.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>
  <!--以下の"max-age=0"の数値は、適宜変更する-->
  <meta http-equiv="cache-control" content="max-age=0" />
  <!--その他の各種メタ情報・スタイルシート指定等を記述-->
 </head>
 <body>
  表示される文書の「内容」を記述
 </body>
</html>

1-2.省略可能なものを削った基本テンプレート文書

上記テンプレートから、EZwebにおいて省略可能なものを削った文書です。
あった方がよいと思う要素については、省略可能でも記述してあります。

<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=Shift_JIS" />
  <title>文書のタイトル</title>
  <!--以下の"max-age=0"の数値は、適宜変更する-->
  <meta http-equiv="cache-control" content="max-age=0" />
  <!--その他の各種メタ情報・スタイルシート指定等を記述-->
 </head>
 <body>
  表示される文書の「内容」を記述
 </body>
</html>

1-3.これでもOKの基本テンプレート文書

もっと削って、必要最小限にとどめたもの。EZwebでは、今のところこれでも大丈夫。
（HTMLとどこが違うんだろう？という感じですね）
これでも、EZweb携帯電話に搭載されているブラウザは、XHTML文書として解析するようです。

<html>
 <head>
  <title>文書のタイトル</title>
 </head>
 <body>
  表示される文書の「内容」を記述
 </body>
</html>

2.要素と属性によるスタイル指定

XHTML Basicや、XHTML Mobile Profileの仕様では、スタイルシートの使用を推奨しており、スタイル関連の要素や属性は限られたものしかありませんが、EZwebでは、拡張要素や拡張属性により、かなり従来のHTMLに近いスタイル指定ができるようになっています。

2-1.色の指定

<body>要素内で、背景色や、リンク色、フォントの色等を指定できます。
また、要素内のcolor属性により、その部分の文字の色を指定できます。
色の指定方法は、基本的に、'#RRGGBB'方式による16進数指定ですが、標準16色については色名による指定も可能です。標準16色名については「WAPのカラーパレット-標準16色」をご覧下さい。

<body>要素内で、文書の背景色やテキスト色、リンク色を指定できます。文字への色指定もできます。ページトップへ
	OK

<html>
 <head>
  <title>各種色指定</title>
 </head>
 <body bgcolor="yellow" text="black" link="green">
  <a id="top"></a>
  <p>&lt;body&gt;要素内で、文書の背景色やテキスト色、
   リンク色を指定できます。</p><br />
  <p>文字への<font color="red">色指定</font>もできます。</p>
  <br />
  <p><a href="#top">ページトップへ</a></p>
 </body>
</html>

2-2.テキストスタイルの指定

要素そのものがテキストへのスタイル指定をするものです。
ただし、要素として認識するものの、スタイルが変化しないものもあります。
C3003Pでは、,,は、変化しません。
スタイルシートを要素に適用させることで色等を変化させることは可能です。

<b>　<big>　<blink>　<i>　<marquee>　<small>　<strong>　<u>

2-3.リストマークの指定

<ol>、<li>要素では、「A,B,C,D」、「a,b,c,d」を表示させることができます。
ただし、<li>要素の場合、指定したリスト項目のみへの適用となります。

<ol>要素のマーク指定 Aリスト項目1 Bリスト項目2 Cリスト項目3 <li>要素のマーク指定 aリスト項目1 リスト項目2 リスト項目3
	OK

<html>
 <head>
  <title>リストマーク</title>
 </head>
 <body>
  <p>&lt;ol&gt;要素のマーク指定</p>
  <ol type="A">
   <li>リスト項目1</li>
   <li>リスト項目2</li>
   <li>リスト項目3</li>
  </ol><br />
  <p>&lt;li&gt;要素のマーク指定</p>
  <ul>
   <li type="a">リスト項目1</li>
   <li>リスト項目2</li>
   <li>リスト項目3</li>
  </ul>
 </body>
</html>

2-4.位置指定

以下の要素で、align属性による位置指定が可能です。

<caption>　<div>　<h1>～<h6>　<hr>　<img>　<p>

以下の要素は、要素そのものが位置指定をするものです。
HDMLの<center>タグと違い、</center>で閉じるまで有効となります。

<center>

align属性右寄せデフォルトは左寄せ center要素 </center>で閉じるまで中央揃えが有効となります。間に改行(<br />)が入っても、中央揃えのままです。
	OK

<html>
 <head>
  <title>位置指定</title>
 </head>
 <body>
  <h2 align="center">align属性</h2>
  <p align="right">右寄せ</p>
  <p>デフォルトは左寄せ</p>
  <br />
  <center>
  <h2>center要素</h2>
  &lt;/center&gt;で閉じるまで中央揃えが有効となります。
  <br />
  間に改行(&lt;br /&gt;)が<br />入っても、中央揃えのままです。
  </center>
 </body>
</html>

<img>要素のalign属性は、他のテキスト関連要素のalign属性とはその働きが異なり、周囲のテキストとの位置関係を指定するものです。

<img>要素のalign属性は周囲のテキストとの関係を示します。画像右寄せ、テキストは左側(align="right") これはalign="top"
	OK

<html>
 <head>
  <title>画像の位置指定</title>
 </head>
 <body>
  <p>&lt;img&gt;要素のalign属性は
   周囲のテキストとの関係を示します。</p>
  <br />
  <p><img src="red.gif" align="right" width="10" height="40">
  画像右寄せ、テキストは左側(align="right")</p>
  <p><img src="red.gif" align="top" width="10" height="30">
  これはalign="top"</p>
  <br />
 </body>
</html>

2-5. と<hr />

では、clear="true"により、画像へのテキストの回り込みを解除することができます。
<hr />では、alignの他、size=により水平線の太さ（単位：px）を、width=により水平線の長さ（単位：px）を指定可能です。

<br />要素の clear="true" 回り込み解除済み ↓普通の水平線 ↓size="5"の水平線 ↓width="50"の水平線
	OK

<html>
 <head>
  <title>改行と水平線</title>
 </head>
 <body>
  <p>&lt;br /&gt;要素の<br /></p>
  <p><img src="red.gif" width="10" height="40">
  <br clear="true" />回り込み解除済み</p>
  <br />
  <p>↓普通の水平線</p>
  <hr />
  <p>↓size="5"の水平線</p>
  <hr size="5" />
  <p>↓width="50"の水平線</p>
  <hr width="50" />
  <br />
 </body>
</html>

2-6.画像周囲の間隔指定

<img>要素において、vspace、hspaceを指定することができます。

画像の上下の間隔上下に8(px)の間隔を空けました。画像の左右の間隔左右の間隔左右に10(px)の間隔を空けました。
	OK

<html>
 <head>
  <title>画像の間隔</title>
 </head>
 <body>
  <p>画像の上下の間隔</p>
  <center>
  <img src="banner.gif" vspace="8" />
  </center>
  <p>上下に8(px)の間隔を空けました。</p>
  <br />
  <p>画像の左右の間隔</p>
  <p>左右の<img src="red.gif" align="bottom"
   hspace="10" width="10" height="40" />間隔</p>
  <p>左右に10(px)の間隔を空けました。</p>
 </body>
</html>

3.入力フォームテンプレート

XHTMLで作成した入力フォームを、HDML機と共用して使おうとすると、ゲートウェイ変換がうまくいかないことが多いようです。逆に、HDMLで記述した入力フォームは、WAP2.0対応機ではWMLに変換されますので、問題が起こることは少ないはずです。
ですから、入力フォームを、WAP2.0対応機とそれ以前の機種で共用にする場合は、HDMLで記述しておいた方が、今のところは無難のようです。
※以下のテンプレートの「some.cgi」は、架空のスクリプト名です。

3-1.シンプル入力フォーム

ユーザーに「お名前」「E-Mail」「URL」「メッセージ」を入力してもらう入力フォームです。
WAP2.0対応機のみで使用することを前提にしていますので、ゲートウェイ変換によりHDML機でも表示させるには、

各フィールド内のvalue値（デフォルト値）を指定している場合は、URLエスケープする
各フィールド内のname値に日本語を使用しない

ようにしなければなりません（他にも気をつける所があるかもしれません）。

メッセージ作成 [お名前]と[メッセージ]は必須ですお名前(必須)： E-Mail(省略可)： URL(省略可)：メッセージ：
	OK

<html>
 <head>
  <meta http-equiv="content-type"
   content="text/html;charset=Shift_JIS" />
  <title>入力フォーム</title>
  <meta http-equiv="cache-control" content="max-age=0" />
 </head>
 <body>
   <p align="center"><b>メッセージ作成</b><br />
   [お名前]と[メッセージ]は必須です</p>
   <form action="some.cgi" method="post">
   <input type="hidden" name="タイトル" value="From EZ site" />
   <p>お名前(必須)：
   <input type="text" name="お名前" format="MM*M" /></p>
   <p>E-Mail(省略可)：
   <input type="text name="E-Mail" emptyok="true" />
   <p>URL(省略可)：
   <input type="text" name="URL" value="http://" /></p>
   <p>メッセージ：<br />
   <textarea name="メッセージ" rows="3">
   </textarea>
   </p>
   <p><input type="submit" value=" 送信 " />
   <input type="reset" value="クリア" /></p>
   </form>
 </body>
</html>

3-2.アンケート式入力フォーム

ユーザーに、複数の選択肢の中から選んでもらう方式の入力フォームです。
WAP2.0対応機のみで使用することが前提です。

アンケートすべて必須入力です好きな季節は?：春夏秋冬好きな動物(複数選択可：犬猫ライオン馬トカゲ
	OK

<html>
 <head>
  <meta http-equiv="content-type"
   content="text/html;charset=Shift_JIS" />
  <title>アンケート</title>
  <meta http-equiv="cache-control" content="max-age=0" />
 </head>
 <body>
  <p align="center"><b>アンケート</b><br />
  すべて必須入力です</p>
  <form action="some.cgi" method="post">
   <input type="hidden" name="タイトル" value="From Enquete" />
   <p>好きな季節は?：
   <input type="radio" name="季節" value="春" />春<br />
   <input type="radio" name="季節" value="夏" />夏<br />
   <input type="radio" name="季節" value="秋" />秋<br />
   <input type="radio" name="季節" value="冬" />冬
   </p>
   <p>好きな動物(複数選択可：
   <input type="checkbox" name="動物" value="犬" />犬<br />
   <input type="checkbox" name="動物" value="猫"
    checked="checked" />猫<br />
   <input type="checkbox" name="動物" value="ライオン" />ライオン<br />
   <input type="checkbox" name="動物" value="馬" />馬馬<br />
   <input type="checkbox" name="動物" value="トカゲ" /> トカゲ<br />
   </p>
   <input type="submit" value=" 送信 " />
   <input type="reset" value="クリア" />
   </p>
  </form>
 </body>
</html>

4.リストテンプレート

EZwebで使うことのできるリスト関連要素は、<ol><ul><dir><dd><dt><dl><menu><li>です。
この内、主に使用するのは、多分<ol><ul><li>ではないかと思います。

4-1.番号付きリスト

HDMLのCHOICEカードのように、番号選択で該当ページにリンクを可能にします。

目　次 101.htmlへ 202.htmlへ 303.htmlへ 404.htmlへ 505.htmlへ
	OK

<html>
 <head>
  <meta http-equiv="content-type"
   content="text/html;charset=Shift_JIS" />
  <title>目次</title>
  <meta http-equiv="cache-control" content="max-age=0" />
 </head>
 <body>
  <p align="center"><b>目　次</b></p>
  <ol>
   <li><a href="01.html" accesskey="1">01.htmlへ</a></li>
   <li><a href="02.html" accesskey="2">02.htmlへ</a></li>
   <li><a href="03.html" accesskey="3">03.htmlへ</a></li>
   <li><a href="04.html" accesskey="4">04.htmlへ</a></li>
   <li><a href="05.html" accesskey="5">05.htmlへ</a></li>
  </ol>
 </body>
</html>

4-2.スタイルシートによるリストマークの指定

スタイルシートを使用することで、<ul><menu><dir><li>要素のリスト項目の先頭につく画像（ビルトイン・アイコン）を指定することができます。

好きなモノケーキコーヒー映画反町隆史釣り
	OK

<html>
 <head>
  <meta http-equiv="content-type"
   content="text/html;charset=Shift_JIS" />
  <title>目次</title>
  <meta http-equiv="cache-control" content="max-age=0" />
 </head>
 <body>
  <p align="center"><b>好きなモノ</b></p>
  <ul style="list-style-image:localsrc(heart)">
   <li>ケーキ</li>
   <li>コーヒー</li>
   <li>映画</li>
   <li>反町隆史</li>
   <li>釣り</li>
  </ul>
 </body>
</html>

5.テーブルテンプレート

デフォルトではテーブル枠は表示されません。
Openwave SDKではborder属性を指定すると枠が表示されますが、実機ではどうなのでしょうか。
また、携帯電話の幅以上のテーブルを作成することはできません。携帯電話は、横スクロールができませんので、当然と言えば当然ですが。

テーブル
デフォルトでは枠は表示
されない

枠無しテーブル
1	2	3	4

border指定により枠を表
示する
枠有りテーブル

画面の幅より広いと折り
畳まれる

長いテ
キスト

5678

<html>
 <head>
  <meta http-equiv="content-type"
   content="text/html;charset=Shift_JIS" />
  <title>テーブル</title>
  <meta http-equiv="cache-control" content="max-age=0" />
 </head>
 <body>
  <p align="center"><b>テーブル</b></p>
  <p>デフォルトでは枠は表示されない</p>
  <table>
   <caption>枠無しテーブル</caption>
   <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  </table><br />
  <p>border指定により枠を表示する</p>
  <table border="1">
   <caption>枠有りテーブル</caption>
   <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  </table><br />
  <p>画面の幅より広いと折り畳まれる</p>
  <table border="1">
   <tr><td>長いテキスト</td>
   <td>5678</td><td>9</td><td>0</td></tr>
  </table>
 </body>
</html>

Go to Top