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

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


2000年

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


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



 前回までは主にタグの効果的な使用方法、HDMLの言語的特徴を中心にしたハイエンドな使用方法にフォーカスをあててきました。しかし、それだけでは、サイトを構築していく上でどうしても限界が出てきます。「ケータイサイト」はやはり、見るサイトというよりは「使う・遊ぶ」サイトとしてあるからなのです。そのため、従来のPC向けに作ってきた静的なHTMLベースのページ作りにはやはり限界があります。そこで、ケータイサイトをより面白みのあるものにしていくためには、サーバー側でプログラムを実行させるような仕組みが必要になってきます。

 サーバー側でプログラムを実行させる仕組みとしては、Perl、C、ASP、PHP、Java Servletなど色々あり、それぞれ一長一短があります。ここでは、HTMLの世界でもおなじみのPerlをベースにしたCGIを例に詳しく見ていきたいと思います。


■ここに注意!

 HDMLサイトでCGIを使う際に気をつけるべき点は以下の通りです。

  • MIME形式
  • 変数の文字処理
  • 2バイト文字

 逆に、これら以外に気をつけるべき点は特になく、これらの点さえクリアさすればPerlだのPHPだの、どんな言語でも活用することができます。では、順番に見ていきましょう。


【MIME形式】

 CGIでHTMLやHDMLのページを表示させるようなプログラムを考える場合、必ずMIME形式を宣言することになっています。HTMLを出力するようなCGIの場合、「text/html」と指定しますが、HDMLを出力する場合は「text/x-hdml;charset=Shift_JIS」と指定します。

 例えば、HTMLで


#!/usr/local/bin/perl

print "Content-type: text/html\n\n";
print "<HTML>\n";
print "<HEAD><TITLE>HTMLのサンプル</TITLE></HEAD>\n";
print "<BODY>\n";
print "<DIV align=\"center\">これはHTMLのサンプルです。</DIV></HTML>\n";

としていたものを、そのままHDML化すると、


#!/usr/local/bin/perl

print "Content-type: text/hdml;charset=Shift_JIS\n\n";
print "<HDML version=\"3.0\" markable=\"true\">\n";
print "<DISPLAY title=\"HDMLのサンプル\">\n";
print "これはHDMLのサンプルです。</DISPLAY></HDML>\n";

のようになります。これが他の言語、例えば、PHPの場合は、


<? // header("Content-type: text/x-hdml;charset=Shift_JIS"); ?>

というように、またASPの場合は、


<% ResponseContentType = "text/x-hdml;charset=Shift_JIS" %>

というような宣言行を挿入するようになるわけです。


【変数の文字処理】

 変数の扱いについてですが、例えば、何も考えずに


print "Content-type: text/hdml;charset=Shift_JIS\n\n";
print "<HDML version=\"3.0\" markable=\"true\">\n";
print "<DISPLAY title=\"ダメな例\">\n";
print "$nameです。</DISPLAY></HDML>\n";

とした場合、一見すると正しく書けているようですが、実際にはサーバーエラーとなります。これは、元々HDMLの変数機能として使おうとした「$name」の部分が、Perlの変数機能としてサーバーが認識しようとして発生するエラーです。正しくは、


print "Content-type: text/hdml;charset=Shift_JIS\n\n";
print "<HDML version=\"3.0\" markable=\"true\">\n";
print "<DISPLAY title=\"良い例\">\n";
print "\$nameです。</DISPLAY></HDML>\n";

のように記述することで、問題を回避することができます。うっかりしていると意外と気が付かない点なので、気をつけるようにしてください。


【2バイト文字】

 それから、よくPerlを使ってサーバーで処理させる場合、GETメソッドを使って、URLの一部に2バイト文字を入れてサーバーに送信させるケースがあります。しかし、前回も触れましたが、「dest=""」部分に2バイト文字列が入ると、すべてコンパイルエラーとなりますので、気をつけるようにしてください。


 CGIを使ってHDMLサイトを開発する場合は、とかくエラーがつきものです。何がエラーの原因なのかをその都度突き止めながら開発されることをお勧めします。コンパイルエラーはブラウザー上でデータを処理しようとした場合にエラーが起こったケース、Internal Server Errorはそもそもサーバー上で起こっているエラーというところを頭に入れて開発してください。


■環境変数を使いこなそう

 Perlなどを使ってサーバー上でプログラムを実行する場合、HTTPヘッダーに含まれる「環境変数」を利用することができます。これを使用すると、ユーザーの属性などを一気に把握することができ、よりインタラクティブな情報を自動的に配信することができます。よく使用される環境変数は以下の通りです。


【HTTP_USER_AGENT】

 ユーザーが使用しているブラウザーの種類が分かります。EZwebの場合、例えば「UP.Browser/3.03-HI11 UP.Link/3.2.2.7b」というような形式で入ります。半角スペースの前が端末自体が持つブラウザーのバージョンと端末の識別ID、その後がUP.Linkサーバーのバージョンという形式になっています。

 ちなみに、EZweb以外の例で言えば、Internet Explorerだと「Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)」、iモードだと「DoCoMo/1.0/F502i」のような文字列が入ります。

 これを使用して強制的にUP.Browserからのアクセスだけを許可するようなサイトを作ったり、端末ごとに最適化されたサイトを表示することが可能となります。

 例えば、Webサーバー(△△△.com)のルートディレクトリーにある「.htaccess」ファイルに「DirectIndex index.cgi」と記載したとしましょう。すると「http://△△△.com/」と指定してアクセスすると、自動的に「index.cgi」プログラムが起動することになります。このindex.cgiを


#!/usr/local/bin/perl 

$agent = $ENV {’HTTP_USER_AGENT’};

if ($agent =~ /DoCoMo/) {
    print "Location: http://△△△.com/i/index.html\n\n";
} elsif ($agent =~ /UP.Browser/) {
    print "Location: http://△△△.com/ez/index.hdml\n\n";
} else {
    print "Location: http://△△△.com/index.html\n\n";
}

のような形にすれば、iモード版、EZweb版、通常版といった風にマルチアクセス対応のサイトを作ることができます。ただし、契約しているプロバイダーによっては「.htaccess」の利用ができても、「DirectIndex」の機能が使用できないようにプロテクトがかかっていて、うまくいかない場合もあります。

 もっとも、CGIが使用できない場合、PC用のブラウザーの大半がJavaScriptをオンにしてあるということから、これを使用して擬似的にPCブラウザーを別ページに振り分ける、という方法もあります。


【REMOTE_HOST】

 ユーザーのアクセス元が分かります。EZwebの場合、ここにはUP.Linkサーバーの名称が入ります。

 具体的には、「xxxxxxxx.ezb.ido.ne.jp」「b2xxxxxx.ezweb.ne.jp」「t5xxxxxx.ezweb.ne.jp」のような文字列が入ります。旧DDI-セルラー所属のUP.Linkサーバーは「b2xxxxx.ezweb.ne.jp」のようなものが20数種類、ツーカー所属の場合は先頭が「t」となり、旧IDO所属のものはドメインに「ido.ne.jp」が入っています。なお、今後は、auブランドの携帯電話向けに新しく登場するUP.Linkサーバーの名称が原則として統一化されていくようです。

 つまり、こうしたルールに着目し、アクセス制限をかけることもできるというわけです。手っ取り早く、EZweb対応端末からのみのアクセスに制限する場合は、「ez」という文字で判別するのがよいのではないでしょうか。


【HTTP_X_UP_SUBNO】

 いわゆる「サブスクライバーID」と呼ばれるものです。各端末一つ一つに固有のIDが割り振られており、しかもこれが環境変数としてコンテンツサイドに渡される仕様になっているのは、EZweb特有の仕様と言えるでしょう。

 例えば、「0123456789_c7.ezweb.ne.jp」のような文字列が入ります。「_」以降が所属しているUP.Linkサーバーで、それより前の部分がUP.LinkサーバーにおけるIDのようなものとお考え下さい。

 会員認証の際、ログイン名とパスワードを入力させるかわりに、サブスクライバーIDを使用することで、そうした面倒な操作を省くことができるようになります。

 また、次回で詳しく触れますが、このサブスクライバーIDはアラートを送る際に使用する識別番号になり、大変効果的なコンテンツ配信が行なえるようになるのです。ユーザー利用動向追跡調査を行なったり、プッシュ配信を行ったりする場合、大変便利です。

 ちなみに、「UP.Simulator」を使用すると、ここにはクライアントのコンピュータ名が入ってしまいます。


【HTTP_X_UP_DEVCAP_ISCOLOR】

 カラー画像のところでも触れましたが、アクセスした端末がカラー対応していると「1」が入ります。これを使用することで、カラー対応の端末にはカラー画像を、カラー未対応の端末にはモノクロ画像を表示させることが可能となります。以下にその例を示します。


#!/usr/local/bin/perl 

$color = $ENV {’HTTP_X_UP_DEVCAP_ISCOLOR’};

print "Content-type: text/hdml;charset=Shift_JIS\n\n";
print "<HDML version=\"3.0\" public=\"true\"><DISPLAY>\n";

if ($color == 1){
    print "<CENTER><IMG src=\"color.png\" alt=\"image\">\n";
} else {
    print "<CENTER><IMG src=\"mono.bmp\" alt=\"image\">\n";
}
print "<DISPLAY></HDML>";


メール機能をサポートしよう

 今後発売される@mail対応(C4xx以降)の携帯電話では大丈夫になる予定ですが、現在発売されているEZweb端末では、メール本文に「http://」から始まるURLが書かれていても、リンク先にジャンプすることができません。

 つまり、すでにEZweb対応サイトを制作されている方の多くが感じていることとは思いますが、「このサイト、面白いからアクセスしてみたらどう?」という“口コミ効果”が、iモードなどと比べるとあまり期待できないということになります。

 がっかりしたあなた。実は一つだけ方法があります。添付ファイルを付けてしまうのです。HDMLの添付ファイルがついていると、EZwebのメールではURLリンクとしてそのファイルを開くことができるのです。要するに、そのHDMLデッキに目的のサイトへのリンクを張っておけば、「サイト紹介ツール」的なものを作ることができるわけです。

 例えば、以下のようなプログラムではどうでしょう?

【sample.hdml】

<HDML version="3.0" public="true" markable="true">
<ENTRY name="Invitation" key="from">
<ACTION type="accept" task="go" dest="#2">
あなたの名前:
</ENTRY>
<ENTRY name="2" key="to">
<ACTION type="accept" task="go" method="post"
 dest="invitation.cgi" postdata="from=$(from)&to=$(to)">
送信先アドレス:
</ENTRY>
</HDML>

【invitation.cgi】

#!/usr/local/bin/perl

$mailprogram = "/usr/lib/sendmail";  # Sendmailのパス
$mailaddress = ’xxx@xxx.xxx’;        # 自分のメールアドレス
$sitename    = ’△△△’;             # サイト名
$siteurl     = ’http://△△△.com/’; # サイトのURL


# フォームのデータを処理
if ($ENV {’REQUEST_METHOD’} eq "POST") {
    read (STDIN, $query_string, $ENV {’CONTENT_LENGTH’});
} else {
    $query_string = $ENV {’QUERY_STRING’};
}

@pairs = split (/&/, $query_string);
foreach $pair (@pairs) {
    ($name, $value) = split (/=/, $pair);
    $value =~ tr/+/ /;
    $value =~ s/%([0-9a-fA-F][0-9a-fA-F])/pack("C", hex($1))/eg;
    $FORM {$name} = $value;
}


$to    = $FORM {’to’};   # 送信先のメールアドレス
$from  = $FORM {’from’}; # 送信者の名前


# メールを送信
$time = time;
open (MAIL, "|$mailprogram -t");

print MAIL "To: $to\n";
print MAIL "From: $mailaddress\n";
print MAIL "Subject: Invitation\n";
print MAIL "Content-type: multipart/mixed;
 boundary=\"Invitation_Mail.$time\"\n\n";

print MAIL "--Invitation_Mail.$time\n"; 
print MAIL "Content-type: text/plain\n\n";
print MAIL "$fromさんより紹介がありました
$sitenameは何でも見つかる面白サイト。
↓の[URL指定あり]よりアクセスしてください。\n\n";

print MAIL "--Invitation_Mail.$time\n";
print MAIL "Content-type: text/x-hdml\n\n";
print MAIL "<HDML VERSION=\"3.0\" public=\"true\">\n";
print MAIL "<DISPLAY>\n";
print MAIL "<A task=\"GO\" dest=\"$siteurl\">Let’s Go</A>";
print MAIL "</DISPLAY>\n";
print MAIL "</HDML>\n";
print MAIL "--Invitation_Mail.$time--\n";

close (MAIL);


#表示
print "Content-type: text/x-hdml;charset=Shift_JIS\n\n";
print "<HDML version=\"3.0\" public=\"true\" ttl=\"0\">
<DISPLAY><ACTION type=\"accept\" task=\"return\" label=\"戻る\">\n";
print "ありがとうございます。確かにメッセージは送信されました。\n";
print "</DISPLAY></HDML>\n";


「download.cgi」について

 さて、「UP.SDK」をインストールするとなにやらヘンなスクリプトファイルも引っ付いてきます。「Examples」というフォルダに入っているものがそれにあたります。実はこのサンプルファイル、もちろん静的なHDMLのサンプルを記述したものも多いのですが、特にPerlで書かれたサンプルソースは何やら今まで話をしてきたものとは違う種類のものが入っているのです。全部を説明しようとすると10時間ぐらいかかるので、ここではそのうち「download.cgi」というファイルについて簡単に説明しておきたいと思います。

 「download.cgi」とは、その名前の通り、ダウンロードを行なわせるためのプログラムです。ここで気付く方も多いとは思いますが、着信メロディをダウンロードさせる「EZget」のテクノロジーのヒントがこのファイルには凝縮されているのです。

 ただ注意すべきなのは、この「download.cgi」はあくまでダウンロード行為を端末側に認識させ、実行させることを目的としたプログラムなので、例えば、端末上できちんと音楽が鳴ったり、画像が表示されるためには、データをバイナリ・エディタで編集したり、他の知識が必要だったりするので気をつけてください。


■インターネット上のリソース

 さて、今回はプログラミングに精通していない方々は「はにゃ?」という印象を持たせてしまったかもしれません。「私はコピー&ペーストするだけで動くスクリプトがほしい」という方も随分いらっしゃいます。そういう方のために、ネット上で参照できる便利なリソースをまとめておきました。いろいろと活用して見るのも手でしょう。

・EZweb on the street
http://www.cellular.ezweb.ne.jp/
 HDML専用のCGIスクリプトが多数ダウンロードできます。アクセスカウンターからホロスコープまで多彩なCGIプログラムが用意されています。

・imode4u.net
http://www.imode4u.net/
 本来は携帯電話コンテンツの作成方法のリンク集ですが、環境変数に関する一覧が載っているので役立つと思います。

・BEST CGI PURSUIT
http://hyne.bird.to/bcp/
 iモード用のCGIが多数登録されています。ここからHDMLに移植できそうなものに目星を付けて挑戦するのもいいでしょう。

・EZwebで自作画像をダウンロード
http://www.dd.iij4u.or.jp/~hiwahiwa/
 ダウンロードファイルのデータ計算の仕方など、ダウンロードプログラムを実行していく上で必要な情報が詰まっています。

・The Wireless FAQ
http://allnetdevices.com/faq/?faqredir=yes
 英文ですが、最もリソースが充実しているサイトの一つでしょう。Perl以外にもPHPやJavaを使用したプログラムの開発に関係する膨大なFAQがまとめられています。このようなサイトは海外にはかなり沢山あります。


■最後に

 さて、突然ですが宣伝です。10月25日に東京表参道のダイヤモンドホールで「Phone.com Business Seminar」(有料)というイベントが開催されます。W3CでXHTMLの仕様策定にかなりの影響力を持つ人物も登場します。当日、私も会場にいますので、暇な方や、XHTML・WAPについて何かを求められている方は是非いらしてください。詳しくはこちらのサイトをご覧下さい。




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


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

ケータイ Watchホームページ

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