このページは Cloud Translation API によって翻訳されました。

Device Memory API

Philip Walton

ウェブに接続できるデバイスの機能の範囲は、かつてないほど広がっています。ハイエンドのデスクトップパソコンに提供されるウェブアプリケーションが、低電力のスマートフォン、スマートウォッチ、タブレットにも提供される場合があります。あらゆるデバイスでシームレスに動作する魅力的なエクスペリエンスを作成するのは非常に困難です。

Device Memory API は、ウェブデベロッパーが最新のデバイス環境に対応できるようにすることを目的とした、新しいウェブプラットフォーム機能です。navigator オブジェクトに読み取り専用プロパティ navigator.deviceMemory が追加されます。このプロパティは、デバイスの RAM 容量をギガバイトで返します（2 のべき乗に切り捨て）。API には、同じ値を報告する Client Hints ヘッダー Device-Memory もあります。

Device Memory API を使用すると、開発者は次の 2 つの主なことができます。

返されたデバイスのメモリ値に基づいて、提供するリソースについて実行時に決定します（メモリ容量の少ないデバイスのユーザーにアプリの「ライト」バージョンを提供するなど）。
この値を分析サービスに報告すると、デバイスのメモリがユーザーの行動、コンバージョン、その他のビジネスにとって重要な指標とどのように相関しているかをより深く理解できます。

デバイスのメモリに基づいてコンテンツを動的に調整する

独自のウェブサーバーを実行していて、リソースを提供するロジックを変更できる場合は、Device-Memory クライアントヒントヘッダーを含むリクエストに条件付きで応答できます。

GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*

この手法を使用すると、アプリケーションスクリプトの 1 つ以上のバージョンを作成し、Device-Memory ヘッダーに設定された値に基づいて、クライアントからのリクエストに条件付きで応答できます。これらのバージョンに完全に異なるコードを含める必要はありません（保守が難しくなるため）。ほとんどの場合、「ライト」バージョンでは、費用が高く、ユーザーエクスペリエンスに不可欠ではない機能を除外します。

クライアントヒントヘッダーを使用する

Device-Memory ヘッダーを有効にするには、ドキュメントの <head> にクライアントヒント <meta> タグを追加します。

<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 は新しい API であり、ほとんどのアナリティクスプロバイダはデフォルトで追跡していません。幸い、ほとんどのアナリティクスプロバイダには、カスタムデータをトラッキングする方法が用意されています（たとえば、Google アナリティクスにはカスタムディメンションという機能があります）。この機能を使用して、ユーザーのデバイスのデバイスメモリをトラッキングできます。

カスタムデバイスメモリディメンションを使用する

Google アナリティクスでカスタムディメンションを使用するには、2 段階の手順を行います。

Google アナリティクスでカスタムディメンションを設定します。
トラッキングコードを、作成したカスタムディメンションのデバイスメモリ値の set に変更します。

カスタムディメンションを作成する際は、「Device Memory」という名前を付け、「session」のスコープを選択します。これは、ユーザーのブラウジングセッション中、値は変更されないためです。

Google アナリティクスでデバイスのメモリのカスタムディメンションを作成する — Google アナリティクスでデバイスのメモリに関するカスタムディメンションを作成する

次に、トラッキングコードを更新します。次に例を示します。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 アナリティクスに送信するすべてのデータにこの値が含まれます。これにより、任意の指標（ページ読み込み時間、目標達成率など）をデバイスのメモリ別に分類し、相関関係があるかどうかを確認できます。

デバイスのメモリは組み込みディメンションではなくカスタムディメンションであるため、標準レポートには表示されません。このデータにアクセスするには、カスタムレポートを作成する必要があります。たとえば、デバイスのメモリ別に読み込み時間を比較するカスタムレポートの構成は次のようになります。

Google アナリティクスでデバイスのメモリに関するカスタムレポートを作成する

生成されるレポートは次のようになります。

デバイスのメモリデータを収集し、メモリスペクトルのすべての範囲でユーザーがアプリをどのように使用しているかのベースラインを取得したら、（上記のセクションで説明した手法を使用して）異なるユーザーに異なるリソースを提供するテストを行うことができます。その後結果を表示して改善されたかどうかを確認できます

まとめ

この記事では、Device Memory API を使用してユーザーのデバイスの機能に合わせてアプリケーションを調整する方法と、ユーザーがアプリをどのように使用しているかを測定する方法について説明します。

この記事では Device Memory API に焦点を当てていますが、ここで説明する手法のほとんどは、デバイスの機能やネットワーク状態を報告する任意の API に適用できます。

デバイスの種類がますます多様化する中、ウェブデベロッパーは、ユーザーエクスペリエンスに影響する決定を行う際に、あらゆるユーザーを考慮することがこれまで以上に重要になっています。