Mobylet20100613

さよなら mobyl e t～携帯デバイスはスマートフォンの時代へ～

Java Cl oud Meeti ng Tokyo 2010Shi n Takeuchi

Copyri ght(C)2010 mobyl et & Lei Hau'ol i Co. ,Ltd.2

プロフィール

竹内真（ TAKEUCHI SHI N）株式会社レイハウオリ　代表取締役主にWEBフロントレイヤがメインの制作 / 開発会社最近の主力商品は「Hi gh Performance HTML」

株式会社ビズリーチ　執行役員年収 1000万円以上への転職サイト「ビズリーチ」他にも新規事業立ち上げへ向けて準備中エンジニア積極採用中！！

s. takeuchi @l ei hauol i .comまで！応募待ってます！

mailto:[email protected]


mobyl et の紹介

mobyl et とは？携帯WEBアプリを開発するための Java/OSS/FW絵文字の入出力や変換など必要な機能が揃っているSeasar2や T2等様々な FWと合わせて使える外部ライブラリには極力非依存Googl e App Engi neでも使える

オススメな使い方SAStruts+DBFl ute+mobyl et

maven-pl ugi nでも対応されている個人的に最も実際の現場で使っている構成

T2+Ymi r+mobyl etVi l i にフラグメント追加して貰いました


どうしてさよならmobyl et ？

「さよならmobyl et ？」エンハンスを止めるわけではありません障害対応や機能追加は今後も続けます！

単純にあんまりしゃべることが無くなりました基本的には難しいことがしたい FWではないので、無理矢理喋ろうとするとどんどんマニアックになりそうで。。。

今後の流れを考えるといわゆる「携帯」は緩やかにシェアが減って行くでしょうもう少し言うと Si m Freeの世界も近そうです

そろそろスマートフォンにも目を向けないとね会社をやっている立場にもあるので、あんまり携帯だけに意固地になっている訳にもいかないので。。。


という訳で本日のアジェンダ

最近の実例紹介「恋帳」　 http: //koi cho. j p/

コア機能の解体新書絵文字の入出力と変換機能をハダカにするmobyl et セッション機能をハダカにするCSSExpand機能をハダカにするYmi r/Mayaaとの連携機能をハダカにする

今後のケータイの行方i Phone/Androi d/LTE/Si mFree

http://koicho.jp/


まずは実例紹介

「恋帳」 by リクルート恋する二人のための携帯サイト初めての二人の共同作業？オートGPS対応有料デス（月額 315円）「 powered by mobyl et 」！？


…そろそろマニアックなお時間に

mobyl et 解体新書今まであんまり喋らなかった、mobyl et が地味に頑張っている内部をご紹介しかも今回は「特に大変な思いをして作った機能」を厳選しました！マニアな方にはバカウケ必死！？マニアで無い人は

…つまらないかもすいません。。。


絵文字（ 1）

絵文字まわりはmobyl et の超基本機能でも実はこれ、自力で実装しようと思ったら「超」大変だって知ってました？でも、絵文字を表示するだけならそんなに大変じゃないやり方もあります「&#E63E; 」とか

絵文字のキャリア毎変換も頑張ればできます変換マップ作っちゃえばなんとかなる！

でも、絵文字の入力（ formとか）は結構泣きます。まーじーで泣きます今回はそのあたりをご紹介！


絵文字（ 2）

最大の敵setCharacterEncodi ng(Stri ng charsetName)

Javaは必ず内部でUni codeへ変換するところが SJI Sの絵文字はそのままじゃ変換時に「 ?」に！

引数が Stri ngってのがまた。。。諸々の問題によりUTF-8が使いづらい

au/SSLで文字化けしたり、絵文字だけ SJI S …になったり

SJI Sコードマップ

Uni codeキャラマップ

絵文字部分

？


絵文字（ 3）

mobyl et はこうなってます

絵文字を含んだ文字列

Mobyl etFi l ter

Mobyl etRequest

Mobyl etResponse

Acti on

getParameter系メソッドのラップ

mobyl et-charset

Pri ntWri terをラップして絵文字変換

キャリア毎のレスポンス


絵文字（ 4）

ポイント文字コードの j arをWEBアプリケーションレイヤに配置することが出来ます本当は ${JRE_HOME}/l i b/ext とかに置かなきゃいけないこれは初期導入コストが高くて ver0.8で今の形に変更

Uni code変換後の絵文字はキャリア毎に全部異なるコードにmobyl et 独自にマッピング

Softbankの絵文字

Uni codeキャラマップ

docomoの絵文字

auの絵文字


絵文字（ 5）

絵文字変換もカスタマイズ可能emoj i .stocker.docomo.xml

docomoの絵文字から au/softbankに変換するロジックが xml形式で記載されている他に au/softbank用もありmobyl et-coreの中に入っているこのファイルを外部から置き換え可能

中身を見てみる<?xml version="1.0" encoding="utf-8"?><emojipool carrier="DOCOMO"> <emoji name="晴れ " code="0xE63E"> <relation carrier="AU">0xE92C</relation> <relation carrier="SOFTBANK">0xE04A</relation> <relation carrier="OTHER">〓 </relation> </emoji>


絵文字（ 6）

…ちなみにレスポンス側のロジックはpublic void write(int c) { if (charSelector.isCharsetInstalled() && family != null) { char ch = (char)c; Emoji e = family.getEmoji(ch); if (e == null) { super.write(c); } else if (useImageEmoji) { EmojiDesigner designer = SingletonDesigner.getDesigner(EmojiDesigner.class); super.write(designer.getImageEmoji(e)); } else { Emoji related = e.getRelated(outCarrier); if (related == null) { super.write(c); } else { char[] codes = related.getCodes(); if (codes != null) { for (char code : codes) { super.write(code); } } } } } else { super.write(c); }}


絵文字（ 7-Last ）

PCの時にも絵文字を出すhttp: //mobyl et.seasar.org/downl oads/このページから絵文字の gi f を全部ダウンロードできますこの gi f をキャリア「OTHER」の時に i mgタグで出力できる機能がありますでも、絵文字の gi f の著作権が怪しいですという訳で、近々削除される可能性が高いですでも、まだキャリアに怒られたという状況ではないです

…結構この画像、用意するの大変だったんです。なので、欲しい方は今のうちに。。。。。。。

http://mobylet.seasar.org/downloads/


セッション（ 1）

携帯のセッション機構は悩ましいdocomoの端末は大部分がCooki eが使えない昔は auのCooki e（GW）も使えないと有名だった

JSESSI ONを利用する場合はURLに j sessi oni dをくっつける形で使うしかない

http: //hoge.com/acti on; j sessi oni d=xxx?p=1この場合URLコピーで sessi onが維持されるため、セキュリティに問題アリ

携帯にはUI D/GUI Dという端末 / ユーザを特定する I Dが存在するため、それを使ってセッション機構が作れれば良いのだがこいつも I D偽装などのセキュリティ懸念があるため、簡単には実装しがたい。。。

http://hoge.com/action;jsessionid=xxx?p=1



mobyl et はこうなってます

UI DGUI D

Mobyl etFi l ter（Request ）

Sessi onAdapter

GWI Pチェック

Sessi onManager

Mobyl etFi l ter（ Sessi on）

Mapで管理



見方を変えてみましょう（冗長構成）

Apache（Webサーバ）

Tomcat （Webアプリサーバ）

Webアプリ（mobyl et ）

Webアプリ（mobyl et ）

Mapで管理Mapで管理

セッションデータの流れ



つまりmobyl et セッションとはUI D/GUI DをキーにしてWebアプリ内のヒープ上にMap形式で格納している冗長構成を基本形式に考えているためセッションデータの set/get は内部で通信を行う格納ホストの特定は ui dをキーに計算しています

→具体的には host[ui d.hashCode() % host. l ength]

Sessi onAdapter/Sessi onManagerは変更可能つまりこんなことも可能！シングル構成だからセッションの set/get で通信させたくないセッション情報をDB/Memcahed/TokyoTyrant で管理セッション情報を暗号化して格納



mobyl et セッションが特に気を付けていることUI D/GUI Dの偽装

UI D/GUI DはURLのパラメータやHTTPリクエストヘッダとして受け取るデータのため、 PC等から簡単に偽装出来る偽装可能ということは簡単にセッションハイジャック可能

これを防ぐためにキャリアのGatewayの I Pアドレスかどうかをチェックする機構を搭載キャリアのGatewayの I Pアドレスはホワイトリストでmobyl et-coreの中に標準で提供「 i p/DOCOMO.txt 」などの形式のファイルで提供


セッション（ 6-Last ）

様々な設定はmobyl etSessi on.xml で<?xml version="1.0" encoding="UTF-8"?><mobyletSession> <key>GUID</key> <timeout>30</timeout> <adapter>org.mobylet.core.session.impl.MobyletMultiSessionAdapter</adapter> <distribution> <protocol>http</protocol> <path>${contextPath}/mobyletSession</path> <parameters> <sessionKey>s</sessionKey> <objectData>o</objectData> <invokeType>i</invokeType> </parameters> <receiveHosts> <host name="host1">127.0.0.1:8080</host> <host name="host1">127.0.0.2:8080</host> </receiveHosts> <allowIps> <ip>127.0.0.1</ip> <ip>127.0.0.2</ip> </allowIps> </distribution></mobyletSession>


CSSExpand（ 1）

CSSExpand機能とは？docomoの大部分の端末が外出しCSSが使えないため、外出しCSSをHTML内部の「 styl e」属性に展開するというアツイ機能ある意味もっとも悩んだ。。。。。だってCSSパーサとHTMLパーサ作んきゃいけないしってか簡易的なブラウザじゃん！みたいな突っ込みをしながらコソコソ作りました

こだわり出来る限り charレベルで処理することにこだわったやっぱり処理スピードが気になる

CSSのキャッシュ機構がまだもうちょいなので、これは次期フェーズでちゃんと作りたい


CSSExpand（ 2）

具体的にどうなるのかと言うと次のHTMLとCSSが

こうなります

<test>AAA<a id="ID">BBB</a>CCC</test>

#ID { color : #FFFFFF; background-color: #008800; }

<test>AAA<a style="color:#FFFFFF;background-color:#008800;" id="ID">BBB</a>CCC</test>


CSSExpand（ 3-Last ）

ちなみにCSSのパース処理の一端while ((c = in.read()) != -1) { switch (c) { case '@': if (!isComment) { isAnnotation = true; } break; case ';': if (isAnnotation) { isAnnotation = false; chars.reset(); } else { if (!isComment) { chars.append((char)c); } } break;


ForceWrap機能（ 1）

Ymi rやMayaaはmobyl et と同様の思想Ymi rもMayaaも Servl etOutputStreamをOpenして独自の Pri ntWri terを作成し、レスポンスデータを書き換えて出力するもの

Mobyl et も絵文字変換処理などで同じことをしているこのため、 Pri ntWri terはどれかひとつしか有効にならないため、 Ymi r+mobyl et/Mayaa+mobyl et という組み合わせは当初難しいものだった

ForceWrap機能最終的にはmobyl et の Pri ntWri terがなんとか Ymi r/Mayaaなどの Pri ntWri terを包み込む必要があった

ForceWrap機能というmobyl et 独特の機能を搭載し、 Ymi r/Mayaaなどとの連携が可能になった


ForceWrap機能（ 2）

つまりどうなるかというと

mobyl et

Ymi r/Mayaaなど

UTF-8でレスポンスを出力

ForceWrapServl etOutputStream

UTF-8でもういっかいchar配列へ

ForceWrapPri ntWri ter

mobyl et の変換処理後のレスポンスを返却


ForceWrap機能（ 3-Last ）

処理コストについてご覧の通り、一度レスポンスデータになった byte配列を char配列に戻して再度mobyl et の変換処理を行い、また byte配列へ戻している汎用的に作ろうとすると避けられない処理どうしようもなくコストの高い処理という訳ではないがアルゴリズム的には気になる処理ただし今のところ特段遅い / コストが高いという報告は無いため、実用には耐えられているか？


今後のケータイの行方

スマートフォンについてi Phone/Androi d共に日を追う毎にシェアを伸ばしている嫌がっていた竹内もとうとう先日 i Phoneを手に入れてしまった。。。。色んな意味で Appl eはあんまり好きじゃない（Macは好き）

肝はフロントサイド全てをアプリにするのは運用観点上悩ましい一部HTML化することがWebサービスとしては本質的デバイス特定した場合にHTML5/CSS3が使えるこっちの方が先進的で未来に繋がる気がしたのでmobyl et …にこだわってる場合じゃないよねー的な



特に i Phoneについてアクティベートについて日本では味わえないが、 Si mFreeで発売された国の i Phoneをアクティベートする際に、 i Tunesと接続することが必須要件となる繋げないとそもそも使えない

i Tunesと接続するということはイコール i Phoneがクレジットカードと連動するということ日本の携帯課金システムのように、デバイスが決済に直接紐づくことで、周りのマーケットは活気付く

1Stepで課金が行えることはCVRを考えると非常にサービスとして優位な状態このシステムを世界的に放っておけるはずがない結果、色々なサービスが登場することは必至



Androi dについてJava屋さんには非常にこちらは近い存在i Phone程決済システムとデバイスが密接に関連付いていない世界的なシェアで言えばかなり伸びてきているMac/Wi ndowsの構図に非常に似ているため、歴史が繰り返された場合はAndroi dのシェアは恐ろしい程伸びる可能性がある結局、スマートフォンは今後一定の無視できないシェアにどんどん伸ばして来るだろう



そもそもスマートフォンは携帯ブラウザでは無いのでmobyl et は全く無関係判定するとキャリアは「OTHER」となる

かと言って PCよりは画面サイズが小さいため、CVRを考えると最適化したビューが必要になる

i Padは PCと同じでもそんなに違和感無かったです

弊社で受注している案件の流れを見ても「アプリ+HTML」というハイブリッド形式のものが今後一定の流れになりそうな予感乗り遅れないようについて行こう！



LTEについて今年冬頃日本でも登場するだろう通信規格多分 docomoが先陣を切ると思われる下り 100M/ 上り 50Mと言われている世界的に標準化するだろう通信規格3.9Gなどとも呼ばれている

Si mFree携帯今年冬以降、 Si mFree端末が出てくる予想LTEとスマートフォンという組み合わせが有力スマートフォンだとあまりキャリア間の制約が無いため

こうなるといよいよmobyl et …はどうなる？携帯サイト全体が危機感を持った方が良いと思う


今後のケータイの行方（まとめ）

まとめ全てがスマートフォンに移行するとは考え難い日本の携帯課金システムは非常に良く出来たシステムこの仕組みを捨てるのはキャリアもCPもマイナス

しかし、囚われていることで世界に取り残される

Appsなどのマーケットは決済システムへの入り口アプリを購入するためのマーケットは、アプリを販売するためのマーケットではなく、 1Stepで決済可能な決済システムと繋がるものだと考える単純な決済システムが最もC向け課金サイトのCPを刺激するこの仕組みが確立していけば、シェアは確実にスマートフォンへ流れていくような仕組みを大手が作り上げるマーケットは世界へ！

エンジニアは取り残されないように気を付けろ！


おわり

ご清聴ありがとうございました

＜ご連絡はこちら＞s. takeuchi @l ei hauol i .com

http: //mobyl et. seasar.org/http: //www. l ei hauol i .com/

mailto:[email protected]

http://mobylet.sandbox.seasar.org/

http://www.leihauoli.com/

Documents

Mobylet20100613