ケータイ対応Webサイト開発Tips 後編

フレームワークで
ケータイWebアプリ開発をラクにする


ケイビーエムジェイ 
高瀬 裕一
2008/9/1
- PR -
ケータイWebアプリの開発前の確認事項。対応機種はどこまでか。ログイン状態の維持の方法は? フレームワークも活用しよう(編集部)

 特集:ケータイ対応Webサイト開発Tipsの前編「ケータイ対応サイトを開発するときの9つの注意点」では、ケータイ電話への対応サイトを初めて開発するときに想定するべき9つの注意点を紹介しました。今回の後編では、開発前に決定すべき対応機種と、共通基盤のフレームワーク、ログイン状態の維持について説明します。

開発前に対応する機種の範囲を決めておこう!

  まず、開発前に決定すべき事柄について考えましょう。はじめてのケータイ対応Webサイトの開発では忘れがちなのが対応機種です。ケータイ対応サイトを作る際、まず決める必要があるのが、どの程度のキャリア、機種に対応するかを決めておく必要があります。その方法を見ていきましょう。

 古い機種を考えてみましょう。実際、古い機種に対応するため、画像フォーマットは機種判別をしてフォーマットの種類を選択、さらにサイズも調整して……などという機能を実装すると非常に手間が掛かります。検証だけをとっても、検証のために、実機を用意するのにも費用はかかります。

 しかし、それだけのケータイの機種を用意する場合、どのような手段で用意するか(ケータイの機種を各種用意した検証ルームをレンタルしているサービスもあります)、その費用をどこが負担するか、もしくは、不具合があるかもしれないが、エミュレータでの検証だけで済ませるか、いつごろまでの端末で検証するのかなどを、サイトの規模や予算に合わせてあらかじめ決定しておく必要があります。

 また、3G携帯端末でも動画の容量の制限が違うため、1Mbytesの動画をダウンロードできる機種と、できない機種が存在します。もし、容量制限が厳しい機種も対応させるなら、動画を小さく分割する方法や機能を検討する必要があります。1つの大きな動画を見るために5ファイルもダウンロードするのはユーザビリティ的にもよくありませんので、サイトに用意する動画もどういったサイズにするか方針を決める必要があります。

 こういった機能の制限や費用は、開発途中に膨大に膨らんでいく危険性があるため、個人で作成するなどの融通が利く開発以外のケースでは注意が必要です。例えば、顧客へ見積もりを提出してから開発したり、決まった予算の中で開発したりする場合には、対応機種について、あらかじめ方針を決めておかないと、費用や開発スケジュールの延期などのトラブルの原因になることが考えられます。

図1 どの程度過去の機種にまで対応するかをあらかじめ決めておく
図1 どの程度過去の機種にまで対応するかをあらかじめ決めておく

キャリアによって異なるユーザー・エージェントの仕様

 ケータイのサイトの開発ではキャリア/機種ごとに動作が変わってくるので、Webアプリで表示を切り替えるときなど機種情報を判別する機能や絵文字の変換が必要になります。

 例えば、ケータイの機種情報は、アクセスの際に使用されるプログラム(=ヘッダ情報)のユーザー・エージェント(User Agent)に入っています。ユーザー・エージェントのフォーマットはキャリアによって異なるので、注意が必要です。各キャリアのユーザー・エージェントに利用できる仕様は、以下のようになっています。

 iモードの場合


docomo/1.0/機種名
docomo/1.0/機種名/キャッシュ
docomo/1.0/機種名/キャッシュ/個体識別情報
docomo/2.0<SP>機種名(キャッシュ;個体識別情報)
docomo/1.0/機種名/キャッシュ/状態コード/個体識別情報
docomo/2.0<SP>機種名(キャッシュ;状態コード;個体識別情報)
docomo/1.0/機種名/キャッシュ/状態コード/ブラウザ表示可能バイト数/個体識別情報
docomo/2.0<SP>機種名(キャッシュ;状態コード;ブラウザ表示可能バイト数;個体識別情報)

●参考:iモード対応機種の識別に利用可能なHTTPヘッダ(HTTP_USER_AGENT)

 EZwebの場合


KDDI-機種名ブラウザ名/ブラウザバージョン (GUI) サーバ名
ブラウザ名-機種名サーバ名

●参考:EZwebの識別に利用可能なHTTPヘッダ

 SoftBankの場合


J-PHONE/[ブラウザバージョン]/[機種名]
J-PHONE/[ブラウザバージョン]/[機種名]/[端末シリアル番号]■[メーカコード]/[ユーザエージェントのバージョン]■[Java情報(Profile■/Configuration/)]■[Java拡張仕様バージョン(Ext-Profile/)]
Vodafone/[ブラウザバージョン]/[機種名]/[端末バージョン]/[端末シリアル番号]■[ユーザエージェント種別]/[ユーザエージェント名]/[ユーザエージェントバージョン]■[Java情報(Profile■/Configuration/)]■[Java拡張仕様バージョン(Ext-Profile/)]
SoftBank/[ブラウザバージョン]/[機種名]/[端末バージョン]/[端末シリアル番号]■[ユーザエージェント種別]/[ユーザエージェント名]/[ユーザエージェントバージョン]■[Java情報(Profile■/Configuration/)]

●参考:ソフトバンク携帯電話の識別に利用可能なHTTPヘッダ

 これらのユーザー・エージェント情報を基にキャリア、機種の判別を行う必要がありますが、これを判別するプログラムを書き、絵文字の変換の対応表を自力で作成し、定期的に最新情報に更新しようとすると、非常に大きな労力が掛かります。

共通基盤として、フレームワークを利用しよう

 ケータイ開発で共通に開発できそうな機能は、フレームワークやプラグイン、ライブラリを利用することを推奨します。

 例えば、 筆者が開発でよく使っている Ruby on Railsであれば、jpmobileプラグインを利用することで、

  • ケータイ電話のキャリア判別
  • 端末位置情報の取得
  • 端末製造番号、契約者番号等の取得
  • IPアドレスの検証(キャリアが公開しているIPアドレス帯域からのアクセスか判定)
  • セッションIDをフォーム/リンクに付与(Trans SID)
  • ケータイ電話ビューへの自動振り分け
  • ディスプレイ情報(画面サイズ、ブラウザ画面サイズ、カラー・白黒、色数)の取得
  • GeoKit(http://geokit.rubyforge.org)との連携
  • 文字コード変換機能/絵文字のキャリア間相互変換

といった機能を利用できます。

 また、Perlであれば、2008年5月にDeNAによりMobaSiFが公開されていて、そちらでは以下の機能が利用できます。

  • ケータイ電話のキャリア判別
  • 端末機種の判定
  • 端末の認証
  • 絵文字変換
  • 3キャリア対応テンプレートエンジン

 機種判別や絵文字の表示などは、どのサイトでも大差なく、定期的に更新する必要があるため、こういったライブラリを利用してバージョンアップを利用することで、手間が省けます。

2/3

 INDEX

ケータイ対応Webサイト開発Tips

  Page1ケータイ向けとPC向けのWebページの相違点│絵文字の有無と文字コード│Cookieが使えない│外部スタイルシートが使えない│アクセスのたびにIPアドレスが変わる│画面のサイズが機種ごとに違う│メールアドレスのチェック方法│画像の表示│動画の表示│SSLが不正な場合利用できない
Page2開発前に対応する機種の範囲を決めておこう!│キャリアによって異なるユーザー・エージェントの仕様│ 共通基盤として、フレームワークを利用しよう
  Page3CookieもIPアドレスもNGなケースのログイン機能実装│ 1. セッション情報をURLに常に持たせる場合│2. 機種固有IDで判別する

 関連記事

iPhone向けWebアプリを作ろう
Safari Web Content Guide for iPhoneを読み解く iPhone/iPod touch上のWebブラウザのSafariで動くWebアプリを作成し、UIを最適化するコツを紹介します
リッチクライアント & 帳票」フ ォーラム 2008/5/29
Androidは雇い主の分身として仕事をするエージェント
Google Developer Day 2008特集(1) Androidの生みの親、アンディ・ルービン氏が、Androidに込めた思いと展望を語る。「Google Android入門」の著者の嶋氏が聞く
リッチクライアント & 帳票」フ ォーラム 2008/6/13
あなたのサイトはiPhoneで見られますか?
安藤幸央のランダウン(36)
 携帯電話と違い、PC用のサイトも見られる小さな画面の端末が普及してきている。そんな時代のWebページはどうあるべきかを解説しよう
Java Solution」フォーラム 2007/9/14


 Smart&Social フォーラム トップページへ



Smart & Social フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Smart & Social 記事ランキング

本日 月間