ウェブに接続できるデバイスの機能の範囲は、かつてないほど広くなっています。ハイエンドのデスクトップ パソコンに提供されているのと同じウェブ アプリケーションが、低消費電力のスマートフォン、スマートウォッチ、タブレットにも提供されることがあり、どのデバイスでもシームレスに動作する魅力的なエクスペリエンスを実現することは、非常に困難な場合があります。
Device Memory API は、ウェブ デベロッパーが最新のデバイス環境に対応できるようにすることを目的とした新しいウェブ プラットフォーム機能です。読み取り専用プロパティを navigator
オブジェクト navigator.deviceMemory
に追加します。これにより、デバイスの RAM 容量がギガバイト単位で最も近い 2 のべき乗に切り捨てられて返されます。この API には、同じ値を報告する Client Hints ヘッダー(Device-Memory
)も用意されています。
Device Memory API を使用すると、デベロッパーは主に次の 2 つのことを行えます。
- 返されたデバイスのメモリ値に基づいて、どのリソースを提供するかを判断します(たとえば、メモリの少ないデバイスのユーザーにアプリの「ライト」バージョンを提供する)。
- この値を分析サービスに報告すると、デバイスメモリとビジネスにとって重要なユーザー行動、コンバージョン、その他の指標との相関関係をより深く理解できます。
デバイスのメモリに基づいてコンテンツを動的に調整する
独自のウェブサーバーを運用していて、リソースを提供するロジックを変更できる場合は、Device-Memory
Client Hints ヘッダーを含むリクエストに条件付きで応答できます。
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
この手法では、1 つ以上のアプリケーション スクリプトのバージョンを作成し、Device-Memory
ヘッダーに設定された値に基づいて、クライアントからのリクエストに対して条件付きで応答できます。これらのバージョンには、(メンテナンスが困難になるため)まったく異なるコードを含める必要はありません。ほとんどの場合、「ライト」バージョンでは高価でユーザー エクスペリエンスにとって重要ではない機能が除外されるだけです。
Client Hints ヘッダーの使用
Device-Memory
ヘッダーを有効にするには、Client Hints の <meta>
タグをドキュメントの <head>
に追加します。
<meta http-equiv="Accept-CH" content="Device-Memory">
または、サーバーの Accept-CH
レスポンス ヘッダーに「Device-Memory」を含めます。
HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width
これにより、現在のページのすべてのサブリソース リクエストとともに Device-Memory
ヘッダーを送信するようにブラウザに指示します。
つまり、ウェブサイトに上記のいずれかのオプションを実装すると、0.5 GB の RAM を搭載したデバイスでユーザーがアクセスした場合、このページからの画像、CSS、JavaScript のすべてのリクエストには、値が「0.5」に設定された Device-Memory
ヘッダーが含まれ、サーバーは必要に応じてそのようなリクエストに応答できます。
たとえば、次の Express ルートでは、Device-Memory
ヘッダーが設定され、その値が 1 未満の場合はライト バージョンが提供されます。ブラウザが Device-Memory
ヘッダーをサポートしていないか、値が 1 以上の場合は完全版が提供されます。
app.get('/static/js/:scriptId', (req, res) => {
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `scriptVersion` to "lite" if (and only if)
// `Device-Memory` isn't undefined and returns a number less than 1.
const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Respond with the file based on `scriptVersion` above.
res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});
JavaScript API の使用
場合によっては(静的ファイル サーバーや CDN など)、HTTP ヘッダーに基づいてリクエストに条件付きで応答できない場合があります。そのような場合は、JavaScript API を使用して、JavaScript コードで条件付きリクエストを作成できます。
次のロジックは上記の Express ルートと似ていますが、クライアントサイドのロジックでスクリプト URL を動的に決定する点が異なります。
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';
const component = await import(`path/to/component.${componentVersion}.js`);
component.init();
デバイスの機能に基づいて同じコンポーネントの異なるバージョンを条件付きで提供することは良い戦略ですが、コンポーネントをまったく提供しない方がよい場合もあります。
多くの場合、コンポーネントは単なる機能拡張にすぎません。エクスペリエンスに洗練された要素を加えていますが、アプリのコア機能には必要ありません。そのような場合は、そもそもそのようなコンポーネントを読み込まないことをおすすめします。ユーザー エクスペリエンスの改善を目的としたコンポーネントによって、アプリの速度が遅くなったり応答しなくなったりする場合、そのコンポーネントは目標を達成していません。
ユーザー エクスペリエンスに影響を与える決断を下す場合は、その影響を測定することが重要です。また、現在のアプリのパフォーマンスを明確に把握することも重要です。
デバイスのメモリとアプリの現在のバージョンに関するユーザーの行動の相関関係を把握することで、必要なアクションについてより的確に把握し、今後の変更の効果を測定するためのベースラインが得られます。
分析によるデバイスメモリの追跡
Device Memory API は新しいため、ほとんどの分析プロバイダはデフォルトではトラッキングを行っていません。ほとんどの分析プロバイダではカスタムデータをトラッキングする方法があり(たとえば、Google アナリティクスにはカスタム ディメンションという機能があり)、それを使用してユーザーのデバイスのメモリをトラッキングできます。
デバイスのカスタムメモリ ディメンションを使用する
Google アナリティクスでカスタム ディメンションを使用するには、次の 2 つの手順を行います。
- Google アナリティクスでカスタム ディメンションを設定します。
- トラッキング コードを、作成したカスタム ディメンションのデバイス メモリ値
set
に更新します。
カスタム ディメンションを作成する際は、「Device Memory」という名前を付け、スコープとして「session」を選択します。この値はユーザーのブラウジング セッション中は変更されないためです。
次に、トラッキング コードを更新します。以下に例を示します。Device Memory API をサポートしていないブラウザの場合、ディメンション値は「(not set)」になります。
// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');
// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');
// Do any other other custom setup you want...
// Send the initial pageview.
ga('send', 'pageview');
デバイスメモリ データのレポート
トラッカー オブジェクトのデバイスメモリ ディメンションが set
になると、Google アナリティクスに送信するすべてのデータにこの値が含まれます。これにより、必要な指標(ページの読み込み時間、目標完了率など)をデバイスのメモリごとに分解し、相関関係があるかどうかを確認できます。
デバイスのメモリは組み込みディメンションではなくカスタム ディメンションであるため、標準レポートには表示されません。このデータにアクセスするには、カスタム レポートを作成する必要があります。たとえば、デバイスのメモリごとに読み込み時間を比較するカスタム レポートの構成は次のようになります。
生成されるレポートは次のようになります。
デバイスのメモリデータを収集し、メモリ スペクトルのすべての範囲でユーザーがアプリをどのように使用するかについてのベースラインを取得したら、(上記のセクションで説明した手法を使用して)ユーザーごとに異なるリソースを提供することをテストできます。その後 結果を見て 改善されたかどうかを確認できます
まとめ
この投稿では、Device Memory API を使用して、ユーザーのデバイスの機能に合わせてアプリを調整する方法と、ユーザーのアプリ エクスペリエンスを測定する方法について説明します。
この投稿では Device Memory API に焦点を当てていますが、ここで説明する手法のほとんどは、デバイスの機能やネットワーク状態をレポートするすべての API に適用できます。
デバイスを取り巻く環境が拡大するにつれ、ウェブ デベロッパーは、エクスペリエンスに影響する意思決定を行う際に、さまざまなユーザーを考慮することがこれまで以上に重要になっています。