Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 66784c7049
Fetching contributors…

Cannot retrieve contributors at this time

159 lines (142 sloc) 9.053 kB
<!DOCTYPE HTML>
<html>
<head>
<title>Boomerang 使用方法 #3: ページの読み込み時間と一緒にユーザーの帯域幅や遅延を測定する</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../boomerang-docs.css">
</head>
<body>
<span style="float:right;"><a href="../">ドキュメント一覧</a> | <a href="index.html">使用方法一覧</a></span>
<h1>Boomerang 使用方法 #3:<br>ページの読み込み時間と一緒にユーザーの帯域幅や遅延を測定する</h1>
<p>
この要件の説明は <a href="../use-cases.html#uc-3">ユースケース #3</a> と <a href="../use-cases.html#uc-5">#5</a> をご覧ください。
</p>
<p>
初期状態では boomerang は常にユーザーの帯域幅と HTTP の遅延を測定し、それらの数値を送信するビーコンに追加します。実際には、帯域幅プラグイン(<code>BOOMR.plugins.BW</code>)がこれを行いますが、boomerang の中にバンドルされているもので、違いは単なる伝統的なものです。帯域幅を効率的に検出するためにいくつか知っておくべきことがあります。
</p>
<p>
まず JavaScript による帯域幅の検知は正確ではありません。もしユーザーのネットワークが損失が多かったり、他のユーザーと共有していたら、もしくはネットワークのトラフィックが集中的だったら。実際の帯域幅は時間の経過とともに変化します。私たちが測定するのは短時間のものを基準としたもののため、これが最善か最悪の代表的なケースにはならないかもしれません。帯域幅以外の測定もカバーしようとしますが、その測定でもエラーの値も返します。
</p>
<p>
帯域幅のテストを開始するには単純にページに boomerang を追加して <code>init()</code> メソッドを呼び出すだけで十分です。そうするとビーコンがサーバーに結果を送ります。このようなコードを使います:
</p>
<pre>
&lt;script src="boomerang.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
BOOMR.init({
beacon_url: "http://yoursite.com/path/to/beacon.php",
BW: {
base_url: "http://base_url/to/bandwidth/images/"
}
});
&lt;/script&gt;
</pre>
<p>
<code>BW.base_url</code> パラメーターの初期値は <code>images/</code> です。もし帯域幅を検出する画像が現在のディレクトリーの <code>images</code> サブディレクトリーにある場合は、<code>BW.base_url</code> パラメーターを設定する必要はありません。複数のディレクトリーがあることもあるかもしれませんが、そのときは良い実践になるでしょう。
</p>
<p>
これが帯域幅と遅延を測定してビーコンを返すために必要となる最小限のコードです。あなたのユーザーにとっては最善のオプションではありません。テストはユーザーの帯域幅がほとんど変わっていないのにも関わらず、サイト上のページに訪れるたびに毎回実行されます。一定期間、帯域幅を Cookie に格納しておくとはるかに良くなり、もしその Cookie があればそこから取得します。現在、ユーザーは複数のネットワーク間を移動できます。例えばラップトップを自宅で使ったり、職場やコーヒーショップで使ったり。これらの帯域幅や遅延は場所によって異なるかもしれないため、これらを切り分けて測定することが大切です。私たちはユーザーの IP アドレスを通してネットワークの変更を判断し、Cookie にユーザーの帯域幅を格納するため、boomerang にユーザーの IP アドレスを伝える必要があります。これを <code>user_ip</code> パラメーターを使って行ないます。
</p>
<pre>
&lt;script src="boomerang.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
BOOMR.init({
beacon_url: "http://yoursite.com/path/to/beacon.php",
user_ip: "&lt;user's ip&gt;",
BW: {
base_url: "http://base_url/to/bandwidth/images/"
}
});
&lt;/script&gt;
</pre>
<p>
私の知る限りでは、JavaScript でユーザーの IP アドレスを算出する方法はありません。これはサーバーサイドで行ってあなたのコードに記述しなければなりません。
</p>
<h2>IPv4 最適化</h2>
<p>
もしユーザーが IPv4 アドレスを持っていた場合、私たちは IP の最後の部分を除去して、完全な IP アドレスよりもそれを使用します。これはユーザーが同じ ISP 上の DHCP を使用している場合、IP アドレスは頻繁に変更されますが、同じサブネット内に留まるため効果がでます。もしユーザーが IPv6 アドレスを持っている場合はアドレス全体を使用します。
</p>
<h2>Cookie</h2>
<p>
帯域幅が格納される Cookie の名前をカスタマイズしたい場合もあると思います。初期値は <code>BA</code> になっていますが、これは <code>BW.cookie</code> パラメーターで変更することができます。
</p>
<pre>
&lt;script src="boomerang.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
BOOMR.init({
beacon_url: "http://yoursite.com/path/to/beacon.php",
user_ip: "&lt;user's ip&gt;",
BW: {
base_url: "http://base_url/to/bandwidth/images/",
cookie: "BW"
}
});
&lt;/script&gt;
</pre>
<p>
この Cookie は7日間有効です。<code>BW.cookie_exp</code> パラメーターを使って有効期限の変更もできます。値は秒です。その間、サーバーサイドで Cookie の値も取得することができます。フォーマットは以下の通りです:
</p>
<pre>
BA=ba=<span class="ni">nnnnnnn</span>&amp;be=<span class="ni">nnn.nn</span>&amp;l=<span class="ni">nnnn</span>&amp;le=<span class="ni">nn.nn</span>&amp;ip=<span class="ni">iiiiii</span>&amp;t=<span class="ni">sssssss</span>;
</pre>
<p>
定義されているパラメーター:
</p>
<dl>
<dt>ba</dt>
<dd>[integer] [バイト/秒] あなたのサーバーにおけるユーザーの帯域幅</dd>
<dt>be</dt>
<dd>[float] [バイト/秒] 測定したユーザーの帯域幅からエラーを除いた95%信頼できる値</dd>
<dt>l</dt>
<dd>[float] [ミリ秒] ユーザーのコンピューターとあなたのサーバー間の HTTP 遅延</dd>
<dt>le</dt>
<dd>[float] [ミリ秒] 測定したユーザーの遅延からエラーを除いた95%信頼できる値</dd>
<dt>ip</dt>
<dd>[IP アドレス] <code>init()</code> メソッドに <code>user_ip</code> パラメーターとして渡されたユーザーの IPv4 アドレスまたは IPv6 アドレス</dd>
<dt>t</dt>
<dd>[タイムスタンプ] Cookie がセットされた時のブラウザーの時間(UNIX time)</dd>
</dl>
<p>
これらのパラメーターはビーコンに送信されます(<a href="howto-0.html">使用方法 #0</a> をご覧ください)が、Cookie にこれらを持っているということはリクエストを処理する前に帯域幅をもとにユーザーエクスペリエンスをカスタマイズできるということを意味します。
</p>
<h2>帯域幅のチェックを無効にする</h2>
<p>
最後に、帯域幅のテストを完全に無効にしたい場合があるかもしれません。おそらくあなたはユーザーが遅いネットワークを使っていたり、バイト単位で料金を払っていたり(帯域幅のテストはたくさんの帯域幅を使用します)、モバイルデバイスを使っていたりして読み込みきれないことを考えていると思います。その場合は2つの方法があります。
</p>
<ol>
<li>boomerang.js のコピーから帯域幅プラグインを削除する</li>
<li><code>BW.enabled</code> パラメーターを <code>false</code> にする:</li>
</ol>
<pre>
&lt;script src="boomerang.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
BOOMR.init({
BW: { enabled: false }
});
&lt;/script&gt;
</pre>
<p class="perma-link">
最新のソースコードとドキュメントは <a href="http://github.com/lognormal/boomerang/">github.com/lognormal/boomerang</a> に公開されています。
</p>
<p id="results">
</p>
<script src="../../../boomerang.js" type="text/javascript"></script>
<script src="../../howtos/howtos.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
user_ip: '10.0.0.1',
BW: {
base_url: '../../images/',
cookie: 'HOWTO-BA'
},
RT: {
cookie: 'HOWTO-RT'
}
});
</script>
</body>
</html>
<!--
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Copyrights licensed under the BSD License. See the accompanying LICENSE.txt file for terms.
-->
Jump to Line
Something went wrong with that request. Please try again.