ネットワーク品質の測定をしたいと思いました

おはようございます。ライトノベル好きの新人ツチノコです。魔法少女禁止法は読みましたか?

さて本題ですが、HTML5のResource Timingでユーザ環境のネットワーク品質の測定ができるらしいとのことで、試行してみました。デモ用サイトは以下になります。

  • 測定デモ
    • 重要:
      測定デモでは速度測定結果をサーバに送信、またアクセス日時・IPアドレス・User-Agentをサーバで収集しています。
      サーバに送信されたデータ・サーバで収集されたデータは下の測定履歴で表示(IPアドレスについては一部をマスク)されます。
      また、アクセス元を特定できないようにアクセス日時・IPアドレスを加工・統計処理したうえで、社内外の発表で利用する可能性があります。
    • http://connection-speed-demo.appspot.com/
  • 測定履歴

仕組みは window.performance.getEntriesByType(‘resource’) によって PerformanceResourceTiming Objectの配列が返ってきます。
PerformanceResourceTiming Objectは以下の要素を持っています。

interface PerformanceResourceTiming : PerformanceEntry {
  readonly attribute DOMString initiatorType;
  readonly attribute DOMString nextHopProtocol;
  readonly attribute DOMHighResTimeStamp workerStart;
  readonly attribute DOMHighResTimeStamp redirectStart;
  readonly attribute DOMHighResTimeStamp redirectEnd;
  readonly attribute DOMHighResTimeStamp fetchStart;
  readonly attribute DOMHighResTimeStamp domainLookupStart;
  readonly attribute DOMHighResTimeStamp domainLookupEnd;
  readonly attribute DOMHighResTimeStamp connectStart;
  readonly attribute DOMHighResTimeStamp connectEnd;
  readonly attribute DOMHighResTimeStamp secureConnectionStart;
  readonly attribute DOMHighResTimeStamp requestStart;
  readonly attribute DOMHighResTimeStamp responseStart;
  readonly attribute DOMHighResTimeStamp responseEnd;
  readonly attribute unsigned short transferSize;
  readonly attribute unsigned short encodedBodySize;
  readonly attribute unsigned short decodedBodySize;
  serializer = {inherit, attribute};
};

interface PerformanceEntry {
  readonly attribute DOMString name;
  readonly attribute DOMString entryType;
  readonly attribute DOMHighResTimeStamp startTime;
  readonly attribute DOMHighResTimeStamp duration;
};

各attributeの時間関係は以下の図のようになっています(Resource Timing W3C Working Draftより)。

resource-timing-overview-1

例えば responseEnd – responseStart でHTTPのresponseを転送するのにかかった時間が得られます。これで転送バイト数/転送時間 = ネットワーク速度が得られることになります。
ただ、上に挙げたすべてのattributeが実装されているわけではなく、たとえばChrome 43ではtransferSizeは未実装でした(今回はファイルサイズをハードコーディングしました)。

課題や検討事項もいろいろあります。

  • 今回利用したファイルが31Kbyteと比較的小さいため、精度が低いこと
    • 小さいファイルから順にダウンロードしていくのがよさそう
    • 一方で特に通信量に制限がある携帯回線で通信量をいたずらに消耗しないようにしたい
  • 動画などがダウンロードされたときに測定する方法との得失
    • 動画などファイルサイズが大きければ精度は高い
    • 今回のようにHTMLに埋め込めれば、より広い範囲でデータが取れる
  • 個人情報保護の観点で大丈夫か?
    • いわゆるアクセス解析と同じはず

DMMはAKB48グループ LIVE!! ON DEMAND動画オンラインゲームといった大量の通信を行うサービスを提供しています。
サービスごとに対応プラットフォーム(PC、携帯、etc.,)は異なりますし、通信の内容(動画ストリーミング、動画ダウンロード、ゲームの音声ダウンロード、etc.,)も様々です。
サービスの使い勝手は様々な要素によって決まりますが、DMMのサービスの使い勝手を決める要素のひとつであるネットワーク速度の測定について、今回はデモを作成して試行してみました。
いろいろと検討事項はありますが、悪くはない感触がえられました。

p.s.
私事ではありますが帰宅時にわざわざ定期の無い路線に乗り換えて開拓したラーメン屋がたいへん美味しくなくて異世界に転生したい気持ちになりました。
そんな気持ちですが最近のおすすめのライトノベルは異世界居酒屋「のぶ」です。3巻目が6/24に出るそうです。