ネットワーク品質に基づいて画像配信に動画を適応させる

Milica Mihajlija

この Codelab を進めるには、この Glitch を 2 つ目のタブで開きます。

注: この Codelab では Chrome DevTools を使用します。Chrome をダウンロードします（まだインストールしていない場合）。

この Codelab では、ネットワークの品質に基づいてコンテンツを適応させる方法を学びます。このページのバックグラウンド動画は、ユーザーが高速ネットワークに接続している場合にのみ読み込まれます。低速のネットワークでは、代わりに画像が読み込まれます。

Network Information API を使用すると、ユーザーの接続品質に関する情報にアクセスできます。effectiveType プロパティを使用して、動画と画像を提供するタイミングを決定します。effectiveType は、'slow-2g'、'2g'、'3g'、'4g' のいずれかです。

対応ブラウザ

• 61
• 79
• x
• x

ソース

ステップ 1: 接続タイプを確認する

index.html ファイルには、背景動画を表示する <video> タグが含まれています（22 行目）。script.js のコードは、動画タグの src 属性を設定して動画を読み込みます。（動画読み込みコードについては、ステップ 2 で詳しく説明しています）。

動画を条件付きで読み込むには、まず Network Information API が使用可能かどうかを確認します。使用可能な場合は、接続タイプを確認します。

1. script.js に、navigator.connection オブジェクトが存在するかどうか、effectiveType プロパティがあるかどうかをテストする if ステートメントを追加します。
2. if ステートメントを追加して、ネットワークの effectiveType を確認します。

if (navigator.connection && !!navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // Only load video on the fastest connections.
  } else {
    // In any other case load the image.
  }
}

既存の動画読み込みコードを else ステートメントでラップして、Network Information API をサポートしていないブラウザでも動画が読み込まれるようにします。

if (navigator.connection && !!navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // video loading code
  } else {
    // image loading code
  }
} else {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);

  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}

ステップ 2: 動画を読み込む

effectiveType が '4g' の場合は、Codelab の最初から動画読み込みコードを使用します。

if (navigator.connection.effectiveType === '4g') {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);
  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
  // image loading code
}

動画読み込みコードの仕組みは次のとおりです。<video> タグは src 属性が設定されていないため、最初は何もダウンロードせず、表示もしません。読み込む動画の URL は data-src 属性で指定します。

<video id="coverVideo" autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>

データ属性を使用すると、標準の HTML 要素に追加情報を格納できます。データ要素には、「data-」で始まる任意の名前を付けることができます。

動画を実際にページに表示するには、data-src から値を取得し、それを動画要素の src 属性として設定する必要があります。

まず、アセットを含む DOM 要素を取得します。

const video = document.getElementById('coverVideo');

次に、data-src 属性からリソース ロケーションを取得します。

const videoSource = video.getAttribute('data-src');

最後に、これを動画要素の src 属性として設定します。

video.setAttribute('src', videoSource);

最後の行は CSS の位置付けを行います。

video.setAttribute('style', 'height: 100%; width: 100%; display:inline');

ステップ 3: 画像を読み込む

低速のネットワークで条件付きで画像を読み込むには、動画の場合と同じ戦略を使用します。

画像要素を index.html（動画要素の直後）に追加し、src 属性の代わりに data-src 属性を使用します。

<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />

script.js に、ネットワークの effectiveType に応じて画像の src 属性を設定するコードを追加します。

if (navigator.connection.effectiveType === '4g') {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);

  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
  const image = document.getElementById('coverImage');
  const imageSource = image.getAttribute('data-src');
  image.setAttribute('src', imageSource);

  image.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}

試してみる

ご自身でテストするには:

1. サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
2. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
3. [Network] タブをクリックします。
4. [スロットリング] プルダウンをクリックします。デフォルトでは [スロットリングなし] に設定されています。[Fast 3G] を選択します。

Fast 3G を有効にした状態でページを再読み込みします。アプリは、動画ではなく画像をバックグラウンドで読み込みます。

追加演習: 変更に対応する

この API には onchange イベント リスナーがあることを覚えていますか？動画の品質などのコンテンツを動的に適応させる、高帯域幅ネットワーク タイプへの変更が検出されたときに遅延データ転送を再開する、ネットワークの品質が変化したときにユーザーに通知するなど、多くの用途に使用できます。

このリスナーの簡単な使用例を次に示します。script.js に追加します。このコードは、ネットワーク情報が変更されるたびに displayNetworkInfo 関数を呼び出します。

navigator.connection.addEventListener('change', displayNetworkInfo);

index.html ページに空の <h2> 要素がすでにあります。次に、<h2> 要素にネットワーク情報を表示して関数を呼び出すように、displayNetworkInfo 関数を定義します。

function displayNetworkInfo() {
  document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}

displayNetworkInfo();

Glitch 上のアプリの最終状態は次のとおりです。

再度テストするには:

1. サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
2. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
3. [Network] タブをクリックします。
4. [スロットリング] プルダウンをクリックします。デフォルトでは [スロットリングなし] に設定されています。[Fast 3G] を選択します。
5. アプリを再読み込みします。

ネットワーク情報が 3g に更新されます。