はじめに
現在、携帯キャリアの主流となっているiモード、EZweb、Vodafone Live!の3キャリアに対応する携帯サイトをいくつかのCPANモジュールを用いて構築する方法を紹介します。
携帯サイト構築の際にポイントとなるのは、キャリアごとに異なる仕様に合わせた形式で、タグの記述やファイルの出力を行う必要があることです。本稿では、それらの煩雑になりがちな振り分け処理をシンプルに行う方法を解説します。
対象読者
Perlを実行できる環境にて携帯サイトの構築を考えている方。
必要な環境
- Apache 1.3系または2系
- Perl 5.6以上
User-Agentより端末判別を行う
携帯サイト構築の主な処理として挙げられるのがUser-Agent解析によるキャリア、モデル、シリーズなどの分類処理かと思われます。iモード、EZweb、Vodafoneの3キャリアを判別するだけでも複数のパターンが存在しており、端末のモデルを取得するまでにはさまざまな条件分岐処理の記述が必要となります。それらをスマートに行う方法はHTTP::MobileAgentを使うことで、User-Agentを認識し、携帯端末のキャリア・機種・スペックなどの情報を容易に取得することができます。
use HTTP::MobileAgent; my $agent = HTTP::MobileAgent->new; if ($agent->is_docomo){ # iモード } elsif ($agent->is_ezweb){ # EZweb } elsif ($agent->is_vodafone){ # Vodafone }
端末に合わせたHTMLを出力する
デザイン部分のHTMLとプログラム部分を切り分けるためのテンプレートライブラリ「Template-Toolkit」と、HTTP::MobileAgentを組み合わせることで、より快適な携帯サイトのデザインが可能となります。
例えば、キャリアごとに表示させる文字を変えたいときがあるかと思います。そのような場合は、下記の「sample.cgi」のように「sample.html」を読み込ませることで、テンプレート側(ここでは「sample.html」)だけでキャリア別の出力を切り分けられるようになります。
#!/usr/local/bin/perl use strict; use warnings; use CGI; use Template; use HTTP::MobileAgent; my $q = CGI->new; my $agent = HTTP::MobileAgent->new; my $tt = Template->new({ABSOLUTE => 1}); my $output; # sample.htmlのagentパラメータへ # HTTP::MobileAgentのインスタンスをセットする $tt->process('/path/to/sample.html', {agent => $agent}, \$output) or die $Template::ERROR; print $q->header(-charset=>'Shift_JIS'); print $output; exit;
<html> <body> [% IF agent.is_docomo %] iモード [% ELSIF agent.is_ezweb %] EZweb [% ELSIF agent.is_vodafone %] Vodafone Live! [% ELSE %] Non Mobile... [% END %] </body> </html>
メールアドレスのキャリア判別を行う
iモードのメールアドレスへはSJIS、EZweb/VodafoneへはJISでエンコーディングしたメールを送る場合、送り先のメールアドレスを基にキャリア判別を行い、エンコード処理を切り分ける必要ががあります。そのようなときはMail::Address::MobileJpを使うと、シンプルにキャリアを判別することができます。
use Mail::Address::MobileJp; if (is_imode($email)){ # @docomo.ne.jp }elsif (is_ezweb($email)){ # @ezweb.ne.jp or @*.ezweb.ne.jp }elsif (is_vodafone($email)){ # @jp-*.ne.jp or @*.vodafone.ne.jp # (*にはd,h,t,c,k,r,n,s,qのみが適用となる) }
絵文字対応
iモード、EZwebの一部の端末では、HTMLフォームに絵文字を入力することができます。しかし、キャリアごとに絵文字の形式が異なるため、入力された絵文字データをDBへ格納してしまうと、別のキャリアやPCでその絵文字データを参照した場合に正しく表示することができません。そのような場合は絵文字を削除したり、入出力時にある特定の形式へエンコード・デコードしたりする必要があります。
ここではHTML::Entities::ImodePictogramを使用して、入力された絵文字を削除する方法を紹介します。ただし、このモジュールはiモード専用となっているため、EZweb/Vodafoneにも対応したい場合は以下の拡張が必要となります。
use CGI; use HTML::Entities::ImodePictogram; my $q = CGI->new; my $text = $q->param('text'); # EZwebの絵文字も削除対象にする $HTML::Entities::ImodePictogram::ExtPictorgram_re .= '|[\xF3\xF4\xF6\xF7][\x40-\x7E\x80-\xFC]'; # iモード、EZwebの絵文字を削除 $text = remove_pictogram($text); # Vodafoneの絵文字を削除 $text =~ s/\x1B\$(.+?)\x0F//g;
まとめ
本稿ではキャリアの切り分けについての概要を紹介させていただきました。日々進化する携帯電話の多様性に対応するサイトを構築するための足がかりとしていただければ幸いです。