OSC 京都 2010 ではてなのセッションに参加した

2010-07-10

■[event] OSC 京都 2010 ではてなのセッションに参加した

id:nanto_vi さんの「今から使えるHTML5 ～はてなの場合～」を目的に参加してきた。

メモははてなのセッションのみ。

以下メモ。

はてなの場合

HTML5 の成り立ち
- 後方互換性の配慮
- 今まであったものを仕様として明文化

はてなブックマーク

canvas 要素
- はてなブックマークプラスでのグラフ描画
- Flash or Canvas or サーバ側での画像生成の選択があった
- 社内ツールでの使用実績があった(jQuery, Flot(ライブラリ))
- グラフ上でのアイコン表示が簡単
- ExCanvas で IE 対応(クロスブラウザ対応)
カスタムデータ属性
- data- から始まる名前の属性
- Web サイト独自のデータを記述
- 第三者(検索エンジン等)がカスタムデータ属性を特定の意味に解釈することはない
- 本当にその値の使い道を知っているのはサイト作成者のみ
- はてブでは Twitter の連携機能(クリック数表示)に使用している
- クリック数はページ描画後にサーバに問い合わせに行っている
- わざわざ data- を使わなくても id にユーザ名は埋め込まれていた
  - ページ毎に id を取得する方法が異なった
  - 毎回実装するのは手間なので、統一したかった
tabindex 属性
- HTML4 ではリンク、フォームコントロール要素のみつけれた
- HTML5 ではフォーカス可能かを指定する属性として、全要素に適応可能
- 元々は IE の独自拡張だったが、各ブラウザが真似をしたので、HTML5 が追従
- はてブのチュートリアル機能に実装
ローカルストレージ
- クライアントにキーと値を保存
- スマートフォンビューでの設定記憶で利用
- Cookie と違いサーバで保存しない
- Cookie より大容量

はてなモノリス

time 要素
- 日時を表す
- datetime 属性に機械的に認識可能な
- ○○分前と出すのをに使用している
- サーバ側でキャッシュを最大限利用したいため

うごメモはてな

time 要素
- 国際化による時差も考慮するため
placeholder 要素
- 入力フォームにヒントを表示する
- JavaScript を使用するのは placeholder 属性が使えない場合のみ使用
- 海外展開対応
  - 地域・言語情報をカスタムデータ属性で保持
  - JavaScript(静的ファイル)より HTML(テンプレートで動的に生成)にデータを埋め込む方が楽

はてなここ

携帯向け位置情報サービス
- Geolocation API を使用
- 利用できなければ、Google Gears、手動での地名入力にフォールバック

HTML5 を利用するにあたって

はてなでは XHTML1.0 を利用
- エンジニアとデザイナを足並みをそろえるため
- 新技術の利用を制限するものではない
- 社内ツールは HTML5 のセクション関連要素などを積極的に利用している
  - ブラウザを限定できるから

HTML5 を利用して問題になった事例

SVG, Canvas を利用
- 配色をすぐに変更できた
- 拡大時にも滑らかに表示
良い面も出たが、保守性の低さが問題に
- 文章類が整備されておらず、誰でもメンテナンス可能でない
IE8 は互換表示機能が問題
- IE8 の互換リストにはてなのドメインがリストされているので、IE7 として表示されてしまう
- MS にリストを外してもらう事を依頼中