0
OpenSource TypePad Mobile
                   Hiroshi Sakai
                  Six Apart K.K.
                    id:ziguzagu
TypePad
What's TypePad ?

●   ブログホスティングサービス
●   Since 2003
●   ASP / ライセンス
●   Movable Type のコードを元に開発
    –   それぞれ別の方向に進化したので、似たよう...
What becomes OpenSource?


            PC     携帯
   管理
   閲覧               ココ
TypeCast
Overview

●   ウェブサービスに Mobile 用の閲覧機能を作る
    ためのアプリケーション
●   フレームワークとしてMovable Type Open
    Source を利用
●   各携帯キャリアごとに最適化され...
Functions

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

●   Atom / Atom API
●   共通のHTML生成
●   各キャリア向けHTML変換
Atom / Atom API
Atom as DataSource

●   XML::Atom::Client
    –   今のところ API の URL は MT にマッチしたもの
●   取得した Atom から、MT::Blog /
    MT::Entry ...
Generate
Common HTML
How to generate
●   MTOS のテンプレートエンジンを利用
    –   MTタグを使ったテンプレート
●   コンテンツ中の a / img タグのURL変換
    –   TypeCast 経由で表示するための UR...
Filtering HTML
       for
     Mobile
Filtering Basics

●   HTMLタグ書き換え
    –   DOCTYPE, accesskey, istyle, etc...
●   CSSの適用
    –   外部 CSS を style 要素化、style 属性...
For DoCoMo

●   文字コード
    –   FOMA: utf-8
    –   Mova: ShiftJIS
●   DOCTYPE, istyle 置換
●   外部CSSを各要素のstyle属性として挿入
●   sty...
For KDDI

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

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

●   Willcom
    –   DoCoMo(FOMA)と同じ
●   EMOBILE
    –   まだやってない
    –   DoCoMo(FOMA)と同じでよさげ?
Go to CPAN
HTML::Split

●   HTML を指定文字数で分割
●   HTML タグを壊さない
    –   HTMLタグ途中で分割したりしない
●   改ページしても DOM ツリーを壊さない
●   A 要素は終了タグまでをまとめてだす...
HTML::Split Example
my $html = <<HTML;
<div class=quot;pkgquot;>
<h1>HTML::Split</h1>
<p>Splitting HTML by number of
chara...
HTML::Split Example

Part1:
<div class=quot;pkgquot;>
<h1>HTML::Split</h1>
<p>Splittin</p></div>

Part2:
<div class=quot;p...
HTML::MobileFilter (仮)

●   Mobile 用 HTML を生成するための Filter
●   HTML::Parser を継承した Parser
    –   結構ごりごりがんばった感じのコード
●   でも、ま...
Open Emoticon
We love Emoticons !!

●   TypePad の絵文字画像を GPL2 / CC で公開
Performance Tuning
Where is bottleneck ?

●   Atom サーバーに負荷がかかる
    –   Atom をキャッシュ(in memcached)して Atom
        API へのアクセス数を減らす
●   HTML生成時に負...
The Goal
   of
TypeCast
We heading...

●   Atom API を持つサービスを広く Mobile 対
    応できるように
    –   Atom API へのアクセス、Atom からのオブジェ
        クト生成を抽象化
    –   ...
How to get the TypeCast ?

●   Project in Google Code
    –   http://code.google.com/p/typecastmobile/
●   Google Group
  ...
We are hiring !!
http://www.sixapart.jp/jobs/
Thanks
      &
Enjoy Mobile !!
Upcoming SlideShare
Loading in...5
×

Open Source Type Pad Mobile

5,270

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,270
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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 !!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×