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

event

id:nanto_vi さんの「今から使えるHTML5 〜はてなの場合〜」 を目的に参加してきた。
メモははてなのセッションのみ。

以下メモ。

はてなの場合

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

はてなブックマーク

  • canvas 要素
  • カスタムデータ属性
    • 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 にリストを外してもらう事を依頼中

まとめ

  • チーム内での足並みがそろえられ、その機能がフォールバックによる目的が達せられる場合に使用
  • はてな内でチーム内のノウハウを全社で共有しようとする動きがある


こういう生の事例を聞けるのは素晴らしい。
自分の中では HTML5(主に API 関連) が熱いので、参加して良かった。


一つ気になったのはチーム内のノウハウの共有方法ってどうやってるんだろう。