こんにちは！
ノーコード ラボの岡崎です。
今日は Bubble の多言語対応のやり方について説明します。
1. アプリケーションのデフォルトの言語の設定
Settings - Languages の中に「Application primary language」という項目があります。
ここでアプリのデフォルトの言語を設定できるようになっています。
アプリのターゲットが日本であれば、ここは「Japanese(ja_jp)」に設定します。
2. Bubble の言語切り替えの方法
Bubble での多言語対応をするには、アプリケーションの言語の設定を明示的に切り替えることができれば OK です。
Bubble での言語切り替えには２つの方法があります。
(1) QueryString での lang パラメーターの設定
(2) User Type での言語フィールドの設定
以下、具体的な方法について説明します。
2.1 QueryString での lang パラメーターの設定
QueryString と言うのは、URL の後ろに ? がつくことがあるのですが、その ? より先の文字列のことです。
ここでは色々なパラメータを設定することができます。
bubble のプレビュー画面などを表示させると ?debug_mode=true と言う文字列が入っていることをご存知の人も多いと思います。
この debug_mode=true と言うのが QueryString にあたります。
同様に ?lang=xxx と記述するとアプリの言語が変更できます。
xxx の部分は各国の言語を指定することになります。 日本語だったら Japanese もしくは ja_jp を指定します。一応、どちらでも OK のようなのですが、ここでは ja_jp などの書き方を推奨します。言語コード_国コード という形です。
英語やフランス語、ドイツ語など、各国で微妙に違うものがあります。その時に English などと設定すると、それだけでは USA なのか UK なのかわかりません。French の場合は、フランスなのか、カナダなのか？、German の場合は、ドイツなのか、スイスなのか？といった具合です。
いくつか代表的な国の 言語コード_国コード を記述しますので、ご参考ください。
| 国 | 言語 | 言語コード_国コード |
|---|---|---|
| 日本 | 日本語 | ja_jp |
| アメリカ | 英語 | en_us |
| イギリス | 英語 | en_gb |
| 中国 | 中国語（簡体字） | zh_cn |
| 台湾 | 中国語（繁体字） | zh_tw |
| フランス | フランス語 | fr_fr |
| カナダ | フランス語 | fr_ca |
| ドイツ | ドイツ語 | de_de |
| スイス | ドイツ語 | de_ch |
2.2 User Type での言語フィールドの設定
もう一つは User Type に言語用のフィールドを設定し、それを変更することで言語を切り替えるというものです。
まず、User Type に言語用のフィールドを追加します。ここでは language としておきます。
次にこの language を言語用のフィールドとして Bubble 側に認識してもらう設定をします。
Settings - Languages の中に「Language field on the user type」という項目があります。
このドロップダウンをクリックすると先ほど作成した language が表示されますので、これを選択します。
これで Bubble 側は User Type の language フィールドを言語用のフィールドとして認識します。
ここまでできたら、あとは User Type の language フィールドの値を変更することで言語を切り替えることができるようになります。
なお、この方法はログインしていないユーザーでも利用可能です。
2.3 共通する注意点（Refresh が必要です！）
ここまでの説明で動きを試してしまった人、申し訳ありません。
多分うまく動いていないですよね？
言語の切り替えをした場合、アプリを最新にして読み込み直す必要があります。
これは Bubble でアプリを起動した際に１種類のみの言語セットを読み込んでいるためです。
言語セットを変更するためにはアプリを最新にして別の言語セットを読み込み直す必要があります。
2.3.1 QueryString での lang パラメーターの設定時のワークフロー
例えば、「日本語」というようなテキストを押したときのワークフローを考えましょう。
この方法では QueryString に lang というパラメータを設定すれば良いので、次のようなワークフローを設定することになります。
こうすると、「日本語」というテキストを押すと、index?lang=ja_jp に遷移するのですが、このままだと言語設定は変更されません。
この後に「refresh the page」をする必要があります。
これで index?lang=ja_jp に遷移した後、リフレッシュが走って言語設定も切り替わります。
ただし、画面の上の方をみていただければわかりますが、エラーが一つ発生しています。
Go to page を選択した場合は、Workflow の最後でないといけないという制限があり、それに違反しているというエラーが出ています。
エラーを無視していればいいのかもしれませんが、あまり気持ちのいいものではありません。
もう一つ理由があるのですが、それは、この方法は Google に推奨されていないということです。
Managing multi-regional and multilingual sites - Search Console Help
こちらに次のような記述があります。
そのため、この方法は簡単ではあるのですが、あまりお勧めはできない方法だと考えています。
2.3.2 User Type での言語フィールドの設定時のワークフロー
同様に「日本語」というようなテキストを押したときのワークフローを考えましょう。
この方法では User Type の language フィールドの値を変更し、Refresh を実行します。
これで言語設定の切り替えも OK です。ワークフローでのエラーも発生していません。
3. アプリ内の文字の多言語対応の方法
今までの説明で アプリの言語設定を切り替えることができるようになりました。
ただし、アプリ内の文字情報については、このままでは切り替えられません。
説明文や文字情報などを言語設定に合わせて切り替えるために Bubble では「App Text」というものが用意されています。
以下、App Text の使い方について説明します。
App Text の使い方
まず、テキストエレメントを一つ置き、Insert dynamic data を選択し、App Text (?) を選択します。
Define another text を選択します。
New Application Text を設定する画面が出てきますので、「Title」と入力し、「OKAY」ボタンを押します。
これで Text ID が「Title」という App Text が作成されました。
テキストエレメント上では次のような表示になります。
この状態が確認できたら Settings - Languages の画面に移動します。
「Application texts & messages」の中に「Title」という項目ができているのがわかります。
このページは「Currently editing messages and texts for」が「English(en_us)」となっているので、英語で記述します。
ひとまず、「English Mode」と入力しておきます。
続いて、「Currently editing messages and texts for」を「Japanese(ja_jp)」に変更し、Title のところを「日本語モード」と変更します。
これで App Text の設定は OK です。
今回は日本語と英語の２つだけ設定しましたが、他の言語に対応する場合は、「Currently editing messages and texts for」を変更して、該当する言語を選択し、Title のところを入力するだけで OK です。
これで言語が切り替わると App Text の内容も変更されるようになります。
以下の URL から動きを確認できますので、よろしければ試してみてください。
https://multilanguage00.bubbleapps.io/
まとめ
Bubble での多言語対応の方法について説明してきましたが、いかがでしたでしょうか？
思ったより簡単だと感じていただけたら幸いです。
それでは、また！
