マルチデバイス対応の新しいアプローチ
Introducing DynamicMTML
2011.11.9
junnama@alfasado.jp

スマートフォン対応
JQuery Mobile or Media Queriesスクリーンサイズだけ考えていればいいの?

タッチスクリーンのUX

AU vs Softbank

転送量?

考えなければならないこと++✴ PCとスマホだけ? タブレットは?
✴ PCはモダンブラウザだけ?
✴ IE6/7は? ガラケーは?
✴ CSS Media Queries / JQuery Mobile?
✴ 回線が遅い、繋がりにくい時✴ N700系のインターネット接続サービス

Screen size => CSS Media Queries?
User Experiense => JQuery Mobile?
Source / Media Optimization => ???

HTML
Client Side

JQueryJavaScript

CSS

Server SidePHPPerlRuby
JavaMovable TypeMTML

Movable Type Markup Language

MTML=Movable Type Markup Language<MTEntries lastn=”10” sort̲order=”descend”><MTIf name=”̲̲ﬁrst̲̲”><ul></MTIf><li><a href=”<MTEntryPermalink>”><MTEntryTitle escape=”html”>
</a>
</li>
<MTIf name=”̲̲last̲̲”></ul></MTIf></MTEntries>

MTML=Movable Type Markup Language✴ MTML=Viewを担当するもの✴ MTIf MTElse MTLoopなど、実はロジックも書ける✴ テンプレートにプログラムは書けない(完全に分離している)=>デザイナに敷居が低い✴ <MTFoo> でも <mt:foo> でも <mtfoo /> でも <$MTFoo$> でも良い(緩い)Movable Type = Perl ?

Movable Type = PHPMovable Type = PHP✴ 2004年、MT3.1 でPHPによるダイナミックパ

ブリッシング✴ mod̲rerwiteを使ってmtview.phpが処理✴ 実はMTタグはSmartyのテンプレートに変換される(preﬁlter.mt̲to̲smarty.php)✴ MTのPHPはPerlで書かれたMTのタグをsmartyのタグにコンバートしたもの

DynamicMTML
https://github.com/alfasado/DynamicMTML

静的ファイルに記述したMTMLを解釈して実行する技術
サーバーサイド言語としてMTタグを使えるもの

HTML
Client Side

JQueryJavaScript

CSS

Server Side

PHP
Perl
MTML(MTタグ)
Ruby
Java

<MT:IfUserAgent wants="pc">
PCでしょ?
<MTElse>
PCじゃないでしょ?
</MT:IfUserAgent><MT:IfUserAgent wants="smartphone">
スマホでしょ?
<MTElse>
スマホじゃないでしょ?
</MT:IfUserAgent><MT:IfUserAgent wants="tablet">
タブレットでしょ?
<MTElse>タブレットじゃないでしょ?
</MT:IfUserAgent><MT:IfUserAgent wants="keitai">
ガラケーでしょ?
<MTElse>
ガラケーじゃないでしょ?
</MT:IfUserAgent><MT:IfUserAgent wants="keitai"><MT:IfUserAgent like="DoCoMo">
DoCoMo?
<MTElse><MT:IfUserAgent like="UP.Browser">AU?
<MTElse>SoftBank?
</MT:IfUserAgent><MT:IfUserAgent like="Safari">
Safariでしょ?
<MTElse>
Safariじゃないでしょ?
</MT:IfUserAgent>スマートフォンとは直接関係ないですが...

<MT:IfLogin><MTAuthorDisplayName escape="html">
さん、ようこそ<MTElse>
ユーザー登録してください。
</MT:IfLogin><MT:IfIE lt=”7”>
Internet Exproler ver.7以上?
<MTElse>Internet Exproler ver.6以下?
</MT:IfIE>

<mt:KeitaiContent start̲tag="h" size="300"
str2keitai="1" convertthumbnail="100,240"z2h="1"><mt:KeitaiContentBody><$mt:EntryBody$><$mt:EntryMore$></mt:KeitaiContentBody></mt:KeitaiContent>

start̲tag="h" => hタグ(見出しでページ分割)
size="300"=> byte数
str2keitai=”1” => <script>タグ等を削除
convert2thumbnail="100,240"=> 100pxの画像から240pxの画像へリンク(変換)<mt:KeitaiPageCount setvar="page̲count"><mt:if name="page̲count" gt="1">[<mt:ifKeitaiPagePrev><a href="<$mt:KeitaiPagePrevLink$>">PREV</a></mt:ifKeitaiPagePrev><mt:KeitaiContentPageList><mt:IfKeitaiPageCurrent><strong><$mt:KeitaiPageNumber$></strong> ¦<mtelse><a href="<$mt:KeitaiPageLink$>"><$mt:KeitaiPageNumber$></a> ¦</mt:IfKeitaiPageCurrent></mt:KeitaiContentPageList><mt:ifKeitaiPageNext><a href="<$mt:KeitaiPageNextLink$>">NEXT</a></mt:ifKeitaiPageNext>]</mt:if>start̲tag="h" => hタグ(見出しでページ分割)
size="300"=> byte数
str2keitai=”1” => <script>タグ等を削除
convert2thumbnail="100,240"=> 100pxの画像から240pxの画像へリンク(変換)trimwhitespace="1" => 空行や空白文字を削除

<mt:dynamicmtml><mt:archivetype setvar="archive̲type"><mt:if name="archive̲type" eq="Individual"><$mt:entryid setvar="me"$></mt:if><mt:if name="archive̲type" eq="Page"><$mt:pageid setvar="me"$></mt:if><$mt:setvar name="entries̲max" value="10"$><$mt:setvar name="entries̲counter" value="0"$><mt:referralkeywords trimwhitespace="1"><mt:if name="entries̲counter" lt="$entries̲max"><mt:searchentries target="text" query="$keyword" unique="1"
lastn="$entries̲max" not̲entry̲id="$me" class="*"highlightingsearchword="1"><mt:unless name="entries̲counter"><div class="related-entry widget"><h3 class="widget-header">Your serarch keyword'<$mt:referralkeyword escape="html"$>'?
</h3>
<ul>
</mt:unless><mt:if name="entries̲counter" lt="$entries̲max"><li><a href="<$mt:entrypermalink$>"><$mt:entrytitle escape="html"$>
</a>
</li>
</mt:if><$mt:setvar name="entries̲counter" value="1" op="+"$></mt:searchentries></mt:if></mt:referralkeywords><mt:if name="entries̲counter"></ul></div></mt:if></mt:dynamicmtml>

<MTReﬀeralKeywords>=> 検索エンジンのキーワード<mt:searchentries target="text"
query="$keyword" unique="1"
lastn="$entries̲max"
not̲entry̲id="$me" class="*"highlightingsearchword="1"><mt:dynamicmtml><mt:IfUserHasPermission permission="edit̲all̲posts"><$mt:setvar name="can̲post" value="1"$><mt:Else><mt:IfUserHasPermission permission="publish̲post"><$mt:entryAuthorId setvar="entry̲author̲id"$><$mt:AuthorId setvar="client̲author̲id"$><mt:if name="entry̲author̲id" eq="client̲author̲id"><$mt:setvar name="can̲post" value="1"$></mt:if></mt:IfUserHasPermission></mt:Else></mt:IfUserHasPermission><mt:if name="can̲post"><p><a href="<$mt:CGIPath$><$mt:AdminScript$>?̲̲mode=view&amp;̲type=entry&amp;id=<$mt:
entryid$>&amp;blog̲id=<$mt:blogid$>">Edit</a></p></mt:if></mt:dynamicmtml>

エイプリルフールのネタではない!

2段階再構築<h1><MT:Entrytitle></h1>...
<MTDynamicMTML><MT:IfUserAgent wants="smartphone">
スマホでしょ?
ブロック内はビルドされず<MTElse>
スマホじゃないでしょ? ファイルの中に出力される</MT:IfUserAgent></MTDynamicMTML>...

閲覧時に状況(UA)によって分岐処理される

2段階再構築<h1><MT:Entrytitle></h1>...
<MTML tag=”IfUserAgent”
params=’wants="smartphone"’>スマホでしょ?
前ページと同じ処理<MTML tag=”MTElse”>
スマホじゃないでしょ?
<MTML tag=”/MT:IfUserAgent”>
閲覧時に状況(UA)に...

よって分岐処理される事例✴ Android/iPhoneサイトのアプリのサーバー

サイド✴ キャリア公式サイトでのユーザー属性での分岐表示✴ 外部APIとの連携(例:MTIfTwitterLogin)✴ CRM(例:Synagy!)との連携✴ エリアターゲティングとの連携

Demo