Mobylet20100613

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

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

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

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

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

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

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

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

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

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

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

絵文字（ 5 ）
絵文字変換もカスタマイズ可能
emoji.stocker.docomo.xml
docomo の絵文字から au/softbank に変換するロジックが xml 形式で記載されている
他に au/softbank 用もあり
mobylet-core の中に入っているこのファイルを外部から置き換え可能
中身を見てみる
Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. <?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 ）
ちなみにレスポンス側のロジックは…
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); } }

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

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

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

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

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

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

セッション（ 6-Last ）
様々な設定は mobyletSession.xml で
Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. <?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 内部の「 style 」属性に展開するというアツイ機能
ある意味もっとも悩んだ。。。。。
だって CSS パーサと HTML パーサ作んきゃいけないし
ってか簡易的なブラウザじゃん！みたいな突っ込みをしながらコソコソ作りました
こだわり
出来る限り char レベルで処理することにこだわった
やっぱり処理スピードが気になる
CSS のキャッシュ機構がまだもうちょいなので、これは次期フェーズでちゃんと作りたい

CSSExpand （ 2 ）
具体的にどうなるのかと言うと
次の HTML と CSS が
こうなります
Copyright(C)2010 mobylet & Lei Hau'oli Co.,Ltd. <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 のパース処理の一端
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;

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 などとの連携が可能になった

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

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

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

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

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

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

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

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

Mobylet20100613

by Shin Takeuchi

Accessibility

Upload Details

Usage Rights

Statistics

Mobylet20100613 Presentation Transcript