HTML5を使ってみる #TechLunch

2012/05/30(水) @ Livesense TechLunch
発表者：島田 喜裕

Transcript

1. HTML5を 使ってみる
2. モダンブラウザ対応 HTML5をサポートしているブラウザの普及は まだまだ。 ↓ よほどの理由がない限り、 HTML5をサポートする。 ↓ HTML5を使用する事は 時期尚早ということは ない。
3. 機能実装の方向性 開発アプローチ • Regressive Enhancement • Graceful Degradation • Progressive Enhancement
4. Regressive Enhancement 古いブラウザには、同等の機能をあらゆる手段を 使って気合いでエミュレート
5. Progressive Enhancement • 必要最小限の機能を用意。UAの能力に応じて 機能を拡張。 • 機能実装のスタイルとして、レガシーブラウザを 含む、すべてのブラウザに対し最低限動作する 機能を実装し、より高水準のモダンブラウザに は、よりリッチな機能を提供するような実装。 • 一般的なブラウザを基準としてデザインするけ ど、新しいブラウザでは積極的に進歩したデザ インを取り入れていく方法。
6. Graceful Degradation • デグレードして代替え機能を提供。 • 実装する機能をモダンブラウザーを基本水準と し、古いレガシーブラウザーに対しても、同等で はないものの、Polyfill (ポリフィル) を使うなどし て、類似の機能を提供するような実装。 • 新しいブラウザを基準としてデザインし、古いブ ラウザではデザインのレベルを下げる方法。
7. 機能実装の方向性 • 三者択一ではない。 • いずれも目的は同じ。すべての対象に必要な情報 を確実に提供。 • どこまで対応するか。対象ユーザーとコストとの兼 ね合い。
8. 機能実装の方向性 • これまではRegressive Enhancementアプロー チで、同じ体験を実現するために、多大な苦労 を費やしてきた。 • HTML5 をはじめとした Open Web の流れが加 速する今日、Regressive Enhancement というア プローチは、必ずしも理にかなった選択といえな い。 • Progressive Enhancement の考え方が重要。 例）Yahoo!JAPANのようにIE6で閲覧すると警告。
9. 実装 HTML5からinput要素に追加された新属性から以 下を試す。 • autofocus・・・指定した入力欄にカーソルを自動 的にフォーカス • required・・・指定された入力項目が入力必須と なる • placeholder・・・入力欄に初期値として表示 Ex.): 転職会議トップ
10. 感想 ブラウザ毎に挙動が異なる点が若干気に なったが非常に便利。
11. Web Storage HTML5では、クッキーに代わるデータ保存の仕組 みとして、「Web Storage」と呼ばれる機能を利用で きる。 Web Storageは、ブラウザ側でKey-Value型で データを保存する機能のことで、現在のインター ネットを取り囲む環境に対応した「クッキーの後継 技術」ともいえる。
12. Web Storage • Web StorageとCookieの機能の差異 • 主要ブラウザはほぼ実装されている。 Cookie Web Strage 保存容量 4KB 5MB データの有効期限 あり なし セキュリティ サーバにデータを自動送 信 自動で送信しない IE Firefox Safari Chrome Opera Android iPhone 8～ 3.5～ 4.0～ 4.0～ 10.5～ 2.0～ 2.0～
13. 2種類のWeb Storage • sessionStorage ウィンドウごとのセッションで有効なストレージ。ウィ ンドウ／タブ間では異なるsessionStorageとなり、 共有はできない。 • localStorage Webアプリケーション利用者のブラウザ内に永続 的にデータを保存するストレージ。 「ドメイン:ポート番号」の「オリジン」単位で共有。
14. The Storage interface • length … 保存されているデータの数を返す • key(n) … 保存されているn番目のkeyを返す • getItem(key) … keyに対応するvalueを取得す る • setItem(key, value)… keyとvalueのペアでデー タを保存する • removeItem(key) … keyに対応するvalueを削 除する • clear() … データをすべてクリアする
15. 実装 要件 • sessionStorageが使えない場合には何もしな い。 • localStorage→cookieを使う。 • cookie、sessionStorage、localStorageを単独で も使える。 Ex.) • 相談板 • オススメ求人一覧
16. 感想 • やっぱり便利。使いやすい。 • 利用するシーンによってはCookieは必要 • どこで、どうStorageを利用しているかを管理す る必要があるかも
17. 次回