Downloaded 12 times
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
- 4.
- 5. ケータイキット ★ Movable Type用携帯対応プラグイン ๏ 2006年11月リリース ๏ 1400ライセンス以上の導入実績 ★ スマートフォンにも対応！ ★ 1ライセンス105,000円 ๏ 回数制限なしサポート込み ๏ ProNet・制作会社様向け割引価格あります 5 11年11月18日金曜日 5
- 6. Another Edition様 6 11年11月18日金曜日 6
- 7. JAM Kitchen様 7 11年11月18日金曜日 7
- 8. LEXUS携帯・スマホサイト CONFIDENTIAL! 8 11年11月18日金曜日 8
- 9. 携帯サイトの3キャリアや 多数の機種を意識せずに、 PCと同じ感覚でテンプレートを 作るためのプラグイン 11年11月18日金曜日 9
- 10. 1000機種以上の仕様DBを内蔵 ※ガラケーのみ オンライン アップデート 1000+ 10 11年11月18日金曜日 10
- 11. 端末ごとにコンテンツを最適化 ★ 画像を機種ごとに自動変換 ๏ 機種ごとに違う液晶サイズに最適変換 ★ 絵文字をキャリアごとに自動変換 ★ 長いコンテンツを自動ページ分割 ★ 文字コード変換・カタカナ半角変換 11 11年11月18日金曜日 11
- 12. こんなこともできます ★ カスタムフィールドの利用 ๏ MTのほとんどの機能・プラグインを利用可能 ★ EC・コミュニティサイト連携 ๏ セッション保持機能 ★ 待受画像の自動生成・著作権保護 12 11年11月18日金曜日 12
- 13. スマートフォンオプションとの 違いは？ 11年11月18日金曜日 13
- 14. スマホで管理画面を操作 14 11年11月18日金曜日 14
- 15. スマホ向けデザインテーマ with jQuery Mobile 15 11年11月18日金曜日 15
- 16. For For Pro. Everyone スマートフォン ケータイキット オプション モバイル全般 管理画面のスマートフォン対応 デザインテンプレートの ＋jQuery Mobileテーマ 制作支援機能 スマートフォン スマートフォン専用 ガラケー両対応 外出先でMTの運用をしたい方 デザインや機能をカスタマイズして 手早くスマホ対応したい方 本格的なモバイル対応をしたい方 16 11年11月18日金曜日 16
- 17.
- 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
- 20. 今日はMT(CMS)での モバイルとマルチデバイス対応 についてお話します 11年11月18日金曜日 20
- 21. CMS導入の目的をおさらい ★ サイト運営の分業化・効率化 ๏ 発信者自身が編集者となりタイムリーな情報提供 ๏ デザイナーとプログラマーが円滑に作業 ★ マルチデバイスへの対応 ๏ テンプレートによるマルチデバイス対応 ๏ ワンソースマルチユースの実現 21 11年11月18日金曜日 21
- 22. 従来のWebサイト制作の限界 PC用サイト モバイル用サイト 多重管理が発生 11年11月18日金曜日 22
- 23. CMSの導入が急務 共通コンテンツ PC用テンプレート モバイル用テンプレート 11年11月18日金曜日 23
- 24. マルチデバイス対応を実現 24 11年11月18日金曜日 24
- 25. とはいえ、デバイスの種類だけ テンプレートを制作 管理し続けるするのはかなり大変！ 11年11月18日金曜日 25
- 26.
- 27.
- 28. CSSとは ★ CSS = Cascading Style Sheet ๏ Webサイトの装飾技術 内容=HTML デザイン=CSS 28 11年11月18日金曜日 28
- 29. CSSでテンプレートもひとつに!? 共通テンプレート 29 11年11月18日金曜日 29
- 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
- 32. 小さな画面で見せたい情報は似ている 32 11年11月18日金曜日 32
- 33. ガラケーとスマホを共通化 PC・タブレット モバイル向け テンプレート テンプレート 33 11年11月18日金曜日 33
- 34. ケータイキットの スマートフォン対応機能 11年11月18日金曜日 34
- 35. 同じテンプレート・URLで対応可能 35 11年11月18日金曜日 35
- 36. ケータイキットの仕組み 携帯向け PC向け テンプレート テンプレート 携帯用PHP PC用HTML 画像変換など スマホ用 CSS 36 11年11月18日金曜日 36
- 37.
- 38. Responsive Web Design デバイスやコンテンツの サイズに応じるウェブデザイン 11年11月18日金曜日 38
- 39. 共通のテンプレートとCSSで マルチデバイス対応を実現 11年11月18日金曜日 39
- 40. CSS3 Media Queries ブラウザやデバイスの画面サイズで CSSを書き分ける技術 11年11月18日金曜日 40
- 41. テンプレートが4→2セットに ガラケー 共通テンプレート テンプレート 41 11年11月18日金曜日 41
- 42.
- 43. いわゆるスマホ最適化をしていない 43 11年11月18日金曜日 43
- 44. ズームイン・ズームアウトで閲覧 ダブルタップ pxt ¦ 考察：Appleはスマホサイトを作らない。 http://www.pxt.jp/ja/diary/article/257/index.html 44 11年11月18日金曜日 44
- 45.
- 46. ケータイキットによるアプローチ Responsive Web Design 46 11年11月18日金曜日 46
- 47. 大きな画面と小さな画面 新しいブラウザと古いブラウザ 47 11年11月18日金曜日 47
- 48. CSSやプラグインの活用が マルチデバイス対応を容易にする 大きなポイントに 11年11月18日金曜日 48
- 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
- 53. Androidの悲劇 53 11年11月18日金曜日 53
- 54. 要注意な表現手法(2) ★ テキストエリア(textarea) ๏ iPhoneの二本指スクロールは知られていない ★ テキストリンク ๏ タップしやすい要素は44px以上 ★ mousedownイベント ๏ iPhoneは発生する要素が限定される 54 11年11月18日金曜日 54
- 55. 要注意な表現手法(3) ★ マウス操作系のjQueryプラグイン ๏ sortableなど ๏ 動かないものが多い ★ iframeによる表現 ๏ スクロール関係にいろいろ問題 ๏ FacebookボタンなどウィジェットはOK 55 11年11月18日金曜日 55
- 56. Bonus Track #2 ページ表示高速化ツール FastPageのご紹介 11年11月18日金曜日 56
- 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
- 59. 表示の高速化は技術的に難しく HTMLやCSSの 書き直しが必要 11年11月18日金曜日 59
- 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
- 64. YSlow Performance Score YSlow: 米Yahoo!が提供するページ高速化支援ツール C to A 64 11年11月18日金曜日 64
- 65. 静的なHTMLファイルに有効 Movable Typeによる サイトであればすぐ使えます 11年11月18日金曜日 65
- 66. オープンソース版公開中 https://bitbucket.org/ideamans/fastpage/ 商用版 11月30日提供予定 11年11月18日金曜日 66
- 67.