View
0
Download
0
Category
Preview:
Citation preview
マルチデバイス対応の新しいアプローチ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
Recommended