Yahoo! JAPANのスマホ向けHTML5対応とは

　現時点におけるYahoo! JAPANのサービスのHTML5対応は、スマートフォン／スマートデバイスが先行している。その理由としては、PCに比べてWebブラウザが限定されていることからSLA（Service Level Agreement）が維持しやすいことや、下位互換性を考慮する必要性があまりないこと、HTML5の機能を活用できる要件が整っていることなどが挙げられた。もちろん、スマートフォンの爆発的な普及もそれを後押ししている。

　講演では、特に「Yahoo! JAPANトップ」「Yahoo! JAPANサービス」における2つのHTML5対応についての紹介があった。まず、Yahoo! JAPANトップにおいては、下記のポイントに留意してUIを設計しているという。

• 親しまれた既知のデザインを再利用することで直感的に使えるようにする
• デバイスの特性を知る
  • 画面サイズを考慮
• ボタン文言を統一
• タッチジェスチャーを前提にUI配置を考える
• HTML5の主要なテクノロジについて理解しておく
  • できること、できないことを把握

　現在、Yahoo! JAPANトップで利用されている主要なHTML5の機能とそのポイントとしては、次のようなものが挙げられた。共通機能などは「YUI App Framework」として共有・集約しているとのことだ。

• localStorage（ローカルストレージ）
  • 各種履歴や設定の保持に使用
• 構造化データの保持にはJSONを使う
• バイナリデータはBase64化
• タッチイベント
• History API
  • 「戻る」ボタンを利用できる
• サポートしないプラットフォーム向けにはYUI App Frameworkで対応
• GeoLocation API
  • 約24時間ごとに位置情報取得の警告を行う
  • APIで緯度経度から住所に変換
• CSS3
  • CSS Transformで複雑な描画処理をスムーズに行える
  • CSS Gradientで高解像度ディスプレイでも滑らかな表示が可能

　Yahoo! JAPANサービスでは、多数のサービスに対する開発を支援するため、共通の開発支援システムやテンプレートシステムが用意されており、その中でHTML5対応をはじめとするスマートフォン向けのデザインや開発のサポートを進めているという。ここでは、HTML5のマークアップやWeb Storage、CSS3、GeoLocation API、Canvas、オフライン機能などが活用されているとのこと。

　スマートフォン向けの開発では、特に全体として品質を保ちつつ、最新の機能への対応を進めていく必要がある。そこで、スマートフォンの特性を考慮したUI規定の明確化や、実装のためのガイドラインの明確化を行い、全体の品質の確保に務めている。

　また実装に対しては、スニペットなどのツールによるサポートや、実装パーツの共有、社内ポータルによるデバイス情報の共有などによって、開発の効率化を進めている。それに加えて、HTML5をはじめとする新しい技術を使った試作と研究を積極的に行っているとのこと。