ローカライズすべきデータタイプの例

静的文字列
アセット（画像、動画など）
APIコールからのデータ

デバイスから優先言語を取得する

Navigatorからロケール値を取得

./utils/getLocale.jsにgetLocaleという関数があります。この関数への応答から、navigator.languageプロパティを確認します。通常は「en-US」、「ja-JP」などの記述になっているはずです。

最初の2文字が言語プロパティ（ここで必要な情報）で、次の2文字はロケール（国または地域）を示します。

言語プロパティに問題がないかダブルチェック

ミニアプリではサポートする特定言語を指定できますが、ユーザーデバイスがそのいずれの言語にも設定されていないケースもあり得ます。このような状況に対応するため、ユーザーの優先言語がサポート対象言語と一致しない場合の対策を指定しておいてください。

React JS以下に示す要領は、React JSを想定したものです。他のフレームワークを使用する場合は手順が異なる場合がありますが、基本的なコンセプトは同じです。

静的文字列のローカライズ

以下は、アプリ全体の静的文字列をローカライズするために必要な手順です

翻訳が必要なアプリ内の静的テキストをすべて特定します
ソースコードのルートディレクトリ（src）直下に「translation」フォルダを作成します
対応させるロケールごとに.jsonファイルを作成します（例えば、英語ならen.json、日本語ならja.json、フランス語ならfr.jsonを作成）。
翻訳フォルダ直下にindex.jsを作成します。
作成したすべての.jsonファイルをインポートします。
言語名を鍵としたmessagesというオブジェクトをエクスポートします

jsonファイル構造はこのようになります
react-intlをプロジェクトの`npm ireact-intl` にインストールします
以下のように、アプリのindex.jsページにreact-intlを設定します

9. 次に、フォーマット済みのメッセージをインポートし、ローカライズ用に作成したJSONページに合わせて制御IDを変更します

アプリを実行し、ブラウザの言語設定を変更した状態で表示が変わるか確認します。

静的アセットのローカライズ

プロジェクトのアセットをローカライズするには次の手順を実施してください。

assetsフォルダ直下にindex.jsを作成します。
必要なすべてのアセットをインポートします
鍵をロケール、値をページとしたassetsというオブジェクトをエクスポートします。以下に示すように、インポートしたアセットの鍵/値ペアをページごとに作成します
次のように、アプリのindex.jsファイルにアセットを設定します。

5.アセットをプロパティとして渡します。

アプリケーションを実行して、言語に合わせて変更したいアセットを確認します。

ロケールに応じたAPIをコール

コンポーネントのプロパティとしてロケール値を設定できたので、API取得コールにはクエリパラメータとして次のようにロケールを指定します。

like `someapp.com/getlist?locale=en`
上記の手順がすべて完了したらミニアプリをローカライズできます。分からないことがあれば管理者に問い合せてください。