as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases
開発
設計と開発
公開
リファレンス
サポート

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に、react-native-localizeパッケージを依存関係として追加します。

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

       "dependencies": {
             ...
             "@amazon-devices/react-native-localize": "~2.0.0"
       }
    
  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';

const DeviceLocale= () => {
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}>Locale Information:</Text>
{localeInfo ? (
<View>
<Text style={styles.text}>
Language Tag: {localeInfo.languageTag}
</Text>
<Text style={styles.text}>
Language Code: {localeInfo.languageCode}
</Text>
<Text style={styles.text}>
Country Code: {localeInfo.countryCode}
</Text>
<Text style={styles.text}>
Is RTL: {localeInfo.isRTL ? 'Yes' : 'No'}
</Text>
</View>
) : (
<Text style={styles.text}>Loading locale...</Text>
)}
</View>
);
};

出力

シミュレーターでの出力を示すスクリーンショット。言語タグ、言語コード、国コード、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"

例2

デバイスの所在地に基づいて、ユーザーにカスタムメッセージを表示できます。

以下のコードでは、次のメソッドと文を使用しています。

  1. @amazon-devices/react-native-localizegetCountry()メソッド。デバイスの国を取得します。
  2. useState()メソッド。国コードを保存します。
  3. 国コードに従ってメッセージを変更するswitch case。

注: デバイスの所在地を変更するには、[設定] > [環境設定] > [言語] に移動します。

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

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

const GetCountry = () => {
const [country, setCountry] = useState(null);
const [message, setMessage] = useState('');

useEffect(() => {
const countryCode = getCountry();
setCountry(countryCode);

switch (countryCode) {
case 'US':
setMessage('Welcome, American user!');
break;
case 'GB':
setMessage('Welcome, British user!');
break;
case 'IN':
setMessage('Namaste, Indian user!');
break;
default:
setMessage('Welcome, global user!');
break;
}
}, []);

return (
<View style={styles.container}>
<Text style={styles.text}>Country Code: {country}</Text>
<Text style={styles.message}>{message}</Text>
</View>
);
};

出力

Vegaシミュレーターデバイスでの出力を示すスクリーンショット。国コードがINの場合のメッセージが表示されています。
Vegaシミュレーターデバイスでの出力を示すスクリーンショット。国コードがUSの場合のメッセージが表示されています。

ラテンアメリカ地域

ラテンアメリカの地域設定を使用するデバイスでは、「419」の代わりに「UN」が返されます。「419」は標準の国コードではないためです。


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

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

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

サポート対象のサードパーティのライブラリとサービス


Last updated: 2025年12月22日