Movable type-semianar-20111117-ideamans
Upcoming SlideShare
Loading in...5
×
 

Movable type-semianar-20111117-ideamans

on

  • 1,415 views

 

Statistics

Views

Total Views
1,415
Views on SlideShare
943
Embed Views
472

Actions

Likes
0
Downloads
9
Comments
0

2 Embeds 472

http://www.sixapart.jp 470
http://mt5demo.lolipop.jp 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Movable type-semianar-20111117-ideamans Movable type-semianar-20111117-ideamans Presentation Transcript

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