携帯Webアプリケーション開発の基本とフレームワーク「mobylet」の紹介

携帯 Web アプリケーション開発の基本と Java/OSS フレームワーク「 mobylet 」の紹介竹内真（株式会社レイハウオリ） 2009/06/13 Seasar Conference 2009 Spring

自己紹介竹内真（ Takeuchi Shin ）簡単な経歴富士ソフト㈱ -> フリー -> ㈱レイハウオリ設立 Web アプリケーション開発畑で育つ現在色々なベンチャー企業と共同での Web コンテンツ制作㈱リクルートへの技術支援共通化基盤チームのアドバイザー主にモバイル /SEO/ フレームワーク構築などを担当未来 mobylet を作りまくる＆使いまくる

アジェンダ（ 1/2 ）携帯Webアプリケーション開発の基本携帯Webの歴史と今 3大キャリアの歩んだ歴史激震の2009年度と今後 PCと携帯の違い携帯だからできること携帯だからできないこと/困ること Javaと携帯恐怖の「絵文字」

アジェンダ（ 2/2 ） Java/OSS フレームワーク「 mobylet 」の紹介 mobylet ？ mobylet の紹介 mobylet （ ver 0.1 ）にできることデモフレームワークを一切使わない場合 S2 （ SAStruts ）と組み合わせた場合の設定についてドキュメント＆サポートドキュメントの紹介サポート＆開発体制

携帯 Web アプリケーション開発の基本まずは基本 ※ 知ってる人はつまらない話ですいません。。。

携帯 Web の歴史と今 3 大キャリアの歩んだ歴史（ 1/4 ） 3 大キャリアとは？ docomo au SoftBank 現在のシェア（概算） docomo: 約 50% au: 約30% SoftBank: 約 20%

携帯 Web の歴史と今 3 大キャリアの歩んだ歴史（ 2/4 ） docomo について 1999 年に「 i モード」が登場 cHTML という HTML の廉価版のような仕様で記述する uid やキャリア課金など「公式サイト」有利な設計 2005 年頃から XHTML+i-CSS が利用可能にこの頃、 cHTML でも table タグが使用可能になるなど、携帯サイトでリッチな構造のデザインが可能になってくる。 2009 年「 i モードブラウザ 2.0 」が発表携帯 Web に革命が起こる。。。詳しくは後述。

携帯 Web の歴史と今 3 大キャリアの歩んだ歴史（ 3/4 ） au について 1999 年に「 ezweb 」が登場 i モードに遅れること 9 ヶ月で登場 ezweb サーバという独特な GW サーバが存在する基本的には HDML という特殊な言語で制作する 2001 年頃から XHTML が使用可能になる 2008 年 5 月 31 日に HDML 端末のサービスが終了つまり XHTML 一本になる

携帯 Web の歴史と今 3 大キャリアの歩んだ歴史（ 4/4 ） SoftBank について 1998 年に「スカイウェブ」が登場「 i モード」よりも登場が早いものの、いわゆる WWW ではなく閉鎖的なコンテンツサービス網 1999 年に「 J- スカイ」が登場ここからインターネット接続が可能となった 2003 年、 J-Phone から Vodafone へ 2006 年、 Vodafone から SoftBank へ 2010 年 3 月、 2.5G 以下の端末のサービス終了へ

携帯 Web の歴史と今激震の 2009 年度と今後（ 1/2 ） 2009 年度に起こる（起こった）こと i モードブラウザ 2.0 端末が発売となった JavaScript が使用可能（携帯ブラウザ初）リファラが取れるようになった（ docomo 初） QVGA と VGA の切り替えが可能（携帯ブラウザ初） 2010 年 3 月末で SoftBank 2.5G 端末のサービスが終了まるで別キャリアのような 2.5G 以前と 3G のサポートが不要 5 バイト絵文字という史上最高にやっかいな文字が無くなる 2009 年度は新しい仕様が生まれ、古い仕様が消える過渡期。

携帯 Web の歴史と今激震の 2009 年度と今後（ 2/2 ）今後について他のキャリアも docomo の新仕様を取り込む可能性が有る今までの歴史上、 docomo の仕様は携帯業界全体の仕様になる Ajax 等を使ったリッチなインターフェースが可能になる PC と同様に XSS の危険性が発生するブラウザの解像度の切り替えを使った UI も登場する Jsessionid はクッキーを使うことがスタンダードになる今まではそもそも docomo でクッキーが使えなかった au や SoftBank も端末でクッキーを保持できるものが増えてきた

PC と携帯の違い携帯だからできること（ 1/5 ）公式サイトに申請することができるキャリア毎に「公式サイト」に申請することができる公式サイトに登録されると。。。。キャリアの公式メニュー（ i メニューなど）でサイトを辿れるキャリアの検索ページで上部に表示されるキャリア課金システムが利用できる「 i コンシェル」などキャリア毎の付帯システムが利用できる公式サイトでない携帯サイトを「勝手サイト」と呼ぶ結構オフィシャルな呼ばれ方になってきた気がします。。。

PC と携帯の違い携帯だからできること（ 2/5 ）アクセスしたユーザを特定することができる docomo 「公式サイト」の場合は「 uid 」という契約に一意な id が取得可能「 i モード ID 」という契約に一意な id も取得可能（勝手サイトも OK ） au 「サブスクライバナンバー」という契約者一意の id が取得可能 SoftBank 「 uid 」（ x-jphone-uid ）という契約に一意な id が取得可能端末を特定することができるシリアルナンバーを取得可能（ au は不可能）

PC と携帯の違い携帯だからできること（3/5）位置情報を取得することができる GPS搭載端末はGPSを使用した緯度/経度情報を取得することが可能 GPS非搭載端末でも、基地局の位置から簡易的に割り出した緯度/経度情報を取得することが可能昔は簡易測地の精度も荒く、あまり使えなかったが、最近は基地局3点から測地する方式を取っており、かなり精度が高くなった。とはいえ、首都圏などの基地局が密集しているエリアのことであって、地方や3点から測地が難しい海岸沿いなど、場所によってはどうしても荒い値になってしまう。

PC と携帯の違い携帯だからできること（ 4/5 ）携帯からのアクセスを制限することができる IP アドレスで制限することができる携帯ブラウザからのアクセスは、必ず「キャリアゲートウェイ」を通ってくるため、各キャリアゲートウェイに振られている IP で制限することで、携帯（もしくは特定のキャリア）のみにアクセスを限定することが可能。 UserAgent で制限することができる携帯ブラウザはそれぞれ PC のブラウザとは異なる UserAgent を持っているため、 UserAgent ヘッダを判定して制限することが可能しかし、 Firefox やその他のツールを利用して UserAgent は偽装が可能なので、セキュリティ上の制限として使用することは避けたい

PC と携帯の違い携帯だからできること（5/5）絵文字が使える画像を使用しなくてもサイトを飾れる絵文字1文字は全角1文字相当の2バイトしか使用しないため、軽量にサイトを飾ることができるコミュニケーションI/Fとして有用静的コンテンツやメール、その他、絵文字を使うことで、文字だけのインターフェースに様々な表現を追加することが可能となるつまり、携帯サイトである以上、絵文字は有効活用したい資産のひとつであると言える

PC と携帯の違い携帯だからできないこと / 困ること（ 1/6 ） JavaScript が使えない（使えなかった。。。）「 i モードブラウザ 2.0 」搭載端末以外は全て使えないこのためトップページの onload でリダイレクトして、携帯サイトと PC サイトを振り分けるような処理も割りと存在したしかし、 i モードブラウザ 2.0 の登場で、この裏技トリックもあまり有効では無くなってくるだろう。非同期通信も不可能だった Flash 対応端末の一部で Flash から非同期通信を行うパターン以外での非同期通信 / 制御は不可能だった。 XSS も起こらなかった今後、特に既存のサイトには XSS の被害が懸念される。。。

PC と携帯の違い携帯だからできないこと/困ること（2/6）キャッシュサイズ制限端末毎に1ページの最大容量が決まっている昔だと5K、最近だと500Kといった、キャッシュサイズ制限があるボリューム（文字/画像）の多いページは複数ページに分割するなどの必要があるサイト毎に端末制限を掛ける必要もある例えば画像を多く必要とするサイトなどは100K以上のキャッシュサイズを持つ端末に限定するなどの制限を掛ける必要もあるキャッシュサイズを超えた場合一部画像が表示されないパターンや、そもそも画面が表示できないケースなど、キャリアや端末によって挙動は様々。

PC と携帯の違い携帯だからできないこと / 困ること（ 3/6 ）クッキークッキーを使えない端末がある au/SoftBank はクッキーが使える端末のシェアが増えてきた docomo は「 i モードブラウザ 2.0 」対応端末のみ au の古い機種はキャリアゲートウェイでクッキーを保持する JSESSIONID の持ち方が悩ましい以前はクッキーを使用せず、クエリに jsessionid パラメータを持つパターンが基本だったが、リファラによる情報漏えいの危険性や、 docomo の「 i モードブラウザ 2.0 」の登場により、これから飛躍的にクッキーを利用するパターンが増えると思われる。とはいえクッキーに対応していない端末はクエリで持つ必要がある

PC と携帯の違い携帯だからできないこと / 困ること（ 4/6 ）ブラウザサイズ（画面解像度）横幅 120px 程度のものから 480px 程度のものまで例えば商品画像を表示するにも小さなブラウザでは小さな画像しか表示できないし、大きなブラウザでは小さくて見えないし、といった問題に直面する端末のブラウザサイズ毎に商品画像の大きさも変えて表示することが望ましいとはいえ、大きな画像を使って <img> タグの widh=“80%” とかでリサイズするとキャッシュサイズオーバーとなるパターンもあるので要注意（実際に返す画像サイズを小さくする方が良い）

PC と携帯の違い携帯だからできないこと / 困ること（ 5/6 ） SSL （証明書）オレオレ証明書が使えない au の場合、オレオレ証明書では画面を表示することすらできないので要注意（その他のキャリアは警告が表示される）認証局の対応も端末毎にバラバラ唯一 Verisign だけは全端末 OK その他の認証局のものは古い端末で対応していない場合があるので要注意 SSL サイトの場合の注意事項 docomo で画像 1 枚単位の通信速度が極度に遅くなる au で何気ない改行が <br> と認識される場合がある

PC と携帯の違い携帯だからできないこと / 困ること（ 6/6 ）その他メール： SPF レコードを設定する必要があるメール：キャリアの SMTP サーバは連続送信にシビアクローラ：モバイル専用のクローラが存在する IP 制限を掛ける場合はクローラの IP も開けないと、検索エンジンに一生インデックスされないので要注意 WEB ： <input type=“file”> は基本使えない WEB ：リダイレクトは最大 3 回まで（ 2 回まで推奨） WEB ：外部 CSS は docomo で読めない WEB ： secure.softbank.ne.jp に泣く

Java と携帯恐怖の「絵文字」（1/7）絵文字とは文字コード上の私的領域に存在するつまり、例えば「SJIS」「MS932」とかで文字化けする 2バイトのバイナリパターン領域 MS932 対応領域絵文字領域

Java と携帯恐怖の「絵文字」（ 2/7 ） Java は必ず Unicode に変換する必要がある文字として扱う以上「 char 」として保持する必要があるが、入力文字（ byte ）-> char 変換する場合に文字化けする文字化けしないようにするには「絵文字」を正常に変換できる「文字コード」を用意する必要があるしかもキャリア毎に「絵文字」の文字コードは異なるため、全キャリア分文字コードを作る必要がある文字コードを作るなんて、非常に情報も少ないし、面倒くさいし、難しいし。。。。。ということで携帯サイトを作るモチベーションが著しく落ちるところはここだと思った

Java と携帯恐怖の「絵文字」（ 3/7 ）なので。。。。 mobylet が作りました。

Java と携帯恐怖の「絵文字」（ 4/7 ）キャリア毎の絵文字の変換それでもやっぱりキャリア毎に絵文字のコードが違うってことは、 docomo の「太陽」を au で表示するときに、ちゃんと au の「太陽」の絵文字に変換してあげないといけない docomo が約 250 、 au が約 600 、 SoftBank が約 400 ある絵文字。全部のマッピングをするなんて気が遠くなる。。。ということで携帯サイトを作るモチベーションが著しく落ちるところはここだとも思った

Java と携帯恐怖の「絵文字」（ 5/7 ）なので。。。。 mobylet が作りました。

Java と携帯恐怖の「絵文字」（ 6/7 ）ひとつの View で 3 キャリア出し分け特に問題となっていた絵文字の出し分け部分を mobylet の Filter 部分で吸収したため、 1 つの View を作ることで、何も考えず、勝手に 3 キャリア出し分けができるようになりましたこのため、 mobylet を使って携帯サイトを作る開発者は、面倒な絵文字を一切意識する必要がありません！

Java と携帯恐怖の「絵文字」（ 7/7 ） Java にとって恐怖だった絵文字は。。。。全く恐怖ではなくなりました！

Java/OSS/FW 「 mobylet 」の紹介なにはともあれ携帯 WebApp フレームワークの「 mobylet 」です。 ※ それ以外の用途でのご利用は不可能（多分）です。

mobylet? mobylet の紹介携帯 Web アプリケーションを構築するためのフレームワーク 3 大キャリアに対応（ docomo/au/SoftBank ）但し、 SoftBank の 2.5G 以下の端末は除く（ 2010 年 3 月サービス終了端末）上記以外のキャリアや PC でアクセスも可能なような設計依存ライブラリがほぼ 0 様々なフレームワークと融合できる（もちろん Seasar2 とも）導入コストが小さい（簡単に導入できる）絵文字に完全対応バリューエンジン社の無料端末プロファイルをデフォルトでサポート最小公倍数的な設計（あえてサービス依存するようなクラスも作る）

mobylet? mobylet （ ver 0.1 ）にできること（ 1/5 ）キャリアや端末の判定ができるアクセスした UserAgent をキーにしてキャリアを判別します Mobylet m = MobyletFactory.getInstance(); m.getCarrier(); アクセスした UserAgent をキーに端末を判定し、プロファイル情報とのマッチングを行い、デバイス情報を取得します。 m.getDevice(); 他にも「 Mobylet 」クラスを基点に色んな情報が取り出せます DI コンテナを使っている場合は Mobylet クラスを DI できます

mobylet? mobylet （ ver 0.1 ）にできること（ 2/5 ）絵文字関連絵文字の表示が可能（ i 絵文字、カスタムタグなどが利用可能）絵文字の入力が可能（フォーム入力）キャリア毎の絵文字の変換が可能 docomo au SoftBank

mobylet? mobylet （ ver 0.1 ）にできること（ 3/5 ）バリューエンジン社の端末情報をそのまま使える携帯の端末プロファイル情報は今まで有料のものしかありませんでしたが、バリューエンジン社が無償公開を開始したため、 mobylet はこれに乗っかり、デフォルトでバリューエンジン社のプロファイル情報をサポートしています。また、バリューエンジン社とも直接交渉し、 mobylet-core.jar にある時点（ちょっと古い）のプロファイル情報を同梱し、 mobylet ライブラリに内包する形での 2 次配布が可能となりました。バリューエンジン社の CEO 北野さん、有難う御座います！ I/F を実装することにより他社のプロファイルも使える XML 形式のものなどにも対応することは可能です。

mobylet? mobylet （ ver 0.1 ）にできること（ 4/5 ）ブラウザサイズ（横幅等）に応じたサイズの画像を表示できる端末毎に異なるサイズの画像を出し分けることができます。 <m:img src=“/img/demo.jpg” magniWidth=“0.8” /> 上記のように書くと demo.jpg がブラウザ幅の 0.8 倍の大きさに Fit して表示されるようになります。この処理は Filter 以下で制御しているため、 AP サーバ上のディレクトリに配置した画像のみ、対象とすることが可能です。但し AP サーバも結構負荷が掛かる（動的に処理するため）特に CPU/ メモリが潤沢なシステム若しくはアクセスの軽いシステムで使うことをオススメします。画像変換部分だけに特化したアプリケーションを立てて、 ASP 形式にするのも良いかもしれません Java の ImageAPI を使って制御しています。

mobylet? mobylet （ ver 0.1 ）にできること（ 5/5 ） GPS と GoogleMap の I/F が標準搭載 index.jsp <m:gps kickBackUrl=“gps.jsp” /> gps.jsp <m:googlemap key=“ 取得したキーを入れます” /> これで現在位置の地図を表示するシステムが完成です GoogleMap Mobile を使う場合はキーが必要です GoogleMap Mobile のページからキーを発行して貰ってくださいね。

デモフレームワークを一切使わない場合（ 1/3 ） SVN に example があるので使ってみてください。 mobylet-example というプロジェクトですちなみにこのプロジェクトは↓の設定がほぼ終了しています端末プロファイルだけは最新化した方が良いかも実際に設定すると次のような 5 ステップの設定が必要です。 mobylet-core / mobylet-taglibs （任意）を DL して Webapp に配備 maven2 を使用している方は pom.xml に dependency を追加で OK mobylet-charset を DL して任意のディレクトリに配備バリューエンジン社から最新の端末情報プロファイルを DL して配備 http://valueengine.jp/index.html web.xml に MobyletFilter を適用するよう設定を追加 JVM パラメータに charset の jar を読み込む設定を追加

デモフレームワークを一切使わない場合（ 2/3 ）ではとりあえずみなさんの携帯で見てみましょう画面では Fire Mobile Simulator を使用します URL は以下に書いておきますが。。。 http://leihauoli.org/mobylet-example/

デモフレームワークを一切使わない場合（ 3/3 ）面倒なので QR でどうぞ。

デモ S2 と組み合わせた設定について S2 専用の mobylet-s2extensions があります。フレームワークを使わない設定に加えて次の設定を追加 mobylet-s2extensions を DL して Webapp に配備 maven2 を使用している方は pom.xml に dependency を追加で OK web.xml に S2MobyletFilter を適用するよう設定を追加 app.dicon に mobylet.dicon を include 一応 SAStruts 版のデモも作りました。 mobylet-example-sastruts というプロジェクトで SVN にあります。

ドキュメント＆サポートドキュメントの紹介今のところ以下のサイトしかありません。。。携帯では見れません。。。これから充実させて行きたい！ http://mobylet.sandbox.seasar.org/

ドキュメント＆サポートサポート＆開発体制竹内（ stakeuchi ）を中心に開発＆品質向上しまくります。他に弊社の山口（ yamaguchi ）、八柳（ mickey8 ）も参加しています。質問や疑問はじゃんじゃん seasar の usersML に下さい。 ML はこっぱずかしいので個人的に…という方も OK [email_address] 　へどうぞ！ Blog も今日立ち上げてみました。 http://blog.livedoor.jp/mobylet/ ライブドアで mobylet で検索すると出るかな？

番外編 mobylet の今後の夢 mobylet-mail を作りたい。 GAE （ Google App Engine ）に対応したい。各種フレームワークの extension を作りたい。ドキュメントを充実させたいチュートリアルを作りたいなんなら携帯ナレッジ集だって作りたい他にも沢山、沢山。。。夢は沢山あるけれど、皆様に使って貰える日を夢見て日々精進して参ります！

ありがとうございましたご清聴有難う御座いました！

携帯Webアプリケーション開発の基本とフレームワーク「mobylet」の紹介

More Related Content

What's hot (12)

Viewers also liked (20)

Similar to 携帯Webアプリケーション開発の基本とフレームワーク「mobylet」の紹介 (20)

More from Shin Takeuchi (9)

携帯Webアプリケーション開発の基本とフレームワーク「mobylet」の紹介