RIA：SWFAddress2.0によるディープリンクの作り方とアクセス解析の注意点 : アークウェブのブログ

ホーム » ビジネスブログ » RIA (システム開発) »

RIA：SWFAddress2.0によるディープリンクの作り方とアクセス解析の注意点

2008年3月 4日

RIA：SWFAddress2.0によるディープリンクの作り方とアクセス解析の注意点

投稿者竹村

SEの竹村です。

2008年2月のつくるぶのガイドブログにてSWFAddress2.0について２回に分けて書きました。

▼SWFAddress2.0を利用した「状態」による機能制御
SWFAddress2.0の基礎について書きました。イベント駆動の考え方がちょっと異なるので注意が必要です。

▼楽天API＋SWFAddress2.0を利用したストアのマッシュアップ
SWFAddress2.0を使ってAjaxで実践してみたストアのデモです。

このエントリーではガイドブログに書いたポイントと、アクセス解析の際にどのように拾われるかという点について書いていきたいと思います。

レジュメは↓こちらです。

なぜこのライブラリが必要か
ディープリンクとは?
SWFAddress2でディープリンクを作るなら画面遷移と同じように設計すべし
同一セッション中は画面遷移しない、ではアクセスログは?
アクセス解析に拾わせるためには
最後に

なぜこのライブラリが必要か

Webアプリケーションのあるページを誰かに伝える時、通常であればブラウザのアドレスバーのURLをコピーして渡すと思います。RIAで構築したアプリケーションの場合は基本的に画面遷移しないのでアドレスバーにはトップのURLが書いてあるだけで変わりません。もちろん、それをコピーして渡しても伝えたかった画面には遷移しません。

SWFAddress2.0 というライブラリを利用すると、このような画面遷移しないアプリケーションを構築する場合にユーザの行動をディープリンクとしてURLに反映させることができます。

▼SWFAddress2.0 公式サイト (英語)

▼SWFAddressのAPIガイド (英語)

ディープリンクとは?

通常のHTMLにおいてディープリンクとは、アンカーリンクさせたページへのURLや、検索結果のクエリー付きのURLなどを指します。

アンカーリンクの例　：https://www.ark-web.jp/blog/archives/2008/02/hogehoge.html#more
検索結果クエリーの例：https://www.ark-web.jp/blog/mt-search.cgi?IncludeBlogs=1&search=SWFAddress

では、RIAにおけるディープリンクとは何でしょうか？
私は、アプリケーションの「ある状態」のURLを指すと思います。

ガイドブログ後編に書いた楽天APIを使ったマッシュアップアプリは、Ajax(非同期通信)で楽天APIを経由して商品情報を取得し表示するRIAなアプリケーションといえると思いますが、このサンプルアプリのディープリンクは↓このようになります。

トップの状態　　　　　　　　：index.html
カテゴリを選択した状態　　　：index.html#/listing/?category=551167
リストから商品を選択した状態：index.html#/detail/?category=551167&product=kashizairyo:10002647

このように、状態によってディープリンクを生成できるのがこのライブラリのポイントでした。

SWFAddress2でディープリンクを作るなら画面遷移と同じように設計すべし

SWFAddress2を利用する場合は、常にディープリンクでアクセスされることを考慮する必要があります。

「カテゴリを選択した状態」を表示するためには、商品一覧を表示するだけで処理は終わりですが、
「リストから商品を選択した状態」を表示するためには、商品詳細を表示するのと商品一覧も表示させる必要があります。

つまり、状態が変わった時はゼロからページを表示し直せるように設計しておくとよい、ということです。ゼロからページを作り直す、ということは通常のHTMLにおける画面遷移をしているのと同じようなものだと捕らえられると思います。

同一セッション中は画面遷移しない、ではアクセスログは?

上記で、ゼロからページを作り直せるように設計することが大事。と書きましたが、これは誰かにURLを教えられて、ブラウザのアドレスバーからアクセスされた場合を想定して設計する必要がある。ということを意味しています。

これが、同一セッションの場合は画面遷移しません。

SWFAddress2でディープリンクをどのように生成しているか、というとJavaScriptでURLの文字列を変更するように実装されています。

例えば、トップの状態から[カテゴリ決定]ボタンをクリックした時に、ディープリンクのURLは変わりますが、画面遷移は起きていません。つまり、HTMLの再描画(<head>タグや<body>タグなど)は行われていませんし、ページを読み込んだ時のイベント onload 等も発生しません。

ここで、画面遷移していない、ということはアクセスログにも反映されないのではないだろうか?と疑問に思うのではないかと思います。

AjaxでJSONPを使って結果を描画するWebアプリでは、自サーバに一切アクセスせずに外部サーバからデータが取得できるのでアクセスログには残らないためです。

そこで実際に計測してみました。

SWFAddress2を利用した状態遷移アプリによるアクセスログ

トップの状態：http://okra.ark-web.jp/~takemura/public/js/swfaddress2_store_demo/index.html

　｜
　｜[カテゴリ決定]ボタンをクリックした時のアクセスログ
　↓

192.168.0.219 - - [29/Feb/2008:18:00:54 +0900]
"POST /~takemura/public/js/swfaddress2_store_demo/templates/listing.html HTTP/1.1"
200 321 "http://okra.ark-web.jp/~takemura/public/js/swfaddress2_store_demo/#/listin
g/?category=100317" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)"

　｜
　｜[詳細を見る]リンクをクリックした時のアクセスログ
　↓

192.168.0.219 - - [29/Feb/2008:18:01:12 +0900]
"POST /~takemura/public/js/swfaddress2_store_demo/templates/detail.html HTTP/1.1"
200 442 "http://okra.ark-web.jp/~takemura/public/js/swfaddress2_store_demo/#/detail
/?category=100317&product=wineya:664477" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)"

※上記はIE6利用時のデータ
　実はFF2を利用した場合はリファラーの#以降は取れなかった (参考まで)

結果

アクセスログとしては取得可能であることが分かったと思います。

ただ、ちょっと待ってください！アクセスログを良く見てみると、#以降が入っているのはリファラーのみで、肝心のリクエストURLは#以降が取得できていません。

※上記はApacheのログの場合です。IIS他は調べてません。

アクセス解析に拾わせるためには

一番無難な方法としては、SWFAddress2.0に付属している setTracker関数を実行することです。

setTracker関数は最初の時点でトラッカー用の関数名を入れておくと、ディープリンクを生成した際に自動で実行してくれます。その際に、#以降の値も入るのでラクチンです。

具体的には、GoogleAnalyticsの場合を例にとってみます。

// === 初期化 =====
document.observe("dom:loaded", initialize, false);
function initialize() {
	(...)
	// ディープリンク生成時にGoogleAnalyticsの関数を実行してもらう
	SWFAddress.setTracker('pageTracker._trackPageview');
}
(...)
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-280255-7");
pageTracker._initData();
pageTracker._trackPageview();
</script>

GoogleAnalyticsのpageTracker._trackPageview関数の仕様は↓こちらで確認できます。

▼Flash ページを目標や目標達成プロセスに設定するにはどうすればよいですか。
http://www.google.com/support/googleanalytics/bin/answer.py?hl=jp&answer=55513

イベントをトラッキングするには、イベント名を引数に指定して _trackPageview() を呼び出します。
pageTracker._trackPageview("/purchase_funnel/page1.html"); これにより、Flash イベントが発生するたびに、/purchase_funnel/page1.html という名前のページビューが 1 回記録されます。

これによって、実際にアクセスされたページをAnalyticsで表示してみると↓このようになります。