Top ＞ WAP全般 ＞ 雑多なテクニック

雑多なテクニック

「テクニック」とは、あまりにおこがましいものですが、タグリファレンス等で説明しきれなかったものや、公式なリファレンスはないものの、実際に動作するタグなどを少々挙げてみました。

  1. ブックマーク
    1. お気に入りに追加の可否を指定する
    2. リンクでお気に入りに追加
    3. ブックマークするURLを固定させる
  2. イベント
    1. タイマー
    2. 後方ナビゲーション制御
  3. index.htmlで振り分け
  4. ソフトキー位置にアイコンを表示する
  5. ポップアップメニュー
  6. HDMLで水平線、WAP2.0で色つき水平線

1.ブックマーク

1-1.お気に入りに追加の可否を指定する

HDML機

HDMLファイルは、デフォルトでは「”お気に入り”に追加」不可です。
「”お気に入り”に追加」可能にするには、 <HDML>タグのオプションまたは、デッキ内各カードのオプションとして、「MARKABLE=TRUE」を明記しなければなりません。
「MARKABLE=TRUE」を指定したカードには、必ず「TITLE=""」を指定して下さい。
「TITLE=""」は、カードのタイトル指定であると共に、”お気に入り”に追加時の「お気に入り名」として使われます。

<!--デッキ全体のブックマーク可能指定-->
<!--デッキ内カード側に指定がなければ全てのカードで有効となる-->
<HDML VERSION=3.0 MARKABLE=TRUE TTL=0>

<!--カード毎にブックマーク可否を指定することもできる-->
<!--カード側の指定が優先される-->
<DISPLAY(CHOICE/ENTRY) MARKABLE=TRUE TITLE="(お気に入り名)">

【サンプル】

<HDML VERSION=3.0 MARKABLE=TRUE TTL=0>
 <DISPLAY NAME=one TITLE="Bookmark">
  <ACTION TYPE=ACCEPT TASK=GO DEST=#two>
   このカードは"お気に入り"に追加できます。
 </DISPLAY>
 <ENTRY MARKABLE=FALSE NAME=two>
  <ACTION TYPE=ACCEPT TASK=GO DEST=#three>
   このカードは"お気に入り"に追加できません。
 </ENTRY>
 <CHOICE NAME=three TITLE="Bookmark">
  <ACTION TYPE=ACCEPT TASK=GO DEST=?>
   このカードは"お気に入り"に追加できます。
 </CHOICE>
</HDML>

WAP2.0対応機

WAP2.0対応機は、デフォルトでは「”お気に入り”に追加」可能になっています。
「”お気に入り”に追加」拒否をするには、<head>内で<meta>要素により、「”お気に入り”に追加」拒否の指定をします。「お気に入り名」は、<title>要素で指定したものとなります。

<head>
 <title>No BookMark</title>
 <meta name="vnd.up.markable" content="false" />
</head>

XHTMLファイル内に複数の<wml:card>を記述している場合、HDML同様、それぞれのカード毎に、”お気に入り”に追加可能にするか否かを設定できます。

<head>
 <title>No BookMark(card)</title>
 <meta name="vnd.up.markable" content="(カード名)!false" />
</head>

<html>
 <head>
  <title>BookMark</title>
  <meta name="vnd.up.markable" content="two!false" />
 </head>
 <wml:card id="one">
  <wml:do type="accept">
   <wml:go href="#two" />
  </wml:do>
    <p>このカードは"お気に入り"に追加できます。</p>
 </wml:card>
 <wml:card id="two">
  <wml:do type="accept">
   <wml:go href="#three" />
  </wml:do>
   <p>このカードは"お気に入り"に追加できません。</p>
 </wml:card>
 <wml:card id="three">
  <wml:do type="accept">
   <wml:go href="?" />
  </wml:do>
   <p>このカードは"お気に入り"に追加できます。</p>
 </wml:card>
</html>

1-2.リンクでお気に入りに追加

ブラウザメニューからお気に入りに追加という手順を踏むことなく、サイト上からリンクを選択することで「”お気に入り”に追加」ができます。現在表示しているページと異なるURLを登録させることができます。

HDML機

「MARKABLE=TRUE」であるデッキまたはカード内に以下のDEST文を記述します。

DEST="device:home/bookmark?
 url=(お気に入りに追加させたいページのURL)
 &title=(お気に入り名)">

※上記例では、「DEST=」の途中で改行していますが、実際には改行せず、１行で記述してください。

【<CE>タグによる”お気に入り”に追加（CHOICEカード内でのみ使用できます）】

<CE TASK=GOSUB
 DEST="device:home/bookmark?url=http://hdml.cside.com/&title=My+First+HDML">
 お気に入りに追加

【<A>タグによる”お気に入り”に追加（CHOICEカード内では使用できません）】

<A TASK=GOSUB
 DEST="device:home/bookmark?url=http://hdml.cside.com/&title=My+First+HDML">
 お気に入りに追加</A>

【<ACTION>タグによる”お気に入り”に追加（あらゆるデッキ/カードで使用可）】

<ACTION TYPE=ACCEPT TASK=GOSUB
 DEST="device:home/bookmark?url=http://hdml.cside.com/&title=My+First+HDML">

WAP2.0対応機

原則として、<a>要素によるリンクとなります。
<body(wml:card)>要素内であれば、どこにでも記述できます。

<!--実際には下記のように「href=」の途中で改行しないこと-->
<a href="device:home/bookmark?
 url=(お気に入りに追加させたいページのURL)
 &amp;title=(お気に入り名)">
 お気に入りに追加</a>

【サンプル】

<a href="device:home/bookmark?url=http://hdml.cside.com/&amp;title=My+First+HDML">
 お気に入りに追加</a>

1-3.ブックマークするURLを固定させる

”お気に入りに追加”はして欲しいけれど、例えばトップページ以外は登録されたくない。
だからといって各ページに「”お気に入り”に追加」リンクを設置するのも大変−という場合には、ブラウザメニュー→「”お気に入り”に追加」をユーザーが選択した時に、現在表示しているページ以外のURLを指定することができます。
HDMLファイルでは、各カードに記述しなければなりませんが、「お気に入り名」をURLエスケープする必要がありませんので、その分ちょっと楽です。

HDML機

「MARKABLE=TRUE」であるカードタグに、以下のBOOKMARKオプションを記述します。

BOOKMARK="(お気に入りに追加させたいページのURL)" TITLE="(お気に入り名)"

【サンプル】

<HDML VERSION=3.0 MARKABLE=TRUE TTL=0>
 <CHOICE BOOKMARK="http://hdml.cside.com/"
  TITLE="My First HDML">
  <CE TASK=GOSUB DEST=#no>BOOKMARKなしのカードへ
  <CE TASK=GOSUB DEST=#be>BOOKMARKありのカードへ
 </CHOICE>
 <DISPLAY NAME=no>
  <ACTION TYPE=ACCEPT TASK=RETURN>
   BOOKMARKなしのカード<BR>
   お気に入りに追加されるのは、このカードのURL
 </DISPLAY>
 <DISPLAY NAME=be BOOKMARK="http://hdml.cside.com/"
  TITLE="My First HDML">
  <ACTION TYPE=ACCEPT TASK=RETURN>
   BOOKMARKありのカード<BR>
   お気に入りに追加されるのは、<BR>
   [http://hdml.cside.com/]
 </DISPLAY>
</HDML>

WAP2.0対応機

<head>内の、<meta>要素に以下のような記述を追加します。
「お気に入り名」は、<title>要素で指定したものとなります。

<head>
<title>お気に入り名</title>
<meta name="vnd.up.bookmark" content="(お気に入りに追加させたいURL)" />
</head>

【サンプル】

<head>
 <title>My First HDML</title>
 <meta name="vnd.up.bookmark" content="http://hdml.cside.com/" />
</head>

2.イベント

2-1.タイマー

指定時間経過後に指定したURLにジャンプさせるものです。
HTMLの<meta http-equiv="refresh...>に似ています。

HDML機

公式なリファレンスはどこにも無いようですが、結構知られていて、実際に動作するタグです。
HDML3.1で動作します。１枚のカードに１つだけ指定することが出来ます。

<HDML VERSION=3.1 TTL=0>
 <DISPLAY TIMERDEFAULT=(制限時間)>
  <ACTION TYPE=ONTIMER TASK=GO DEST="(制限時間経過後にジャンプするURL)">
   ○秒後にジャンプします
 </DISPLAY>
</HDML>

【サンプル】

<HDML VERSION=3.1 TTL=0>
 <DISPLAY TIMERDEFAULT=50>
 <ACTION TYPE=ONTIMER TASK=GO DEST="#menu">
  <CENTER>ようこそ<BR>
  <CENTER>My First HDMLへ!<BR>
  <CENTER>5秒後にジャンプします
 </DISPLAY>
 <DISPLAY NAME=menu>
  ここは、menuカード。<BR>
  タイマーで来ましたね。
 </DISPLAY>
</HDML>

WAP2.0対応機

XHTMLファイルでも、タイマーを設定できます。wml名前空間を使用します。
ただし、この場合、タイマーを設定したXHTMLファイルに、HDML機でアクセスした場合は、wml名前空間部分は無視されますので、タイマーは動作しません。
ひとつのファイルで、HDML機/WAP2.0対応機どちらでもタイマーを動作させるには、HDML（またはWML1.1）で記述しなければなりません。

<html>
 <head><title>Timer</title></head>
 <wml:card ontimer="(制限時間経過後にジャンプするURL)">
  <wml:timer value="(制限時間)" />
  <p>
   5秒後にジャンプします
  </p>
 </wml:card>
</html>

【サンプル】

<html>
 <head><title>My First HDML</title></head>
 <wml:card ontimer="#menu">
  <wml:timer value="50" />
  <p align="center">
   ようこそ<br />
   My First HDMLへ!<br />
   <small><font color='red'>5秒後</font>にジャンプします</small>
  </p>
 </wml:card>
 <wml:card id="menu">
  ここはmenuカード<br />
  タイマーで来ましたね。
 </wml:card>
</html>

2-2.後方ナビゲーション制御

[クリア]キーなどの後方ナビゲーションキーで、戻ってきて欲しくないページに後方ナビゲーション用のイベントを指定します。
後方ナビゲーションとは、「TASK=PREV」か、それに相当するキー（EZwebではクリアキー又は左矢印（←）キー）により、履歴スタック（キャッシュ）からファイルを呼び出す動作のことです。
例えば、勝ち負けのあるゲームなどで、負けた人が、[クリア]キーで前画面に戻り、（相手の次動作を知った上で）再び勝負する−ということを避けることができます。
HDMLにはこの機能がありませんので、WMLによる記述となります。

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
 "http://www.phone.com/dtd/wml11.dtd" >
<wml>
 <card onenterbackward="(後方ナビで入ってきた時自動的に飛ばすURL)">
  ...
 </card>
</wml>

最初のページ
[OK]を押して次のペー
ジへ
　 OK
真ん中のページ
[next]を押して次のペ
ージへ
　 next
最後のページ
[クリア]キーを押して前の
ページへ戻ってください。
　 OK
クリア
（Back）キー
最初のページ
[OK]を押して次のペー
ジへ
　 OK
※後方ナビでは、真ん中
のページは表示されず、
最初のページが表示
される。
＜first.hdml＞
<HDML VERSION=3.0 TTL=1>
 <DISPLAY>
 <ACTION TYPE=ACCEPT TASK=GO DEST="event.wml">
  最初のページ<BR>
  [OK]を押して次のページへ
 </DISPLAY>
</HDML>

＜event.wml＞
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
  "http://www.phone.com/dtd/wml11.dtd" >
<wml>
 <card onenterbackward="first.hdml">
 <do type="accept" label="next">
  <go href="next.hdml" />
 </do>
  <p>真ん中のページ</p>
 <!--このページは、後方ナビゲーションで入ってきた場合、
   [最初のページ]に自動ジャンプします。-->
  <p> [nextを]押して次のページへ</p>
  </card>
</wml>

＜next.hdml＞
<HDML VERSION=3.0 TTL=0>
 <DISPLAY>
  最後のページ<BR>
  [クリア]キーを押して前のページに戻ってください。
 </DISPLAY>
</HDML>

3.index.htmlで端末振り分け

大手プロバイダ等では、「.htaccess」ファイルの設置ができないなど、いろいろ制限があり、「http://hdml.cside.com/」などのようにディレクトリをリクエストした際に、自動的に読み込まれるのは「index.html」か「index.htm」という所が多いようです。

このような場合、<frameset>要素を使用することにより、擬似的な端末振り分けを実現することができます。実際には、「index.html」が振り分け作業をするわけではありませんが、振り分け用のCGIに飛ばすことができるようになります。

ただし、実機での動作確認は一部の機種でしかしていません。
不具合等ありましたら、ご連絡いただきたいと思います。→ [Mail]

※動作確認済み機種
EZweb C401SA，C452CA，TS01，C302H，TT21，A1013K，C3003P，A5301T，A3015SA，A5501T，A1401K，A5402S，A1303SA，A1304T，A5401CA，Openwave SDK3.31J，Openwave SDK U.E.1.0/1.1，Openwave SDK 6.2K
i-mode SO503i，N211i，D251iS，P900iV
SoftBank J-SH03，J-SH09_a，811SH 
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
  <title>Jump</title>
 </head>
 <frameset>
  <frame src="(振り分け用CGIのURL)" name="(リンク文字列)">
  <noframes>
  <body>
   <p>
    <a href="(振り分け用CGIのURL)">(リンク文字列)</a>
   </p>
  </body>
 </noframes>
 </frameset>
</html>

4.ソフトキー位置にアイコンを表示する

HDMLタグリファレンスでは、<IMG>タグでちょっと説明していますが、ソフトキー位置にビルトイン・アイコンを表示させることができます。
指定できるのは、「TYPE=ACCEPT(wml:do type="accept")」，「TYPE=SOFT1(wml:do type="options")」のみです。
多用すると、ナビゲーションがわかりにくくなりますので、あまりお奨めするものではありませんが、ソフトキーサイズが「4」の端末（C3001H）のことを考えると、長い文字列を使うより、わかりやすいアイコンがあればそれを表示させた方がよい場合があります。

HDML機

<ACTION>タグ内で「ICON=」オプションにより、指定します。
「TYPE=ACCEPT」では、もし、指定したアイコンが無い場合でも「OK」という文字がソフトキー位置に表示されますが、「SOFT1(2)」キーでは、何も表示されなくなりますので、必ず「LABEL=""」オプションを指定するようにしてください。

<ACTION TYPE=ACCEPT
 ICON=(アイコン名またはアイコンNo.) LABEL="(代替テキスト)">
【サンプル】
どの動物が好き?
1.犬
2.ネコ
3.サル
4.ブタ
5.ペンギン
6.カエル
7.クジラ
　
2.ネコを選択
あなたの好きな動物は
[ネコ]
ですね。
　 OK 
<HDML VERSION=3.0 TTL=0>
 <CHOICE KEY=ani>
 <ACTION TYPE=ACCEPT ICON=heart LABEL=選択
  TASK=GO DEST=#check>
  どの動物が好き?
 <CE VALUE=犬>犬
 <CE VALUE=ネコ>ネコ
 <CE VALUE=サル>サル
 <CE VALUE=ブタ>ブタ
 <CE VALUE=ペンギン>ペンギン
 <CE VALUE=カエル>カエル
 <CE VALUE=クジラ>クジラ
 </CHOICE>
 <DISPLAY NAME=check>
  あなたの好きな動物は<BR>
  <CENTER>[$ani]<BR>
  <CENTER>ですね。
 </DISPLAY>
</HDML>

WAP2.0対応機

<wml:do>要素内に<img localsrc="">要素を配置します。
指定したビルトイン・アイコンがなかった場合、「label=""」の値→「alt=""」の値、の優先順位で文字列が格納されます。
※（2002/12/16訂正）
以前は、<wml:do>要素内に<img>要素を記述した場合、<wml:do>要素内にlabel属性があっても、<img>要素を優先して表示したのですが、再確認したところ、<wml:do>要素内のlabelオプションを優先して表示してしまうようです。
WAP2.0対応機でソフトキー位置にビルトイン・アイコンを表示させる場合は、<wml:do>要素内にlabel属性を記述せず、<img>要素内のalt属性値を代替テキストとするのが良いようです。

<wml:do type="accept">
<img localsrc="heart" alt="(代替テキスト)" />
</wml:do>

【サンプル】
どの動物が好き?
犬
ネコ
サル
ブタ
ペンギン
カエル
クジラ
　 
<html>
 <head>
  <title>ソフトキーにアイコン</title>
 </head>
 <body>
 <wml:do type="accept">
  <img localsrc="lovely" alt="選択" />
 </wml:do>
 <form action="some.cgi">
 <p>どの動物が好き? <br />
  <input type="checkbox" name="ani" value="犬">犬<br />
  <input type="checkbox" name="ani" value="ネコ">ネコ<br />
  <input type="checkbox" name="ani" value="サル">サル<br />
  <input type="checkbox" name="ani" value="ブタ">ブタ<br />
  <input type="checkbox" name="ani" value="ペンギン">
   ペンギン<br />
  <input type="checkbox" name="ani" value="カエル">カエル<br />
  <input type="checkbox" name="ani" value="クジラ">クジラ<br />
 </p>
  <p><input type="submit" value="送信!">
  <input type="reset" value="クリア"> </p>
 </form>
 </body>
</html>

5.ポップアップメニュー

これは、WAP2.0対応機だけの機能です。
type="options" キーのみに限られますが、複数の動作を指定することができ、その結果としてソフトキー位置に「メニュー」という文字列が現れ、選択するとポップアップメニューとなります。
１つしか記述していなければ、通常のソフトキー表示となります。

※EZwebの「お気に入りリスト」で左下の「メニュー」を選択すると画面右下にポップアップメニューが現れます。

<wml:do type="options" label="(ポップアップメニュー文字列1)">
(タスク1)
</wml:do>
<wml:do type="options" label="(ポップアップメニュー文字列2)">
(タスク2)
</wml:do>
<wml:do type="options" label="(ポップアップメニュー文字列3)">
(タスク3)
</wml:do>
【サンプル】




メニュー OK
メニューを
選択

1. 前へ...
2. 次へ...
3. ヘルプ
4. Home


　 OK 
<html>
 <head>
  <title>ポップアップ</title>
 </head>
 <body>
 <wml:do type="options" label="前へ...">
  <wml:go href="prev.html" />
 </wml:do>
 <wml:do type="options" label="次へ...">
  <wml:go href="next.html" />
 </wml:do>
 <wml:do type="options" label="ヘルプ">
  <wml:go href="help.html" />
 </wml:do>
 <wml:do type="options" label="Home">
  <wml:go href="home.html" />
 </wml:do>
 </body>
</html>

※画面上で一度に表示できるポップアップメニューは8個までです。
C3003PとA5301Tでは、11個まではスクロールして表示できました。それ以上の<wml:do type="options">を記述しても切り捨てられてしまいます。
なるべく8個以下に押さえるようにしましょう。

6.HDMLで水平線、WAP2.0で色つき水平線

HDMLには<HR>(水平線)に対応するタグがありません。また、WAP2.0機には<hr />要素がありますが、color=属性が使えず、色を変えることができません。

それらを擬似的に実現する方法です。

HDML機

EZweb独自の環境変数 HTTP_X_UP_DEVCAP_SCREENCHARS から端末の画面幅一杯の文字数(半角相当)を取得することにより、画面幅一杯の水平線を実現します。

どの端末からアクセスされた場合も画面幅一杯の水平線を表示するには、以下のようにPerl等のプログラムから出力するしかありません。
また、WAP2.0対応機向けにHDMLを出力している場合、画面幅一杯にならない場合があります。

#!/usr/local/bin/perl

 my ($scrcharCol, $scrcharRow, $hrLength, $hr);

 if ($ENV{HTTP_X_UP_DEVCAP_SCREENCHARS}) {
  ($scrcharCol, $scrcharRow) = split(/,\s?/,$ENV{'HTTP_X_UP_DEVCAP_SCREENCHARS'});
  $scrcharCol =~ s/^0//g;
  $scrcharRow =~ s/^0//g;
 } else {
  $scrcharCol = 16;
  if ($ENV{'HTTP_X_UP_DEVCAP_ISCOLOR'}) {
   $scrcharRow = 9;
  } else {
   $scrcharRow = 6;
  }
 }
 $hrLength = int($scrcharCol / 2);
 # ━ で水平線
 $h1 = '<WRAP><CENTER>' . "\x84\xAA" x $hrLength; 
 # ─ で水平線
 $h2 = '<WRAP><CENTER>' . "\x84\x9F" x $hrLength;
 # … で水平線
 $h3 = '<WRAP><CENTER>' . "\x81\x63" x $hrLength;
 # = で水平線
 $h4 = '<WRAP><CENTER>' . '-' x $scrcharCol . '<BR>';

 print<<"HDML";
 Content-type: text/x-hdml; charset=SHIFT_JIS

 <HDML VERSION=3.0 TTL=0>
 <DISPLAY>
 <CENTER>HDMLで水平線<BR><BR>
 ↓━ で水平線
 $hr1
 ↓─ で水平線
 $hr2
 ↓… で水平線
 $hr3
 ↓= で水平線
 $hr4
 </DISPLAY>
 </HDML> 
 HDML
 exit;
　　　HDMLで水平線

↓━ で水平線
━━━━━━━━━━━
↓─ で水平線
───────────
↓… で水平線
……………………………
↓=で水平線
 ==================

　　 OK

WAP2.0対応機

XHTMLには、<hr />がありますので、水平線は簡単に表示できます。
しかし、最新の機種以外では、<hr color="Red" />としても、無視されてグレーの水平線が出力されます。

どうしても色をつけた水平線を使いたい場合、以下のようにCSSを利用して無理矢理色つき水平線を表現することができます。
ただし、パフォーマンスがあまり良くない（表示に時間がかかったりする）場合があるようです。

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
  <meta http-equiv="Cache-Control" content="max-age=0" />
  <title>カラー水平線</title>
  <style type="text/css">
   <!--
   .hr1 {
    border-bottom: solid 1px Red;
    padding: 0 0 0.1em;
   }
   .hr2 {
    border-bottom: solid 2px Blue;
    padding: 0 0 0.1em;
   }
   -->
  </style>
 </head>
 <body bgcolor="#FFFFFF" text="#000000">
  < align="center"p>WAP2で色つき水平線</p><br />
  <p>↓通常の水平線</p>
  <hr color="Red" size="2px" />
  <div class="hr1">↓1px赤の水平線</div>
  <div class="hr2">↓2px青の水平線</div>
 </body>
</html>
　WAP2で色つき水平線

↓通常の水平線

↓1px赤の水平線

↓2px青の水平線
　 OK
2005/09/06 .hr1 スタイルのborder-bottomが 2pxになっていました。
お詫びして訂正いたします。

Go to Top

最終更新日： 2007年03月26日