Open Source Type Pad Mobile

5,601 views
5,537 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,601
On SlideShare
0
From Embeds
0
Number of Embeds
86
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Open Source Type Pad Mobile

  1. 1. OpenSource TypePad Mobile Hiroshi Sakai Six Apart K.K. id:ziguzagu
  2. 2. TypePad
  3. 3. What's TypePad ? ● ブログホスティングサービス ● Since 2003 ● ASP / ライセンス ● Movable Type のコードを元に開発 – それぞれ別の方向に進化したので、似たような部分 はあるにせよ基本的に別物
  4. 4. What becomes OpenSource? PC 携帯 管理 閲覧 ココ
  5. 5. TypeCast
  6. 6. Overview ● ウェブサービスに Mobile 用の閲覧機能を作る ためのアプリケーション ● フレームワークとしてMovable Type Open Source を利用 ● 各携帯キャリアごとに最適化されたHTML ● データソースとして Atom API 経由で取得し た Atom を利用
  7. 7. Functions ● ブログ記事一覧 (Atom Feed) ● ブログ個別記事 (Atom Entry) ● コメント一覧(Atom Comment) ● 端末別に画像の変換、リサイズ、圧縮 ● MobileLinkDiscover
  8. 8. Generic Processing ● Atom / Atom API ● 共通のHTML生成 ● 各キャリア向けHTML変換
  9. 9. Atom / Atom API
  10. 10. Atom as DataSource ● XML::Atom::Client – 今のところ API の URL は MT にマッチしたもの ● 取得した Atom から、MT::Blog / MT::Entry / MT::Comment オブジェクトも どきを生成 ● Atom Server 側では UserAgent を判別して meta / link を追加したりも
  11. 11. Generate Common HTML
  12. 12. How to generate ● MTOS のテンプレートエンジンを利用 – MTタグを使ったテンプレート ● コンテンツ中の a / img タグのURL変換 – TypeCast 経由で表示するための URL に変換 ● コンテンツ(HTML)の分割 – 複数ページに分割してサイズ制限をクリア ● TypePad 絵文字記法のフィルタ – 本来ここでやるべきではないので一旦実装外し
  13. 13. Filtering HTML for Mobile
  14. 14. Filtering Basics ● HTMLタグ書き換え – DOCTYPE, accesskey, istyle, etc... ● CSSの適用 – 外部 CSS を style 要素化、style 属性化 ● 文字コード変換 – Encode::JP::Mobile 任せ – utf-8 / ShiftJIS どちらかで
  15. 15. For DoCoMo ● 文字コード – FOMA: utf-8 – Mova: ShiftJIS ● DOCTYPE, istyle 置換 ● 外部CSSを各要素のstyle属性として挿入 ● style に font-size プロパティを持つ要素のテ キストノードは、span に入れる
  16. 16. For KDDI ● 文字コード: ShiftJIS ● DOCTYPE 置換 ● 外部CSSをstyle要素として置き換え
  17. 17. For Softbank ● 文字コード – 3G以降: utf-8 – 3G以前: ShiftJIS ● DOCTYPE, accesskey, istyle 置き換え ● 外部CSSはそのまま
  18. 18. For Others ● Willcom – DoCoMo(FOMA)と同じ ● EMOBILE – まだやってない – DoCoMo(FOMA)と同じでよさげ?
  19. 19. Go to CPAN
  20. 20. HTML::Split ● HTML を指定文字数で分割 ● HTML タグを壊さない – HTMLタグ途中で分割したりしない ● 改ページしても DOM ツリーを壊さない ● A 要素は終了タグまでをまとめてだす – テキストノード、子ノードがページ分割文字数を超 えない限りは途中で分割しない
  21. 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. 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. 23. HTML::MobileFilter (仮) ● Mobile 用 HTML を生成するための Filter ● HTML::Parser を継承した Parser – 結構ごりごりがんばった感じのコード ● でも、まだupできない... – 実装はすでにあるもののテストコードが皆無... ● Coming Soon!!
  24. 24. Open Emoticon
  25. 25. We love Emoticons !! ● TypePad の絵文字画像を GPL2 / CC で公開
  26. 26. Performance Tuning
  27. 27. Where is bottleneck ? ● Atom サーバーに負荷がかかる – Atom をキャッシュ(in memcached)して Atom API へのアクセス数を減らす ● HTML生成時に負荷がかかる – 共通HTMLをキャッシュ(in memcached)して、 HTML生成にかかる処理時間を半分以下に
  28. 28. The Goal of TypeCast
  29. 29. We heading... ● Atom API を持つサービスを広く Mobile 対 応できるように – Atom API へのアクセス、Atom からのオブジェ クト生成を抽象化 – More configurable ● Open な Mobile 開発を
  30. 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. 31. We are hiring !! http://www.sixapart.jp/jobs/
  32. 32. Thanks & Enjoy Mobile !!

×