Embed Size (px)
DESCRIPTION
Citation preview
OpenSource TypePad MobileOpenSource TypePad MobileHiroshi Sakai
Six Apart K.K.id:ziguzagu
TypePadTypePad
What's TypePad ?What's TypePad ?● ブログホスティングサービスブログホスティングサービス● Since 2003Since 2003● ASP / ASP / ライセンスライセンス● Movable Type Movable Type のコードを元に開発のコードを元に開発
– それぞれ別の方向に進化したので、似たような部分はあるにせよ基本的に別物
What becomes OpenSource?What becomes OpenSource?
PCPC 携帯携帯
管理管理閲覧閲覧 ココココ
TypeCastTypeCast
OverviewOverview● ウェブサービスに ウェブサービスに Mobile Mobile 用の閲覧機能を作る用の閲覧機能を作る
ためのアプリケーションためのアプリケーション● フレームワークとしてフレームワークとしてMovable Type Open Movable Type Open
Source Source を利用を利用● 各携帯キャリアごとに最適化された各携帯キャリアごとに最適化されたHTMLHTML● データソースとして データソースとして Atom API Atom API 経由で取得し経由で取得し
た た Atom Atom を利用を利用
FunctionsFunctions● ブログ記事一覧 ブログ記事一覧 (Atom Feed)(Atom Feed)● ブログ個別記事 ブログ個別記事 (Atom Entry)(Atom Entry)● コメント一覧（コメント一覧（Atom CommentAtom Comment））● 端末別に画像の変換、リサイズ、圧縮端末別に画像の変換、リサイズ、圧縮● MobileLinkDiscoverMobileLinkDiscover
Generic ProcessingGeneric Processing● Atom / Atom APIAtom / Atom API● 共通の共通のHTMLHTML生成生成● 各キャリア向け各キャリア向けHTMLHTML変換変換
Atom / Atom APIAtom / Atom API
Atom as DataSourceAtom as DataSource● XML::Atom::ClientXML::Atom::Client
– 今のところ 今のところ API API の の URL URL は は MT MT にマッチしたものにマッチしたもの● 取得した 取得した Atom Atom から、から、MT::Blog / MT::Blog /
MT::Entry / MT::Comment MT::Entry / MT::Comment オブジェクトもオブジェクトもどきを生成どきを生成
● Atom Server Atom Server 側では 側では UserAgent UserAgent を判別して を判別して meta / link meta / link を追加したりもを追加したりも
GenerateGenerateCommon HTMLCommon HTML
How to generateHow to generate● MTOS MTOS のテンプレートエンジンを利用のテンプレートエンジンを利用
– MTタグを使ったテンプレート● コンテンツ中の コンテンツ中の a / img a / img タグのタグのURLURL変換変換
– TypeCast 経由で表示するための URL に変換● コンテンツコンテンツ(HTML)(HTML)の分割の分割
– 複数ページに分割してサイズ制限をクリア● TypePad TypePad 絵文字記法のフィルタ絵文字記法のフィルタ
– 本来ここでやるべきではないので一旦実装外し本来ここでやるべきではないので一旦実装外し
Filtering HTMLFiltering HTMLforfor
MobileMobile
Filtering BasicsFiltering Basics● HTMLHTMLタグ書き換えタグ書き換え
– DOCTYPE, accesskey, istyle, etc...● CSSCSSの適用の適用
– 外部 CSS を style 要素化、style 属性化● 文字コード変換文字コード変換
– Encode::JP::Mobile 任せ– utf-8 / ShiftJIS どちらかで
For DoCoMoFor DoCoMo● 文字コード文字コード
– FOMA: utf-8– Mova: ShiftJIS
● DOCTYPE, istyle DOCTYPE, istyle 置換置換● 外部外部CSSCSSを各要素のを各要素のstylestyle属性として挿入属性として挿入● style style に に font-size font-size プロパティを持つ要素のテプロパティを持つ要素のテ
キストノードは、キストノードは、span span に入れるに入れる
For KDDIFor KDDI● 文字コード文字コード: ShiftJIS: ShiftJIS● DOCTYPE DOCTYPE 置換置換● 外部外部CSSCSSををstylestyle要素として置き換え要素として置き換え
For SoftbankFor Softbank● 文字コード文字コード
– 3G以降: utf-8– 3G以前: ShiftJIS
● DOCTYPE, accesskey, istyle DOCTYPE, accesskey, istyle 置き換え置き換え● 外部外部CSSCSSはそのままはそのまま
For OthersFor Others● WillcomWillcom
– DoCoMo(FOMA)と同じ● EMOBILEEMOBILE
– まだやってない– DoCoMo(FOMA)と同じでよさげ？
Go to CPANGo to CPAN
HTML::SplitHTML::Split● HTML HTML を指定文字数で分割を指定文字数で分割● HTML HTML タグを壊さないタグを壊さない
– HTMLタグ途中で分割したりしない● 改ページしても 改ページしても DOM DOM ツリーを壊さないツリーを壊さない● A A 要素は終了タグまでをまとめてだす要素は終了タグまでをまとめてだす
– テキストノード、子ノードがページ分割文字数を超えない限りは途中で分割しない
HTML::Split ExampleHTML::Split Examplemy $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,);
HTML::Split ExampleHTML::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>
HTML::MobileFilter (HTML::MobileFilter (仮仮))● Mobile Mobile 用 用 HTML HTML を生成するための を生成するための FilterFilter● HTML::Parser HTML::Parser を継承した を継承した ParserParser
– 結構ごりごりがんばった感じのコード● でも、まだでも、まだupupできないできない......
– 実装はすでにあるもののテストコードが皆無...● Coming Soon!!Coming Soon!!
Open EmoticonOpen Emoticon
We love Emoticons !!We love Emoticons !!● TypePad TypePad の絵文字画像を の絵文字画像を GPL2 / CC GPL2 / CC で公開で公開
Performance TuningPerformance Tuning
Where is bottleneck ?Where is bottleneck ?● Atom Atom サーバーに負荷がかかるサーバーに負荷がかかる
– Atom をキャッシュ(in memcached)して Atom API へのアクセス数を減らす
● HTMLHTML生成時に負荷がかかる生成時に負荷がかかる– 共通HTMLをキャッシュ(in memcached)して、
HTML生成にかかる処理時間を半分以下に
The GoalThe Goal of of
TypeCast TypeCast
We heading...We heading...● Atom API Atom API を持つサービスを広く を持つサービスを広く Mobile Mobile 対対応できるように応できるように– Atom API Atom API へのアクセス、へのアクセス、Atom Atom からのオブジェからのオブジェ
クト生成を抽象化クト生成を抽象化– More configurableMore configurable
● Open Open な な Mobile Mobile 開発を開発を
How to get the TypeCast ?How to get the TypeCast ?● Project in Google CodeProject in Google Code
– http://code.google.com/p/typecastmobile/● Google GroupGoogle Group
– http://groups.google.co.jp/group/typecastmobile
ThanksThanks&&
Enjoy Mobile !!Enjoy Mobile !!
