開発ガイド
ミニアプリの開発が簡単になりました。開発者向けの情報はこちらです。
ミニアプリIDのローカライズ

本セクションでは、ユーザーデバイスの言語設定に応じたミニアプリのローカライズについて説明します。

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

  1. 静的文字列
  2. アセット(画像、動画など)
  3. APIコールからのデータ

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

Navigatorからロケール値を取得

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

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

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

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

 

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

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

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

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

    jsonファイル構造はこのようになります​​​​​​​

  7. react-intlをプロジェクトの`npm ireact-intl` にインストールします
  8. 以下のように、アプリのindex.jsページにreact-intlを設定します​​​​​​​

            

           

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

          
 

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

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

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

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

            

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

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

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

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

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

move to top