react-native-device-info

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

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

react-native-device-infoライブラリは、デバイスに関する詳細情報を表示します。これにより、次のことが可能になります。

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

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

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

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

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

インストール

このパッケージを使用するには、アプリのpackage.jsonファイルにJavaScriptライブラリの依存関係を追加します。

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

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とおりの方法があります。

同期操作
非同期操作
フック

同期操作

デバッグとログのために、モデル、基本OS、デバイスタイプ、アプリ名、プロジェクトのアプリに関する情報を同期的な方法で取得します。

import React, {useState, useEffect} from 'react';
import DeviceInfo from '@amzn/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;

以下のメソッドはasync/awaitなしで使用できます。

import React, {useState, useEffect} from 'react';
import DeviceInfo from '@amzn/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、ユーザーエージェント、画面の明るさなどのデバイスの詳細が表示されています。

非同期操作

設定済みのユーザーパーソナライズの例を次に示します。

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import DeviceInfo from '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;

出力：ユーザーパーソナライゼーションの結果は、初回インストール時間、ベースOS、ユーザーエージェント、画面の明るさを確認できます。シミュレータとデバイスの結果は似ていますが、ユーザーエージェントの結果が異なるだけです。

シミュレーター

TV

TVデバイスのデバイス情報パネルを示すスクリーンショット。デバイスの詳細が表示されています。

フック

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

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"

getApplicationName()

アプリ名を取得します。

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

getVersion()

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

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

getModel()

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

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

getSystemName()

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

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

getSystemVersion()

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

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

getBundleId()

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

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

getDeviceType()

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

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

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

パッケージ名	Amazon NPMライブラリのバージョン	Vega OSのビルド番号	Vega SDKバージョン	リリースノート
`@amazon-devices/react-native-device-info`	2.1.0+10.11.0	`OS 1.1 (201010438050)`	0.20

Vegaライブラリとサービス

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

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

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

インストール

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

同期操作

非同期操作

シミュレーター

TV

フック

APIリファレンス

getBaseOs()

getFirstInstallTime()

getInstallerPackageName()

getManufacturer()

getLastUpdateTime()

getUserAgent()

既知の問題

getApplicationName()

getApplicationName()

getVersion()

getModel()

getSystemName()

getSystemVersion()

getBundleId()

getDeviceType()

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

関連トピック

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

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

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

​インストール

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

​同期操作

​非同期操作

​シミュレーター

​TV

​フック

​APIリファレンス

​getBaseOs()

​getFirstInstallTime()

​getInstallerPackageName()

​getManufacturer()

​getLastUpdateTime()

​getUserAgent()

​既知の問題

​getApplicationName()

​getApplicationName()

​getVersion()

​getModel()

​getSystemName()

​getSystemVersion()

​getBundleId()

​getDeviceType()

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

​関連トピック

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

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

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

インストール

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

同期操作

非同期操作

シミュレーター

TV

フック

APIリファレンス

getBaseOs()

getFirstInstallTime()

getInstallerPackageName()

getManufacturer()

getLastUpdateTime()

getUserAgent()

既知の問題

getApplicationName()

getApplicationName()

getVersion()

getModel()

getSystemName()

getSystemVersion()

getBundleId()

getDeviceType()

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

関連トピック