SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Perlで作るモバイルサイトのコツ

Perlで作るモバイルサイトのコツ:第1回

3キャリア対応のページを作成する


  • X ポスト
  • このエントリーをはてなブックマークに追加

本連載では、Perlによる携帯サイトを構築する上で役立つ、さまざまなTipsを解説していきます。第1回は、現在、携帯キャリアの主流となっているiモード、EZweb、Vodafone Live!の3キャリアに対応する携帯サイトを、いくつかのCPANモジュールを用いて構築する方法を紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 現在、携帯キャリアの主流となっているiモード、EZweb、Vodafone Live!の3キャリアに対応する携帯サイトをいくつかのCPANモジュールを用いて構築する方法を紹介します。

 携帯サイト構築の際にポイントとなるのは、キャリアごとに異なる仕様に合わせた形式で、タグの記述やファイルの出力を行う必要があることです。本稿では、それらの煩雑になりがちな振り分け処理をシンプルに行う方法を解説します。

CPAN
 http://www.cpan.org/。Perlのライブラリ・モジュールソフトウェアやその他のPerlで書かれたソフトウェアを集めた巨大なアーカイブで、世界中のサーバーにその内容がミラーされています。
 

対象読者

 Perlを実行できる環境にて携帯サイトの構築を考えている方。

必要な環境

  • Apache 1.3系または2系
  • Perl 5.6以上

User-Agentより端末判別を行う

 携帯サイト構築の主な処理として挙げられるのがUser-Agent解析によるキャリア、モデル、シリーズなどの分類処理かと思われます。iモード、EZweb、Vodafoneの3キャリアを判別するだけでも複数のパターンが存在しており、端末のモデルを取得するまでにはさまざまな条件分岐処理の記述が必要となります。それらをスマートに行う方法はHTTP::MobileAgentを使うことで、User-Agentを認識し、携帯端末のキャリア・機種・スペックなどの情報を容易に取得することができます。

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」)だけでキャリア別の出力を切り分けられるようになります。

sample.cgi
#!/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;
sample.html
<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にも対応したい場合は以下の拡張が必要となります。

3キャリアの絵文字削除
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;

まとめ

 本稿ではキャリアの切り分けについての概要を紹介させていただきました。日々進化する携帯電話の多様性に対応するサイトを構築するための足がかりとしていただければ幸いです。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Perlで作るモバイルサイトのコツ連載記事一覧

もっと読む

この記事の著者

小森谷 一生(コモリヤ カズナリ)

株式会社ライブドア メディア事業部モバイルメディア部プログラマ

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/496 2008/08/26 13:51

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング