Progressive Enhancement ~ すべての 人 に 確 実 に 情 報 を 届 けるために ~ 第 16 回 HTML5とか 勉 強 会 2011 年 4 月 21 日 有 限 会 社 futomi 代 表 取 締 役 羽 田 野 太 巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/
<ruby> 羽 田 野 <rp>(</rp><rt>はたの</rt><rp>)</rp> 太 巳 <rp>(</rp><rt>ふとみ</rt><rp>)</rp> </ruby>
http://www.futomi.com/
http://www.html5.jp/
HTML5 = Markup + API
お 題 ウェブとは 開 発 アプローチ Regressive Enhancement Graceful Degradation Progressive Enhancement まとめ
ウェブとは http://www.flickr.com/photos/notionscapital/5045320233/
あらゆる 対 象 に 情 報 を 伝 える
ちらし
あらゆる対象に同じUX
あらゆる対象に同じUX ウェブ
クロスブラウザー 対 策 あらゆる 対 象 に 同 じUXを 提 供 する
クロスブラウザー 対 策 あらゆる 対 象 に 同 じUXを 提 供 する 確 実 に 情 報 を 伝 える
本 来 のウェブとは 非 メディア 依 存 ビジュアル ブラウザー 支 援 技 術 (Assistive Technology) スクリーンリーダーなど 検 索 エンジンのロボット リフローが 前 提 スクリーン サイズに 応 じて 変 形 自 在 デメリットではなく 大 きなメリット マルチデバイス PC スマートフォン テレビなど
同 じUXは 美 徳? 違 いは 悪 徳?
同 じUXは 美 徳? 違 いは 悪 徳? 私 は かしましい 美 徳 よりは 静 かな 悪 徳 を 好 む Albert Einstein
Progressive Enhancement それは 違 いを 受 け 入 れること
開 発 アプローチ http://www.flickr.com/photos/15216811@n06/5254696771/
Fallback さまざまな 用 語 Graceful Degradation Regressive Enhancement Unobtrusive Scripting Progressive Enhancement http://www.flickr.com/photos/horiavarlan/4273913228/
用 語 の 整 理 開 発 アプローチ Regressive Enhancement Graceful Degradation Progressive Enhancement 手 段 Fallback 特 性 表 現 Unobtrusive Scripting
Unobtrusive Scripting JSは 控 えめにつつましく JSが 機 能 することを 前 提 としない JSをオフにしたUA JSの 実 装 が 貧 弱 なUA http://clubt.jp/product/106622_4679549.html
良 くない 例 1 <a href="javascript:window.history.back()"> 前 項 へ 戻 る</a>
改 良 版 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>
良 くない 例 2 <ul> <li>ニュース</li> <li> 天 気 予 報 </li> <li>マネー</li>... </ul> li.onclick = function() { // サブメニューを 動 的 生 成 };
改 良 版 2 <ul>... <li>マネー <ul> <li> 株 式 </li> <li> 投 資 信 託 </li> </ul> </li>... </ul> li.onclick = function() { // 表 示 非 表 示 の 切 り 替 え };
3つの 開 発 アプローチ 三 者 択 一 ではない 1. Regressive Enhancement 2. Graceful Degradation 3. Progressive Enhancement いずれも 目 的 は 同 じ すべての 対 象 に 必 要 な 情 報 を 確 実 に 提 供 どこまで 対 応 するか 対 象 ユーザーとコストとの 兼 ね 合 い
アプローチの 違 い 高 Regressive Enhancement U X の レ ベ ル 低 低 UAの 機 能 実 装 度 高
REGRESSIVE ENHANCEMENT http://www.amazon.co.jp/dp/4278049056/
Regressive Enhancement 古 いブラウザーには 同 等 の 機 能 を あらゆる 手 段 を 使 って 気 合 いでエミュレート JSライブラリーが 有 効 非 常 に 高 コストゆえに 自 作 は 厳 しい
VideoJS http://videojs.com/
<link rel="stylesheet" href="video-js.css"> <script src="video.js"></script> <script> VideoJS.setupAllWhenReady(); </script> 気 合 い 注 入 第 1 段 階 <div class="video-js-box"> <video controls> <source src="v.mp4" type="video/mp4"> <source src="v.webm" type="video/webm"> <object data="...swf">... <p><a href="v.mp4">ダウンロード</a></p> </object> </video> </div> 気 合 い 注 入 第 2 段 階 第 3 段 階 第 4 段 階 第 5 段 階 Graceful Degradation
GRACEFUL DEGRADATION http://www.flickr.com/photos/melkorcete/180238980/
Graceful Degradation Fail Safe/Fault Tolerant 必 要 な 機 能 がないUAを 救 済 デグレードして 代 替 え 機 能 を 提 供 少 なくとも 最 低 限 の 機 能 を 提 供 HTMLのフォールバック 機 能 が 有 効 手 っ 取 り 早 いが 限 界 はある
マークアップ <figure> <canvas> <table><!-- グラフの 元 となる 表 --></table> </canvas> <figcaption> 会 員 数 の 推 移 </figcaption> </figure>
結 果 JS/ON 新 しいUA 古 いUA JS/OFF
要 素 フォールバックのポイント JavaScriptがOFFのUAに 注 意 該 当 の 要 素 をサポートしたUAでは JSが OFFの 場 合 を 救 済 できない 場 合 がある <canvas>, <video>, <audio>, etc
PROGRESSIVE ENHANCEMENT http://www.flickr.com/photos/melkorcete/180238980/
Progressive Enhancement 必 要 最 小 限 の 機 能 を 用 意 まずはマークアップから あらゆるUAで 利 用 可 能 UAの 能 力 に 応 じて 機 能 を 拡 張 CSSやJSによるUXをアドオン 最 新 のUAなら 最 高 のUXを http://www.31ice.co.jp/contents/product/sundae/su046.html
マークアップ <figure> <table><!-- グラフの 元 となる 表 --></table> <figcaption> 会 員 数 の 推 移 </figcaption> </figure>
スクリプト // canvas 要 素 のノード オブジェクト var canvas = document.createelement('canvas'); // table 要 素 のノード オブジェクト var tbl = document.getelementbyid('tbl'); // table 要 素 をcanvas 要 素 に 置 き 換 える tbl.parentnode.replacechild(canvas, tbl); // グラフを 描 画...
結 果 JS/ON 新 しいUA 古 いUA JS/OFF
ファイルのアップロード 必 要 なAPIが 実 装 されていないブラウザーをサポート ファイル 選 択 コントロールによるファイル 指 定 通 常 のフォーム サブミットによるアップロード ファイルアップロード 中 の 進 捗 はわからない http://www.futomi.com/library/zip/index.html
ファイルのアップロード Progressive Enhancementを 使 うと ドラッグ&ドロップによるファイル 指 定 XHR2 FormDataによるPOST アップロード 中 の 進 捗 表 示 http://www.futomi.com/library/zip/index.html
三 層 を 完 全 に 分 離 JS CSS HTML HTMLにCSSとJSをインラインで 混 在 させない HTMLだけでも 最 低 限 の 機 能 を 提 供
まとめ http://www.morguefile.com/archive/display/693087
優 先 順 位 を 間 違 えない アクセシビリティーが 最 優 先 あらゆる 対 象 に 確 実 に 情 報 を 届 ける マークアップでできることを 優 先 CSSやJSに 頼 らない ユーザービリティーをアドオン CSSで 見 やすさをアドオン JSで 使 いやすさをアドオン 最 新 UAでは 最 高 のUX CSSとJSはUnobtrusive( 控 えめ)であるべき
アプローチを 併 用 あらゆるUAを 救 済 Progressive Enhancement Graceful Degradation よりよいUXを 目 指 す Progressive Enhancement さらに 余 裕 があれば Regressive Enhancement JSライブラリーの 活 用
望 んでいたものを 手 に 入 れたと 思 い 込 んでいるときほど 願 望 から 遠 く 離 れていることはない ゲーテ 親 和 力 Regressive Enhancementを 求 めるあまり 大 事 なユーザーを 逃 していませんか? 1オンスの 思 慮 分 別 は 1ポンドの 英 知 に 値 する イギリスのことわざ ちょっとした 工 夫 と 配 慮 で 多 くのユーザーに 手 をさしのべることができます
参 考 図 書 DOM Scripting 第 二 版 http://www.amazon.co.jp/dp/1430233893/ designing with progressive enhancement http://www.amazon.co.jp/dp/0321658884/
ご 清 聴 ありがとうございました 有 限 会 社 futomi 代 表 取 締 役 羽 田 野 太 巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/