モバゲータウンのノウハウ満載! フレームワークMobaSiFを使おう!

第1回ケータイ向けWebアプリケーション開発特有の技術要素

はじめに

iモード/EZweb/Yahoo!ケータイなどで利用されるケータイブラウザは、極端な言い方をするとPCブラウザやフルブラウザとは「まったくの別物」です。今回はまず、ケータイブラウザ向けWebアプリケーションを開発する際に考慮すべき技術要素の説明を行います。次回以降は、そういった技術要素を共通的に処理できるフレームワークとして、筆者たちの所属する株式会社ディー・エヌ・エー(DeNA)がオープンソースソフトウェアとして2008年5月に公開したMobaSiF(Moba Simple Framework)を解説していきます。

本特集は、WEB+DB PRESS Vol.45の特集1「[イマドキ]ケータイ開発実践入門」の第2章、第3章を再構成したものです。なお、紙面の都合上で省略した説明も補っています。

各キャリア端末の世代分類

NTTドコモのiモードが開始されたのは1999年2月で、すでに9年が経過しており、過去に発売されたすべての端末に対応したウェブアプリケーションを開発するにはコストがかかります。

ケータイ端末は仕様などにより世代分けがある程度可能です。世代分けができればどの世代以降を対象端末にするかの判断材料になります。

筆者の所属するDeNAでは、会員数1000万人以上(2008年4月時点)モバゲータウンというサービスを運営しており、おそらくケータイサイトとしてはトップの規模ではないかと考えています。このサービスで利用された端末の集計結果(2008年4月から過去3ヶ月分、ユニークユーザ数ベース)も参考情報としつつ、以下、キャリアごとに世代分類を考えてみたいと思います。

NTTドコモ

まず、通信方式の違いによりmovaとFOMAに分かれます。NTTドコモの報道発表資料を見てみると、最後にmova端末が発売されたのは2006年4月のようで(機種はP506iCII⁠⁠、2006年6月には契約ベースでFOMAが半数を超えたと発表されており、現在それからすでに2年たっています。

モバゲータウンのNTTドコモ対応機種は、FOMA 70x,90xシリーズのみということもありますが、mova端末でのアクセスは3キャリア全体で見ても1.59%に過ぎないようです。

NTTドコモ端末にはキャッシュ容量という概念があり、1画面表示に必要な全要素(HTMLファイルだけでなくインライン表示する画像ファイルやFlashコンテンツも含めたもの)のファイルサイズ総和はその容量以下に抑えないと表示できないという制約がありますが、iモード対応のFOMA端末では一律100KBとなります。

FOMA端末でも、902i,702iシリーズ以降(M702iG,M702iSを除く)「iモード対応HTML 6.0」⁠iモード対応XHTML 2.0」という仕様に対応し、<table>タグを記述できます。これらのシリーズより前のFOMA端末の利用をモバゲータウンで見てみると、サイトの対応機種が含まれるにも関わらず1.47%とmova端末全体より少ない割合となっています。

以上をまとめると、

  • FOMAのみ対応とする(=mova対応をあきらめる)
  • FOMA902i,702iシリーズ以降対応とする

あたりに境界を設定できそうです。

au

まず、WAP 2.0ブラウザとHDMLブラウザのどちらが搭載されているかで分類されますが、機種別一覧のHDMLブラウザ搭載機種で最近(上側)の方に掲載されているA1014STやA1013Kでも発売は2002年です。したがって現在ではHDMLブラウザからの接続はほぼ無いと見なしてよいと思います。

現状auで用意しているすべての絵文字に対応するとなると、A1300シリーズ以降となりますが、こちらについてはウェブアプリケーションとして対応をあきらめれば楽になるというものではありません。

一方、NTTドコモ端末の「キャッシュ容量」にあたる制限について調べると、WAP 2.0ブラウザ搭載機種ではXHTMLまたはiモード互換HTMLで記述するページは9KB程度以内で制作する必要があるという記述が見つかります。なお、これにはインライン表示する画像データの容量は含みません

画像データなどを含んだ容量については、「iモードの互換性」説明ページにほぼ同等のファイルサイズの表示が可能という記述があります。我々の経験によると、WIN端末であればFOMA端末と同等の100KBでも表示可能なようですが、WIN端末以外ではそれより制限の厳しいものもあるようです。

したがって、利用できるコンテンツ容量の制限を考えると、WIN端末かどうかで世代分けできそうです。

ソフトバンクモバイル

端末一覧を見ると3Gシリーズ/V8シリーズ/6-5シリーズ/4-2シリーズ/4-1シリーズに分けられています。一方、PDFで提供される技術資料では端末がC型/P型/W型/3GC型に分類されています。User-Agentの対応関係を調べてみると、下記のようになります。また、NTTドコモのキャッシュ容量と同様、ページサイズ制限があるのでそれも付記します。

 ソフトバンクモバイルの端末分類
シリーズ呼称型名呼称ページサイズ制限
4-1,4-2シリーズC型6KB未満
6-5シリーズP型12-30KB未満
V8シリーズW型200KB未満
3Gシリーズ3GC型300KB未満

2006年度のボーダフォンプレスリリースを見ていると、C型端末V403SHの新色モデルが2006年6月に出ており、おそらくそれが最後のC型端末リリースと考えられます。

モバゲータウンでは3Gシリーズのみ対応機種としていますが、C型端末,P型端末+W型端末の利用割合はそれぞれ0.03%,0.16%となっています。

詳しくは後述しますが、ソフトバンクモバイル向けページはUTF-8で記述することが望ましい一方、C型端末とP型端末の一部ではUTF-8で記述されたページに対応しないという制限があります。

ソフトバンクモバイルについては端末の世代が上記のようにはっきり分かれているので、どこを境界とするかは比較的決めやすいのではないでしょうか。

ケータイ向けWebアプリケーション開発特有の技術要素

この記事の内容は、執筆時点で可能な限り正確な情報となるように心がけて書いていますが、最新の情報は各キャリアのページで確認するようにしてください[1]⁠。

ケータイ向けWebアプリケーション開発時に考慮する必要がある点は

  • 絵文字の取り扱い
  • 端末の認証
  • キャリア・端末機種の判定

などが挙げられます。以下、順を追って説明します。

絵文字と文字エンコーディング

絵文字の表現方法はケータイキャリアにより異なります。静的なWebコンテンツを作成する場合、ページ中で絵文字をどのように表現するかに着目すればよいのですが、動的なWebアプリケーションでユーザから絵文字入力を受け付ける場合は、FORMタグ中からどのように絵文字が送られてくるかについても把握する必要があります。

NTTドコモ、au、ソフトバンクモバイルの3キャリアについて、絵文字や文字エンコーディングに関する特徴を表1にまとめました。絵文字表記方法は代表的なもののみ紹介しています。このように3キャリアの絵文字仕様を把握してみると、絵文字の数も違えば、表現方法(=コード)も違うということがわかります。

表1 各キャリアの絵文字、文字コーディングに関する特徴
NTTドコモ
ページ記述の文字エンコーディングShift-JIS
UTF-8
HTML形式ではShift-JISのみ
XHTMLではShift-JISとUTF-8に対応
絵文字の種類176種類の基本絵文字+76種類の拡張絵文字FOMA端末で拡張絵文字を表示できないのは初期の2001、2002、2101Vシリーズのみ(これらの端末からのアクセスはごくわずか⁠⁠。mova端末については504iシリーズ以降で表示可能
絵文字表記方法(その1)Shift-JISのバイナリコード表現(1絵文字2バイト)Shift-JISのバイナリコード表現は第1バイトが16進数表記でF8、F9となっており、Shift-JISのユーザ定義文字(外字)符号化領域を利用している(例:「晴れ」⁠=太陽)の絵文字は16進数表記で第1バイトがF8、第2バイトが9F)
絵文字表記方法(その2)Unicodeのテキスト表現Unicodeのテキスト表現はHTMLの数値文字参照の形式を取る(例:「晴れ」の絵文字の文字列は&#xE63E;。Unicodeとして見ると私用領域が利用されている
絵文字表記方法(その3)UTF-8表現Unicode(UCS-2符号化)をUTF-8変換したもの(例:「晴れ」のE6 3EであればEE 98 BE(計3バイト)となる)
FORMからの絵文字送信Shift-JISページからはShift-JISのバイナリコード表現。
UTF-8ページからはUTF-8表現
 
au
ページ記述の文字エンコーディングShift-JIS「EZfactory」内でShift-JISのみサポートされると記述されているが、UTF-8を利用した例もある。
URL:http://subtech.g.hatena.ne.jp/miyagawa/20071112/
1194865208
絵文字の種類822種類の絵文字Wシリーズなど最近の端末では822種類の絵文字が利用可能
絵文字表記方法(その1)<img>タグを利用する方法<img localsrc=" 絵文字番号">というような記述を行う(例:「太陽」を示す絵文字番号は44なので、<img>タグを利用する場合<img localsrc="44">で表示される)
絵文字表記方法(その2)iモードとの互換性を利用する方法前述のNTTドコモの絵文字表現を使う。NTTドコモとauの絵文字が完全一致するとは限らないので、元のNTTドコモ絵文字に近似した絵文字が表示されることもある(例:野球のバット→野球のボール)
絵文字表記方法(その3)KDDI絵文字用Shift-JISShift-JISのユーザ定義文字(外字)符号化領域を利用しているが第1バイトは16進数表記でF3~F7なので、NTTドコモのShift-JISバイナリコード表現と重ならない
FORMからの絵文字送信Shift-JISのページからはKDDI絵文字用Shift-JISコード
ソフトバンクモバイル
ページ記述の文字エンコーディングUTF-8が推奨UTF-8がおすすめなのは、ページをUTF-8以外で記述するとFORMタグ中からWebサーバに送られる絵文字コードが抜け落ちるという問題が一部にあるため
絵文字の種類474種類の絵文字C型端末以外のソフトバンクモバイルのケータイでは474種類の絵文字が利用可能
絵文字表記方法(その1)数値文字参照UTF-8のページでは&#x????;というように、NTTドコモと同様数値文字参照の形式で記述する。絵文字と????の部分の対応は、前述の「Mobile Creation」の絵文字一覧。
URL:http://creation.mb.softbank.jp/web/web_pic_
about.html
で確認可能(例:「太陽」を示す絵文字は&#xE04A;)
絵文字表記方法(その2)UTF-8表現PDFで提供される技術資料(ウェブコンテンツ開発ガイドHTML編。URL:http://creation.mb.softbank.jp/web/web_doc.htmlに記載されている方法(例:「太陽」を示す絵文字は16進数表記でEE 81 8A)
絵文字表記方法(その3)
FORMからの絵文字送信UTF-8のページからは左記UTF-8表現

3キャリアに対応したサービスでユーザによる絵文字入力を許容するならば、あるキャリアの端末で入力された絵文字を他キャリアの端末でも表示できるようにしたほうが親切です。NTTドコモの絵文字コードがページに含まれると、au側の機能で近似した絵文字を表示してくれますが、ソフトバンクモバイル側ではこのような機能はありません。また、NTTドコモの絵文字は合計252種類であるのに対し、au、ソフトバンクモバイルはそれぞれ822、474種類と数が多く、auやソフトバンクモバイルの多彩な絵文字をNTTドコモユーザに対しどう表示するかという問題もあります。こう考えると、各キャリア間で同じ絵文字あるいは類似した絵文字を関係づけるマッピングテーブルを用意し、相互変換する処理も必要になります。

また、ユーザが入力した絵文字コードをデータベースで保持する際、データベース上でどう扱うかという問題もあります。

端末による認証

ユーザを識別する際、PC向けサイトでは一般的にユーザ名とパスワードの組み合わせを利用しますが、ケータイの場合は個々の端末を識別するしくみが用意されているため、ユーザ名やパスワードをユーザに入力してもらう手間を省くことができます。以下、各キャリアの端末認証方法を表2にまとめます。

これらのIDはHTTPリクエストに含まれる情報ですので、クローラやHTTPクライアントなどの実装経験がある方には容易に想像がつくと思いますが、接続元IPアドレスをケータイキャリアのものに限定していない場合(あるいは接続元IPアドレスを偽って接続ができた場合など)は、簡単に偽装され得るものなので注意が必要です。

表2 各キャリアの端末認証
キャリア概要注意点
NTTドコモ
utn
<A>タグまたは<FORM>タグの属性としてutnを指定したときにWebサーバ側に通知される情報
mova端末:User-Agentの末尾に製造番号(11桁のユニークな英数字)が追加されてWebサーバに通知される
FOMA端末:User-Agentの末尾にFOMA端末製造番号(15桁のユニークな英数字)とFOMAカード製造番号(20桁のユニークな英数字)が追加されてWebサーバに通知される
utnを要求するとユーザにダイアログが表示されるため、頻繁に要求し過ぎるとユーザビリティが低下する
ユーザがダイアログボックスでNOを選択すると通知されない
502iや209i以前の機種などでは利用できない
iモードID
(2008年3月31日~)
URLに「guid=ON」というパラメータが付加されているときにWebサーバへ通知されるユーザ一意の番号
このパラメータが付加されたURLに対しケータイからアクセスすると、端末からWebサーバに送られるHTTPリクエストヘッダにX-DCMGUIDというフィールドが含まれ、その値がiモードIDとなる(7桁の英数字、大文字小文字区別あり)ユーザによりどのサイトにも通知しないという設定が可能
SSL通信時には付与されないという制約あり
au
EZ番号
(サブスクライバID)
ランダムな英数字の組み合わせにより構成され、EZweb契約に基づいて割り当てられる番号
au端末からWebサーバに送信されるHTTPリクエストヘッダにX-Up-Subnoというフィールドが含まれており、この値がEZ番号となる(⁠⁠xxxxxxxxxx_xx.ezweb.ne.jp」というような形式で、xxxxxxxxxx_xxの部分は英数字となるようだが、⁠EZfactory」では桁数などのフォーマットは非公開)iモードID同様、ユーザによりEZ番号をどのサイトにも通知しないという設定が可能(初期設定では通知される)
ソフトバンクモバイル
UID(ユーザID)
送出元の端末の識別子
HTTPリクエストヘッダにx-jphone-uidというフィールドが含まれており、この値がUIDとなる(16桁の英数字)iモードID同様、ユーザはUIDを送出しない設定が可能(初期設定では通知される)

キャリアと端末機種の判別

ここまでの内容でもわかるように、ケータイ向けWebアプリケーションの場合、接続がどのケータイキャリアを利用しているものか判別することが重要です。キャリア判別の方法としては、次の2つが考えられます。

  • IPアドレスによるキャリアの判別
  • User-Agentによるキャリア(と端末機種)の判別

IPアドレスによるキャリア判別

各ケータイキャリアは、ユーザがケータイサイトに接続する際の接続元IPア1ドレスをコンテンツ制作者向けサイトで公開しています。それらの情報に基づけば、IPアドレスによるキャリア判別が可能です。また、前述の端末による認証の安全性も高められます。

User-Agentによるキャリアと端末機種の判別

PCの世界でブラウザを判別するのに使われるHTTPリクエストヘッダ中のUser-Agentフィールドですが、ケータイの世界ではキャリアや機種の特定に利用できます。キャリアと機種名以外の情報も含まれる場合もありますが、ここではその2種類にのみ着目し、表3にまとめます。

表3 各キャリアのUser-Agent形式
NTTドコモ
FOMA文字列前方から見て「DoCoMo/2.0機種名」という形式
例:DoCoMo/2.0 N905i(c100;TB;W24H16)
mova文字列前方から見て「DoCoMo/1.0/機種名」という形式
例:DoCoMo/1.0/N505i/c20/TB/W20H10
au
「KDDI」または「UP.Browser」という文字列で始まる
例:KDDI-SA31 UP.Browser/6.2.0.7.3.129 ⁠GUI⁠⁠ MMP/2.0
例:UP.Browser/3.04-ST13 UP.Link/3.4.5.9
SA31やST13が「デバイスID」と呼ばれる部分で、機種の判別に利用される。デバイスIDがそのまま機種名を表さない(上記例の機種名はそれぞれW21SA、A1011ST⁠⁠。デバイスIDと機種名の関係はこちら
ソフトバンクモバイル
「J-PHONE」⁠Vodafone」⁠Softbank」⁠MOT-」のいずれかの文字列で始まる
例:Vodafone/1.0/V904SH/SHJ001/SN************ Browser/VF-NetFront/3.3 Prole/MIDP-2.0 Conguration/CLDC-1.1
例:SoftBank/1.0/910T/TJ001/SN************ Browser/NetFront/3.3 Prole/MIDP-2.0 Conguration/CLDC-1.1
702MO、702sMOを除き、⁠/」文字で区切った第3番目の要素が機種名を表す。⁠Vodafone」という文字列から始まる場合のみ、機種名の前に「V」という文字が付加される。

その他の制約事項

その他のケータイ特有の制約事項としては、Cookieの利用が挙げられます。Cookieはauの全端末で、ソフトバンクモバイル端末では一部を除き利用できますが、NTTドコモ端末では利用できないため、統一的な利用はできません。代わりにiモードID、EZ番号、ソフトバンクモバイルのUIDがセッション管理に利用できます。


次回は、ここまでで述べたケータイ特有の技術要素を共通的に処理できるフレームワーク MobaSiF (Moba Simple Framework) の概要と、インストール方法について説明します。

おすすめ記事

記事・ニュース一覧