スマートフォンオプションのご紹介とスマートフォン対応テーマ解説、カスタマイズ
2011年11月9日
シックス・アパート株式会社
⻑内 毅志©Six Apart, Ltd.

自己紹介

⻑内毅志(おさないたけし)
Movable Type
Product and Marketing Manager(2011年4月〜)©Six Apart, Ltd.

本日のサマリ•スマートフォンオプションとは•テーマのおさらい•スマートフォンオプション用テーマの内容ご紹介©Six Apart, Ltd.

スマートフォンオプションとは©Six Apart, Ltd.

スマートフォンオプションとはMTの管理画⾯を最適化

スマホ用テーマをバンドル＋©Six Apart, Ltd.

管理画⾯用
プラグイン©Six Apart, Ltd.

プラグイン

ビジネスに必要な運用機能を、手のひらに©Six Apart, Ltd.

特徴

カスタムフィールドの操作©Six Apart, Ltd.

特徴

パソコン版に近い
操作感©Six Apart, Ltd.

特徴

リアルプレビュー©Six Apart, Ltd.

テーマ

©Six Apart, Ltd.

テーマ

スマートフォン、PC両対応©Six Apart, Ltd.

PC、スマートフォン両用

デザインカスタマイズのベースとして提供そのままでも、ブログとして利用可能©Six Apart, Ltd.

テーマの構成

理解しやすく、適度なシンプルさ©Six Apart, Ltd.

DynamicMTMLを採用<mtml tag="mt:IfUserAgent" params='wants="SmartPhone"'><mt:Ignore><!-- for Smart Phone --></mt:Ignore><$mt:Include module="HTMLヘッダーモバイル用"$><mtml tag="mt:else"><mt:Ignore><!-- for Other --></mt:Ignore><$mt:Include module="HTMLヘッダー"$><mtml tag="/mt:IfUserAgent">©Six Apart, Ltd.

DynamicMTMLとはMovable Typeのタグ（MTタグ）を、リアルタイムに解釈して出⼒する仕組み
ページをダイナミック（動的）生成©Six Apart, Ltd.

ユーザーからアクセスがあったときに、MTタグを解釈して出⼒<mtml tag="mt:IfUserAgent" params='wants="SmartPhone"'><mt:Ignore><!-- for Smart Phone --></mt:Ignore><$mt:Include module="HTMLヘッダーモバイル用"$><mtml tag="mt:else"><mt:Ignore><!-- for Other --></mt:Ignore><$mt:Include module="HTMLヘッダー"$><mtml tag="/mt:IfUserAgent">©Six Apart, Ltd.

詳細は次のセッションで©Six Apart, Ltd.

リリース日、他

2011年11月16日(水)個人無償版もあります。

©Six Apart, Ltd.

無料配布

テーマは無料配布も⾏います(OSS)©Six Apart, Ltd.

テーマの詳細テーマの詳細©Six Apart, Ltd.

その前にその前に©Six Apart, Ltd.

改めて、MTのテーマ、ご存知ですか？

What is “Theme” ?

©Six Apart, Ltd.

テーマのおさらい©Six Apart, Ltd.

テーマとは入れ替え可能なテンプレートセット©Six Apart, Ltd.

配布もしています

http://communities.movabletype.jp/plugins/©Six Apart, Ltd.

商用テーマもあります©Six Apart, Ltd.

構成

テーマに利用するCSS、JavaScript、画像などテーマで利用する各種テンプレートのソースコード
テーマの構成情報(設定ファイル)
テーマのサムネイル(管理画⾯で表⽰）©Six Apart, Ltd.

インストール

MTインストールフォルダ/themes/に、テーマ名フォルダをアップロード©Six Apart, Ltd.

テーマの切替

テーマインストール後、管理画⾯から「適用」ボタンを押す©Six Apart, Ltd.

テンプレートが入れ替わる©Six Apart, Ltd.

出⼒もできる©Six Apart, Ltd.

詳しくはウェブでhttp://www.movabletype.jp/documentation/©Six Apart, Ltd.

リファレンスブックもあります。

©Six Apart, Ltd.

テーマ募集中©Six Apart, Ltd.

スマートフォンオプション用
テーマの内容ご紹介©Six Apart, Ltd.

スマホテーマに戻る©Six Apart, Ltd.

テーマ名Smart Blog

©Six Apart, Ltd.

スマホ＆PC両対応

CSS、JSをダイナミックに切替©Six Apart, Ltd.

ユーザーからアクセスがあったときに、MTタグを解釈して出⼒<mtml tag="mt:IfUserAgent" params='wants="SmartPhone"'><mt:Ignore><!-- for Smart Phone --></mt:Ignore><$mt:Include module="HTMLヘッダーモバイル用"$><mtml tag="mt:else"><mt:Ignore><!-- for Other --></mt:Ignore><$mt:Include module="HTMLヘッダー"$><mtml tag="/mt:IfUserAgent">©Six Apart, Ltd.

ヘッダー部分のソース<mtml tag="mt:IfUserAgent" params='wants="SmartPhone"'><mt:Ignore><!-- for Smart Phone --></mt:Ignore><$mt:Include module="HTMLヘッダーモバイル用"$><mtml tag="mt:else"><mt:Ignore><!-- for Other --></mt:Ignore><$mt:Include module="HTMLヘッダー"$><mtml tag="/mt:IfUserAgent">©Six Apart, Ltd.

パソコン用<link rel="stylesheet" href="http://example.com/styles.css"><script src="http://example.com/mt.js"></script><script src=“http://example.com/jquery.min.js"></script>©Six Apart, Ltd.

<link rel="apple-touch-icon-precomposed"
href="http://example.com/touch-icon-default.png"><link rel="stylesheet" href="http://example.com/jquery.mobile.min.css"><link rel="stylesheet" href="http://example.com/styles.css"><link rel="stylesheet" href="http://example.com/smartphone.css"><script src="http://example.com/mt.js"></script><script src="http://example.com/jquery.min.js"></script><script src="http://example.com/mt-theme-smart-blog.js"></script><script src="http://example.comjquery.mobile.min.js"></script>©Six Apart, Ltd.

CSSの構成©Six Apart, Ltd.

CSSの構造共通・base.css(構造)・screen.css(配色など)
スマートフォン用・smartphone.css(スマホ用)©Six Apart, Ltd.

全体の構造管理base.css/* - Layout */.content, .page-header,.page-footer {padding: 1px 10px;}.main-content {float: left; width: 640px; overflow: hidden;}.related-content {float: right; width: 280px; margin-left: 10px;}.inner {width: 960px; margin: 0 auto;}.content-inner {margin: 1.62em auto;}©Six Apart, Ltd.

配色、トーン&マナーの管理

screen.css.ui-bar-a,.page-header,.page-footer,.header-menu .detail {border: 0;
background: #007bbb;
color: #fff;
text-shadow: none;
font-weight: normal;}©Six Apart, Ltd.

スマートフォン用のデザイン

smartphone.css/* - Layout */.inner {width: auto;}

max-width: 100%;

margin: 0;.content, .page-header, .page-footer {padding: 0;}.content-inner {padding: 0 9px;}
.main-content {float: none; width: auto;}

overflow: visible;©Six Apart, Ltd.

Smart Blog 独自の項目©Six Apart, Ltd.

Smart Blog独自項目

スマートフォン用CSS
viewport
jQuery.mobiletouch icon

©Six Apart, Ltd.

viewport<meta name="viewport“
content="width=device-width,minimum-scale=1.0, maximum-scale=1.0">©Six Apart, Ltd.

jQuery Mobile

jQuery Mobileを活用/* for jQuery Mobile */$(document).bind("mobileinit", function(){$.mobile.ajaxEnabled = false;$.mobile.hashListeningEnabled = false;});/* Tabs */jQuery(function() {$('.menu .widget').hide();$('.menu .widget:first').show();$('.tabs > .tab:first').addClass('active');©Six Apart, Ltd.

touch icon

<mt:Assets type="image" tag="@SITE_TOUCH_ICON" limit="1"><link rel="apple-touch-icon-precomposed"
href="<$mt:AssetThumbnailURL width="114" square="1"$>"><mt:Else><link rel="apple-touch-icon-precomposed"
href="<$MTStaticWebPath$>support/theme_static/
smart_blog/images/touch-icon-default.png"></mt:Assets>©Six Apart, Ltd.

タッチアイコンの変更

デフォルト

プライベートタグによる指定画像があった場合@SITE_TOUCH_ICON©Six Apart, Ltd.

©Six Apart, Ltd.

プライベートタグとは@から始まるタグを利用
・「タグ一覧」など、htmlとしては出⼒されない・タグの有無により、テンプレート分岐ができる©Six Apart, Ltd.

解説

http://www.movabletype.jp/blog/mtddc2011_special_03.html
MovableType.jpで記事公開中©Six Apart, Ltd.

その他

©Six Apart, Ltd.

ヘッダーの切替

プライベートタグで挿入可能<mt:Assets tag="@SITE_BANNER" limit="1"><img src="<$mt:AssetThumbnailURL width="1024"$>"><mt:Else><img src="<$MTStaticWebPath$>support/theme_static/smart_blog/images/banner.jpg"></mt:Assets>©Six Apart, Ltd.

ロゴの切替<h1 class=“title page-title”><a href=“<$mt:BlogURL$>”><mt:Assets tag=“@SITE_LOGO” limit=“1”><img alt=“<$mt:BlogName encode_html=”1“$>”
src=“<$mt:AssetThumbnailURL$>”
class="page-logo"><mt:Else><$mt:BlogName$></mt:Assets>
</a>
</h1>

©Six Apart, Ltd.

デモ

©Six Apart, Ltd.

活用例

©Six Apart, Ltd.

ご活用のほどお願い申し上げます。

©Six Apart, Ltd.