ケータイ Watch
連載バックナンバー
【後編】気になるiモードコンテンツとの互換性
[2001/11/15]

【前編】XHTML Basicって何?
[2001/11/14]


2000年

テイク・イット・EZweb 2
第6回:アクティビティと変数ってなに?
佐藤 崇 佐藤 崇
Phone.com JapanでEzweb・WAPサイトテクノロジーを技術的・マーケティング的な側面からサポート。元Internet Academy Web Directionインストラクター。Webデザイナー業等を経て現職へ。Ezweb対応検索エンジン「w@pnavi」の代表も兼任。


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



 みなさんこんにちは。そろそろ10月に入り、おそらくこの原稿が皆さんの目に触れる頃には新しい端末の発表であったり、新しいカラー端末がいろいろと発売開始されるころではないでしょうか。私は個人的には折りたたみ端末に期待しています。

 今日は応用編2回目ということで「アクティビティ」を中心にみていきます。アクティビティは、HDMLの中でも実際に理解できると一番面白い部分ですので、是非マスターしましょう。


カードをまとめる

 前回の復習となりますが、カードを使用するには、それをまとめあげるツールが必要となってきます。その1つが前回触れた「デッキ」なのですが、今回はもう1つ、アクティビティについて見てみましょう。

 アクティビティは、なんとも難しい言葉で、「論理的に1つの関連を持ったまとまり、一連の体系」と言い表わすことができます。デッキがファイルという物理的な束を形作るねものだとすれば、アクティビティは意味的な束を作るようなものとお考え下さい。

 といっても、あまりよく分からないでしょう。実際に例をあげながら考えてみましょう。例えば、以下のようなサイトがあったとしましょう。

【サイト例:1】

  1. トップページ
  2. 日記その1
  3. 日記その2
  4. 日記その3
  5. 日記その4
  6. 作者の紹介
  7. お便り紹介
  8. ベストリンク集

 このうち(2)~(5)までは、日記として、1つのまとまりを持った「つながった」ページです。ユーザビリティ(見やすさや理解のしやすさ)から考えれば、この(2)~(5)のページは、本来ならば、1つのつながった1つのカードで構成されているべきページなのかもしれません。つまり、

【サイト例:2】

  1. トップページ
  2. 日記
  3. 作者の紹介
  4. お便り紹介
  5. ベストリンク集

という5つのコンテンツで構成されるページのはずが、いつのまにか8つのページになってしまっているのです。カードが増えてしまうと、見る人にはそれだけ沢山クリックを強要することにもなるので、場合によっては、ユーザーが迷子になることもあります。

 また、手馴れた携帯電話向けのコンテンツ制作者は、入力フォームなどを作る際、ウィザード形式で小さなステップを少しずつのぼらせる方法をとる場合があります。PC向けのHTMLならすべてを1ページで構成できるのですが、携帯電話の画面上では、こんな風に色々な状況で細分化していくことが実は思った以上にあるのです。

 HDMLでは、こうしたページの増加による煩雑性をブラウザーに理解させるために「アクティビティ」という機能を使用できるようになっています。ユーザーのため、というよりはブラウザーのため、という色彩がより強い機能です。

 例えば、ある人がどこかの検索エンジンの結果ページから【サイト例:1】を訪れた場合を考えて見ましょう。この人が「1→2→3→4→5→1」という風に、トップページから順に日記を読んで、再びトップページに戻るというようなアクションをとったとします。ユーザーの意識とすれば、今現在は、「検索エンジンから、ある個人サイトに訪れて、一通り日記を読み終わった」という段階です。そして、ここで「前のページに戻りたい」と思ったとしましょう。ところが、ここで「前のページに戻る」というと、実は2つの意味が出てきます。

  • トップページに戻る直前の「5.日記その4」に戻るという場合
  • 今いるトップページにはじめてジャンプした前のページ、すなわち「検索エンジンの結果ページ」に戻るという場合

 アクティビティの設定をしていないと、BACKキーを押したときの動作は前者のようになります。ユーザーの意識としては「それはちょっとおかしい」と感じるかもしれません。「トップページからBACKするということは、トップページの前のページ、すなわちそれを呼び出したページだろう」というわけです。

 もしここで「2~5」のページを1つのアクティビティとしてブラウザーに理解させておけば、後者のような動作をさせることが可能です。ブラウザーに正しいサイトの位置関係を把握させることで、正しい「戻りページ」を示すことができ、ユーザーを納得させることができるというわけです。


アクティビティを実装しよう

 先ほどの例で、「1→2→3→4→5→1」の一連の動作を実現するためには、「リンク」をはることになりますが、今までのようにで行なっている限り、アクティビティの機能が反映されません。それではアクティビティとはどのような形で実装すればよいのでしょうか?

 ある新しいアクティビティが始まるときは、これまでリンクをはる際に「task="go"」としていたところを「task="gosub"」とします。そして、アクティビティが終了するときは「task="return"」、アクティビティを途中で強制的にキャンセルしたい場合は「task="cancel"」と指定します。

 「task="return"」と「task="cancel"」は、一見するとほぼ同義のように見えますが、実はその命令で戻った後のアクションの差でいろいろと位置付けが異なってきます。基本的には「task="return"」を使うことが多いので、とりあえず、そちらの方法をまず覚えておきましょう。

 これまで使ってきた「task="go"」は、すなわちここで1つの大きなアクティビティの中を行き来させるための最も単純なリンク形式、という位置付けとなります。



■具体的な例

【index.hdml】

<HDML version="3.0" public="true">
<CHOICE name="top">
<CENTER>私とEZweb
<CE task="gosub" dest="deai.hdml">出会い
<CE task="gosub" dest="wakare.hdml" >別れ
</CHOICE>
</HDML>

【deai.hdml】

<HDML version="3.0" public="true">
<DISPLAY name="1">
はじめてのEZweb。私と彼との出会いはちょう
ど一年前にさかのぼる。<BR>
<A task="go" dest="#2">続き</A>
</DISPLAY>
<DISPLAY name="2">
雨、今でも思い出す。それは一年前、それは
ちょうど東京にあの大雨が降った日のことだっ
た。<BR>
<A task="go" dest="#3">続き</A>
</DISPLAY>
<DISPLAY name="3">
私は南青山の美容室で髪をカットしたあと、
代官山のいつものところで彼と落ち合うこと
になっていた。<BR>
<A task="return">戻る</A>
</DISPLAY>
</HDML>

【wakare.hdml】

<HDML version="3.0" public="true">
<DISPLAY name="top">
まだ熱愛中です。<BR>
<A task="return">戻る</A>
</DISPLAY>
</HDML>

【deai.hdml】カード3
4
【index.hdml】
1

【wakare.hdml】
5
【deai.hdml】カード2
3
【deai.hdml】カード1
2

 この例の場合、注目したいのは、「task="return"」となっている箇所は「dest=""」で行き先を指定していません。このように記述しなければならない文字数も減りますし、元のページのURLに変更があった場合などでも戻るためのリンク修正することなく利用できますので、今後は是非実践してみてください。


変数の範囲としてのアクティビティ

 アクティビティは、このようにブラウザーの操作性・理解に非常に重要な役割を果たしてくれるものなのですが、それ以上に重要な位置付けがあります。それは、これから話しをする「変数」の機能です。逆にこの「変数」の機能を使用していて、アクティビティを使用していないとすれば、利用者に対して非常に危険で不誠実なことなので、今すぐ以下の内容を読んで、修正されることをお勧めします。


変数とは

 HDMLでは「key value(キー変数)」というものが使用できます。これはHTMLなどのマークアップ言語には珍しい機能ですが、これをパワフルに使いこなすことで、HDMLのデッキとカードのメリットをさらに活かすことが可能となります。

 変数とは、値(value)を自在に操ることのできる箱のようなものです。例えば、「今日のメニュー」という箱には「ステーキ」が入るかもしれませんし、「うなぎ」が入るかもしれません。つまり、「今日のメニュー」というのは、何が入るか不確定なものの入れ物としての名称で、「ステーキ」や「うなぎ」がそれらの値となります。あるカードで「今日のメニュー」には「ステーキ」が入るよ、と指定すれば、その後のカードでは「今日のメニュー」にはすべて「ステーキ」という文字列が入る、ということになります。

 ここで、前回触れたカードを思い出してください。カードには「key=""」で入力される値を操作する名称が必要となる、とお話ししたと思いますが、実はこれこそが「変数」の機能を表しています。そして、過去に指定された変数の値は、「$変数名」で後から簡単に呼び出すことができます。


<HDML version="3.0" public="true">
<ENTRY name="1" key="name">
<ACTION type="accept" task="go" dest="#2">
名前を入力してください:
</ENTRY>
<DISPLAY name="2">
入力された名前は$nameです。
</DISPLAY>
</HDML>

 <ACTION>タグの内容については、次回に詳しく触れますので、ここでは次のカードに移るときに使用しているリンクのようなものとお考え下さい。

 さて、この例の場合、「name="1"」の<ENTRY>カードで入力された文字列が「name="2"」の<DISPLAY>カードで呼び出されて表示されています。つまり、<ENTRY>カードでユーザーが入力した内容によって、「name="2"」の<DISPLAY>カードで表示される内容はまちまちになってくるということです。

1 2

 これは、入力させながら確認のページ等をウイザード形式で作っていく場合、非常に便利な機能なのです。「変数」データは端末のメモリ内部に格納され、確認ページを表示するためにわざわざネットワークに接続に行く必要がありません。

 さらに、


<HDML version="3.0" public="true">
<CHOICE name="1" key="sex">
性別を選んでください
<CE task="go" dest="#2" value="男">男
<CE task="go" dest="#2" value="女">女
</CHOICE>
<DISPLAY name="2">
あなたの性別は$sexです。
</DISPLAY>
</HDML>

のように、なにも<ENTRY>カードだけを使用する必要もありません。このようにリンクをはる際に変数を受け渡すことも可能です。

1 2

 また、もっと手っ取り早く、「vars=""」というオプションを指定する方法があります。これは「vars="変数名=変数値&変数名=変数値…"」という形で、変数名とその値を一度に複数まとめて送ることができる機能です。これを使用すれば、


<HDML version="3.0" public="true">
<DISPLAY name="1" key="sex">
<A task="go" dest="#2" vars="name=Takashi&sex=man">情報を送ります</A>
</DISPLAY>
<DISPLAY name="2">
あなたの名前は$name、
あなたの性別は$sexです。
</DISPLAY>
</HDML>

とすることができます。ただし、この場合、「vars=""」の中には日本語のような2バイトの文字列を入れることはできません。

1 2

 何か数学の方程式のようで面白いのですが、いくつか気をつけるべき点があります。

  • 1つの<ENTRY>カードを使用して渡すことのできる文字列は最大255文字
  • 変数のデータ全体(変数名+変数値)には上限がある
  • 変数はアクティビティを終了しないとクリアされない

がその注意点です。上の2点は物理的な制約なので、守れば済んでしのまうと思うのですが、3つ目の点には特に留意する必要があります。ここでアクティビティの2つ目の機能の話に戻ってくるのです。


変数の範囲

 HDMLにおいて、使用する変数はアクティビティの中の1つのデータとして扱います。ブラウザーがアクティビティを終了したとか、新しいアクティビティに入ったということを理解しない限り、変数は端末に常に保存されるのです。

 ここで1つ、困ったことが発生します。

 例えば、あるカードでSSLを使用し、個人のクレジットカード番号を入力してもらうとしましょう。変数の機能を使用して、端末上でこの番号の使いまわしができるようなサイトを作ったとします。

 さて、アクティビティの機能を使用しなかった場合、クレジットカードの番号を入力した後、他のサイトに行ったとしたらどうでしょう? 端末のメモリには、クレジットカード番号が入った変数の情報が残ったままです。容易に推測できるような変数名をつけていると、これを狙って悪意のある第三者が変数のデータをいとも簡単に取得してしまうということも考えられるのです。

 というわけで、これは非常に危険な行為なので、必ず変数の機能を使用する場合はアクティビティを使用するようにすべきです。「task="return"」か「task="cancel"」で戻った場合、そのアクティビティで入力された変数情報はすべてクリアされるので安心です。もし心配だという方は「UP.Simulator」に変数を確認するツールがあります。「Info」メニューの「Vars」がそれにあたります。こうしたサイトを作った場合は、万が一に備えて、必ず確認するようにしましょう。



■変数のテクニック

【その1】

 「dest=""」の部分に日本語の文字列を入れると、よくエラーが起こるのですが、これを回避する方法があります。


<HDML version="3.0" public="true">
<CHOICE name="1" key="1">
質問1(1/2)<BR>
この連載をどこで知りましたか?
<CE task="go" dest="#2" value="雑誌">雑誌
<CE task="go" dest="#2" value="PCインターネット">PCインターネット
<CE task="go" dest="#2" value="口コミ">口コミ
<CE task="go" dest="#2" value="メーリングリスト">メーリングリスト
<CE task="go" dest="#2" value="検索サイト">検索サイト
</CHOICE>
<DISPLAY name="2">
あなたは$1を選びましたね。これでよろしければ下の送信ボタンを押してくだい。<BR>
<A task="go" dest="http://xxxx.com/cgi-bin/test.cgi?1=$1">送信実行</A>
</DISPLAY>
</HDML>

のようにすることで、コンパイルエラーを防ぐことができます。

1 2 CGIで処理

<A task="go" dest="http://xxxx.com/cgi-bin/test.cgi?1=検索サイト">

となるとエラーが発生しますが、上の例のように変数の機能を使用すると大丈夫です。やや専門的な言い方になりますが、これは、いわゆるGETメソッドでサーバーにデータを送る場合にも特に問題なく利用できる方法です。

 また、ここで使用した「$変数名」ですが、本当は「$(変数名:esc)」というのが正式な変数の表記方法ですが、通常は単に「$変数名」でOKです。「:esc」が入るとURLエスケープシーケンスが適用されたものが代入されまますが、ここを「$(変数名:noesc)」とすることで、そうしたURLエスケープシーケンスをオフにした形で情報を受け渡す事も可能です。


【その2】

 1つのアクティビティとして端末が保持できるデータの最大容量は1000バイトです。これは、アクティビティの構造・履歴内容・変数データのすべてを含んだデータ量となります。アクティビティの中身が異常に大きくなると、アクティビティの戻り値がブラウザーのトップページになってしまい、変数のデータもクリアされてしまうのでご注意ください。


【その3】

 変数を再起的に使用する方法は、ブラウザーに過度な負担をかけることに繋がるので、「UP.SDK」の「Developer’s Guide」では、この点が非推奨として書かれています。


【その4】

 「入れ子アクティビティ」というものも使用できます。つまり、アクティビティの中にさらにアクティビティを設定することで、より効果的に戻る・進む機能を駆使したブラウジングの設定ができるのです。


【その5】

 変数の機能をアクティビティと組み合わせて強制的に変数のデータを削除する方法があります。この場合、<NODISPLAY>カードをアクティビティの戻り値に指定してやればよいのです。この<NODISPLAY>カードについては次回触れる予定です。


■今回勉強したタグ(オプション)

task="gosub"  新しいアクティビティに入るためのリンク設定の時に使用する。
task="return"  アクティビティが終了した戻りを指定するときに使用。
task="cencel"  アクティビティが途中で中断した時の戻りを指定するときに使用。

 今回は、アクティビティがどのようなものなのかということと、その効用を中心に書いて見ました。

 アクティビティを既に使用されている方にとっては、もっと詳しい内容、例えば、戻り値の詳細な設定であるとか、「next=""」など細かい部分についても是非書いてほしかったと思われたかもしれません。ただ、それをこの凝縮された連載で一気に書くこと自体に限界を感じますので、詳しくは書籍やガイドブック等で確認してみて、その方程式のようなからくりに慣れ親しんでみてみる、ということをオススメします。

 私は個人的に検索エンジンを運営していますが、そこで思うのが、未だにオフィシャルサイトでもなかなかこのアクティビティの機能が使われていないものが多いということです。データベースの検索性や記事の閲覧性という観点から、多くのコンテンツ作成に携わる方がいち早くこのアクティビティの機能に慣れ親しんでいただきたいと心から祈っています。




URL
  Phone.com Developer Program(HDML WMLコンテンツ制作支援サイト)
 
http://developer.phone.com/ja/


(佐藤 崇)
2000/10/06 00:00

ケータイ Watchホームページ

ケータイWatch編集部 k-tai@impress.co.jp
Copyright (c) 2000 Impress Corporation  All rights reserved.