Open Source Type Pad Mobile

Slide 1: OpenSource TypePad Mobile Hiroshi Sakai Six Apart K.K. id:ziguzagu

Slide 2: TypePad

Slide 3: What's TypePad ? ● ブログホスティングサービス ● Since 2003 ● ASP / ライセンス ● Movable Type のコードを元に開発 – それぞれ別の方向に進化したので、似たような部分 はあるにせよ基本的に別物

Slide 4: What becomes OpenSource? PC 携帯 管理 閲覧 ココ

Slide 5: TypeCast

Slide 6: Overview ● ウェブサービスに Mobile 用の閲覧機能を作る ためのアプリケーション ● フレームワークとしてMovable Type Open Source を利用 ● 各携帯キャリアごとに最適化されたHTML ● データソースとして Atom API 経由で取得し た Atom を利用

Slide 7: Functions ● ブログ記事一覧 (Atom Feed) ● ブログ個別記事 (Atom Entry) ● コメント一覧（Atom Comment） ● 端末別に画像の変換、リサイズ、圧縮 ● MobileLinkDiscover

Slide 8: Generic Processing ● Atom / Atom API ● 共通のHTML生成 ● 各キャリア向けHTML変換

Slide 9: Atom / Atom API

Slide 10: Atom as DataSource ● XML::Atom::Client – 今のところ API の URL は MT にマッチしたもの ● 取得した Atom から、MT::Blog / MT::Entry / MT::Comment オブジェクトも どきを生成 ● Atom Server 側では UserAgent を判別して meta / link を追加したりも

Slide 11: Generate Common HTML

Slide 12: How to generate ● MTOS のテンプレートエンジンを利用 – MTタグを使ったテンプレート ● コンテンツ中の a / img タグのURL変換 – TypeCast 経由で表示するための URL に変換 ● コンテンツ(HTML)の分割 – 複数ページに分割してサイズ制限をクリア ● TypePad 絵文字記法のフィルタ – 本来ここでやるべきではないので一旦実装外し

Slide 13: Filtering HTML for Mobile

Slide 14: Filtering Basics ● HTMLタグ書き換え – DOCTYPE, accesskey, istyle, etc... ● CSSの適用 – 外部 CSS を style 要素化、style 属性化 ● 文字コード変換 – Encode::JP::Mobile 任せ – utf-8 / ShiftJIS どちらかで

Slide 15: For DoCoMo ● 文字コード – FOMA: utf-8 – Mova: ShiftJIS ● DOCTYPE, istyle 置換 ● 外部CSSを各要素のstyle属性として挿入 ● style に font-size プロパティを持つ要素のテ キストノードは、span に入れる

Slide 16: For KDDI ● 文字コード: ShiftJIS ● DOCTYPE 置換 ● 外部CSSをstyle要素として置き換え

Slide 17: For Softbank ● 文字コード – 3G以降: utf-8 – 3G以前: ShiftJIS ● DOCTYPE, accesskey, istyle 置き換え ● 外部CSSはそのまま

Slide 18: For Others ● Willcom – DoCoMo(FOMA)と同じ ● EMOBILE – まだやってない – DoCoMo(FOMA)と同じでよさげ？

Slide 19: Go to CPAN

Slide 20: HTML::Split ● HTML を指定文字数で分割 ● HTML タグを壊さない – HTMLタグ途中で分割したりしない ● 改ページしても DOM ツリーを壊さない ● A 要素は終了タグまでをまとめてだす – テキストノード、子ノードがページ分割文字数を超 えない限りは途中で分割しない

Slide 21: HTML::Split Example my $html = <<HTML; <div class=\"pkg\"> <h1>HTML::Split</h1> <p>Splitting HTML by number of characters.</p> </div> HTML; my @pages = HTML::Split->split( html => $html, length => 50, );

Slide 22: HTML::Split Example Part1: <div class=\"pkg\"> <h1>HTML::Split</h1> <p>Splittin</p></div> Part2: <div class=\"pkg\"> <p>g HTML by number of characters.</p></ div>

Slide 23: HTML::MobileFilter (仮) ● Mobile 用 HTML を生成するための Filter ● HTML::Parser を継承した Parser – 結構ごりごりがんばった感じのコード ● でも、まだupできない... – 実装はすでにあるもののテストコードが皆無... ● Coming Soon!!

Slide 24: Open Emoticon

Slide 25: We love Emoticons !! ● TypePad の絵文字画像を GPL2 / CC で公開

Slide 26: Performance Tuning

Slide 27: Where is bottleneck ? ● Atom サーバーに負荷がかかる – Atom をキャッシュ(in memcached)して Atom API へのアクセス数を減らす ● HTML生成時に負荷がかかる – 共通HTMLをキャッシュ(in memcached)して、 HTML生成にかかる処理時間を半分以下に

Slide 28: The Goal of TypeCast

Slide 29: We heading... ● Atom API を持つサービスを広く Mobile 対 応できるように – Atom API へのアクセス、Atom からのオブジェ クト生成を抽象化 – More configurable ● Open な Mobile 開発を

Slide 30: How to get the TypeCast ? ● Project in Google Code – http://code.google.com/p/typecastmobile/ ● Google Group – http://groups.google.co.jp/group/typecastmobile

Slide 31: We are hiring !! http://www.sixapart.jp/jobs/

Slide 32: Thanks & Enjoy Mobile !!