Your SlideShare is downloading. ×
0
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement

3,636

Published on

0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,636
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
Comments
0
Likes
13
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5を使うためのプログレッシブ・エンハンスメント Swap Skills@アップルストア銀座 2011年7月13日 有限会社 futomi 代表取締役 羽田野 太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/
  • 2. <ruby> 羽田野<rp>(</rp><rt>はたの</rt><rp>)</rp> 太巳<rp>(</rp><rt>ふとみ</rt><rp>)</rp></ruby>
  • 3. http://www.futomi.com/
  • 4. http://www.html5.jp/
  • 5. HTML5 = Markup + API
  • 6. アジェンダ ウェブとは 開発アプローチRegressive Enhancement Graceful DegradationProgressive Enhancement まとめ
  • 7. ウェブとはhttp://www.flickr.com/photos/notionscapital/5045320233/
  • 8. あらゆる対象に情報を伝える
  • 9. ちらし
  • 10. あらゆる対象に同じUX
  • 11. あらゆる対象に同じUX ≠ウェブ
  • 12. クロスブラウザー対策あらゆる対象に 同じUXを提供する
  • 13. クロスブラウザー対策あらゆる対象に 同じUXを提供する 確実に情報を伝える
  • 14. 本来のウェブとは• 非メディア依存 – ビジュアル・ブラウザー – 支援技術(Assistive Technology) • スクリーンリーダーなど – 検索エンジンのロボット• リフローが前提 – スクリーン・サイズに応じて変形自在 – デメリットではなく、大きなメリット• マルチデバイス – PC、スマートフォン、テレビなど
  • 15. 同じUXは美徳? 違いは悪徳?
  • 16. 同じUXは美徳? 違いは悪徳?“私は、かしましい美徳よりは、 静かな悪徳を好む” Albert Einstein
  • 17. Progressive Enhancementそれは違いを受け入れること
  • 18. 開発アプローチhttp://www.flickr.com/photos/15216811@N06/5254696771/
  • 19. さまざまな用語 Graceful Degradation Fallback RegressiveEnhancement Progressive Unobtrusive Enhancement Scripting http://www.flickr.com/photos/horiavarlan/4273913228/
  • 20. 用語の整理開発アプローチ – Regressive Enhancement – Graceful Degradation – Progressive Enhancement手段 – Fallback特性表現 – Unobtrusive Scripting
  • 21. Unobtrusive Scripting• JSは控えめにつつましく• JSが機能することを前提としない – JSをオフにしたUA – JSの実装が貧弱なUA http://clubt.jp/product/106622_4679549.html
  • 22. 良くない例1<a href="javascript:window.history.back()"> 前項へ戻る</a>
  • 23. 改良版1<a href="/index.html" id="bk">トップへ</a><script>(function () { if( ! window.addEventListener ) { return; } var bk = document.getElementById(bk); bk.innerHTML = 前項へ戻る; bk.addEventListener(click, function(e) { e.preventDefault(); window.history.back(); }, false);})();</script>
  • 24. 良くない例2 <ul> <li>ニュース</li> <li>天気予報</li> <li>マネー</li> ... </ul> li.onclick = function() { // サブメニューを動的生成 };
  • 25. 改良版2 <ul> ... <li>マネー <ul> <li>株式</li> <li>投資信託</li> </ul> </li> ... </ul> li.onclick = function() { // 表示・非表示の切り替え };
  • 26. 3つの開発アプローチ• 三者択一ではない 1. Regressive Enhancement 2. Graceful Degradation 3. Progressive Enhancement• いずれも目的は同じ – すべての対象に必要な情報を確実に提供• どこまで対応するか – 対象ユーザーとコストとの兼ね合い
  • 27. アプローチの違い高 Regressive EnhancementUXのレベル低 低 UAの機能実装度 高
  • 28. REGRESSIVEENHANCEMENT http://www.amazon.co.jp/dp/4278049056/
  • 29. Regressive Enhancement• 古いブラウザーには、 同等の機能を あらゆる手段を使って 気合いでエミュレート• JSライブラリーが有効• 非常に高コストゆえに 自作は厳しい
  • 30. VideoJShttp://videojs.com/
  • 31. <link rel="stylesheet" href="video-js.css"><script src="video.js"></script> 第1段階<script> 気合い注入 VideoJS.setupAllWhenReady();</script><div class="video-js-box"> <video controls> <source src="v.mp4" type="video/mp4"> 第2段階 <source src="v.webm" type="video/webm"> 第3段階 <object data="....swf"> 第4段階 ... 気合い注入 <p><a href="v.mp4">ダウンロード</a></p> 第5段階 </object> Graceful Degradation </video></div>
  • 32. GRACEFUL DEGRADATION http://www.flickr.com/photos/melkorcete/180238980/
  • 33. Graceful Degradation• Fail Safe/Fault Tolerant – 必要な機能がないUAを救済• デグレードして代替え機能を提供 – 少なくとも最低限の機能を提供 – HTMLのフォールバック機能が有効 – 手っ取り早いが、万能ではない
  • 34. マークアップ<figure> <canvas> <table><!-- グラフの元となる表 --></table> </canvas> <figcaption>会員数の推移</figcaption></figure>
  • 35. 結果 新しいUA 古いUAJS/ONJS/OFF
  • 36. 要素フォールバックのポイント• JavaScriptがOFFのUAに注意• 該当の要素をサポートしたUAでは、JSが OFFの場合を救済できない場合がある• <canvas>, <video>, <audio>, etc
  • 37. PROGRESSIVEENHANCEMENThttp://www.flickr.com/photos/melkorcete/180238980/
  • 38. Progressive Enhancement• 必要最小限の機能を用意 – まずはマークアップから – あらゆるUAで利用可能• UAの能力に応じて機能を拡張 – CSSやJSによるUXをアドオン – 最新のUAなら最高のUXを http://www.31ice.co.jp/contents/product/sundae/su046.html
  • 39. マークアップ<figure> <table><!-- グラフの元となる表 --></table> <figcaption>会員数の推移</figcaption></figure>
  • 40. スクリプト// canvas要素のノード・オブジェクトvar canvas = document.createElement(canvas);// table要素のノード・オブジェクトvar tbl = document.getElementById(tbl);// table要素をcanvas要素に置き換えるtbl.parentNode.replaceChild(canvas, tbl);// グラフを描画...
  • 41. 結果 新しいUA 古いUAJS/ONJS/OFF
  • 42. ファイルのアップロード必要なAPIが実装されていないブラウザーをサポート• ファイル選択コントロールによるファイル指定• 通常のフォーム・サブミットによるアップロード• ファイルアップロード中の進捗はわからない http://www.futomi.com/library/zip/index.html
  • 43. ファイルのアップロードProgressive Enhancementを使うと• ドラッグ&ドロップによるファイル指定• XHR2 FormDataによるPOST• アップロード中の進捗表示 http://www.futomi.com/library/zip/index.html
  • 44. 三層を完全に分離 JS CSS HTMLHTMLにCSSとJSをインラインで混在させない HTMLだけでも最低限の機能を提供
  • 45. 開発の順序HTMLのみで必要最小限を CSSでビジュアルを追加 JSで操作性を追加
  • 46. まとめ http://www.morguefile.com/archive/display/693087
  • 47. 優先順位を間違えない• アクセシビリティーが最優先 – あらゆる対象に確実に情報を届ける – マークアップでできることを優先 – CSSやJSに頼らない• ユーザービリティーをアドオン – CSSで見やすさをアドオン – JSで使いやすさをアドオン – 最新UAでは最高のUX – CSSとJSはUnobtrusive(控えめ)であるべき
  • 48. “望んでいたものを手に入れたと 思い込んでいるときほど、 願望から遠く離れていることはない” ゲーテ「親和力」 Regressive Enhancementを求めるあまり、 大事なユーザーを逃していませんか? “1オンスの思慮分別は、 1ポンドの英知に値する” イギリスのことわざ ちょっとした工夫と配慮で、多くのユーザーに手をさしのべることができます。
  • 49. 参考図書 designing with DOM Scripting 第二版 progressive enhancementhttp://www.amazon.co.jp/dp/1430233893/ http://www.amazon.co.jp/dp/0321658884/
  • 50. ご清聴ありがとうございました 有限会社 futomi 代表取締役 羽田野 太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/
  • 51. 主催:allWebクリエイター塾羽田野太巳から学ぶ「HTML5マークアップ講座」http://all-web.org/curriculums/html5/index.html羽田野太巳から学ぶ「0から学ぶ JavaScript 講座」http://all-web.org/curriculums/javascript/index.html

×