7月13日(木)にアップルストア銀座で行われた
「Swapskills HTML5を使うためのプログレッシブ・エンハンスメント」に参加してきました。
Swapskills「HTML5を使うためのプログレッシブ・エンハンスメント」
・Swapskills @アップルストア銀座
・2011年07月13日
・有限会社 futomi 代表取締役 羽田野太巳さん
■HTML5
HTML5は様々な機能が実装されていてワクワクする部分もあるが、
実際Web制作の現場では、未来ばかりを見てわくわくしているばかりでもいけない、
HTML5で実装された新しい機能は古いブラウザでは動かない、
古いブラウザの対応をどうするかも考えないといけない、
その処方箋のひとつとして、プログレッシブエンハンスメントがある。
■ルビ (ruby)
HTML5でやっと実装されたが、すべてのブラウザが実装できているわけではない。
IE Safari Crome→実装ずみ
Firefox Opera→最高の見え方ではないけど、読めるし問題ない。
※これがプログレッシブエンハンスメントの入り口。フォールバック
■HTML5
HTML5 = Markup + API
→HTML4の後継だが、HTMLだけではなくAPIを含む。
■ウェブとは
「あらゆる対象に情報を伝える。」
→人だけではない。
ロボットやハンデキャップを持つ人、ソフトウェアも対象。
(ハンデキャップを持つ人はソフトウェアを介して聞いている)
例えば「ちらし」
誰もが直感的にわかりやすい媒体のひとつ
今、現場で苦労していることは、
「あらゆるブラウザで同じように見えるようにすること」、
クライアントにもそう要求される。
ちらしは紙だから、誰がつくっても同じになるが、
Webは違う。
あらゆる対象に同じUX ≠ Webではない。
それだったら、画像を一枚張り付けるだけが理想のはず。
が、そんな手法はしてないし、これからもすることはない、
なぜならばそれがWebではないから。
▼クロスブラウザー対策
あらゆる対象に同じUXを提供する。はNG
→Webは本来は「確実に情報を伝える」ことが目的
▼本来のWebとは
・非メディア依存
→HTMLはパソコンのために考えられていたが、現在はTVやスマートフォンなど、
ディスプレイがあるものはWebにつながっている。
-ビジュアル・ブラウザ
-支援技術(Assistive Technology)
・スクリーンリーダーなど
-検索エンジンのロボット
・リフローが前提
→ブラウザ幅を変形すると、それにあわせて文字も自動的に可変すること、
可変してくれるから読むことができる。
-スクリーン・サイズに応じて変形自在
-デメリットではなく大きなメリット
※紙媒体ではできなかったこと。
※見た目は崩れるかもしれないが、情報を正しく伝えることができる、
それがWebのすごいところ。
・マルチデバイス
-PC、スマートフォン、テレビなど。
■同じUXは美徳なのか? 違いは悪徳?
・紙の世界ではNGだけど、Webだとすばらしいこと。
・Progressive Enhancement それは違いを受け入れること
・Web業界のまずかったところは、クライアントへ啓蒙を怠っていたこと。
Webの利点をクライアントに正しく伝えるようなコミニュケーションをしていくべき。
■開発アプローチ
・あらゆるユーザーエージェントが少なくとも、情報だけは得られるようにする。
・状況によってはProgressive Enhancementを実現できないこともある。
■用語の整理
▼開発アプローチ
-Regressive Enhancement
-Graceful Degradation
-Progressive Enhancement
▼手段
-Fallback
▼特性表現
-Unobtrusive Scripting
■Unobtrusive Scripting
・JSは控えめにつつましく
・JSが機能することを前提としない
-JSをオ?%
コメント