Amazon Developer

Console

as

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

Console

as

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

react-native-localize

react-native-localize

この記事では、Vega TVアプリでreact-native-localizeパッケージを使用する方法を説明します。Vega SDKでサポートされているメソッドについて記載しています。

react-native-localizeパッケージは、各ユーザーに合わせてパーソナライズされたエクスペリエンスを提供するために役立ちます。以下が可能になります。

  1. 複数の言語の処理
  2. 日付と時刻の形式の設定
  3. 通貨の設定
  4. その他の地域設定の管理

@amazon-devices/react-native-localizeライブラリは、Vega向けReact Native（RNK）アプリでLocalize React Native（英語のみ）を使用できるようにするものです。このライブラリにより、ローカリゼーションとインターナショナリゼーションのサポートが提供され、アプリをさまざまな言語、地域、文化に適応させることができます。

TVアプリをローカライズする理由

  • ユーザーエクスペリエンス： ユーザーは、自分の言語で提供され、地域の設定を理解するアプリを好みます。
  • 世界規模のリーチ： 世界中の市場の幅広いユーザーに対するアプリの訴求力を高めることができます。
  • 法令遵守： さまざまな地域の規制を確実に遵守できます。

インストール

  1. package.jsonファイルにJavaScriptライブラリの依存関係を追加します。該当するReact Nativeバージョンのタブを選択してください。


    クリップボードにコピーしました。

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

    クリップボードにコピーしました。

       "dependencies": {
         ...
         "@amazon-devices/react-native-localize": "~2.1.9000000000-rn-83"
   }

  2. getCurrenciesを適切なコンポーネントにインポートします。

    クリップボードにコピーしました。

    import { getCurrencies } from '@amazon-devices/react-native-localize';

  3. プロジェクトのルートでnpm installを実行して、パッケージをインストールします。

  4. インストールが成功したら、Vegaプロジェクトを実行します。

例

シミュレーターとデバイス

react-native-localizeパッケージのメソッドの戻り値は、シミュレーターとデバイスで異なる場合があります。たとえば、getCountry()メソッドは、シミュレーターではUSを返しますが、デバイスでの戻り値はデバイスの言語設定に基づきます。

メソッド シミュレーター デバイス
getLocales 同じ 同じ
getCurrencies 同じ 同じ
getCountry 固定値 デバイスに基づく
getTimeZone 固定値 デバイスに基づく
getCalendar 固定値 デバイスに基づく

@amazon-devices/react-native-localizeの使用方法の例を次に示します。

クリップボードにコピーしました。

import { getCurrencies, getLocales } from "@amazon-devices/react-native-localize";

console.log(getLocales());
console.log(getCurrencies());

APIリファレンス

getLocales()

ユーザーのデバイスに基づいて、ロケールのリストを返します。

  1. languageCode
  2. scriptCode
  3. languageTag
  4. isRTL

メソッドタイプ

クリップボードにコピーしました。

type getLocales = () => Array<{
  languageCode: string;
  scriptCode?: string;
  countryCode: string;
  languageTag: string;
  isRTL: boolean;
}>;

返される可能性のある値：

local: [
{"languageCode":"af","scriptCode":"","countryCode":"","languageTag":"af","isRTL":"false"},
{"languageCode":"af","scriptCode":"","countryCode":"NA","languageTag":"af-NA","isRTL":"false"},
{"languageCode":"af","scriptCode":"","countryCode":"ZA","languageTag":"af-ZA","isRTL":"false"},
{"languageCode":"agq","scriptCode":"","countryCode":"","languageTag":"agq","isRTL":"false"},
{"languageCode":"agq","scriptCode":"","countryCode":"CM","languageTag":"agq-CM","isRTL":"false"},
{"languageCode":"ak","scriptCode":"","countryCode":"","languageTag":"ak","isRTL":"false"},
{"languageCode":"ak","scriptCode":"","countryCode":"GH","languageTag":"ak-GH","isRTL":"false"},
{"languageCode":"am","scriptCode":"","countryCode":"","languageTag":"am","isRTL":"false"},
{"languageCode":"am","scriptCode":"","countryCode":"ET","languageTag":"am-ET","isRTL":"false"},
{"languageCode":"ar","scriptCode":"","countryCode":"","languageTag":"ar","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"AE","languageTag":"ar-AE","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"BH","languageTag":"ar-BH","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"DJ","languageTag":"ar-DJ","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"DZ","languageTag":"ar-DZ","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"EG","languageTag":"ar-EG","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"EH","languageTag":"ar-EH","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"ER","languageTag":"ar-ER","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"IL","languageTag":"ar-IL","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"IQ","languageTag":"ar-IQ","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"JO","languageTag":"ar-JO","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"KM","languageTag":"ar-KM","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"KW","languageTag":"ar-KW","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"LB","languageTag":"ar-LB","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"LY","languageTag":"ar-LY","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"MA","languageTag":"ar-MA","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"MR","languageTag":"ar-MR","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"OM","languageTag":"ar-OM","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"QA","languageTag":"ar-QA","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"PS","languageTag":"ar-PS","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"SA","languageTag":"ar-SA","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"SD","languageTag":"ar-SD","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"SO","languageTag":"ar-SO","isRTL":"true"}
...

例

クリップボードにコピーしました。

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { getLocales } from '@amazon-devices/react-native-localize';

export const App = () => {
  const [localeInfo, setLocaleInfo] = useState(null);

  useEffect(() => {
    const locales = getLocales();

    if (locales && locales.length > 0) {
      const locale = locales[0];
      setLocaleInfo({
        languageTag: locale.languageTag,
        languageCode: locale.languageCode,
        countryCode: locale.countryCode,
        isRTL: locale.isRTL,
      });
    }
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>ロケール情報：</Text>
      {localeInfo ? (
        <View>
          <Text style={styles.text}>
            言語タグ：{localeInfo.languageTag}
          </Text>
          <Text style={styles.text}>
            言語コード：{localeInfo.languageCode}
          </Text>
          <Text style={styles.text}>
            国コード：{localeInfo.countryCode}
          </Text>
          <Text style={styles.text}>
            RTL：{localeInfo.isRTL ? 'はい' : 'いいえ'}
          </Text>
        </View>
      ) : (
        <Text style={styles.text}>ロケールを読み込んでいます...</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 18,
    marginBottom: 10,
  },
});

出力：

シミュレーターでの出力を示すスクリーンショット。言語タグ、言語コード、国コード、RTLかどうかなどのロケール情報が表示されています。

getNumberFormatSettings()

数値の書式の設定を返します。

メソッドタイプ

クリップボードにコピーしました。

type getNumberFormatSettings = () => {
  decimalSeparator: string;
  groupingSeparator: string;
};

例

クリップボードにコピーしました。

import { getNumberFormatSettings } from "@amazon-devices/react-native-localize";

console.log(getNumberFormatSettings());
/* -> {
  decimalSeparator: ".",
  groupingSeparator: ",",
} */

getCurrencies()

すべての通貨のリストを返します。

メソッドタイプ

クリップボードにコピーしました。

type getCurrencies = () => string[];

例

クリップボードにコピーしました。

import { getCurrencies } from "@amazon-devices/react-native-localize";

console.log(getCurrencies());
// -> ["EUR", "GBP", "USD"]

返される可能性のある値：

Currency: ["XXX","NAD","ZAR","XAF","GHS","ETB","AED","BHD","DJF","DZD","EGP","MAD","ERN","ILS","IQD","JOD","KMF","KWD","LBP","LYD","MRU","OMR","QAR","SAR","SDG","SOS","SSP","SYP","TND","YER","INR","TZS","EUR","AZN","BYN","ZMW","BGN","XOF","BDT","CNY","BAM","RUB","PHP","UGX","USD","IRR","CZK","GBP","DKK","KES","CHF","BTN","XCD","AUD","BBD","BIF","BMD","BSD","BWP","BZD","CAD","NZD","FJD","FKP","GIP","GMD","GYD","JMD","KYD","LRD","MGA","MOP","MUR","MWK","MYR","NGN","PGK","PKR","RWF","SBD","SCR","SEK","SGD","SHP","SLL","ANG","SZL","TOP","TTD","VUV","WST","ARS","BOB","BRL","CLP","COP","CRC","CUP","DOP","GTQ","HNL","MXN","NIO","PAB","PEN","PYG","UYU","VES","AFN","GNF","CDF","HTG","XPF","HRK","HUF","AMD","IDR","ISK","JPY","GEL","CVE","KZT","KHR","KPW","KRW","TRY","KGS","LAK","MZN","MKD","MNT","BND","MMK","NOK","NPR","AWG","SRD","PLN","STN","MDL","RON","UAH","LKR","ALL","RSD","TJS","THB","TMT","UZS","VND","TWD"]

getCountry()

デバイスの言語設定に基づいて、ユーザーの現在の国コードを返します。たとえば、言語設定が英語（インド）の場合、返される国はINになります。

注：シミュレーターを使用している場合、タイムゾーンプロパティはUniversalと出力されます。

たとえば、以下は、デバイスの言語設定が英語（インド）に設定されている場合の出力です。

local: 786
通貨： INR
国： IN
タイムゾーン： Europe/London
24時間形式の時刻：false
カレンダー：gregorian

たとえば、以下は、デバイスの言語設定が英語（米国）に設定されている場合の出力です。

国： US
タイムゾーン： Universal
24時間形式の時刻：false
カレンダー：gregorian
getTemperatureUnit：fahrenheit
usesMetricSystem：false

メソッドタイプ

クリップボードにコピーしました。

type getCountry = () => string;

例1

クリップボードにコピーしました。

import { getCountry } from "@amazon-devices/react-native-localize";

console.log(getCountry());
// -> "FR"

getCalendar()

ユーザーが選択しているカレンダー形式を返します。

メソッドタイプ

クリップボードにコピーしました。

type getCalendar = () =>
  | "gregorian"
  | "buddhist"
  | "coptic"
  | "ethiopic"
  | "ethiopic-amete-alem"
  | "hebrew"
  | "indian"
  | "islamic"
  | "islamic-umm-al-qura"
  | "islamic-civil"
  | "islamic-tabular"
  | "iso8601"
  | "japanese"
  | "persian";

例

クリップボードにコピーしました。

import { getCalendar } from "@amazon-devices/react-native-localize";

console.log(getCalendar());
// → "gregorian"

getTemperatureUnit()

ユーザーが選択している温度単位を返します。

メソッドタイプ

クリップボードにコピーしました。

type getTemperatureUnit = () => "celsius" | "fahrenheit";

例

クリップボードにコピーしました。

import { getTemperatureUnit } from "@amazon-devices/react-native-localize";

console.log(getTemperatureUnit());
// → "celsius"

getTimeZone()

デバイスの言語設定の国に基づいて、ユーザーの現在のタイムゾーンを返します。シミュレーターでは、Universalタイムゾーンが返されます。TVデバイスでは、Europe/Londonなど、デバイスに設定されているタイムゾーンが返されます。

たとえば、以下は、デバイスの言語設定が英語（米国）に設定されている場合の出力です。

国： US
タイムゾーン： Universal
24時間形式の時刻：false
カレンダー：gregorian
getTemperatureUnit：fahrenheit
usesMetricSystem：false

メソッドタイプ

クリップボードにコピーしました。

type getTimeZone = () => string;

例

クリップボードにコピーしました。

import { getTimeZone } from "@amazon-devices/react-native-localize";

console.log(getTimeZone());
// → "Asia/Yerevan"

uses24HourClock()

ユーザーが時刻の形式として24時間形式を選択している場合はtrue、12時間形式を選択している場合はfalseを返します。

メソッドタイプ

クリップボードにコピーしました。

type uses24HourClock = () => boolean;

例

クリップボードにコピーしました。

import { uses24HourClock } from "@amazon-devices/react-native-localize";

console.log(uses24HourClock());
// → true

usesMetricSystem()

ユーザーが測定体系としてメートル法を選択している場合はtrue、ヤード・ポンド法を選択している場合はfalseを返します。

メソッドタイプ

クリップボードにコピーしました。

type usesMetricSystem = () => boolean;

例

クリップボードにコピーしました。

import { usesMetricSystem } from "@amazon-devices/react-native-localize";

console.log(usesMetricSystem());
// → true

usesAutoDateAndTime()

デバイスで日付と時刻の自動設定が有効になっているかどうかを示します。

メソッドタイプ

クリップボードにコピーしました。

type usesAutoDateAndTime = () => boolean | undefined;

例

クリップボードにコピーしました。

import { usesAutoDateAndTime } from "@amazon-devices/react-native-localize";

console.log(usesAutoDateAndTime());
// → false/true

usesAutoTimeZone()

デバイスでタイムゾーンの自動設定が有効になっているかどうかを示します。

メソッドタイプ

クリップボードにコピーしました。

type usesAutoTimeZone = () => boolean | undefined;

例

クリップボードにコピーしました。

import { usesAutoTimeZone } from "@amazon-devices/react-native-localize";

console.log(usesAutoTimeZone());
// → false

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

NPMパッケージのバージョン Vega SDKバージョン Vega OSバージョン React Nativeバージョン
2.0.1758683737 0.23以前 OS 1.1（1401010009820）以前 0.72
>=2.1.9000000000-rn-83 0.24 OS 1.2（2101020054720） 0.72、0.83

Last updated: 2026年7月13日

フォローする

サポート対象デバイス

amazon_developer_logo

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

利用規約

Amazon開発者ブログ

お問い合わせ