Movable Typeによる               スマートフォンサイトの制作と                スマートフォンオプション                   2011年11月17日                  アイ...
宮永邦彦                1977年北海道生まれ                   初九州・初福岡!               苫小牧高専情報工学科卒                   @miyanaga11年11月18日金...
アイデアマンズ株式会社                  「モバイルサイトは苦手」を                      なくしたい!  ★@ideamans  ★ 高専時代の友人同士3人で脱サラ  ★ 2005年11月設立  ★ Six...
提供製品11年11月18日金曜日          4
ケータイキット    ★ Movable   Type用携帯対応プラグイン        ๏ 2006年11月リリース        ๏ 1400ライセンス以上の導入実績    ★ スマートフォンにも対応!    ★ 1ライセンス105,000...
Another Edition様                      611年11月18日金曜日                      6
JAM Kitchen様                    711年11月18日金曜日                  7
LEXUS携帯・スマホサイト                  CONFIDENTIAL!                        811年11月18日金曜日                      8
携帯サイトの3キャリアや                 多数の機種を意識せずに、               PCと同じ感覚でテンプレートを                  作るためのプラグイン11年11月18日金曜日           ...
1000機種以上の仕様DBを内蔵                              ※ガラケーのみ               オンライン               アップデート                            ...
端末ごとにコンテンツを最適化    ★ 画像を機種ごとに自動変換        ๏ 機種ごとに違う液晶サイズに最適変換    ★ 絵文字をキャリアごとに自動変換    ★ 長いコンテンツを自動ページ分割    ★ 文字コード変換・カタカナ半角変...
こんなこともできます    ★ カスタムフィールドの利用        ๏ MTのほとんどの機能・プラグインを利用可能    ★ EC・コミュニティサイト連携        ๏ セッション保持機能    ★ 待受画像の自動生成・著作権保護   ...
スマートフォンオプションとの                    違いは?11年11月18日金曜日                    13
スマホで管理画面を操作                    1411年11月18日金曜日                 14
スマホ向けデザインテーマ                 with jQuery Mobile                         1511年11月18日金曜日                          15
For                   For Pro.                         Everyone                 スマートフォン                                   ...
ガラケーはもういい?11年11月18日金曜日                17
新機種の約半数               そして出荷台数の49.5%※が                  スマートフォン                ※2011年度上期スマートフォン出荷台数、約8割がAndroid端末          ...
スマートフォンの普及予測                                                                             2015年                            ...
今日はMT(CMS)での               モバイルとマルチデバイス対応                  についてお話します11年11月18日金曜日                    20
CMS導入の目的をおさらい    ★ サイト運営の分業化・効率化        ๏ 発信者自身が編集者となりタイムリーな情報提供        ๏ デザイナーとプログラマーが円滑に作業    ★ マルチデバイスへの対応        ๏ テンプ...
従来のWebサイト制作の限界          PC用サイト             モバイル用サイト                   多重管理が発生11年11月18日金曜日                            22
CMSの導入が急務               共通コンテンツ         PC用テンプレート       モバイル用テンプレート11年11月18日金曜日                           23
マルチデバイス対応を実現                    2411年11月18日金曜日                  24
とはいえ、デバイスの種類だけ                  テンプレートを制作               管理し続けるするのはかなり大変!11年11月18日金曜日                      25
もっと楽にできないか11年11月18日金曜日                26
CSSに相談だ11年11月18日金曜日             27
CSSとは    ★ CSS      = Cascading Style Sheet        ๏ Webサイトの装飾技術                                    内容=HTML               ...
CSSでテンプレートもひとつに!?                    共通テンプレート               2911年11月18日金曜日                   29
ガラケーのCSS    ★ 特殊な仕様        ๏ CSSであってCSSでない    ★ 2∼3年でかなり改善されるだろう        ๏ docomoのiモードブラウザ1.0が問題だが主流で               なくなりつつあ...
CSSで               ガラケーとスマートフォンの                テンプレートを共通化11年11月18日金曜日                   31
小さな画面で見せたい情報は似ている                  3211年11月18日金曜日                  32
ガラケーとスマホを共通化    PC・タブレット             モバイル向け      テンプレート             テンプレート                    3311年11月18日金曜日              ...
ケータイキットの               スマートフォン対応機能11年11月18日金曜日                 34
同じテンプレート・URLで対応可能                   3511年11月18日金曜日                   35
ケータイキットの仕組み                             携帯向け                 PC向け                             テンプレート               テンプレート ...
もうひとつアプローチ11年11月18日金曜日                37
Responsive Web Design                 デバイスやコンテンツの               サイズに応じるウェブデザイン11年11月18日金曜日                           38
共通のテンプレートとCSSで               マルチデバイス対応を実現11年11月18日金曜日                    39
CSS3 Media Queries               ブラウザやデバイスの画面サイズで                  CSSを書き分ける技術11年11月18日金曜日                          40
テンプレートが4→2セットに                               ガラケー               共通テンプレート                               テンプレート             ...
参考: Apple社の場合11年11月18日金曜日                   42
いわゆるスマホ最適化をしていない               4311年11月18日金曜日             43
ズームイン・ズームアウトで閲覧               ダブルタップ                     pxt ¦ 考察:Appleはスマホサイトを作らない。                   http://www.pxt.jp/j...
まとめ11年11月18日金曜日         45
ケータイキットによるアプローチ               Responsive Web Design                        4611年11月18日金曜日                           46
大きな画面と小さな画面               新しいブラウザと古いブラウザ                     4711年11月18日金曜日                    47
CSSやプラグインの活用が               マルチデバイス対応を容易にする                   大きなポイントに11年11月18日金曜日                     48
アイデアマンズはこれからも             Movable Typeによる          モバイル・マルチデバイスへの挑戦を                 応援します11年11月18日金曜日                   49
Bonus Track #1               スマートフォンオプション開発で                       やられた               iPhone/Android両対応の罠11年11月18日金曜日     ...
iPhoneとAndroid    ★ 共通点        ๏ 同じブラウザエンジンWebKitが使われている        ๏ ほぼ同じページが再現可能    ★ 相違点        ๏ 一部のCSSやJavaScriptに違いがあり  ...
要注意な表現手法(1)    ★ 解像度に依存する表現        ๏ 横渡り(画面幅いっぱい)の画像など    ★ 画面上の固定表示        ๏ ヘッダーやフッターの固定など        ๏ iOS4が非対応・iOS5/Androi...
Androidの悲劇                   5311年11月18日金曜日                53
要注意な表現手法(2)    ★ テキストエリア(textarea)        ๏ iPhoneの二本指スクロールは知られていない    ★ テキストリンク        ๏ タップしやすい要素は44px以上    ★ mousedownイ...
要注意な表現手法(3)    ★ マウス操作系のjQueryプラグイン        ๏ sortableなど        ๏ 動かないものが多い    ★ iframeによる表現        ๏ スクロール関係にいろいろ問題       ...
Bonus Track #2               ページ表示高速化ツール                FastPageのご紹介11年11月18日金曜日                      56
ページの表示が遅くなると    ★ 0.1秒遅くなると        ๏ 売上が1%ダウンする(Amazon)    ★ 0.5秒遅くなると        ๏ アクセス数が20%ダウンする(Google)    ★ 1秒遅くなると       ...
表示高速化の重要性    ★ PV・売上に影響    ★ SEO効果        ๏ レスポンスのよいページは高評価    ★ モバイルで特に重要        ๏ 速度の遅い3G通信網でも快適な表示を                   5...
表示の高速化は技術的に難しく                  HTMLやCSSの                   書き直しが必要11年11月18日金曜日                    59
FastPageは               既存のサイトにファイルを               アップロードするだけ!11年11月18日金曜日                  60
同じサイトで比較     FastPageなし            FastPageあり               HTMLやCSSは一切変更なし                      6111年11月18日金曜日           ...
リクエスト時間               x2 Faster                   6211年11月18日金曜日               62
リクエスト数               72 to 6                  6311年11月18日金曜日             63
YSlow Performance Score     YSlow: 米Yahoo!が提供するページ高速化支援ツール               C to A                   6411年11月18日金曜日          ...
静的なHTMLファイルに有効                Movable Typeによる               サイトであればすぐ使えます11年11月18日金曜日                      65
オープンソース版公開中               https://bitbucket.org/ideamans/fastpage/                商用版 11月30日提供予定11年11月18日金曜日              ...
ご清聴ありがとうございました11年11月18日金曜日                    67
Upcoming SlideShare
Loading in …5
×

Movable type-semianar-20111117-ideamans

1,888 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,888
On SlideShare
0
From Embeds
0
Number of Embeds
762
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Movable type-semianar-20111117-ideamans

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

×