SHOEISHA iD

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

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

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

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


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

 2011年8月16日の深夜、Mozilla JapanによりWebアプリケーション「Firefoxの灯(ともしび)」が公開されました。この連載では、アプリケーションに採用されているウェブの最新技術をテーマに、具体的なソースコードなどを交えて解説していきます。

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

はじめに

 『Firefoxの灯(ともしび)』は、Firefoxのダウンロード状況をほぼリアルタイムに視覚化するWebアプリケーションです。従来、文字情報でしかなかったアクセス情報を視覚化することにより、文字情報だけでは伝えることが難しかった臨場感や雰囲気を感じること ― 「感じるダウンロード」をテーマに制作しています。

 Firefoxの灯は、2007年のMozilla 24で初めて公開されました。Mozilla 24とは、世界規模で展開するMozillaの活動とその永続性を表したイベントで、24時間ノンストップでMozillaに関連するさまざまなプログラムが行われており、そのプログラムの1つとしてFirefoxの灯を提案しました。この時は、Mozilla 24の特設サイトを閲覧している人々のアクセスから大まかな閲覧場所を取得し、世界地図上の該当地点に灯を表示して、アクセス状況を視覚化しました。オンラインで活発な国がより強く光り、世界の夜景を空から見ているような光景が広がっていました。

 その後、Firefox 3の公開に伴い、Firefoxのダウンロード状況を視覚化、また日本に特化した形でFirefox 3の灯を公開しました。Firefox 3公開当時は、その光だけで日本の輪郭が浮き上がるほどにさまざまな場所で多数のダウンロードがされていることがわかりました。

 今回公開するWebアプリケーションFirefoxの灯は、Firefox 3の灯の拡張版として位置づけられ、現在における最新のウェブ標準技術、Firefoxで先行実装された技術、またその技術で可能となったアニメーションやサウンドなどの表現によって成り立っています。この連載では、Firefoxの灯リニューアルに伴って、アプリケーションで利用している技術的な側面を中心に沿え、解説していく予定です。

Firefoxの灯の持つ機能

 まず、具体的な技術の説明に入る前に、Firefoxの灯ではどこにどのような技術が使われているかを、機能紹介をしながら簡単に説明していきます。

俯瞰ビュー

 次の画像が、本アプリケーションのメイン画面となります。

図1. 俯瞰ビュー(ズームアウト)
図1. 俯瞰ビュー(ズームアウト)

 この画面では、Firefoxのダウンロード状況を視覚化します。画面中央には日本地図を配置し、ダウンロードを行った際のアクセス情報からユーザーのIPアドレスを取得して大まかな位置情報を得たのち、地図上の座標系にマッピングされ、灯として表示します。色の付いた大きな灯は、直近約15秒以内にダウンロードがあったことを示します。灯の色もIPアドレスに依存し、同じIPからダウンロードした場合は同じ色の灯が出現するはずです。その後、灯は小さな白い光となって、しばらくの間瞬いています。

 日本全体でのダウンロード数を知りたい時には、地図上にマウスオーバすることで左上に大きく表示されます。技術的には、日本地図にはSVGやSVG Filterを採用しています。灯の表示はProcessing.js(Canvas)とSVGの混合で描画されています。

図2. 日本全体のダウンロード数
図2. 日本全体のダウンロード数

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
ウェブの最新技術が魅せる「Firefoxの灯」連載記事一覧

もっと読む

この記事の著者

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

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

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

Mozilla Japan(Mozilla Japan)

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6087 2011/08/18 17:29

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング