More Related Content
Similar to Movable type-semianar-20111121-ideamans
Similar to Movable type-semianar-20111121-ideamans (8)
Movable type-semianar-20111121-ideamans
- 1. マルチデバイス時代の
テンプレート管理方法と
Movable Typeのモバイル対応
2011年11月21日
アイデアマンズ株式会社
代表取締役 宮永邦彦
11年11月22日火曜日 1
- 2. 宮永邦彦
1977年北海道生まれ
苫小牧高専情報工学科卒
@miyanaga
11年11月22日火曜日 2
- 4. オープンソースを
しっかり使い続けるのは
かなり大変
※個人差があります
11年11月22日火曜日 4
- 9. アイデアマンズ株式会社
「モバイルサイトは苦手」を
なくしたい！
★@ideamans
★ 高専時代の友人同士3人で脱サラ
★ 2005年11月設立
★ Six Apart Solution Partner
9
11年11月22日火曜日 9
- 11. ケータイキット
★ Movable Type用携帯対応プラグイン
๏ 2006年11月リリース
๏ 1400ライセンス以上の導入実績
★ スマートフォンにも対応！
★ 1ライセンス105,000円
๏ 回数制限なしサポート込み
๏ ProNet・制作会社様向け割引価格あります
11
11年11月22日火曜日 11
- 15. 携帯サイトの3キャリアや
多数の機種を意識せずに、
PCと同じ感覚でテンプレートを
作るためのプラグイン
11年11月22日火曜日 15
- 17. 端末ごとにコンテンツを最適化
★ 画像を機種ごとに自動変換
๏ 機種ごとに違う液晶サイズに最適変換
★ 絵文字をキャリアごとに自動変換
★ 長いコンテンツを自動ページ分割
★ 文字コード変換・カタカナ半角変換
17
11年11月22日火曜日 17
- 18. こんなこともできます
★ カスタムフィールドの利用
๏ MTのほとんどの機能・プラグインを利用可能
★ EC・コミュニティサイト連携
๏ セッション保持機能
★ 待受画像の自動生成・著作権保護
18
11年11月22日火曜日 18
- 22. For For Pro.
Everyone
スマートフォン
ケータイキット
オプション
モバイル全般
管理画面のスマートフォン対応
デザインテンプレートの
＋jQuery Mobileテーマ
制作支援機能
スマートフォン
スマートフォン専用
ガラケー両対応
外出先でMTの運用をしたい方 デザインや機能をカスタマイズして
手早くスマホ対応したい方 本格的なモバイル対応をしたい方
22
11年11月22日火曜日 22
- 24. 新機種の約半数
そして出荷台数の49.5%※が
スマートフォン
※2011年度上期スマートフォン出荷台数、約8割がAndroid端末
http://journal.mycom.co.jp/news/2011/10/28/053/
11年11月22日火曜日 24
- 25. スマートフォンの普及予測
2015年
50%突破
2011年
8.8%
スマートフォン市場規模の推移・予測（11年7月） - MM総研
http://www.m2ri.jp/newsreleases/main.php?id=010120110707500
25
11年11月22日火曜日 25
- 27. CMS導入の目的をおさらい
★ サイト運営の分業化・効率化
๏ 発信者自身が編集者となりタイムリーな情報提供
๏ デザイナーとプログラマーが円滑に作業
★ マルチデバイスへの対応
๏ テンプレートによるマルチデバイス対応
๏ ワンソースマルチユースの実現
27
11年11月22日火曜日 27
- 29. CMSの導入が急務
共通コンテンツ
PC用テンプレート モバイル用テンプレート
11年11月22日火曜日 29
- 34. CSSとは
★ CSS = Cascading Style Sheet
๏ Webサイトの装飾技術
内容=HTML
デザイン=CSS
34
11年11月22日火曜日 34
- 36. ガラケーのCSS
★ 特殊な仕様
๏ CSSであってCSSでない
★ 2∼3年でかなり改善されるだろう
๏ docomoのiモードブラウザ1.0が問題だが主流で
なくなりつつある
๏ docomoはiモードブラウザ2.0がまずまずOK
๏ EZWeb、SoftbankはまずまずOK
36
11年11月22日火曜日 36
- 37. CSSで
ガラケーとスマートフォンの
テンプレートを共通化
11年11月22日火曜日 37
- 39. ガラケーとスマホを共通化
PC・タブレット モバイル向け
テンプレート テンプレート
39
11年11月22日火曜日 39
- 40. ケータイキットの
スマートフォン対応機能
11年11月22日火曜日 40
- 42. ケータイキットの仕組み
携帯向け
PC向け
テンプレート
テンプレート
携帯用PHP
PC用HTML
画像変換など
スマホ用
CSS
42
11年11月22日火曜日 42
- 50. ズームイン・ズームアウトで閲覧
ダブルタップ
pxt ¦ 考察：Appleはスマホサイトを作らない。
http://www.pxt.jp/ja/diary/article/257/index.html
50
11年11月22日火曜日 50
- 55. アイデアマンズはこれからも
Movable Typeによる
モバイル・マルチデバイスへの挑戦を
応援します
11年11月22日火曜日 55
- 56. Bonus Track #1
スマートフォンオプション開発で
培った
iPhone/Android両対応の罠
11年11月22日火曜日 56
- 57. iPhoneとAndroid
★ 共通点
๏ 同じブラウザエンジンWebKitが使われている
๏ ほぼ同じページが再現可能
★ 相違点
๏ 一部のCSSやJavaScriptに違いがあり
๏ フォントなどデバイスに組み込まれた要素
๏ 画面サイズ(iPhoneは統一・Androidはバラバラ)
57
11年11月22日火曜日 57
- 58. 要注意な表現手法(1)
★ 解像度に依存する表現
๏ 横渡り(画面幅いっぱい)の画像など
★ 画面上の固定表示
๏ ヘッダーやフッターの固定など
๏ iOS4が非対応・iOS5/Androidは対応
★ ポップアップ表現
๏ ダイアログやフロートメニュー
58
11年11月22日火曜日 58
- 60. 要注意な表現手法(2)
★ テキストエリア(textarea)
๏ iPhoneの二本指スクロールは知られていない
★ テキストリンク
๏ タップしやすい要素は44px以上
★ mousedownイベント
๏ iPhoneは発生する要素が限定される
60
11年11月22日火曜日 60
- 61. 要注意な表現手法(3)
★ マウス操作系のjQueryプラグイン
๏ sortableなど
๏ 動かないものも少なくない
★ iframeによる表現
๏ スクロール関係にいろいろ問題
๏ FacebookボタンなどウィジェットはOK
61
11年11月22日火曜日 61
- 63. 表示高速化の重要性
★ SEO効果
๏ レスポンスのよいページは高評価
★ モバイルで特に重要
๏ 速度の遅い3G通信網でも快適な表示を
★ PVや売上に影響
63
11年11月22日火曜日 63
- 64. ページの表示が遅くなると
★ 0.1秒遅くなると
๏ 売上が1%ダウンする(Amazon)
★ 0.5秒遅くなると
๏ アクセス数が20%ダウンする(Google)
★ 1秒遅くなると
๏ PV -11% コンバージョン -7% 満足度 -16%
64
11年11月22日火曜日 64
- 66. FastPageは
既存のサイトにファイルを
アップロードするだけ！
11年11月22日火曜日 66
- 67. 同じサイトで比較
FastPageなし FastPageあり
HTMLやCSSは一切変更なし
67
11年11月22日火曜日 67
- 68. リクエスト時間
x2 Faster
68
11年11月22日火曜日 68
- 69. リクエスト数
72 to 6
69
11年11月22日火曜日 69
- 72. オープンソース版公開中
https://bitbucket.org/ideamans/fastpage/
商用版 11月30日提供予定
11年11月22日火曜日 72
