1. さよなら mobylet ～携帯デバイスはスマートフォンの時代へ～ Java Cloud Meeting Tokyo 2010 Shin Takeuchi

2. プロフィール 竹内真（ TAKEUCHI SHIN ） 株式会社レイハウオリ 代表取締役 主に WEB フロントレイヤがメインの制作 / 開発会社 最近の主力商品は「 High Performance HTML 」 株式会社ビズリーチ 執行役員 年収 1000 万円以上への転職サイト「ビズリーチ」 他にも新規事業立ち上げへ向けて準備中 エンジニア積極採用中！！ [email_address] まで！応募待ってます！ Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

3. mobylet の紹介 mobylet とは？ 携帯 WEB アプリを開発するための Java/OSS/FW 絵文字の入出力や変換など必要な機能が揃っている Seasar2 や T2 等様々な FW と合わせて使える 外部ライブラリには極力非依存 Google App Engine でも使える オススメな使い方 SAStruts+DBFlute+mobylet maven-plugin でも対応されている 個人的に最も実際の現場で使っている構成 T2+Ymir+mobylet Vili にフラグメント追加して貰いました Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

4. どうしてさよなら mobylet ？ 「さよなら mobylet ？」 エンハンスを止めるわけではありません 障害対応や機能追加は今後も続けます！ 単純にあんまりしゃべることが無くなりました 基本的には難しいことがしたい FW ではないので、無理矢理喋ろうとするとどんどんマニアックになりそうで。。。 今後の流れを考えるといわゆる「携帯」は緩やかにシェアが減って行くでしょう もう少し言うと Sim Free の世界も近そうです そろそろスマートフォンにも目を向けないとね 会社をやっている立場にもあるので、あんまり携帯だけに意固地になっている訳にもいかないので。。。 Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

5. という訳で本日のアジェンダ 最近の実例紹介 「恋帳」 http://koicho.jp/ コア機能の解体新書 絵文字の入出力と変換機能をハダカにする mobylet セッション機能をハダカにする CSSExpand 機能をハダカにする Ymir/Mayaa との連携機能をハダカにする 今後のケータイの行方 iPhone/Android/LTE/SimFree Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

6. まずは実例紹介 「恋帳」 by リクルート 恋する二人のための携帯サイト 初めての二人の共同作業？ オート GPS 対応 有料デス（月額 315 円） 「 powered by mobylet 」！？ Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

7. そろそろマニアックなお時間に… mobylet 解体新書 今まであんまり喋らなかった、 mobylet が地味に頑張っている内部をご紹介 しかも今回は「特に大変な思いをして作った機能」を厳選しました！ マニアな方にはバカウケ必死！？マニアで無い人はつまらないかも…すいません。。。 Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

8. 絵文字（ 1 ） 絵文字まわりは mobylet の超基本機能 でも実はこれ、自力で実装しようと思ったら「超」大変だって知ってました？ でも、絵文字を表示するだけならそんなに大変じゃないやり方もあります 「 &#E63E; 」とか 絵文字のキャリア毎変換も頑張ればできます 変換マップ作っちゃえばなんとかなる！ でも、絵文字の入力（ form とか）は結構泣きます。まーじーで泣きます 今回はそのあたりをご紹介！ Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

9. 絵文字（ 2 ） 最大の敵 setCharacterEncoding(String charsetName) Java は必ず内部で Unicode へ変換する ところが SJIS の絵文字はそのままじゃ変換時に「 ? 」に！ 引数が String ってのがまた。。。 諸々の問題により UTF-8 が使いづらい au/SSL で文字化けしたり、絵文字だけ SJIS になったり… Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. SJIS コードマップ Unicode キャラマップ 絵文字部分 ？

10. 絵文字（ 3 ） mobylet はこうなってます Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. 絵文字を 含んだ文字列 MobyletFilter MobyletRequest MobyletResponse Action getParameter 系 メソッドのラップ mobylet-charset PrintWriter を ラップして 絵文字変換 キャリア毎の レスポンス

11. 絵文字（ 4 ） ポイント 文字コードの jar を WEB アプリケーションレイヤに配置することが出来ます 本当は ${JRE_HOME}/lib/ext とかに置かなきゃいけない これは初期導入コストが高くて ver0.8 で今の形に変更 Unicode 変換後の絵文字はキャリア毎に全部異なるコードに mobylet 独自にマッピング Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. Softbank の絵文字 Unicode キャラマップ docomo の絵文字 au の絵文字

12. 絵文字（ 5 ） 絵文字変換もカスタマイズ可能 emoji.stocker.docomo.xml docomo の絵文字から au/softbank に変換するロジックが xml 形式で記載されている 他に au/softbank 用もあり mobylet-core の中に入っているこのファイルを外部から置き換え可能 中身を見てみる Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <emojipool carrier=&quot;DOCOMO&quot;> <emoji name=&quot; 晴れ &quot; code=&quot;0xE63E&quot;> <relation carrier=&quot;AU&quot;>0xE92C</relation> <relation carrier=&quot;SOFTBANK&quot;>0xE04A</relation> <relation carrier=&quot;OTHER&quot;> 〓 </relation> </emoji>

13. 絵文字（ 6 ） ちなみにレスポンス側のロジックは… Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. 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); } }

14. 絵文字（ 7-Last ） PC の時にも絵文字を出す http://mobylet.seasar.org/downloads/ このページから絵文字の gif を全部ダウンロードできます この gif をキャリア「 OTHER 」の時に img タグで出力できる機能があります でも、絵文字の gif の著作権が怪しいです という訳で、近々削除される可能性が高いです でも、まだキャリアに怒られたという状況ではないです 結構この画像、用意するの大変だったんです…。 なので、欲しい方は今のうちに。。。。。。。 Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

15. セッション（ 1 ） 携帯のセッション機構は悩ましい docomo の端末は大部分が Cookie が使えない 昔は au の Cookie （ GW ）も使えないと有名だった JSESSION を利用する場合は URL に jsessionid をくっつける形で使うしかない http://hoge.com/action;jsessionid=xxx?p=1 この場合 URL コピーで session が維持されるため、セキュリティに問題アリ 携帯には UID/GUID という端末 / ユーザを特定する ID が存在するため、それを使ってセッション機構が作れれば良いのだが こいつも ID 偽装などのセキュリティ懸念があるため、簡単には実装しがたい。。。 Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

16. セッション（ 2 ） mobylet はこうなってます Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. UID GUID MobyletFilter （ Request ） SessionAdapter GWIP チェック SessionManager MobyletFilter （ Session ） Map で管理

17. セッション（ 3 ） 見方を変えてみましょう（冗長構成） Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. Apache （ Web サーバ） Tomcat （ Web アプリサーバ） Web アプリ （ mobylet ） Web アプリ （ mobylet ） Map で管理 Map で管理 セッションデータの流れ

18. セッション（ 4 ） つまり mobylet セッションとは UID/GUID をキーにして Web アプリ内のヒープ上に Map 形式で格納している 冗長構成を基本形式に考えているためセッションデータの set/get は内部で通信を行う 格納ホストの特定は uid をキーに計算しています 具体的には -> host[uid.hashCode() % host.length] SessionAdapter/SessionManager は変更可能 つまりこんなことも可能！ シングル構成だからセッションの set/get で通信させたくない セッション情報を DB/Memcahed/TokyoTyrant で管理 セッション情報を暗号化して格納 Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

19. セッション（ 5 ） mobylet セッションが特に気を付けていること UID/GUID の偽装 UID/GUID は URL のパラメータや HTTP リクエストヘッダとして受け取るデータのため、 PC 等から簡単に偽装出来る 偽装可能ということは簡単にセッションハイジャック可能 これを防ぐために キャリアの Gateway の IP アドレスかどうかをチェックする機構を搭載 キャリアの Gateway の IP アドレスはホワイトリストで mobylet-core の中に標準で提供 「 ip/DOCOMO.txt 」などの形式のファイルで提供 Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

20. セッション（ 6-Last ） 様々な設定は mobyletSession.xml で Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <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=&quot;host1&quot;>127.0.0.1:8080</host> <host name=&quot;host1&quot;>127.0.0.2:8080</host> </receiveHosts> <allowIps> <ip>127.0.0.1</ip> <ip>127.0.0.2</ip> </allowIps> </distribution> </mobyletSession>

21. CSSExpand （ 1 ） CSSExpand 機能とは？ docomo の大部分の端末が外出し CSS が使えないため、外出し CSS を HTML 内部の「 style 」属性に展開するというアツイ機能 ある意味もっとも悩んだ。。。。。 だって CSS パーサと HTML パーサ作んきゃいけないし ってか簡易的なブラウザじゃん！みたいな突っ込みをしながらコソコソ作りました こだわり 出来る限り char レベルで処理することにこだわった やっぱり処理スピードが気になる CSS のキャッシュ機構がまだもうちょいなので、これは次期フェーズでちゃんと作りたい Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

22. CSSExpand （ 2 ） 具体的にどうなるのかと言うと 次の HTML と CSS が こうなります Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. <test>AAA<a id=&quot;ID&quot;>BBB</a>CCC</test> #ID { color : #FFFFFF; background-color: #008800; } <test>AAA<a style=&quot;color:#FFFFFF;background-color:#008800;&quot; id=&quot;ID&quot;>BBB</a>CCC</test>

23. CSSExpand （ 3-Last ） ちなみに CSS のパース処理の一端 Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. 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;

24. ForceWrap 機能（ 1 ） Ymir や Mayaa は mobylet と同様の思想 Ymir も Mayaa も ServletOutputStream を Open して独自の PrintWriter を作成し、レスポンスデータを書き換えて出力するもの Mobylet も絵文字変換処理などで同じことをしている このため、 PrintWriter はどれかひとつしか有効にならないため、 Ymir+mobylet/Mayaa+mobylet という組み合わせは当初難しいものだった ForceWrap 機能 最終的には mobylet の PrintWriter がなんとか Ymir/Mayaa などの PrintWriter を包み込む必要があった ForceWrap 機能という mobylet 独特の機能を搭載し、 Ymir/Mayaa などとの連携が可能になった Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

25. ForceWrap 機能（ 2 ） つまりどうなるかというと Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. mobylet Ymir/Mayaa など UTF-8 で レスポンスを 出力 ForceWrap ServletOutputStream UTF-8 で もういっかい char 配列へ ForceWrap PrintWriter mobylet の 変換処理後の レスポンスを 返却

26. ForceWrap 機能（ 3-Last ） 処理コストについて ご覧の通り、一度レスポンスデータになった byte 配列を char 配列に戻して再度 mobylet の変換処理を行い、また byte 配列へ戻している 汎用的に作ろうとすると避けられない処理 どうしようもなくコストの高い処理という訳ではないがアルゴリズム的には気になる処理 ただし今のところ特段遅い / コストが高いという報告は無いため、実用には耐えられているか？ Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

27. 今後のケータイの行方 スマートフォンについて iPhone/Android 共に日を追う毎にシェアを伸ばしている 嫌がっていた竹内もとうとう先日 iPhone を手に入れてしまった。。。。 色んな意味で Apple はあんまり好きじゃない（ Mac は好き） 肝はフロントサイド 全てをアプリにするのは運用観点上悩ましい 一部 HTML 化することが Web サービスとしては本質的 デバイス特定した場合に HTML5/CSS3 が使える こっちの方が先進的で未来に繋がる気がしたので mobylet にこだわってる場合じゃないよねー的な… Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

28. 今後のケータイの行方 特に iPhone について アクティベートについて 日本では味わえないが、 SimFree で発売された国の iPhone をアクティベートする際に、 iTunes と接続することが必須要件となる 繋げないとそもそも使えない iTunes と接続するということはイコール iPhone がクレジットカードと連動するということ 日本の携帯課金システムのように、デバイスが決済に直接紐づくことで、周りのマーケットは活気付く 1Step で課金が行えることは CVR を考えると非常にサービスとして優位な状態 このシステムを世界的に放っておけるはずがない 結果、色々なサービスが登場することは必至 Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

29. 今後のケータイの行方 Android について Java 屋さんには非常にこちらは近い存在 iPhone 程決済システムとデバイスが密接に関連付いていない 世界的なシェアで言えばかなり伸びてきている Mac/Windows の構図に非常に似ているため、歴史が繰り返された場合は Android のシェアは恐ろしい程伸びる可能性がある 結局、スマートフォンは今後一定の無視できないシェアにどんどん伸ばして来るだろう Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

30. 今後のケータイの行方 そもそもスマートフォンは 携帯ブラウザでは無いので mobylet は全く無関係 判定するとキャリアは「 OTHER 」となる かと言って PC よりは画面サイズが小さいため、 CVR を考えると最適化したビューが必要になる iPad は PC と同じでもそんなに違和感無かったです 弊社で受注している案件の流れを見ても「アプリ +HTML 」というハイブリッド形式のものが今後一定の流れになりそうな予感 乗り遅れないようについて行こう！ Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

31. 今後のケータイの行方 LTE について 今年冬頃日本でも登場するだろう通信規格 多分 docomo が先陣を切ると思われる 下り 100M/ 上り 50M と言われている 世界的に標準化するだろう通信規格 3.9G などとも呼ばれている SimFree 携帯 今年冬以降、 SimFree 端末が出てくる予想 LTE とスマートフォンという組み合わせが有力 スマートフォンだとあまりキャリア間の制約が無いため こうなるといよいよ mobylet はどうなる…？ 携帯サイト全体が危機感を持った方が良いと思う Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

32. 今後のケータイの行方（まとめ） まとめ 全てがスマートフォンに移行するとは考え難い 日本の携帯課金システムは非常に良く出来たシステム この仕組みを捨てるのはキャリアも CP もマイナス しかし、囚われていることで世界に取り残される Apps などのマーケットは決済システムへの入り口 アプリを購入するためのマーケットは、アプリを販売するためのマーケットではなく、 1Step で決済可能な決済システムと繋がるものだと考える 単純な決済システムが最も C 向け課金サイトの CP を刺激する この仕組みが確立していけば、シェアは確実にスマートフォンへ流れていくような仕組みを大手が作り上げる マーケットは世界へ！ エンジニアは取り残されないように気を付けろ！ Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd.

33. おわり Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. ご清聴ありがとうございました ＜ご連絡はこちら＞ [email_address] http://mobylet. seasar.org/ http://www.leihauoli.com/