i18nを使って多言語対応をしてみよう

目次

1. はじめに
2. i18nとは？
3. 実際にi18nを使って、言語設定によって表示を変えてみよう
4. まとめ
5. 参考

はじめに

外国人向けのサービスやホテルなどのホームページで、
ユーザーの言語に応じて画面の表示言語を英語や中国語にしたい時はありませんか？

Visualizerではi18nという国際化対応のツールが入っており、
言語に応じた実装が可能となっています。

今回は、i18を使用する際の使用方法について
実際の実装方法も交えながらご紹介していきます

i18nとは？

まず、i18nとは何か簡単にご説明します！

• 様々な言語や地域に対応できるようにアプリケーションを設計・開発することを国際化といい、i18nとも呼ばれています。
• V9 SP1 GA から、Quantumは Google 翻訳がサポートするすべてのロケールに対応しました。
• Visualizerが直接サポートしていないロケールについては、
  内部で Google 翻訳を利用して翻訳し、カスタムロケールとして追加しています。
• Visualizer は、ヘブライ語とセルボ・クロアチア語を除き、
  Google 翻訳でサポートされているすべてのロケールに対応しています。

i18nの設定を行うと、
以下のように端末の言語設定に応じた多言語対応の表示が可能となります！

早速、実際に実装をしながら、i18nの使い方を学んでいきましょう😊

実際にi18nを使って、言語設定によって表示を変えてみよう

ロケールの作成

1. 左サイドメニューの歯車マークをクリックし、ProjectSettingsを開きます。
2. [Application]内の[Internationalization(i18n)]下にある[Enable]にチェックを入れましょう。
   
3. [Configure]をクリックします。
   
4. [Configure Locales]ボタンをクリックすると、
   ロケールを選択する画面が表示されるので、対応したいロケールにチェックを入れます。
   今回は、日本語と英語を選択しました。
   
5. ロケールの設定が終わったら、言語キーに応じた値を入力していきます。
   英語の場合、「Hello!」、日本語の場合「こんにちは！」と表示するよう設定しました。
   
6. 最後に[Default Locale]にデフォルトで表示したい言語を設定します。
   

キーを設定

次に言語設定によって表示を変える対象の文字にキーを設定していきます。

今回は、「こんにちは」の表示を変えたいので、
対象のWidgetを選択した状態で右メニューの[Text i18n Key]から、
先ほど設定したキーを選択したら完了です！

早速、動作を見ていきましょう！

デフォルトの言語設定は、日本語になっているため、
最初は日本語で「こんにちは！」と表示。
その後、言語設定を英語に変更すると、
「Hello!」に変更になったことがわかりますね！

ロジックを追加することなく、多言語対応ができてとっても便利ですね

まとめ

今回のまとめです！

• 多言語対応を行う場合は、i18nという機能が使える
• 設定を行う場合は、Project Settingから行うことができる

その他、ボタンによる切り替えで多言語対応を行う方法は以下記事も参考になります。
公式ドキュメントとあわせて確認してみて下さいね！
▶︎Konyで端末内の言語設定を取得し、アプリ内で動的に言語を変更する方法

次の記事

次からは、ついに第4章でバックエンドサービスのFabricを使用していきます！
折り返し地点なので引き続き頑張っていきましょう！

▶︎Fabricでどんなことができるか？

記事一覧：https://qiita.com/Kony_Team/private/4c922fa016ce95c58406

参考