この Codelab では、ネットワーク品質に基づいてコンテンツを適応させる方法について学習します。このページの背景動画は、ユーザーが高速なネットワークを使用している場合にのみ読み込まれます。ネットワークの速度が遅い場合は、代わりに画像が読み込まれます。
Network Information API を使用すると、ユーザーの接続品質に関する情報にアクセスできます。effectiveType
プロパティを使用して、動画を配信するタイミングと画像を配信するタイミングを決定します。effectiveType
は 'slow-2g'
、'2g'
、'3g'
、'4g'
のいずれかです。
ステップ 1: 接続タイプを確認する
index.html
ファイルには、背景動画を表示する <video>
タグが含まれています(行 22)。script.js
のコードは、動画タグの src
属性を設定して動画を読み込みます。(動画読み込みコードについては、ステップ 2 で詳しく説明します)。
動画を条件付きで読み込むには、まず Network Information API が使用可能かどうかを確認します。使用可能であれば、接続タイプを確認します。
script.js
に、navigator.connection
オブジェクトが存在するかどうかと、effectiveType
プロパティが存在するかどうかをテストするif
ステートメントを追加します。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
}
動画読み込みコードの仕組みは次のとおりです。src
属性が設定されていないため、<video>
タグは最初は何もダウンロードまたは表示しません。読み込む動画の URL は data-src
属性を使用して指定します。
<video id="coverVideo" playsinline 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');
最後に、その値を video 要素の 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');
}
試してみる
ご自身でテストするには:
- サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] を押します。
- Ctrl+Shift+J(Mac の場合は Command+Option+J)キーを押して DevTools を開きます。
- [ネットワーク] タブをクリックします。
- [スロットリング] プルダウンをクリックします。デフォルトでは [スロットリングなし] に設定されています。[高速 3G] を選択します。
高速 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 のアプリの最終的な状態は次のとおりです。
もう一度テストするには:
- サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] を押します。
- Ctrl+Shift+J(Mac の場合は Command+Option+J)キーを押して DevTools を開きます。
- [ネットワーク] タブをクリックします。
- [スロットリング] プルダウンをクリックします。デフォルトでは [スロットリングなし] に設定されています。[高速 3G] を選択します。
- アプリを再読み込みします。
アプリでネットワーク情報が 3G に更新されます。