Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
Ring
AWS
ドキュメント
Support
Contact Us
My Cases

Console

as

開発
設計と開発
公開
リファレンス
サポート

react-native-device-info

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 : '読み込み中...'}</Text>
      </View>

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

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

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

出力：

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

シミュレーター

シミュレータのデバイス情報パネルとデバイスの詳細を示すスクリーンショット。

TV

TVデバイスのデバイス情報パネルとデバイスの詳細を示すスクリーンショット。

フック

  1. useBrightness()
  2. useManufacturer()
  3. useDeviceName()
  4. 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"

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

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

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

Last updated: 2025年11月17日

フォローする

サポート対象デバイス

amazon_developer_logo

© 2010-2026, Amazon.com, Inc. or its affiliates. All Rights Reserved. 無断複写·転載を禁じます。

利用規約

Amazon開発者ブログ

お問い合わせ