movable type-semianar-20111117-ideamans
TRANSCRIPT
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日金曜日