• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Movable type-semianar-20111121-ideamans
 

Movable type-semianar-20111121-ideamans

on

  • 1,206 views

 

Statistics

Views

Total Views
1,206
Views on SlideShare
708
Embed Views
498

Actions

Likes
0
Downloads
1
Comments
0

2 Embeds 498

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

Accessibility

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-20111121-ideamans Movable type-semianar-20111121-ideamans Presentation Transcript

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