チャット系ツールの開発で、Google翻訳のAPIを使う機会があったので備忘録をば。
Google Cloudの設定をする
まずはGoogle CloudでAPIを使えるようにします。
Google Translation APIを有効にします。
次にAPIキーの作成をします。
ここではテストなので特に制限を入れませんでしたが、リファラー制限など入れておいてくださいね。
APIキーをコピーしておきます。
Bubble側の設定
APIコネクタの設定
次に、APIコネクタを設定します。
Add Another APIから、わかりやすい名前をつけます。
Authentication：Private key in URLにし、Key name：key、key value：先ほど作成したAPIキーを設定します。
Add Another Callから、APIの呼び出しを以下のように設定します。
Use asはActionでもOK。翻訳してそのままDB保存するのであれば、Dataが便利かな？
最低限、q：翻訳する文 とtarget：翻訳する言語 があれば問題ないです。source：翻訳元の言語 ですが、なくても自動検出してくれます。
より正確に行うにはsourceも設定しておきます。
ここで、Initialize callをクリックしてAPIレスポンス形式を登録しましょう。
APIコネクタの設定で重要なのは、正直「Include errors in response and allow workflow actions to continue」のチェックだと思います。
チェックを入れないと、APIエラーが起きた時にワークフローが止まります。
チェックを入れていればエラーを検知でき、ワークフローは止まりません。
何らかの理由でAPIエラーが起きた際にユーザーにフィードバックするために、エラーを検知できるようにします。
翻訳結果はリストで返ってきますので、上記のようにしておきます。
画面を作る
Multiline Inputにテキストを入力して、ボタンクリックで翻訳したテキストを表示するようにします。
以下のような感じで、Multiline Input、ボタン、Group、テキストを配置しました。
ワークフローを設定する
ボタンクリック時のアクションで、Display data in a Groupを選択し、翻訳したテキストを設定します。
Data to displayに、Get data from an external APIを選択します。
API providerは先ほどAPIコネクタで設定したGoogle Translateです。
選択するとパラメータの入力欄が表示されるので、それぞれ設定します。
ここではテストなので ja から enへの翻訳としますが、いろんな言語にできるので色々試してみてください。
値はリストで返ってきますが、テストなので1つめを表示するように設定しました。
プレビュー
ここまで設定したら、プレビューしてみましょう。
こんな感じで翻訳が確認できます！
ただし、3つ目の翻訳のように一部の記号がHTMLエンティティとして返却されます。
デコードするか文字列置換をして、適切に処理しましょう。
