ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubble での多言語対応の方法

f:id:toka-xel:20200331143254p:plain


こんにちは! ノーコード ラボの岡崎です。

今日は Bubble の多言語対応のやり方について説明します。

1. アプリケーションのデフォルトの言語の設定

Settings - Languages の中に「Application primary language」という項目があります。
ここでアプリのデフォルトの言語を設定できるようになっています。
アプリのターゲットが日本であれば、ここは「Japanese(ja_jp)」に設定します。

f:id:toka-xel:20200331111949p:plain

2. Bubble の言語切り替えの方法

Bubble での多言語対応をするには、アプリケーションの言語の設定を明示的に切り替えることができれば OK です。
Bubble での言語切り替えには2つの方法があります。

(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 としておきます。

f:id:toka-xel:20200331113155p:plain

次にこの language を言語用のフィールドとして Bubble 側に認識してもらう設定をします。

Settings - Languages の中に「Language field on the user type」という項目があります。
このドロップダウンをクリックすると先ほど作成した language が表示されますので、これを選択します。

f:id:toka-xel:20200331113905p:plain

これで Bubble 側は User Type の language フィールドを言語用のフィールドとして認識します。

ここまでできたら、あとは User Type の language フィールドの値を変更することで言語を切り替えることができるようになります。

なお、この方法はログインしていないユーザーでも利用可能です。

2.3 共通する注意点(Refresh が必要です!)

ここまでの説明で動きを試してしまった人、申し訳ありません。
多分うまく動いていないですよね?

言語の切り替えをした場合、アプリを最新にして読み込み直す必要があります。
これは Bubble でアプリを起動した際に1種類のみの言語セットを読み込んでいるためです。
言語セットを変更するためにはアプリを最新にして別の言語セットを読み込み直す必要があります。

2.3.1 QueryString での lang パラメーターの設定時のワークフロー

例えば、「日本語」というようなテキストを押したときのワークフローを考えましょう。
この方法では QueryString に lang というパラメータを設定すれば良いので、次のようなワークフローを設定することになります。

f:id:toka-xel:20200331115709p:plain

こうすると、「日本語」というテキストを押すと、index?lang=ja_jp に遷移するのですが、このままだと言語設定は変更されません。
この後に「refresh the page」をする必要があります。

f:id:toka-xel:20200331120014p:plain

これで index?lang=ja_jp に遷移した後、リフレッシュが走って言語設定も切り替わります。

ただし、画面の上の方をみていただければわかりますが、エラーが一つ発生しています。
Go to page を選択した場合は、Workflow の最後でないといけないという制限があり、それに違反しているというエラーが出ています。
エラーを無視していればいいのかもしれませんが、あまり気持ちのいいものではありません。

もう一つ理由があるのですが、それは、この方法は Google に推奨されていないということです。

Managing multi-regional and multilingual sites - Search Console Help

こちらに次のような記述があります。

f:id:toka-xel:20200331133004p:plain

そのため、この方法は簡単ではあるのですが、あまりお勧めはできない方法だと考えています。

2.3.2 User Type での言語フィールドの設定時のワークフロー

同様に「日本語」というようなテキストを押したときのワークフローを考えましょう。
この方法では User Type の language フィールドの値を変更し、Refresh を実行します。

f:id:toka-xel:20200331121326p:plain

これで言語設定の切り替えも OK です。ワークフローでのエラーも発生していません。

3. アプリ内の文字の多言語対応の方法

今までの説明で アプリの言語設定を切り替えることができるようになりました。

ただし、アプリ内の文字情報については、このままでは切り替えられません。
説明文や文字情報などを言語設定に合わせて切り替えるために Bubble では「App Text」というものが用意されています。

以下、App Text の使い方について説明します。

App Text の使い方

まず、テキストエレメントを一つ置き、Insert dynamic data を選択し、App Text (?) を選択します。

f:id:toka-xel:20200331122607p:plain

Define another text を選択します。

f:id:toka-xel:20200331124539p:plain

New Application Text を設定する画面が出てきますので、「Title」と入力し、「OKAY」ボタンを押します。

f:id:toka-xel:20200331125420p:plain

これで Text ID が「Title」という App Text が作成されました。

テキストエレメント上では次のような表示になります。

f:id:toka-xel:20200331125618p:plain

この状態が確認できたら Settings - Languages の画面に移動します。
「Application texts & messages」の中に「Title」という項目ができているのがわかります。

このページは「Currently editing messages and texts for」が「English(en_us)」となっているので、英語で記述します。
ひとまず、「English Mode」と入力しておきます。

f:id:toka-xel:20200331130334p:plain

続いて、「Currently editing messages and texts for」を「Japanese(ja_jp)」に変更し、Title のところを「日本語モード」と変更します。

f:id:toka-xel:20200331130556p:plain

これで App Text の設定は OK です。
今回は日本語と英語の2つだけ設定しましたが、他の言語に対応する場合は、「Currently editing messages and texts for」を変更して、該当する言語を選択し、Title のところを入力するだけで OK です。

これで言語が切り替わると App Text の内容も変更されるようになります。

f:id:toka-xel:20200331132235g:plain

以下の URL から動きを確認できますので、よろしければ試してみてください。

https://multilanguage00.bubbleapps.io/

まとめ

Bubble での多言語対応の方法について説明してきましたが、いかがでしたでしょうか?
思ったより簡単だと感じていただけたら幸いです。

それでは、また!