CodeZine(コードジン)

特集ページ一覧

「Firefoxの灯(ともしび)」技術の全貌
~ ウェブの最新技術が魅せる「Firefoxの灯」(1)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/08/18 17:05

目次

鳥瞰ビュー

 先ほどの全体図の中から、興味のある地域の詳細な状況を見ることができます。全国地図上で見たい場所をクリックすると、クリックした位置を中心として、アニメーションを伴いながらズームインします。

図3. 鳥瞰ビュー(ズームイン)
図3. 鳥瞰ビュー(ズームイン)

 全国地図では真上から俯瞰したような2次元ビューであるのに対し、ズームインした時には鳥瞰図のような2.5次元ビューとして表示され、違った視点で状況を眺めることができます。2.5次元ビューでは、灯の表現もやや立体的な雰囲気を持つようにしています。鳥瞰ビューにおいては、ダウンロード数も県ごとにまとめられており、知りたい県の上にマウスオーバすることで、日本全国の時と同様に左上に大きく表示されます。

 また、県の領域のストロークもそれまでより太く目立つように設定されており、マウスが県から外れると徐々にストロークが細くなってもとの細さに戻ります。ズームによる表示の変形やアニメーションは、それぞれCSS TransformおよびCSS Transitionによって行われています。また、マウスオーバはSVGドキュメントが発生するイベントを取得しており、Canvas+SVG+JavaScriptの連携がここでとられています。

図4. 各県のダウンロード数
図4. 各県のダウンロード数

ダウンロード数の一覧表示

 俯瞰ビュー、鳥瞰ビューに関わらず、日本全体や各県のダウンロード数は一覧として常に画面右に表示されます。これまでの累積を確認でき、ダウンロードの全体的な状況を把握する1つの要素となります。この一覧は、Mac OS XにおけるDockのように、マウスオーバした場所にある数値と名前ラベルを大きくさせることで、閲覧性を向上させようと試みています。なお、一覧は全てJavaScriptによって制御されています。

図5. ダウンロード数一覧
図5. ダウンロード数一覧

サウンド

 今回は、ダウンロード状況を視覚だけではなく聴覚的にも提示しようと試みました。各ダウンロードに対して音が割り当てられてられ、音高(ピッチ)、音長(デュレーション)、音色(時間エンベロープ)を少しずつ変えながら音を生成します。音の再生には音声ファイルを一切使っておらず、Firefoxで先行実装されたAudio Data APIを利用しています。そのため、その場に応じた音の生成が可能となり、より繊細な表現が実現できるようになりました。また、音声ファイルを利用していないことから、アプリケーション全体のサイズを極端に小さくすることが可能になります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ウェブの最新技術が魅せる「Firefoxの灯」

著者プロフィール

  • 赤塚 大典(アカツカ ダイスケ)

    1976年東京生まれ。都立航空工業高等専門学校を卒業後、4輪レーサーを目指すも断念。蕎麦屋、溶接屋を経てプログラマになる。プログラマとしては、京阪奈地区の研究所に7年従事し、その間、2003年IPA未踏ユース、2006年IPA未踏ソフトウェア創造事業に採択される。 未踏において、Firefoxの拡...

  • Mozilla Japan(Mozilla Japan)

    一般社団法人 Mozilla Japan http://mozilla.jp/

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5