マルチデバイス対応の新しいアプローチIntroducing DynamicMTML

2011.11.9junnama@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

CSSJavaScript

JQuery

PHPPerlRuby

Java

Client Side

Server Side

Movable Type

MTMLMovable Type Markup Language

MTML=Movable Type Markup Language

                                    

MTML=Movable Type Markup Language

✴ MTML=Viewを担当するもの✴ MTIf MTElse MTLoopなど、実はロジックも書ける

✴ テンプレートにプログラムは書けない(完全に分離している)=>デザイナに敷居が低い

✴  でも  でも  でも  でも良い(緩い)

Movable Type = Perl ?

Movable Type = PHP

Movable Type = PHP

✴ 2004年、MT3.1 でPHPによるダイナミックパブリッシング

✴ mod_rerwiteを使ってmtview.phpが処理✴ 実はMTタグはSmartyのテンプレートに変換さ

れる(prefilter.mt_to_smarty.php)✴ MTのPHPはPerlで書かれたMTのタグをsmarty

のタグにコンバートしたもの

DynamicMTMLhttps://github.com/alfasado/DynamicMTML

静的ファイルに記述したMTMLを解釈して実行する技術

サーバーサイド言語としてMTタグを使えるもの

HTML

CSSJavaScript

JQuery

PHPPerlRuby

Java

Client Side

Server Side MTML(MTタグ)

    PCでしょ?

    PCじゃないでしょ?

    スマホでしょ?

    スマホじゃないでしょ?

    タブレットでしょ?

    タブレットじゃないでしょ?

    ガラケーでしょ?

    ガラケーじゃないでしょ?

    DoCoMo? 

    AU?

    SoftBank?

    Safariでしょ?

    Safariじゃないでしょ?

スマートフォンとは 直接関係ないですが...

さん、ようこそ

ユーザー登録してください。

Internet Exproler ver.7以上?

Internet Exproler ver.6以下?

                             

start_tag="h" => hタグ(見出しでページ分割)size="300"      => byte数str2keitai=”1” => タグ等を削除convert2thumbnail="100,240"                        => 100pxの画像から240px　　　　　　　　　　の画像へリンク(変換)

         [                      PREV                                                 ¦                              <$mt:KeitaiPageNumber$> ¦                                            NEXT         ]      

start_tag="h" => hタグ(見出しでページ分割)size="300"      => byte数str2keitai=”1” => タグ等を削除convert2thumbnail="100,240"                        => 100pxの画像から240px　　　　　　　　　　の画像へリンク(変換)trimwhitespace="1" => 空行や空白文字を削除

            

    Your serarch keyword        ''?                                                                                    

        

                       => 検索エンジンのキーワード

    

                                                    

    

        Edit            

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

...

    スマホでしょ?

    スマホじゃないでしょ?

...

2段階再構築

ブロック内はビルドされずファイルの中に出力される

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

...

    スマホでしょ?

    スマホじゃないでしょ?

...

2段階再構築

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

前ページと同じ処理

事例✴ Android/iPhoneサイトのアプリのサーバーサイド

✴ キャリア公式サイトでのユーザー属性での分岐表示

✴ 外部APIとの連携(例:MTIfTwitterLogin)✴ CRM(例:Synagy!)との連携✴ エリアターゲティングとの連携

Demo