Movable type-semianar-20111121-ideamans

マルチデバイス時代のテンプレート管理方法と

Movable Typeのモバイル対応

2011年11月21日アイデアマンズ株式会社代表取締役　宮永邦彦

111年11月22日火曜日

宮永邦彦1977年北海道生まれ

苫小牧高専情報工学科卒

@miyanaga

211年11月22日火曜日

Movable Typeが2.xの頃から大好きだ！

311年11月22日火曜日

オープンソースをしっかり使い続けるのは

かなり大変※個人差があります

411年11月22日火曜日

サーバーがすぐパンクする

511年11月22日火曜日

デザイナーと協業しにくい

※個人差があります

611年11月22日火曜日

深いところに謎仕様

※プロジェクトによります

711年11月22日火曜日

誰も助けてくれない

「ソース読め」

811年11月22日火曜日

アイデアマンズ株式会社

★@ideamans★高専時代の友人同士3人で脱サラ★2005年11月設立★Six Apart Solution Partner

9

「モバイルサイトは苦手」をなくしたい！

911年11月22日火曜日

提供製品

1011年11月22日火曜日

ケータイキット★ Movable Type用携帯対応プラグイン๏ 2006年11月リリース

๏ 1400ライセンス以上の導入実績

★スマートフォンにも対応！★ 1ライセンス105,000円๏ 回数制限なしサポート込み๏ ProNet・制作会社様向け割引価格あります

11

1111年11月22日火曜日

Another Edition様

12

1211年11月22日火曜日

JAM Kitchen様

13

1311年11月22日火曜日

LEXUS携帯・スマホサイト

14

CONFIDENTIAL!

1411年11月22日火曜日

携帯サイトの3キャリアや多数の機種を意識せずに、

PCと同じ感覚でテンプレートを作るためのプラグイン

1511年11月22日火曜日

1000機種以上の仕様DBを内蔵

16

1000+

オンラインアップデート

※ガラケーのみ

1611年11月22日火曜日

端末ごとにコンテンツを最適化★画像を機種ごとに自動変換๏ 機種ごとに違う液晶サイズに最適変換

★絵文字をキャリアごとに自動変換★長いコンテンツを自動ページ分割★文字コード変換・カタカナ半角変換

17

1711年11月22日火曜日

こんなこともできます★カスタムフィールドの利用๏ MTのほとんどの機能・プラグインを利用可能

★ EC・コミュニティサイト連携๏ セッション保持機能

★待受画像の自動生成・著作権保護

18

1811年11月22日火曜日

スマートフォンオプションとの違いは？

1911年11月22日火曜日

スマホで管理画面を操作

20

2011年11月22日火曜日

スマホ向けデザインテーマ

21

with jQuery Mobile

2111年11月22日火曜日

22

スマートフォンオプション ケータイキット

管理画面のスマートフォン対応＋jQuery Mobileテーマ

モバイル全般デザインテンプレートの

制作支援機能

スマートフォン専用 スマートフォンガラケー両対応

外出先でMTの運用をしたい方手早くスマホ対応したい方

デザインや機能をカスタマイズして本格的なモバイル対応をしたい方

For Everyone For Pro.

2211年11月22日火曜日

ガラケーはもういい？

2311年11月22日火曜日

新機種の約半数そして出荷台数の49.5%※が

スマートフォン

※2011年度上期スマートフォン出荷台数、約8割がAndroid端末http://journal.mycom.co.jp/news/2011/10/28/053/

2411年11月22日火曜日

スマートフォンの普及予測

25

スマートフォン市場規模の推移・予測（11年7月） - MM総研http://www.m2ri.jp/newsreleases/main.php?id=010120110707500

2011年8.8%

2015年50%突破

2511年11月22日火曜日

今日はMT(CMS)でのモバイルとマルチデバイス対応

についてお話します

2611年11月22日火曜日

CMS導入の目的をおさらい★サイト運営の分業化・効率化๏ 発信者自身が編集者となりタイムリーな情報提供

๏ デザイナーとプログラマーが円滑に作業

★マルチデバイスへの対応๏ テンプレートによるマルチデバイス対応

๏ ワンソースマルチユースの実現

27

2711年11月22日火曜日

従来のWebサイト制作の限界

PC用サイト モバイル用サイト

多重管理が発生

2811年11月22日火曜日

CMSの導入が急務共通コンテンツ

PC用テンプレート モバイル用テンプレート

2911年11月22日火曜日

マルチデバイス対応を実現

30

3011年11月22日火曜日

とはいえ、デバイスの種類だけテンプレートを制作

管理し続けるするのはかなり大変！

3111年11月22日火曜日

もっと楽にできないか

3211年11月22日火曜日

CSSに相談だ3311年11月22日火曜日

CSSとは

34

★ CSS = Cascading Style Sheet๏ Webサイトの装飾技術

内容=HTML

デザイン=CSS

3411年11月22日火曜日

CSSでテンプレートもひとつに!?

35

共通テンプレート

3511年11月22日火曜日

ガラケーのCSS

36

★特殊な仕様๏ CSSであってCSSでない

★ 2～3年でかなり改善されるだろう๏ docomoのiモードブラウザ1.0が問題だが主流でなくなりつつある

๏ docomoはiモードブラウザ2.0がまずまずOK

๏ EZWeb、SoftbankはまずまずOK

3611年11月22日火曜日

CSSでガラケーとスマートフォンの

テンプレートを共通化

3711年11月22日火曜日

小さな画面で見せたい情報は似ている

38

3811年11月22日火曜日

ガラケーとスマホを共通化

39

PC・タブレットテンプレート

モバイル向けテンプレート

3911年11月22日火曜日

ケータイキットのスマートフォン対応機能

4011年11月22日火曜日

同じテンプレート・URLで対応可能

41

4111年11月22日火曜日

ケータイキットの仕組み

42

PC用HTML 携帯用PHP画像変換など

PC向けテンプレート

携帯向けテンプレート

スマホ用CSS

4211年11月22日火曜日

もうひとつアプローチ

4311年11月22日火曜日

Responsive Web Design

デバイスやコンテンツのサイズに応じるウェブデザイン

4411年11月22日火曜日

共通のテンプレートとCSSでマルチデバイス対応を実現

4511年11月22日火曜日

CSS3 Media Queries

ブラウザやデバイスの画面サイズでCSSを書き分ける技術

4611年11月22日火曜日

テンプレートが4→2セットに

47

共通テンプレート ガラケーテンプレート

4711年11月22日火曜日

参考: Apple社の場合

4811年11月22日火曜日

いわゆるスマホ最適化をしていない

49

4911年11月22日火曜日

ズームイン・ズームアウトで閲覧

50

pxt | 考察：Appleはスマホサイトを作らない。http://www.pxt.jp/ja/diary/article/257/index.html

ダブルタップ

5011年11月22日火曜日

まとめ

5111年11月22日火曜日

52

ケータイキットによるアプローチ

Responsive Web Design

5211年11月22日火曜日

53

大きな画面と小さな画面

新しいブラウザと古いブラウザ

5311年11月22日火曜日

CSSやプラグインの活用がマルチデバイス対応を容易にする

大きなポイント

5411年11月22日火曜日

アイデアマンズはこれからもMovable Typeによる

モバイル・マルチデバイスへの挑戦を応援します

5511年11月22日火曜日

Bonus Track #1

スマートフォンオプション開発で培った

iPhone/Android両対応の罠

5611年11月22日火曜日

iPhoneとAndroid★共通点๏ 同じブラウザエンジンWebKitが使われている

๏ ほぼ同じページが再現可能

★相違点๏ 一部のCSSやJavaScriptに違いがあり

๏ フォントなどデバイスに組み込まれた要素

๏ 画面サイズ(iPhoneは統一・Androidはバラバラ)

57

5711年11月22日火曜日

要注意な表現手法(1)★解像度に依存する表現๏ 横渡り(画面幅いっぱい)の画像など

★画面上の固定表示๏ ヘッダーやフッターの固定など

๏ iOS4が非対応・iOS5/Androidは対応

★ポップアップ表現๏ ダイアログやフロートメニュー

58

5811年11月22日火曜日

Androidの悲劇

59

5911年11月22日火曜日

要注意な表現手法(2)★テキストエリア(textarea)๏ iPhoneの二本指スクロールは知られていない

★テキストリンク๏ タップしやすい要素は44px以上

★ mousedownイベント๏ iPhoneは発生する要素が限定される

60

6011年11月22日火曜日

要注意な表現手法(3)★マウス操作系のjQueryプラグイン๏ sortableなど

๏ 動かないものも少なくない

★ iframeによる表現๏ スクロール関係にいろいろ問題

๏ FacebookボタンなどウィジェットはOK

61

6111年11月22日火曜日

Bonus Track #2

ページ表示高速化ツールFastPageのご紹介

6211年11月22日火曜日

表示高速化の重要性★ SEO効果๏ レスポンスのよいページは高評価

★モバイルで特に重要๏ 速度の遅い3G通信網でも快適な表示を

★ PVや売上に影響

63

6311年11月22日火曜日

ページの表示が遅くなると★ 0.1秒遅くなると๏ 売上が1%ダウンする(Amazon)

★ 0.5秒遅くなると๏ アクセス数が20%ダウンする(Google)

★ 1秒遅くなると๏ PV -11% コンバージョン -7% 満足度 -16%

64

6411年11月22日火曜日

表示の高速化は技術的に難しくHTMLやCSSの書き直しが必要

6511年11月22日火曜日

FastPageは既存のサイトにファイルをアップロードするだけ！

6611年11月22日火曜日

同じサイトで比較

67

HTMLやCSSは一切変更なし

FastPageなし FastPageあり

6711年11月22日火曜日

リクエスト時間

68

x2 Faster

6811年11月22日火曜日

リクエスト数

69

72 to 6

6911年11月22日火曜日

YSlow Performance Score

70

C to AYSlow: 米Yahoo!が提供するページ高速化支援ツール

7011年11月22日火曜日

静的なHTMLファイルに有効Movable Typeによる

サイトであればすぐ使えます

7111年11月22日火曜日

オープンソース版公開中https://bitbucket.org/ideamans/fastpage/

商用版 11月30日提供予定

7211年11月22日火曜日

ご清聴ありがとうございました

7311年11月22日火曜日