マルチデバイス対応
の新しいアプローチ
Introducing DynamicMTML
2011.11.9
スマートフォン対応
スクリーンサイズだけ
考えていればいいの?
考えなければならないこと++
✴
PCとスマホだけ? タブレットは?
✴
PCはモダンブラウザだけ?
✴
IE6/7は? ガラケーは?
✴
CSS Media Queries / JQuery Mobile?
✴
回線が遅い、繋がりにくい時
✴
N700系のインターネット接続サービス
Screen size => CSS Media Queries?
User Experiense => JQuery Mobile?
Source / Media Optimization => ???
HTML
CSS
JavaScript
JQuery
PHP
Perl
Ruby
Java
Client Side
Server Side
MTML
MTML=Movable Type Markup Language
<MTEntries lastn= 10 sort_order= descend >
<MTIf name= __first__ >
<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 = PHP
✴
2004年、MT3.1 でPHPによるダイナミックパ
ブリッシング
✴
mod_rerwiteを使ってmtview.phpが処理
✴
実はMTタグはSmartyのテンプレートに変換さ
れる(prefilter.mt_to_smarty.php)
✴
MTのPHPはPerlで書かれたMTのタグをsmarty
のタグにコンバートしたもの
DynamicMTML
静的ファイルに記述したMTML
を解釈して実行する技術
サーバーサイド言語として
MTタグを使えるもの
HTML
CSS
JavaScript
JQuery
PHP
Perl
Ruby
Java
Client Side
Server Side
MTML(MTタグ)
<MT:IfUserAgent wants="pc">
PCでしょ?
<MTElse>
PCじゃないでしょ?
<MT:IfUserAgent wants="smartphone">
スマホでしょ?
<MTElse>
スマホじゃないでしょ?
<MT:IfUserAgent wants="tablet">
タブレットでしょ?
<MTElse>
タブレットじゃないでしょ?
<MT:IfUserAgent wants="keitai">
ガラケーでしょ?
<MTElse>
ガラケーじゃないでしょ?
<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:IfLogin>
<MTAuthorDisplayName escape="html">
さん、ようこそ
<MTElse>
ユーザー登録してください。
</MT:IfLogin>
<MT:IfIE lt= 7 >
Internet Exproler ver.7以上?
<MTElse>
Internet Exproler ver.6以下?
<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>
