movable type-semianar-20111117-ideamans

Movable Typeによるスマートフォンサイトの制作とスマートフォンオプション

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

111年11月18日金曜日

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

初九州・初福岡！苫小牧高専情報工学科卒

@miyanaga

211年11月18日金曜日

アイデアマンズ株式会社

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

3

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

311年11月18日金曜日

提供製品

411年11月18日金曜日

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

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

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

5

511年11月18日金曜日

Another Edition様

6

611年11月18日金曜日

JAM Kitchen様

7

711年11月18日金曜日

LEXUS携帯・スマホサイト

8

CONFIDENTIAL!

811年11月18日金曜日

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

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

911年11月18日金曜日

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

10

1000+

オンラインアップデート

※ガラケーのみ

1011年11月18日金曜日

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

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

11

1111年11月18日金曜日

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

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

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

12

1211年11月18日金曜日

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

1311年11月18日金曜日

スマホで管理画面を操作

14

1411年11月18日金曜日

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

15

with jQuery Mobile

1511年11月18日金曜日

16

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

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

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

制作支援機能

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

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

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

For Everyone For Pro.

1611年11月18日金曜日

ガラケーはもういい？

1711年11月18日金曜日

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

スマートフォン

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

1811年11月18日金曜日

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

19

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

2011年8.8%

2015年50%突破

1911年11月18日金曜日

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

についてお話します

2011年11月18日金曜日

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

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

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

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

21

2111年11月18日金曜日

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

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

多重管理が発生

2211年11月18日金曜日

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

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

2311年11月18日金曜日

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

24

2411年11月18日金曜日

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

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

2511年11月18日金曜日

もっと楽にできないか

2611年11月18日金曜日

CSSに相談だ2711年11月18日金曜日

CSSとは

28

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

内容=HTML

デザイン=CSS

2811年11月18日金曜日

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

29

共通テンプレート

2911年11月18日金曜日

ガラケーのCSS

30

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

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

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

๏ EZWeb、SoftbankはまずまずOK

3011年11月18日金曜日

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

テンプレートを共通化

3111年11月18日金曜日

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

32

3211年11月18日金曜日

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

33

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

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

3311年11月18日金曜日

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

3411年11月18日金曜日

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

35

3511年11月18日金曜日

ケータイキットの仕組み

36

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

PC向けテンプレート

携帯向けテンプレート

スマホ用CSS

3611年11月18日金曜日

もうひとつアプローチ

3711年11月18日金曜日

Responsive Web Design

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

3811年11月18日金曜日

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

3911年11月18日金曜日

CSS3 Media Queries

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

4011年11月18日金曜日

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

41

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

4111年11月18日金曜日

参考: Apple社の場合

4211年11月18日金曜日

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

43

4311年11月18日金曜日

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

44

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

ダブルタップ

4411年11月18日金曜日

まとめ

4511年11月18日金曜日

46

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

Responsive Web Design

4611年11月18日金曜日

47

大きな画面と小さな画面

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

4711年11月18日金曜日

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

大きなポイントに

4811年11月18日金曜日

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

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

4911年11月18日金曜日

Bonus Track #1

スマートフォンオプション開発でやられた

iPhone/Android両対応の罠

5011年11月18日金曜日

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

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

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

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

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

51

5111年11月18日金曜日

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

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

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

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

52

5211年11月18日金曜日

Androidの悲劇

53

5311年11月18日金曜日

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

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

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

54

5411年11月18日金曜日

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

๏ 動かないものが多い

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

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

55

5511年11月18日金曜日

Bonus Track #2

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

5611年11月18日金曜日

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

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

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

57

5711年11月18日金曜日

表示高速化の重要性★ PV・売上に影響★ SEO効果๏ レスポンスのよいページは高評価

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

58

5811年11月18日金曜日

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

5911年11月18日金曜日

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

6011年11月18日金曜日

同じサイトで比較

61

HTMLやCSSは一切変更なし

FastPageなし FastPageあり

6111年11月18日金曜日

リクエスト時間

62

x2 Faster

6211年11月18日金曜日

リクエスト数

63

72 to 6

6311年11月18日金曜日

YSlow Performance Score

64

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

6411年11月18日金曜日

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

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

6511年11月18日金曜日

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

商用版 11月30日提供予定

6611年11月18日金曜日

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

6711年11月18日金曜日