Download as PDF, PPTX
Uploaded bySwapSkills
PDF, PPTX1,812 views
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
Recommended
More Related Content
What's hot
Viewers also liked
![[社内勉強会]SPAのすすめ](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fspa-160304020346-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Similar to HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
More from SwapSkills
![SwapSkillsFree|jQueryMobile [基礎編]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fjquerymobile-110209105550-phpapp01-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
- 1.HTML5を使うためのプログレッシブ・エンハンスメント Swap Skills@アップルストア銀座 2011年7月13日 有限会社 futomi 代表取締役 羽田野 太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/
- 2.
- 3.
- 4.
- 5.HTML5 = Markup+ API
- 6.アジェンダ ウェブとは 開発アプローチRegressive Enhancement Graceful DegradationProgressive Enhancement まとめ
- 7.
- 8.
- 9.
- 10.
- 11.あらゆる対象に同じUX≠ウェブ
- 12.クロスブラウザー対策あらゆる対象に同じUXを提供する
- 13.クロスブラウザー対策あらゆる対象に同じUXを提供する 確実に情報を伝える
- 14.本来のウェブとは• 非メディア依存 –ビジュアル・ブラウザー – 支援技術（Assistive Technology） • スクリーンリーダーなど – 検索エンジンのロボット• リフローが前提 – スクリーン・サイズに応じて変形自在 – デメリットではなく、大きなメリット• マルチデバイス – PC、スマートフォン、テレビなど
- 15.
- 16.同じUXは美徳？ 違いは悪徳？“私は、かしましい美徳よりは、 静かな悪徳を好む” Albert Einstein
- 17.
- 18.
- 19.さまざまな用語 Graceful Degradation Fallback RegressiveEnhancement Progressive Unobtrusive Enhancement Scripting http://www.flickr.com/photos/horiavarlan/4273913228/
- 20.用語の整理開発アプローチ – RegressiveEnhancement – 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="#"https://www.slideshare.net/slideshow/html5-swapskillsfreeeventprogressive-enhancement/8679467#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 EnhancementＵＸのレベル低 低 UAの機能実装度 高
- 28.
- 29.Regressive Enhancement• 古いブラウザーには、 同等の機能を あらゆる手段を使って 気合いでエミュレート• JSライブラリーが有効• 非常に高コストゆえに 自作は厳しい
- 30.
- 31.<link rel="stylesheet" href="video-js.css"><scriptsrc="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• FailSafe/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.
- 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.