Embed Size (px)
DESCRIPTION
WordCamp Tokyo 2011、こもりセッションスライド。
Citation preview
レスポンシブ・パブリッシングでいこうResponsive Publishing with WordPress
こもりまさあき
1972年生まれのフリーランス。Webをはじめネットワーク関連業務のほか、テクニカルライティングや講師などの活動が中心。時と場合によって職種が変わるため、職域的な肩書きはなし
仕事にプライベートにと、実はWordPress歴は長い。昨年開催されたWordCamp Yokohamaには、「WordPressをより高速に」というお題で登壇。今回テクニカルトラックに出演される「@wokamoto」さんと、来年発売にむけてWordPress本を鋭意執筆中
近著に『スマートフォンサイト制作の教科書（共著・MdN刊）』、『HTML+CSSコーディング ベストプラクティス（共著・MdN刊）』など
Twitter: @cipher / @proteanbmInstagram: @cipher
こもりまさあき
自己紹介を…http://protean.im
これからお話しすること
• レスポンシブ・パブリッシング？• デバイスにレスポンシブに対応する• コンテンツをレスポンシブにする• これから先の未来を見据えての準備
レスポンシブ・パブリッシング？
• スマートフォン、タブレット端末、いわゆるスマートデバイスの発売ラッシュ
• Webサイトの閲覧デバイスは、もうPCやフィーチャーフォンだけではない
• デバイスごとに予測できたはずの回線速度ですら、絞り込むことが困難になっている
ふと気付けば、こんな時代になってしまった
• あのサイトを見るためには、PC立ち上げなきゃ…• デバイスを変えたらコンテンツ見れないとか何？• え、これじゃ見れないの？• 出先でネット環境がない！ とか、遅いんだけど…
自分に最適化されている方がうれしい
できれば、利用者の環境に柔軟に対応できる方が理想
Responsive by default - Andy Hume
“Open a simple HTML file in a web browser, and the content automatically adapts to fit the width of that browser. The web is responsive on its own—by default.
そもそもWebってそんなもの
デバイスにレスポンシブに対応する
©simplethemes.com
1.デバイスの種別毎に最適化して配信する
2.欧米で注目を集める、
・Responsive Web Design・Adaptive Web Design（Layout）
1ソースで柔軟に対応できる配信設計に
マルチデバイスへの対応を考える
1.デバイス固有の仕様に対応するのは、果たしてコスト的に考えて見合うのか？
2.1ソースでマルチデバイスに対応するのは、決して万能な方法というわけではない。提供するコンテンツで向き・不向きがある
だが、それぞれに問題もある
考えるのがイヤなら、プラグインやテーマにお願いする
• WPtouch（http://wordpress.org/extend/plugins/wptouch/）• Handheld（http://www.elegantthemes.com/gallery/handheld/）• Onswipe（http://wordpress.org/extend/plugins/onswipe/）• Ktai Style（http://wppluginsj.sourceforge.jp/ktai_style/）
コンテンツをデバイスごとに最適化する
• Twenty Eleven（WordPress 3.2 Official Theme）• Yoko（http://wordpress.org/extend/themes/yoko）• PressWork（http://presswork.me/）• Skelton（http://demos.simplethemes.com/skeleton/）• Foundation, for WordPress（https://github.com/drewsymo/Foundation）
レスポンシブなテーマを採用する
提供するコンテンツ、ターゲットを見極めて適用
コンテンツそのものをレスポンシブに
©W3C HTML5 Logo
未来は一体どうなっていくんだろう？
• コンテンツをWebのみで提供してもよいか？• 利用者が好きなフォーマットで、自身の持つ閲覧可能なデバイスで見れる
• コンテンツ提供側が多様なフォーマットで配信• そんな世の中になる可能性は？
コンテンツの閲覧形態を想像してみる
近頃、巷では電子書籍もブームの兆し
• 電子書籍の1フォーマットである「ePub」、実はただのHTMLとCSSがパッケージされたもの
• メルマガでさえ、ePub版が提供される時代• 新バージョン「ePub 3.0」からはHTML5ベース• Kindleも次期バージョンでHTML5を採用する
Webと電子書籍の関係をみると…
ということは…
未来はココにあるのかも！
• マイクロデータで、情報に詳細な意味を• HTML5なら、オフラインキャッシュも使える• HTML5でWebコンテンツを配信しながら、ソースを再利用して別形態にすることも可能
コンテンツに更なる価値をあたえる
• 「html5shiv」「Normalize CSS」で簡単に• 「Modernizr」「Initializr」といったライブラリ• もしくは、それらをベースとしたテーマを導入
HTML5をベースに設計するなら
html5shiv: http://code.google.com/p/html5shiv/Normalize CSS: http://necolas.github.com/normalize.css/
Modernizr: http://www.modernizr.com/Initializr: http://www.initializr.com/
• HTML5をベースにテーマ設計、最終的にパッケージングするときに微調整
• ブログの記事なら「article」要素でパブリッシュ、電子書籍にする際に「section」要素に置き換える
• ePubへの展開を視野に入れるなら、「EPUB 3 Structural Semantics Vocabulary」を
電子書籍化を視野に入れた設計例
EPUB 3 Structural Semantics Vocabulary: http://idpf.org/epub/vocab/structure/
ひだりがWeb、みぎがePub、こんな感じ
<body><header> <h1>Responsive Publishing</h1></header><article class="chapter"> <header> <h1>Chapter Title</h1> </header> <article class="subchapter"> <h2>Sub Chapter Title</h2> <p>Paragraph Text.</p> </article></article><footer> <small>WordCamp Tokyo 2011</small></footer></body></html>
<body><header> <h1>Responsive Publishing</h1></header><section epub:type="chapter"> <header> <h1>Chapter Title</h1> </header> <section epub:type="subchapter"> <h2>Sub Chapter Title</h2> <p>Paragraph Text.</p> </section></section><footer> <small>WordCamp Tokyo 2011</small></footer></body></html>
海外では、もうはじまってます
PressBook: http://pressbooks.com/
仮にWebブラウザですべてをまかなうとなっても安心
だって、ベースはHTMLですからね
これからの未来に柔軟に対応するために
そろそろHTML5ベースで考えましょうか
まとめ
• 多様化していくデバイスにいかに対応するか、が問題• いますぐできる対処方法は、プラグインやテーマの利用• さらに一歩進んでコンテンツそのものの設計を考える• どんな未来になってもHTML5で対応しておくと楽かも
コンテンツ戦略を深く掘り下げるなら、長谷川さんスマートデバイスへの対応の詳細は、たにぐちさん電子書籍の実際のことを知りたいのなら、高橋さん
ありがとうございました
