SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

【デブサミ2012】セッションレポート

【デブサミ2012】16-D-3 レポート
HTML5が抱える課題~Yahoo! JAPANの導入事例と今後の戦略

  • X ポスト
  • このエントリーをはてなブックマークに追加

スマートフォンの特性を生かすためのHTML5適用

 Yahoo! JAPANがスマートフォン向けに提供している各種コンテンツの内、現時点でHTML5に対応しているのは「Yahoo! JAPAN トップ」「Yahoo!検索」「Yahoo! Japan」の3タイプのものだ。Yahoo! JAPAN トップの画面デザインに関しては、これまで何度かに渡ってユーザーの使い勝手を高めるための改善が積み重ねられてきたが、2012年2月8日に行われた最新のリニューアルでは表示速度の改善を最優先課題とし、そのためにデザインも大幅に変更されている。リニューアル前と比べ、トップ画面の表示にかかる時間を約3分の1にまで短縮したという。

 では、Yahoo! JAPANでは具体的にどのようなポイントに気を付けてトップ画面を設計しているのだろうか。是井氏は3つのポイントを挙げる。

 「既知のデザインを積極的に利用するデバイスの特性をよく知る。そして、HTML5についてよく知る。どれも当たり前のことだが、こうした基本的なポイントに立ち返ってUIの設計に取り組んだ」

 「既知のデザインの利用」とは、それぞれのデバイスにもともと備わっているUIの見た目や操作感を取り入れることで、ユーザーが直感的に操作できるよう配慮することを指す。

 また「デバイスの特性を知る」とは、スマートフォンのデバイスとしての特性を考慮したデザインを行うということだ。例えば、スマートフォンの画面に一度に表示できる情報量は限られているため、画面サイズはもちろんのこと、場合によってはコンテンツの量も思い切って削る。また、スマートフォンならではのタッチ操作が快適に行えるよう、画面上の各部品に対応するタッチ領域の大きさを決め、それをもとに各部品の配置や行間などを割り出している。

 そして「HTML5についてよく知る」こと。上で挙げたようなUIの要件を満たすためには、HTML5のどの機能が有効かを十分に検討する必要がある。Yahoo! JAPANでは主に、「Local Storage」「Touch Events」「History API」「GeoLocation API」の機能を活用している。また併せて、CSS3の「CSS Transform」と「CSS Gradient」の機能も使っている。

 例えばLocal Storageは、各種の履歴情報や設定情報を保存するために利用している。Local Storageの仕様では文字列データしか保存できないため、構造化データはJSON化した上で保存している。また、画像データなどバイナリデータもBase64化した上で、キャッシュデータとして自動的に保存する仕組みを作り込んでいる。またCSS TransformやCSS Gradientを使うことで、スマートフォンが備える描画機能をフル活用した滑らかな画面表示も実現しているという。

 ちなみに「Yahoo!ニュース」「Yahoo!ショッピング」「GyaO!」といった各種サービスの画面は、トップ画面とは異なる設計が施されている。これら各サービスは、その土台となる共通テンプレートシステムを適用し、その上に各サービス特有の機能を載せる形で実装されている。

 このテンプレートは、HTML5で実装された基本テンプレートと、モジュール動作や機種別差異の吸収のためのJavaScriptコード、そして共通ヘッダや検索ボックスなどのモジュールパーツにより構成される。HTML5の技術が採用されているのは、この中の主に基本テンプレートの部分であり、HTML5マークアップとWeb Storage、そしてCSS3が使われている。また、各サービス特有の機能を実装するために、GeoLocation APIやCanvas、Offline Web Applicationなどの機能も使われている。

2月8日に行われた最新のリニューアル画面
2月8日に行われた最新のリニューアル画面

次のページ
独自の開発フレームワークを採用

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
【デブサミ2012】セッションレポート連載記事一覧

もっと読む

この記事の著者

吉村 哲樹(ヨシムラ テツキ)

早稲田大学政治経済学部卒業後、メーカー系システムインテグレーターにてソフトウェア開発に従事。その後、外資系ソフトウェアベンダーでコンサルタント、IT系Webメディアで編集者を務めた後、現在はフリーライターとして活動中。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6439 2012/03/12 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング