Movable type-semianar-20111121-ideamans

1,480 views
1,408 views

Published on

Published in: Technology, Education, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,480
On SlideShare
0
From Embeds
0
Number of Embeds
666
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Movable type-semianar-20111121-ideamans

  1. 1. マルチデバイス時代の テンプレート管理方法と Movable Typeのモバイル対応 2011年11月21日 アイデアマンズ株式会社 代表取締役 宮永邦彦11年11月22日火曜日 1
  2. 2. 宮永邦彦 1977年北海道生まれ 苫小牧高専情報工学科卒 @miyanaga11年11月22日火曜日 2
  3. 3. Movable Typeが 2.xの頃から大好きだ!11年11月22日火曜日 3
  4. 4. オープンソースを しっかり使い続けるのは かなり大変 ※個人差があります11年11月22日火曜日 4
  5. 5. サーバーがすぐパンクする11年11月22日火曜日 5
  6. 6. デザイナーと協業しにくい ※個人差があります11年11月22日火曜日 6
  7. 7. 深いところに謎仕様 ※プロジェクトによります11年11月22日火曜日 7
  8. 8. 誰も助けてくれない 「ソース読め」11年11月22日火曜日 8
  9. 9. アイデアマンズ株式会社 「モバイルサイトは苦手」を なくしたい! ★@ideamans ★ 高専時代の友人同士3人で脱サラ ★ 2005年11月設立 ★ Six Apart Solution Partner 911年11月22日火曜日 9
  10. 10. 提供製品11年11月22日火曜日 10
  11. 11. ケータイキット ★ Movable Type用携帯対応プラグイン ๏ 2006年11月リリース ๏ 1400ライセンス以上の導入実績 ★ スマートフォンにも対応! ★ 1ライセンス105,000円 ๏ 回数制限なしサポート込み ๏ ProNet・制作会社様向け割引価格あります 1111年11月22日火曜日 11
  12. 12. Another Edition様 1211年11月22日火曜日 12
  13. 13. JAM Kitchen様 1311年11月22日火曜日 13
  14. 14. LEXUS携帯・スマホサイト CONFIDENTIAL! 1411年11月22日火曜日 14
  15. 15. 携帯サイトの3キャリアや 多数の機種を意識せずに、 PCと同じ感覚でテンプレートを 作るためのプラグイン11年11月22日火曜日 15
  16. 16. 1000機種以上の仕様DBを内蔵 ※ガラケーのみ オンライン アップデート 1000+ 1611年11月22日火曜日 16
  17. 17. 端末ごとにコンテンツを最適化 ★ 画像を機種ごとに自動変換 ๏ 機種ごとに違う液晶サイズに最適変換 ★ 絵文字をキャリアごとに自動変換 ★ 長いコンテンツを自動ページ分割 ★ 文字コード変換・カタカナ半角変換 1711年11月22日火曜日 17
  18. 18. こんなこともできます ★ カスタムフィールドの利用 ๏ MTのほとんどの機能・プラグインを利用可能 ★ EC・コミュニティサイト連携 ๏ セッション保持機能 ★ 待受画像の自動生成・著作権保護 1811年11月22日火曜日 18
  19. 19. スマートフォンオプションとの 違いは?11年11月22日火曜日 19
  20. 20. スマホで管理画面を操作 2011年11月22日火曜日 20
  21. 21. スマホ向けデザインテーマ with jQuery Mobile 2111年11月22日火曜日 21
  22. 22. For For Pro. Everyone スマートフォン ケータイキット オプション モバイル全般 管理画面のスマートフォン対応 デザインテンプレートの +jQuery Mobileテーマ 制作支援機能 スマートフォン スマートフォン専用 ガラケー両対応 外出先でMTの運用をしたい方 デザインや機能をカスタマイズして 手早くスマホ対応したい方 本格的なモバイル対応をしたい方 2211年11月22日火曜日 22
  23. 23. ガラケーはもういい?11年11月22日火曜日 23
  24. 24. 新機種の約半数 そして出荷台数の49.5%※が スマートフォン ※2011年度上期スマートフォン出荷台数、約8割がAndroid端末 http://journal.mycom.co.jp/news/2011/10/28/053/11年11月22日火曜日 24
  25. 25. スマートフォンの普及予測 2015年 50%突破 2011年 8.8% スマートフォン市場規模の推移・予測(11年7月) - MM総研 http://www.m2ri.jp/newsreleases/main.php?id=010120110707500 2511年11月22日火曜日 25
  26. 26. 今日はMT(CMS)での モバイルとマルチデバイス対応 についてお話します11年11月22日火曜日 26
  27. 27. CMS導入の目的をおさらい ★ サイト運営の分業化・効率化 ๏ 発信者自身が編集者となりタイムリーな情報提供 ๏ デザイナーとプログラマーが円滑に作業 ★ マルチデバイスへの対応 ๏ テンプレートによるマルチデバイス対応 ๏ ワンソースマルチユースの実現 2711年11月22日火曜日 27
  28. 28. 従来のWebサイト制作の限界 PC用サイト モバイル用サイト 多重管理が発生11年11月22日火曜日 28
  29. 29. CMSの導入が急務 共通コンテンツ PC用テンプレート モバイル用テンプレート11年11月22日火曜日 29
  30. 30. マルチデバイス対応を実現 3011年11月22日火曜日 30
  31. 31. とはいえ、デバイスの種類だけ テンプレートを制作 管理し続けるするのはかなり大変!11年11月22日火曜日 31
  32. 32. もっと楽にできないか11年11月22日火曜日 32
  33. 33. CSSに相談だ11年11月22日火曜日 33
  34. 34. CSSとは ★ CSS = Cascading Style Sheet ๏ Webサイトの装飾技術 内容=HTML デザイン=CSS 3411年11月22日火曜日 34
  35. 35. CSSでテンプレートもひとつに!? 共通テンプレート 3511年11月22日火曜日 35
  36. 36. ガラケーのCSS ★ 特殊な仕様 ๏ CSSであってCSSでない ★ 2∼3年でかなり改善されるだろう ๏ docomoのiモードブラウザ1.0が問題だが主流で なくなりつつある ๏ docomoはiモードブラウザ2.0がまずまずOK ๏ EZWeb、SoftbankはまずまずOK 3611年11月22日火曜日 36
  37. 37. CSSで ガラケーとスマートフォンの テンプレートを共通化11年11月22日火曜日 37
  38. 38. 小さな画面で見せたい情報は似ている 3811年11月22日火曜日 38
  39. 39. ガラケーとスマホを共通化 PC・タブレット モバイル向け テンプレート テンプレート 3911年11月22日火曜日 39
  40. 40. ケータイキットの スマートフォン対応機能11年11月22日火曜日 40
  41. 41. 同じテンプレート・URLで対応可能 4111年11月22日火曜日 41
  42. 42. ケータイキットの仕組み 携帯向け PC向け テンプレート テンプレート 携帯用PHP PC用HTML 画像変換など スマホ用 CSS 4211年11月22日火曜日 42
  43. 43. もうひとつアプローチ11年11月22日火曜日 43
  44. 44. Responsive Web Design デバイスやコンテンツの サイズに応じるウェブデザイン11年11月22日火曜日 44
  45. 45. 共通のテンプレートとCSSで マルチデバイス対応を実現11年11月22日火曜日 45
  46. 46. CSS3 Media Queries ブラウザやデバイスの画面サイズで CSSを書き分ける技術11年11月22日火曜日 46
  47. 47. テンプレートが4→2セットに ガラケー 共通テンプレート テンプレート 4711年11月22日火曜日 47
  48. 48. 参考: Apple社の場合11年11月22日火曜日 48
  49. 49. いわゆるスマホ最適化をしていない 4911年11月22日火曜日 49
  50. 50. ズームイン・ズームアウトで閲覧 ダブルタップ pxt ¦ 考察:Appleはスマホサイトを作らない。 http://www.pxt.jp/ja/diary/article/257/index.html 5011年11月22日火曜日 50
  51. 51. まとめ11年11月22日火曜日 51
  52. 52. ケータイキットによるアプローチ Responsive Web Design 5211年11月22日火曜日 52
  53. 53. 大きな画面と小さな画面 新しいブラウザと古いブラウザ 5311年11月22日火曜日 53
  54. 54. CSSやプラグインの活用が マルチデバイス対応を容易にする 大きなポイント11年11月22日火曜日 54
  55. 55. アイデアマンズはこれからも Movable Typeによる モバイル・マルチデバイスへの挑戦を 応援します11年11月22日火曜日 55
  56. 56. Bonus Track #1 スマートフォンオプション開発で 培った iPhone/Android両対応の罠11年11月22日火曜日 56
  57. 57. iPhoneとAndroid ★ 共通点 ๏ 同じブラウザエンジンWebKitが使われている ๏ ほぼ同じページが再現可能 ★ 相違点 ๏ 一部のCSSやJavaScriptに違いがあり ๏ フォントなどデバイスに組み込まれた要素 ๏ 画面サイズ(iPhoneは統一・Androidはバラバラ) 5711年11月22日火曜日 57
  58. 58. 要注意な表現手法(1) ★ 解像度に依存する表現 ๏ 横渡り(画面幅いっぱい)の画像など ★ 画面上の固定表示 ๏ ヘッダーやフッターの固定など ๏ iOS4が非対応・iOS5/Androidは対応 ★ ポップアップ表現 ๏ ダイアログやフロートメニュー 5811年11月22日火曜日 58
  59. 59. Androidの悲劇 5911年11月22日火曜日 59
  60. 60. 要注意な表現手法(2) ★ テキストエリア(textarea) ๏ iPhoneの二本指スクロールは知られていない ★ テキストリンク ๏ タップしやすい要素は44px以上 ★ mousedownイベント ๏ iPhoneは発生する要素が限定される 6011年11月22日火曜日 60
  61. 61. 要注意な表現手法(3) ★ マウス操作系のjQueryプラグイン ๏ sortableなど ๏ 動かないものも少なくない ★ iframeによる表現 ๏ スクロール関係にいろいろ問題 ๏ FacebookボタンなどウィジェットはOK 6111年11月22日火曜日 61
  62. 62. Bonus Track #2 ページ表示高速化ツール FastPageのご紹介11年11月22日火曜日 62
  63. 63. 表示高速化の重要性 ★ SEO効果 ๏ レスポンスのよいページは高評価 ★ モバイルで特に重要 ๏ 速度の遅い3G通信網でも快適な表示を ★ PVや売上に影響 6311年11月22日火曜日 63
  64. 64. ページの表示が遅くなると ★ 0.1秒遅くなると ๏ 売上が1%ダウンする(Amazon) ★ 0.5秒遅くなると ๏ アクセス数が20%ダウンする(Google) ★ 1秒遅くなると ๏ PV -11% コンバージョン -7% 満足度 -16% 6411年11月22日火曜日 64
  65. 65. 表示の高速化は技術的に難しく HTMLやCSSの 書き直しが必要11年11月22日火曜日 65
  66. 66. FastPageは 既存のサイトにファイルを アップロードするだけ!11年11月22日火曜日 66
  67. 67. 同じサイトで比較 FastPageなし FastPageあり HTMLやCSSは一切変更なし 6711年11月22日火曜日 67
  68. 68. リクエスト時間 x2 Faster 6811年11月22日火曜日 68
  69. 69. リクエスト数 72 to 6 6911年11月22日火曜日 69
  70. 70. YSlow Performance Score YSlow: 米Yahoo!が提供するページ高速化支援ツール C to A 7011年11月22日火曜日 70
  71. 71. 静的なHTMLファイルに有効 Movable Typeによる サイトであればすぐ使えます11年11月22日火曜日 71
  72. 72. オープンソース版公開中 https://bitbucket.org/ideamans/fastpage/ 商用版 11月30日提供予定11年11月22日火曜日 72
  73. 73. ご清聴ありがとうございました11年11月22日火曜日 73

×