自己紹介 内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 )

スマートフォンオプションのご紹介と

スマートフォン対応テーマ解説、カスタマイズ

スマートフォン対応テーマ解説、カスタマイズ

自己紹介

⻑内毅志

(おさないたけし)

Movable Type

Movable Type

Product and Marketing Manager

(2011年4月〜)

本日のサマリ

•スマートフォンオプションとは

•テーマのおさらい

•スマートフォンオプション用テーマの

内容ご紹介

スマートフォンオプションとは

©Six Apart, Ltd.

スマートフォンオプションとは

MTの管理画⾯を

最適化

スマホ用テーマを

バンドル

＋

＋

管理画⾯用

©Six Apart, Ltd.

プラグイン

ビジネスに必要な運用機能を、手のひらに

特徴

カスタムフィールド

の操作

©Six Apart, Ltd.

特徴

パソコン版に近い

操作感

©Six Apart, Ltd.

特徴

リアルプレビュー

テーマ

©Six Apart, Ltd.

テーマ

スマートフォン、PC両対応

PC、スマートフォン両用

デザインカスタマイズのベースとして提供

そのままでも、ブログとして利用可能

©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>

©Six Apart, Ltd.

<mt:Ignore><!-- for Other --></mt:Ignore>

<$mt:Include module="HTMLヘッダー"$>

DynamicMTMLとは

Movable Typeのタグ（MTタグ）を、

リアルタイムに解釈して出⼒する仕組み

ページをダイナミック（動的）生成

ページをダイナミック（動的）生成

ユーザーからアクセスがあったときに、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.

リリース日、他

2011年11月16日(水)

個人無償版もあります。

©Six Apart, Ltd.

無料配布

テーマは無料配布も⾏います

(OSS)

テーマの詳細

テーマの詳細

©Six Apart, Ltd.

その前に

その前に

©Six Apart, Ltd.

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

What is “Theme” ?

©Six Apart, Ltd.

テーマのおさらい

©Six Apart, Ltd.

テーマとは

入れ替え可能なテンプレートセット

配布もしています

http://communities.movabletype.jp/plugins/

商用テーマもあります

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

インストール

©Six Apart, Ltd.

MTインストールフォルダ/themes/

に、テーマ名フォルダをアップロード

テーマの切替

©Six Apart, Ltd.

テーマインストール後、管理画⾯から

「適用」ボタンを押す

テンプレートが入れ替わる

出⼒もできる

詳しくはウェブで

©Six Apart, Ltd.

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

テーマ募集中

スマートフォンオプション用

テーマの内容ご紹介

©Six Apart, Ltd.

スマートフォンオプション用

テーマの内容ご紹介

スマホテーマに戻る

テーマ名

Smart Blog

©Six Apart, Ltd.

スマホ＆PC両対応

CSS、JSをダイナミックに切替

ユーザーからアクセスがあったときに、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">

ヘッダー部分のソース

<mtml tag="

mt:IfUserAgent

" params='wants="

SmartPhone

"'>

<mt:Ignore><!-- for Smart Phone --></mt:Ignore>

<$mt:Include module="

HTML

ヘッダーモバイル用

"$>

<mtml tag="

mt:else

">

©Six Apart, Ltd.

<mtml tag="

mt:else

">

<mt:Ignore><!-- for Other --></mt:Ignore>

<$mt:Include module="

HTML

ヘッダー

"$>

パソコン用

<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>

<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> ©Six Apart, Ltd. <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>

CSSの構成

CSSの構造

共通

・base.css(構造)

・screen.css(配色など)

スマートフォン用

・smartphone.css(スマホ用)

全体の構造管理

base.css

float: left; width: 640px; overflow: hidden; }

©Six Apart, Ltd.

}

.related-content {

float: right; width: 280px; margin-left: 10px; }

.inner {

width: 960px; margin: 0 auto; }

.content-inner {

margin: 1.62em auto; }

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

screen.css

.ui-bar-a,

.page-header,

.page-footer,

.header-menu .detail {

border: 0;

border: 0;

background: #007bbb;

color: #fff;

text-shadow: none;

font-weight: normal;

}

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

/* - Layout */ .inner {

width: auto; max-width: 100%; margin: 0; }

.content, .page-header, .page-footer { padding: 0;

smartphone.css

float: none; width: auto; overflow: visible; }

Smart Blog 独自の項目

Smart Blog独自項目

スマートフォン用CSS

viewport

jQuery.mobile

jQuery.mobile

touch icon

viewport

<meta name="viewport“

content="width=device-width,

minimum-scale=1.0, maximum-scale=1.0">

jQuery Mobile

/* for jQuery Mobile */

$(document).bind("mobileinit", function(){

$.mobile.ajaxEnabled = false;

$.mobile.hashListeningEnabled = false;

});

jQuery Mobileを活用

});

/* Tabs */

jQuery(function() {

$('.menu .widget').hide();

$('.menu .widget:first').show();

$('.tabs > .tab:first').addClass('active');

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> ©Six Apart, Ltd. <link rel="apple-touch-icon-precomposed" href="<$MTStaticWebPath$>support/theme_static/ smart_blog/images/touch-icon-default.png"> </mt:Assets>

タッチアイコンの変更

デフォルト

プライベートタグによる

指定画像があった場合

©Six Apart, Ltd.

プライベートタグとは

@から始まるタグを利用

・「タグ一覧」など、htmlとしては出⼒されない

・タグの有無により、テンプレート分岐ができる

解説

©Six Apart, Ltd.

http://www.movabletype.jp/blog/mtddc2011_special_03.html

MovableType.jpで記事公開中

その他

©Six Apart, Ltd.

ヘッダーの切替

プライベートタグで挿入可能

<mt:Assets tag="

@SITE_BANNER

" limit="1">

<img src="<$mt:AssetThumbnailURL width="1024"$>">

<mt:Else>

<mt:Else>

<img src="<$MTStaticWebPath$>support/theme_static

/smart_blog/images/banner.jpg">

</mt:Assets>

ロゴの切替

<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">

class="page-logo">

<

mt:Else

>

<$mt:BlogName$>

</mt:Assets>

</a>

</h1>

デモ

活用例

ご活用のほど

お願い申し上げます。

©Six Apart, Ltd.