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

2. TypePad

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

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

5. TypeCast

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

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

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

9. Atom / Atom API

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

11. Generate
Common HTML

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

13. Filtering HTML
for
Mobile

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

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

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

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

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

19. Go to CPAN

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

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

22. HTML::Split Example
Part1:
<div class=quot;pkgquot;>
<h1>HTML::Split</h1>
<p>Splittin</p></div>
Part2:
<div class=quot;pkgquot;>
<p>g HTML by number of characters.</p></
div>

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

24. Open Emoticon

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

26. Performance Tuning

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

28. The Goal
of
TypeCast

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

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

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

32. Thanks
&
Enjoy Mobile !!