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