CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Deguchi

第15回は残念ながら漏れてしまった為、3ヶ月ぶりの参加です。

第16回のテーマは「誰もが使えるWebサービスを開発するためには、どのようなことを考えるべきか」

以下、アジェンダ。

  • 「Progressive Enhancement」~ すべての人に確実に情報を届けるために ~ 羽田野氏 @futomi
  • 「My Web, Your Web and the One Web」 W3C/慶応 芦村氏 @KazAshi
  • 「LT:Canvasでなぞる」株式会社コネクティ 若狭正生氏 @wks
  • 「LT:生まれ落ちる世界」シーサー株式会社 あんどうやすし氏 @technohippy
  • 「LT:atnd.orgに下書き保存とプレビューを追加するATND Draft(仮)」株式会社co-meeting 木村 篤彦氏 @a_kimura
  • 「LT:ローカルへのデータ保存」株式会社リマージュアーツ 一好俊也 (かずよし としや)氏 @finitefield
  • 「LT:Developing for TV: その1」 Opera Software ダニエル・デイビス氏 @ourmaninjapan

内容はHTML5がメインというよりは、Webサービス開発・Webサイト構築する際に気を付けることと、「第0回HTML5プログラミング・クリエイティブコンテスト」の優秀作品のLTという感じです。

イベントの詳細はGoogle ドキュメントから

以下、内容を私なりに解釈して、まとめます。

「Progressive Enhancement」~ すべての人に確実に情報を届けるために ~

HTML5関連の書籍をいくつも寄稿されている羽田野太巳氏のセッション。
※一部羽田野氏の資料から抜粋させて頂きました。

「Progressive Enhancement(プログレッシブエンハンスメント)」とは、Webサイトの開発理念の一つ。
他には「Regressive Enhancement(リグレッシブエンハンスメント)」、「Graceful Degradation(グレースフルデグレデーション)」という考え方があります。

Progressive Enhancement, Regressive Enhancement, Graceful Degradationの関係性

Progressive Enhancement(プログレッシブエンハンスメント)とは

Progressive Enhancementとは、Webサイトを閲覧している全てのユーザーに最低限の情報を伝え、高機能なブラウザを使っているユーザーには、よりリッチな体験を提供するという開発理念です。

例えば、フィーチャーフォン(またはガラケー)と呼ばれる、従来の携帯電話のユーザーにも、iPhoneなどのスマートフォンにも、PCユーザーにも同じHTMLを出力。
iPhoneユーザーには、iPhoneユーザー用にCSSを調整。
PCユーザーにはPCユーザー用に大画面に表示できるようにCSSを調整。かつ、JavaScriptでリッチなユーザーエクスペリエンスを提供する。

  1. まずはHTMLをマークアップし、最低限必要な情報を提供出来るようにする
  2. 次にCSSで見た目を調整
  3. さらにJavaScriptでよりリッチに

という具合です。

HTML, CSS, JavaScriptを完全に分離する

中々このアプローチで開発、制作している人は少ないのではないでしょうか。

その他の開発理念

逆に、我々が良く行うアプローチである
全てのブラウザが同じ見た目になるように出来る限り調整して
どうしても難しい場合は代替案を使うという開発理念は、Regressive Enhancementです。
また、高性能ブラウザから、スマートフォン、フィーチャーフォンと徐々に機能を減らしていくという開発理念が、Graceful Degradationです。
どちらも良く使用すると思います。

これは、IE6でも、IE8でも、Firefoxでも、Chromeでも、macのSafariでも、同じ見た目を要求されることが多い為です。

今後のWeb開発、制作について

「そのサービス、サイトの目的は何か?」を考えると、Web開発、制作時にどの開発理念が適しているかが見えてきます。

デザインを最重要視し、費用を掛けて、とてもリッチな見た目を作るWebサイトの場合は
全てのユーザーに最低限の情報が与えられない可能性がありますが「Regressive Enhancement」や「Graceful Degradation」が良いでしょう。見た目が大事なので。
とはいえ、そういう場合でも何とか情報を与えられるように調整をすることが多いですよね。

逆にニュースや情報サイトについては
全てのユーザーに最低限の情報を与える必要がありますので「Progressive Enhancement」が良さそうです。
徐々にリッチな体験を提供していきます。

本来のウェブとは

今後はHTML5によって
ある程度統一されたユーザーエクスペリエンスを提供できるようになりますので
従来の「Regressive Enhancement」や「Graceful Degradation」よりも
「Progressive Enhancement」を選択する方がより良いコンテンツを提供出来るようになるのではないかと思います。

イベントのスライドは羽田野氏が公開されていますので
興味がある方は一度見てみてはいかがでしょうか。
http://www.html5.jp/blog/?p=503

My Web, Your Web and the One Web

W3C/慶応 芦村氏のセッション。

HTML5によって、パソコン、テレビやエアコン、携帯電話など、様々な機器が一つに繋がるというお話から
「私にとって当たり前なことは、他の人にとっては疑問かもしれない」というお話。

LT

「第0回HTML5プログラミング・クリエイティブコンテスト」の優秀作品についてのLTです。

ATNDの下書きが出来るChrome Extension「ATND Draft」は、中々実用的です。
以前、別のイベントでも紹介されていました。
「Canvasでなぞる」は、オーっと歓声が上がる程。

番外編

実は、HTML5とか勉強会の前日に、SocialAppStudy!というイベントに参加していました。

ゆーすけべーこと、和田裕介氏主催のイベント

mixi、GREE、Mobage、Facebookなど、プラットフォーム上で動くアプリケーション(ソーシャルアプリ)の企画に関する勉強会です。
こちらでは、面白法人カヤックさんのソーシャルゲーム開発秘話など、ソーシャルゲームの企画関係のセッションが主でした。
また、株式会社トヨタマーケティングジャパン主催のTOYOTA SOCIAL APP AWORDについてのご紹介もありました。(応募締め切りは2011年5月13日(金))
ちょっとした裏話も多くて、とても楽しいイベントでしたので紹介しておきます。

Subscribe:
pagetop