Swapskills HTML5を使うためのプログレッシブ・エンハンスメント 2011年7月13日(木)

7月13日(木)にアップルストア銀座で行われた
「Swapskills HTML5を使うためのプログレッシブ・エンハンスメント」に参加してきました。

Swapskills「HTML5を使うためのプログレッシブ・エンハンスメント」

・Swapskills @アップルストア銀座
・2011年07月13日
・有限会社 futomi 代表取締役 羽田野太巳さん

R0031213


■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をオ?%

月別 アーカイブ