react-native-localize - Amazon Vega Docs

この記事では、Vega TVアプリでreact-native-localizeパッケージを使用する方法を説明します。Vega SDKでサポートされているメソッドについて記載しています。 react-native-localizeパッケージは、各ユーザーに合わせてパーソナライズされたエクスペリエンスを提供するために役立ちます。

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

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

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

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

インストール

package.jsonに、react-native-localizeパッケージを依存関係として追加します。

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

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

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

プロジェクトのルートでnpm installを実行して、パッケージをインストールします。
インストールが成功したら、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()

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

languageCode
scriptCode
languageTag
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>
);
};

出力：

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になります。注：シミュレーターを使用している場合、タイムゾーンTime ZoneプロパティはUniversalと出力されます。たとえば、以下は、デバイスの言語設定が英語（インド）English Indiaに設定されている場合の出力です。

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

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

国： 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

デバイスの所在地に基づいて、ユーザーにカスタムメッセージを表示できます。以下のコードでは、次のメソッドと文を使用しています。

@amazon-devices/react-native-localizeのgetCountry()メソッド。デバイスの国を取得します。
useState()メソッド。国コードを保存します。
国コードに従ってメッセージを変更する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>
);
};

出力：

ラテンアメリカ地域

ラテンアメリカの地域設定を使用するデバイスでは、「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

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

​インストール

​例

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

​APIリファレンス

​getLocales()

​メソッドタイプ

​例

​getNumberFormatSettings()

​メソッドタイプ

​例

​getCurrencies()

​メソッドタイプ

​例

​getCountry()

​メソッドタイプ

​例1

​例2

​ラテンアメリカ地域

​getCalendar()

​メソッドタイプ

​例

​getTemperatureUnit()

​メソッドタイプ

​例

​getTimeZone()

​メソッドタイプ

​例

​uses24HourClock()

​メソッドタイプ

​例

​usesMetricSystem()

​メソッドタイプ

​例

​usesAutoDateAndTime()

​メソッドタイプ

​例

​usesAutoTimeZone()

​メソッドタイプ

​例

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

​関連トピック

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

インストール

例

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

APIリファレンス

getLocales()

メソッドタイプ

例

getNumberFormatSettings()

メソッドタイプ

例

getCurrencies()

メソッドタイプ

例

getCountry()

メソッドタイプ

例1

例2

ラテンアメリカ地域

getCalendar()

メソッドタイプ

例

getTemperatureUnit()

メソッドタイプ

例

getTimeZone()

メソッドタイプ

例

uses24HourClock()

メソッドタイプ

例

usesMetricSystem()

メソッドタイプ

例

usesAutoDateAndTime()

メソッドタイプ

例

usesAutoTimeZone()

メソッドタイプ

例

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

関連トピック