Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
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を使用する理由

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

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

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

デバイスモデル、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とおりの方法があります。

  • 同期操作： 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 : '読み込み中...'}</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;

出力：

Vegaエミュレーターでのデバイス情報を示す出力のスクリーンショット。初回インストール時刻、基本OS、ユーザーエージェント、画面の明るさが表示されています。

例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;

出力：

Vegaエミュレーターでのデバイス情報を示す出力のスクリーンショット。モデル、デバイスタイプ、アプリ名、デバイスID、システムバージョン、アプリバージョンが表示されています。

フック

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

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

パッケージ名 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年12月22日

フォローする

サポート対象デバイス

amazon_developer_logo

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

利用規約

Amazon開発者ブログ

お問い合わせ