react-native-device-info

react-native-device-infoライブラリを使用すると、開発者は、Vega向けReact Nativeアプリでデバイス固有の情報にアクセスできます。これは特にTVアプリで役立ちます。アクセスできる情報には、デバイス名、アプリのバージョン、明るさなどがあります。この記事では、このライブラリを使用する理由と使用方法について説明します。

react-native-device-infoを使用する理由

デバイスに関する詳細情報を知ることで、次のような処理が可能になります。

アプリの機能の微調整
パフォーマンスの改善
より優れたユーザーエクスペリエンスの実現

トラブルシューティングとログ

デバイスモデル、OSバージョン、初回インストール時刻がわかると、アプリのデバッグやメンテナンスの際に、プラットフォーム固有の問題、クラッシュ、バグに対処するために役立つ可能性があります。

ユーザーパーソナライゼーション

初回インストール時刻、アプリのバージョン、その他のデバイス固有の機能に関する情報を取得して、ユーザーエクスペリエンスのパーソナライズに使用できます。たとえば、初めてのユーザーにウェルカムメッセージを表示したり、特定のTVモデルで異なるコンテンツを提供したりできます。

インストール

このパッケージを使用するには、アプリのpackage.jsonファイルにJavaScriptライブラリの依存関係を追加します。該当するReact Nativeバージョンのタブを選択してください。

React Native 0.72
React Native 0.83

"dependencies": {
       ...
       "@amazon-devices/react-native-device-info": "~2.0.0"
    }

"dependencies": {
       ...
       "@amazon-devices/react-native-device-info": "~2.1.9000000000"
    }

使用するメソッドのコンポーネントをインポートします。以下に例を示します。

import DeviceInfo from '@amazon-devices/react-native-device-info';

// または、非構造化を使用したインポート（ES6以降）

import { getBaseOs, getBaseOsSync } from '@amazon-devices/react-native-device-info';

const baseOsSync = getBaseOsSync();
const baseOs = await getBaseOs();

Vegaでreact-native-device-infoを使用する方法

次の3とおりの方法があります。

同期操作：Promiseを待機せず、すぐに値が必要な場合に使用します。たとえば、アプリのレンダリング前にロジックを実行する場合や、グローバル構成を初期化する場合に適しています。
非同期操作：JavaScriptスレッドのブロックを防ぐ必要がある場合に使用します。ファイルI/O操作を必要とする値に適しています。または、ライブラリが非同期メソッドしか公開していない場合もあります。
フック：関数コンポーネントの内部で使用します。

同期操作

デバッグとログのために、モデル、基本OS、デバイスタイプ、アプリ名、プロジェクトのアプリに関する情報を同期的な方法で取得します。以下に、ユーザーパーソナライゼーション要素を同期的に取得する方法の例をいくつか示します。

例1

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import DeviceInfo from '@amazon-devices/react-native-device-info';

const DeviceDetailsApp = () => {
  const [installTime, setInstallTime] = useState(null);
  const [os, setOs] = useState('');
  const [userAgent, setUa] = useState('');
  const [brightness, setBrightness] = useState(null);

  useEffect(() => {
    DeviceInfo.getFirstInstallTime()
      .then((firstInstallTime) => {
        setInstallTime(firstInstallTime);
      })
      .catch((error) => {
        console.error('初回インストール時間を取得するときにエラーが発生しました：', error);
      });

    // 基本オペレーティングシステムを取得します。
    DeviceInfo.getBaseOs()
      .then((baseOs) => {
        setOs(baseOs);
      });

    // ユーザーエージェントを取得します。
    DeviceInfo.getUserAgent()
      .then((userAgent) => {
        setUa(userAgent);
      });

    // 画面の明るさのレベルを取得します。
    DeviceInfo.getBrightness()
      .then((brightness) => {
        setBrightness(brightness);
      });
  }, []);

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.header}>デバイス情報</Text>

      <View style={styles.infoBox}>
        <Text style={styles.label}>初回インストール時間(ミリ秒)：</Text>
        <Text style={styles.value}>{installTime !== null ? installTime : 'Loading...'}</Text>
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.label}>基本OS：</Text>
        <Text style={styles.value}>{os || 'Loading...'}</Text>
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.label}>ユーザーエージェント：</Text>
        <Text style={styles.value}>{userAgent || 'Loading...'}</Text>
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.label}>画面の明るさ：</Text>
        <Text style={styles.value}>{brightness !== null ? brightness : 'Loading...'}</Text>
      </View>
    </ScrollView>
  );
};
export default DeviceDetailsApp;

出力：

例2

デバッグとログのために、モデル、基本OS、デバイスタイプ、アプリ名、プロジェクトのアプリに関する情報を同期的な方法で取得します。これらと同じメソッドを非同期で使用することもできます。

import React, {useState, useEffect} from 'react';
import DeviceInfo from '@amazon-devices/react-native-device-info';
import { View, Text, StyleSheet, ScrollView } from 'react-native';

const ExampleApp = () => {
  const MODEL = DeviceInfo.getModel();
  const DEVICE_TYPE = DeviceInfo.getDeviceType();
  const APPLICATION_NAME = DeviceInfo.getApplicationName();
  const DEVICE_ID = DeviceInfo.getDeviceId();
  const SYSTEM_VERSION = DeviceInfo.getSystemVersion();
  const APP_VERSION = DeviceInfo.getVersion();

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.header}>デバイス情報</Text>
      <View style={styles.infoBox}>
        <Text style={styles.label}>モデル：</Text>
        <Text style={styles.value}>{MODEL}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>デバイスタイプ：</Text>
        <Text style={styles.value}>{DEVICE_TYPE}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>アプリ名：</Text>
        <Text style={styles.value}>{APPLICATION_NAME}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>デバイスID：</Text>
        <Text style={styles.value}>{DEVICE_ID}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>システムバージョン：</Text>
        <Text style={styles.value}>{SYSTEM_VERSION}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>アプリバージョン：</Text>
        <Text style={styles.value}>{APP_VERSION}</Text>
      </View>
    </ScrollView>
  );
};

export default ExampleApp;

非同期操作

デバッグとログのために、モデル、基本OS、デバイスタイプ、アプリ名、プロジェクトのアプリに関する情報を非同期的な方法で取得します。async/awaitを使用せずに、これらと同じメソッドを非同期で使用することもできます。

例

import React, {useState, useEffect} from 'react';
import DeviceInfo from '@amazon-devices/react-native-device-info';
import { View, Text, StyleSheet, ScrollView } from 'react-native';

const ExampleApp = () => {
  const [deviceInfo, setDeviceInfo] = useState({
    model: '',
    deviceType: '',
    applicationName: '',
    deviceId: '',
    systemVersion: '',
    appVersion: ''
  });

  useEffect(() => {
    const fetchDeviceInfo = async () => {
      const model = await DeviceInfo.getModel();
      const deviceType = await DeviceInfo.getDeviceType();
      const applicationName = await DeviceInfo.getApplicationName();
      const deviceId = await DeviceInfo.getDeviceId();
      const systemVersion = await DeviceInfo.getSystemVersion();
      const appVersion = await DeviceInfo.getVersion();

      setDeviceInfo({
        model,
        deviceType,
        applicationName,
        deviceId,
        systemVersion,
        appVersion
      });
    };

    fetchDeviceInfo();
  }, []);

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.header}>デバイス情報</Text>
      <View style={styles.infoBox}>
        <Text style={styles.label}>モデル：</Text>
        <Text style={styles.value}>{deviceInfo.model}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>デバイスタイプ：</Text>
        <Text style={styles.value}>{deviceInfo.deviceType}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>アプリ名：</Text>
        <Text style={styles.value}>{deviceInfo.applicationName}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>デバイスID：</Text>
        <Text style={styles.value}>{deviceInfo.deviceId}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>システムバージョン：</Text>
        <Text style={styles.value}>{deviceInfo.systemVersion}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>アプリバージョン：</Text>
        <Text style={styles.value}>{deviceInfo.appVersion}</Text>
      </View>
    </ScrollView>
  );
};

export default ExampleApp;

出力：

フック

useBrightness()
useManufacturer()
useDeviceName()
useFirstInstallTime()

useDeviceName()の使用例を以下に示します。

import { useDeviceName } from '@amzn/react-native-device-info';

const { loading, result } = useDeviceName();

<Text>{loading ? '読み込み中...' : result}</Text>;

重要：次のプロパティは現在サポートされていないため、使用すると空の応答が返されます。

位置情報
メモリ

APIリファレンス

Vegaでは、このドキュメントに記載されているAPIのみがサポートされます。react-native-device-info API（英語のみ）の多くはプラットフォームに固有です。プラットフォーム用の実装がない場合、「デフォルト」の戻り値として、文字列ではunknown、数値では-1、ブール型ではfalseが返されます。配列とオブジェクトは空（それぞれ[]と{}）になります。ほとんどのAPIはPromiseを返しますが、同期的に動作する同等のAPIもあり、それらは末尾にSyncが付いています。たとえば、アプリ起動の初期段階での非同期呼び出しを回避する場合は、アプリのブートストラップ中にgetBaseOsSync()を呼び出すこともできます。

getBaseOs()

製品の基盤となるベースOSビルドを取得します。

DeviceInfo.getBaseOs().then((baseOs) => {
  // "Kepler"
});

getFirstInstallTime()

アプリが最初にインストールされたときの時間をミリ秒単位で取得します。

DeviceInfo.getFirstInstallTime().then((firstInstallTime) => {
  // 1517681764528
});

getInstallerPackageName()

基盤のソース管理によって使用される、このビルドを表す内部的な値です。

DeviceInfo.getInstallerPackageName().then((installerPackageName) => {
  // "com.amazon.venezia"
});

getManufacturer()

デバイスのメーカーを取得します。

DeviceInfo.getManufacturer().then((manufacturer) => {
   // "Amazon"
});

getLastUpdateTime()

アプリが最後に更新された時間をミリ秒単位で取得します。

DeviceInfo.getLastUpdateTime().then((lastUpdateTime) => {
  //  1517681764992
});

getUserAgent()

デバイスのユーザーエージェントを取得します。

DeviceInfo.getUserAgent().then((userAgent) => {
  // "Kepler/1.1 (Linux; AFTCA002)"
});

既知の問題

getuserAgentは、Vega仮想デバイスでは値を返さない可能性がありますが、Fire TV Stickでは値を返します。

getApplicationName()

アプリ名を取得します。

let appName = DeviceInfo.getApplicationName();
// "AwesomeApp"

getVersion()

アプリのバージョンを取得します。

let version = DeviceInfo.getVersion();
//  "1.0.0"

getModel()

デバイスモデルを取得します。

let model = DeviceInfo.getModel();
// AFTCA001

getSystemName()

デバイスのOS名を取得します。

let systemName = DeviceInfo.getSystemName();
// "Kepler"

getSystemVersion()

デバイスのOSバージョンを取得します。

let systemVersion = DeviceInfo.getSystemVersion();
// "1.1"

getBundleId()

アプリのバンドル識別子を取得します。

let bundleId = DeviceInfo.getBundleId();
// "com.example.awesomeApp"

getDeviceType()

デバイスタイプを文字列として返します。

let type = DeviceInfo.getDeviceType();
// 'TV'
// 不明

getDeviceId()

デバイスIDを取得します。

let deviceId = DeviceInfo.getDeviceId();
// AFTCA001

サポートされているバージョン

NPMパッケージのバージョン	Vega SDKバージョン	Vega OSバージョン	React Nativeバージョン
~2.0.0	0.23以前	`OS 1.1 (1401010009820)`以前	0.72
~2.1.9000000000	0.24	`OS 1.2 (2101020054720)`	0.83

Vegaライブラリとサービス

react-native-device-infoを使用する理由

トラブルシューティングとログ

ユーザーパーソナライゼーション

インストール

Vegaでreact-native-device-infoを使用する方法

同期操作

例1

例2

非同期操作

例

フック

APIリファレンス

getBaseOs()

getFirstInstallTime()

getInstallerPackageName()

getManufacturer()

getLastUpdateTime()

getUserAgent()

既知の問題

getApplicationName()

getVersion()

getModel()

getSystemName()

getSystemVersion()

getBundleId()

getDeviceType()

getDeviceId()

サポートされているバージョン

関連トピック

​react-native-device-infoを使用する理由

​トラブルシューティングとログ

​ユーザーパーソナライゼーション

​インストール

​Vegaでreact-native-device-infoを使用する方法

​同期操作

​例1

​例2

​非同期操作

​例

​フック

​APIリファレンス

​getBaseOs()

​getFirstInstallTime()

​getInstallerPackageName()

​getManufacturer()

​getLastUpdateTime()

​getUserAgent()

​既知の問題

​getApplicationName()

​getVersion()

​getModel()

​getSystemName()

​getSystemVersion()

​getBundleId()

​getDeviceType()

​getDeviceId()

​サポートされているバージョン

​関連トピック

react-native-device-infoを使用する理由

トラブルシューティングとログ

ユーザーパーソナライゼーション

インストール

Vegaでreact-native-device-infoを使用する方法

同期操作

例1

例2

非同期操作

例

フック

APIリファレンス

getBaseOs()

getFirstInstallTime()

getInstallerPackageName()

getManufacturer()

getLastUpdateTime()

getUserAgent()

既知の問題

getApplicationName()

getVersion()

getModel()

getSystemName()

getSystemVersion()

getBundleId()

getDeviceType()

getDeviceId()

サポートされているバージョン

関連トピック