Google Analytics をデスクトップへ移植
by Nicolas Lierman
今月号の記事
Analytics Reporting Suiteは、Google Analytics をデスクトップ上で利用できるようにする AIR アプリケーションです（図1）。Google Analytics は、Webブラウザベースのサイト解析ツールで、サイト訪問者のアクセス経由先やサイト利用状況などを調べることができます。この記事では、オンラインサービスである Google Analytics を AIR アプリケーションへと移植した経緯、そして Analytics Reporting Suite の今後の開発予定を紹介します。
図1：Analytics Reporting Suite の画面
コンセプトからプロダクトへ
多くの素晴らしいアイデアがそうであるように、Analytics Reporting Suite は販売を目的としたプロダクトではありませんでしたし、このプロダクトのアイデア自体は Adobe AIR が登場する以前から考えていたものなので、このような AIR アプリケーションへと発展するとは思ってもいませんでした。開発当初、私はインタラクティブ会社で働いており、その会社は多くのクライアントを抱えていました。クライアントのサイトの効果測定には Google Analytics を利用しており、私も少なからず解析作業に携わっていました。Google Analytics はオンラインサービスであり、Web インタフェイスでもって多くのクライアントのプロファイルを管理するのは結構煩わしく、解析部門の生産効率をなんとか向上させたいと思っていたのです。
開発の下準備の調査をしていると、すぐに壁にぶつかりました。Google のサービスの多くはデータ API を公開しているのですが、Google Analytics の場合は公開されていません。しかし諦めたくはなかったので、自分で ActionScript データ API を開発することにしました。Web インタフェイスを操作しながらその仕様を記録し、すべての HTTP リクエストをチェックしていくうちに Google Analytics の仕組みを把握できるようになり、思いのほか早く ActionScript データ API を完成させることができたのです。
次に考えたのは、このデータ API で取得したデータをどのようにユーザに提供するかです。Web アプリケーションにするべきか、それともデスクトップアプリケーションにするべきか。データのビジュアライズや管理にはどの技術を使うべきか…。
その答えが出るまでにはかなり苦労しました。まず選択肢として考えたのは Adobe Flex です。Flex はユーザインタフェイス作成に最適なツールで、しかもチャートコンポーネントはデータをビジュアライズする上で強力な機能となります。しかし、Web ブラウザ上で稼働するアプリケーションでは、やりたいことを実現するには物足りませんでした。
Analytics Reporting Suite のアルファバージョンとしては、FlashやFlex のラッパーである MDM Zinc を使って、デスクトップ機能を実装させてみました。一応それなりのものを完成させることができましたが、いくつかの問題点もあり、それ以上発展させるのが難しいことがわかりました。
ちょうど行き詰まっていた頃に、アドビから Web とデスクトップのギャップを埋めるマルチOSランタイムとして Adobe AIR が発表されたのです。このニュースを聞いた時はとてもうれしかったです。特に、従来のデスクトップラッパーでは見られない以下の特徴には興味を引かれました。
- 配布が簡単：AIR の機能の中で最もクールな機能は？ と聞かれたら、迷わず「配布モデル」と答えます。インストールバッジを使ったシームレスなインストール環境は素晴らしく、実に素敵なユーザ体験です。
- クロスプラットフォームのサポート：Adobe AIR ではランタイムだけでなく開発環境もまさにクロスプラットフォームです。個人的には、アプリケーションが異なる OS で同じように動作するだけでは満足できませんでした。Adobe AIR では、開発者それぞれが好きな OS で開発でき、作られたアプリケーションは異なる OS で動作します。
- Flex Builder のサポート：何年間も Flash で開発を行ってきましたが、一度 Flex に乗り換えて Flex Builder を使用すると Flash には戻れません。Flex Builder は、Eclipse エディタを元に設計されており、コード補完、コードリファクタリング、統合されたデバッガ、メモリプロファイラなど素晴らしい機能を持っています。
- 多くの技術をサポート：いろいろな技術がありますが、すべての環境ですべての技術が動作するわけではありません。それにある1つの技術だけで、魅力的なアプリケーションを作ることは非常に困難です。Adobe AIR では HTML や Flash をはじめ多くの技術をサポートしています。JavaScript や ActionScript をサポートし、Flex や HTML コンテンツを簡単に統合することができます。これは素晴らしいことです。
Adobe AIR が登場してくれたおかげで、頓挫しかけていた Analytics Reporting Suite の開発を進めることができました。Adobe AIR は、まさにパーフェクトなツールです。
役立つアプリケーションにする
アルファバージョンを作り、テスターからフィードバックをもらった後、私は自分の力のすべてをこのプロジェクトに注ぐことを決意しました。Adobe AIR に惚れ込み、Web 解析に引き込まれ、このプロダクトに関わっているのが本当に楽しくて仕方ありませんでした。
しかし、当時働いていた会社では、このプロジェクトに対する十分なサポートを得ることができず、他の仕事を犠牲にしなければなりませんでした。仕方なく会社を辞めて、ベルギーで急成長している Flash＆Flex プロダクション会社である Boulevart に移ることにしました。契約時にフルタイムで Analytics Reporting Suite 開発に取り組めるようにしてもらったのです。
私の哲学はシンプルで、Analytics Reporting Suite の開発においては2つのゴールを掲げました。
- 役に立つプロダクトを作成する：当たり前のことかもしれませんが、初期の頃にリリースされたAIRアプリケーションをみてください。それらの多くは見た目には素晴らしいものの、それほど役立つものではありません。毎日使うようなアプリケーションではないはずです。すでに専用の音楽プレーヤやインスタントメッセンジャーを使っているのに、わざわざ AIRアプリケーションとしても利用したい人がいるでしょうか？ AIRアプリケーションが続々と登場してくのはうれしいことですが、Adobe AIRが成功するには eBay Desktop のような、もっと役立つアプリケーションが必要です。
- フリーソフトにする。あるいはフリー版を作る：Google Analytics を成功へと導いている要因の1つに、フリーでありながらプロレベルの Web 解析サービスを提供しているところにあると思います。Google Analytics ユーザの少なくとも2割の人には Analytics Reporting Suite を利用してもらいたいと思っています。フリー版を作成し、今年の年末までにはその目標に達成したいところです。
素晴らしいテクノロジーである Adobe AIR と素晴らしいサービスである Google Analytics との融合は、まさに幸せ結婚のようなものです。できるだけ多くの人に両方のプラットフォームを体験してもらいたいと思っています。Analytics Reporting Suite が Web 解析プラットフォームとして Google Analytics を選ぶ理由となってくれるといいですし、また逆に、Google Analytics は非常に多くのユーザ数を抱えているので、彼らが Analytics Reporting Suite を通して Adobe AIR に興味をもってくれればうれしいです。
それはさておき、このプロジェクトではソフトウェア開発の視点においてもいくつかの目標を掲げていました。
Google Analytics をデスクトップへと移植する際にもっとも大きなチャレンジだったのは、もともとの Web インタフェイスをある程度維持しつつ、どのようにユーザ体験を向上させるかということです。何年も Google Analytics を利用している人々が、わざわざ新しいインタフェイスの操作方法を学ばなくてもデスクトップバージョンを利用できるようにしなければなりません。そのため、Analytics Reporting Suite のベータ版のインタフェイスでは、わずかの変更を行っただけです。たとえばタブ・インタフェイスがあります（図2）。タブをクリックするだけで、レポート間を素早く移動できるようになっています。
図2：タブを使って、レポート間を瞬時に移動可能
Google Analytics には100以上の基本レポートがあり、データを深く掘り下げたり区分けしたりしようとすると、その可能性はほとんど無限です。しかも、Google は定期的に新しいレポートタイプを追加したり、データモデルを変更しています。こうした状況に対応するには、アプリケーションを非常に柔軟な設計にしておく必要がありました。
また、各レポートごとにコーディングしたり、Google Analytics がアップデートされるたびにアプリケーションを改善して再配布するような事態は避けたかったということもあり、Analytics Reporting Suite では各レポートがダイナミックに生成されるように設計されています。図3は、Analytics Reporting Suite の仕組みを簡略化したものです。
図3：Analytics Reporting Suite の仕組み。各レポートはダイナミックに生成される
技術的なチャレンジ
多くのレポートではデータを表示する際に、Flex に標準で用意されているラインチャートやデータグリッド、そしてパイチャートといったデータビジュアライゼーション・コンポーネントを使用しています。ただ、データ表示の種類によっては、標準コンポーネントでは実現できず、カスタムコンポーネントを作る必要がありました。
たとえば、「Site Overlay」というコンポーネントを作りました。このコンポーネントを使えば、訪問者がページ内でクリックした箇所をビジュアライズできます。非常に複雑な仕組みとなっているのですが、Adobe AIR で開発を行えば1日で実現できます。デスクトップでも Web 技術を使えると、オンラインコンテンツと連動が容易にできるのです。
Site Overlay では、実際のサイトをコンポーネントに読み込み、ページ内のリンク箇所にインタラクティブ要素を表示することができます。Adobe AIR ではアプリケーション内にサイトを読み込むのは簡単にできますが、リンクの位置を特定してその上に情報を表示するといった仕掛けを作るのは技術的なチャレンジでした。図4は、Site Overlay コンポーネントを使って私のブログを解析している画面です。
図4：Site Overlay コンポーネントを使った私のブログの解析画面
この機能を実現するためには JavaScript が必要だと思っているかもしれませんが、実は1行たりとも JavaScript コードを使っていません。 JavaScript でも同じことが実現できたと思いますが、私自身は ActionScript の方が好きなので、それで開発しました。このように、自分が扱いやすい技術を選んで開発ができるという点も Adobe AIR の魅力の1つです。
以下は、HTML ページからリンク情報を抽出するための ActionScript 3.0 コードです。
private function parsePage():void
{
//The links Arraycollection holds all the link information
_links = new ArrayCollection();
//htmlView is a reference to a Flex HTML component in which the site is loaded
var doc:Object = htmlView.htmlLoader.window.document;
//loop through all the links in the current document
for (var n:int = 0; n<doc.links.length; n++){
//find the exact X and Y position of the link
var pnt:Point = findLinkPosition(doc.links[n]);
//get other information about the link that might be useful
var link:String = doc.links[n].href;
var path:String = doc.links[n].pathname;
var title:String = doc.links[n].innerText;
var dim:Point = new Point(doc.links[n].clientHeight, doc.links[n].clientWidth);
//add the link information to the Array Collection
links.addItem({pos:pnt, dim:dim, link:link, path:path, title:title, id:n});
}
}
private function findLinkPosition(link:Object):Point
{
//find the links X and Y coordinates relative to the document
if (link.offsetParent){
var px:Number;
var py:Number;
for (px = 0, py = 0; link.offsetParent; link = link.offsetParent){
px += link.offsetLeft;
py += link.offsetTop;
}
return new Point(px, py);
} else {
return new Point(link.x, link.y);
}
}
もう1つ「 Map Overlay」というコンポーネントを開発しました。Site Overlay と似ており、Map Overlay を使えば、地図上にサイト訪問者の情報を表示させることができます（図5）。Google Analytics のアプリケーションなので地図データには Google Maps を使用しましたが、他の地図情報でも同様に動作すると思います。
図5：Map Overlay コンポーネントを使った画面
Google Maps には JavaScript と組み合わせた素晴らしいサンプルがあったので、あえて Action Script で開発することはせずに JavaScript を使用しました。このコンポーネントでは、Flex HTML コントロールに埋め込んだ JavaScript メソッドで HTML ページを読み込んでいます。
//htmlview is a reference to a Flex HTML control
_dom = htmlView.htmlLoader.window;
//center the map
_dom.setPosition(48.8, 2.333, 2);
//ad a marker
_dom.addMarker(49, 3, "7 visitors from Paris");
//set the zoomlevel using a Flex slider
_dom.setZoom(HSlider.value);
<html>
AIR アプリケーション内では、ActionScript を使って直接 JavaScript メソッドを呼び出すことが、非常にわかりやすく簡単にできるのです。これを見るとみなさんも Adobe AIR を好きになるに違いありません。
<script src="http://maps.google.com/maps?file=api&v=2&key=?????"
type="text/javascript"></script>
<script>
var map = null;
var geo = null;
var baseIcon = null;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
baseIcon = new GIcon();
baseIcon.iconSize = new GSize(10, 13);
baseIcon.iconAnchor = new GPoint(4, 14);
baseIcon.infoWindowAnchor = new GPoint(4, 1);
}
function setPosition(lat, len, zoom) {
map.setCenter(new GLatLng(lat, len), zoom);
}
function addMarker(lat, len, message) {
var point = new GLatLng(lat, len);
var markicon = new GIcon(baseIcon);
markicon.image = "drop.png";
markerOptions = { icon:markicon };
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(message);
});
map.addOverlay(marker);
}
function removeMarkers() {
map.clearOverlays();
}
function setZoom(level) {
map.setZoom(level);
}
</script>
<body onLoad="initialize()" onUnload="GUnload()">
<div id="map_canvas" style="width: 685px; height: 350px"></div>
</body>
</html>
今後のロードマップ
現在、チームメイトと一緒になって 1.0 の正式版リリースに向けて懸命に作業を続けており、2008年の4月中旬にはフリー版を公開する予定です。ベータ版のフィードバックを慎重に検討し、できるだけ多くの要望に応えたいと思います。今後も Google Analytics プラットフォームの拡張に注力しつつ、また他のサービスのサポートも検討しています。
解析機能を充実させていくことに加えて、Flash プラットフォームとの統合を強化していきたいと思っています。たとえば、Flash コンテンツでの Site Overlay 機能や Flex アプリケーション用のセッションリプライ、測定を統合するための自動化されたバリデーション機能などを考えています。
ユーザの中には自分自身で Analytics Reporting Suite のようなアプリケーションを開発したいという人もいるでしょう。そういう方によいお知らせがあります。私が開発した Google Analytics ActionScript 3.0 data API を将来的にオープンソースとしてリリースする予定です。もろもろの事情があるのでいつ頃になるかは未定ですが、必ずリリースすることをお約束します。
さらに学習したい方へ
Analytics Reporting Suite に興味を持った方は、ぜひ 私のブログや商品ページで開発の進展をチェックしてみてください。
Adobe AIR の詳細情報については、Adobe AIR プロダクトページにアクセスしてください。
さらにAdobe AIRの情報をいろいろと知りたいという場合は、Adobe AIRデベロッパーセンターのFlex、Flash、HTML/Ajaxページや、「Adobe AIRデベロッパーダービー受賞作品」をおすすめします。
AIR環境でFlexアプリケーションを開発してみたいという方は、Flex用Adobe AIRデベロッパーセンターの「Adobe AIRのファーストステップ」や Developing Adobe AIR applications with Adobe Flex に詳しい情報があります。Flex BuilderでAIRアプリケーションを開発したい方は、Adobe LiveDocs の Developing AIR applications with Flex Builder や AIR Quick Starts にアクセスしてください。
