Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Open Source Type Pad Mobile

5,698 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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 !!

×