Upload
kunihiko-miyanaga
View
1.135
Download
1
Tags:
Embed Size (px)
Citation preview
マルチデバイス時代のテンプレート管理方法と
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日火曜日