HTML5とか勉強会 第16回 に行ってきた

HTML5Study HTML5 Event

HTML5とか勉強会 第16回 に行ってきた。毎回面白いし、勉強になる。
今回は NTTコミュニケーション が会場を提供してくれていた。かなり豪華なケータリングがあって、ビールもあって、がっつり食べさせていただいた。しかもかなり美味しかった。嬉しい、嬉しい。スタッフの方や、会場を提供してくださった方に感謝する。

発表はこんな感じ。

ライトニングトークはこんな感じ。

  • Developing for TV: その１
    Opera ダニエルさん [twitter:@ourmaninjapan]
  • Canvasでなぞる
    若狭さん [twitter:@wks]
  • 生まれ落ちる世界
    あんどうさん [twitter:@technohippy]
  • atnd.orgに下書き保存とプレビューを追加するATND Draft（仮）
    木村さん [twitter:@a_kimura]
  • ローカルへのデータ保存
    一好さん [twitter:@finitefield]

ustはこちら。

toggetterはこちら。

Progressive Enhancement 羽田野さん [twitter:@futomi]

第16回HTML5とか勉強会 Progressive Enhancement « HTML5.JP ブログ
資料はこちら。

ウェブとは
  • 目的は情報を伝えること
    • 同じUXを提供するだけなら画像でもいいじゃないか
    • クロスブラウザ対策 これも同じUXを伝えることが目的。でも本当は確実に情報を伝える事が大事！
  • 本来は
    • 非メディア依存
    • リフローが前提
    • 一つのコードで様々な対応 one code multi use
  • 同じUXは美徳？
  • 違いは悪徳？
  • わたしは、かしましい美徳よりは、静かな悪徳を好む アインシュタイン
Progressive Enhancement
  • それは違いを受け入れること
    • CSS JS オフでも見れなくてはならない
  • さまざまな用語
    • Graceful Degradation
    • Fallback
    • Regressive Enhancement
    • Unobtrusive Scripting
    • Progressive Enhancement
Unobtrusive Scripting
  • jsは控えめにつつましく
  • 良くない例
    • aタグの href で history.back() jsオフだと戻らない
    • js off は トップ(index)へとか href="./index.html"
    • js が使えればinnerHTMLを書き換えて トップへ を 戻る にする。リンクを書き換える。
    • js で動的にリンクを作るのは駄目。ちゃんとリンクをマークアップしておく。
    • js で表示のみ切り替えるとか
  • 目的は情報を的確に伝えること
    • マークアップだけで動くものを作る
    • cssでデザインをまとめる
    • jsで動きをだす
Regressive Enhancement
  • 気合い！で、いろいろなデバイスや古いブラウザで同じように表示する。
  • jQuery Mobileとかはまさにそう
  • video.jsとかも
Graceful Degradation
  • fail safe / fault tolerant
  • 車がないなら歩く。代替手段を用意する。
    • 少なくとも最低限の機能を提供
    • HTMLのフォールバック機能
  • canvasの中身はフォールバック要素
    • でもCanvasに対応していて js off だとなにも出ない(限界)

Progressive Enhancement

  • 最小限の機能を用意
    • まずはマークアップ
    • 先にテーブルを書いてjsで入れ替える→必ず表示される
  • UAの能力によって機能を拡張
  • Canvas
まとめ

望んでいたものを手に入れたと思い込んでいるときほど、願望から遠くはなれていることはない
ゲーテ

1オンスの思慮分別は、1ポンドの英知に値する。
イギリスのことわざ

僕のまとめ

Progressive Enhancementという言葉は、聞いたことはあったが理解していなかった。
アクセシビリティというのが、どういう事なのかを具体的に知ることができた。また具体的な対応の一例を知ることができた。
スライドも話もわかりやすく、そして面白かった。興味があれば、ぜひ ust を。興味がなくても、ちょっと見てみるといいかもしれない。

My Web, Your Web and the One Web 芦村さん [twitter:@KazAshi]

資料はこちら。

いろんなデバイス、技術がある。
HTML5にもいろいろな機能がある。

でも課題もある。
でも可能性もある。
たとえば様々な入力方法(マルチモーダル)
Webアクセシビリティがより重要になる

  • 相互運用
  • 多言語
  • 入出力

自分にとっての当たり前は、他人にとっては違うかもしれない。

まとめ

Webにアクセスするデバイスはどんどん増えていくし、Webにアクセスするひとたちもどんどん増えていく。
自分が60歳くらいになったときには、どんなデバイスがあって、どんなふうにアクセスしているのか想像もつかない。
だけどアクセシビリティがよくなって、よりわかりやすいWebになっているといいな、と思う。

ライトニングトーク

Developing for TV

資料はこちら。
ブラウザカンファレンスでもダニエルさんの発表を聞いたけど、日本語もプレゼンもうまくて面白い。
そしてmedia queryって初めて知った。

@media tv, 
(width: 1920px) and (height: 1080px), 
(width: 1280px) and (height: 720px) {
    body {
        font-size: 2em;
    }
}
Canvasでなぞる

面白い。第一回受賞予定作も面白かった。

生まれ落ちる世界

こういうタイプのコードを一度書いてみたいと思いつつ何もしていない…。

atnd.orgに下書き保存とプレビューを追加するATND Draft（仮）

資料はこちら。

第0回 HTML5プログラミング&クリエイティブ・コンテスト 「ATND Draft 」
もともとはhackathonで作ったとのこと。1日では作り終わらなかったそうだが、それにしてもすごいな。

ローカルへのデータ保存

JavaのOSSを利用するのにGWTを使ってJSとしてしまうって、けっこう良い手段かもしれない。

まとめ

アクセシビリティって、いろいろな対応があるなと感じた。しっかり対応するのは難しいけど、最初から意識するだけで、ある程度は変わるのではないかと思う。
今回もとても刺激的で面白かった。美味しいご飯もいただいて、満腹で帰った。次回もぜひ参加したい。

これまでに参加したときのエントリ

[HTML5Study]記事一覧 - techlog からどうぞ。