完全なセットアップガイド
Bubble.io アプリを多言語にするために、GoLocal! をインストール、構成、使用するために必要なものがすべて含まれています。
安全な Bubble データ、安定した UI 翻訳、明示的な多言語ロジック
Bubble のプラグインを更新します。 プラグイン 以下の機能をテストする前に、タブをクリックしてください。 Project の構成、翻訳、請求は GoLocal プロジェクトに関連付けられたままになります。アプリ開発者は、Bubble の HTML ヘッダーにスクリプトを貼り付けたり保守したりする必要はありません。公開されたプラグインのバージョンには、サポートされているランタイムが含まれています。
編集可能なデータはそのまま残ります
通常の入力、複数行入力、Quill エディター、およびその他の contenteditable 領域は、ユーザーの入力中に逆変換されません。
再利用可能なコンテンツの除外
保護する対象はユーザーが入力したデータベース値と、重複した HTML ID の代わりに do_not_translate_selectors を持つ繰り返しグループ セル。
安全な自動逆引き検索
Bubble SearchBox、ドロップダウン、レガシー MultiDropdown、および Select2 MultiDropdown は、翻訳された選択肢をソース言語の値と照合できます。
GoLocal Query要素
通常の入力ごとに 1 つの独立した GoLocal Query 要素を使用するのは、その入力がソース言語のテキスト検索、条件、または API フィルターを駆動する場合のみです。
1 プラグインをインストールする
GoLocal! は、 無料のプラグイン Bubble.io マーケットプレイスで。インストールするのに料金はかかりません。プラグイン自体の費用は 0 ドルです。課金は、API キーを使用して GoLocal! プロジェクトに接続した場合にのみ適用されます。
Bubble エディター → [プラグイン] タブを開きます。
「+ プラグインの追加」をクリックし、「GoLocal」または「Auto Translator」を検索します。
GoLocal! — 自動翻訳装置をインストールします。すでにインストールされている場合は、最新の公開バージョンに更新します。
GoLocal! 要素を任意のページ (通常は再利用可能なヘッダー) にドラッグします。要素は非表示になります。
2 アカウントと Project を作成する
プラグインを有効にするには、 APIキー。 API キーは、プロジェクトの作成時に GoLocal! ダッシュボードに生成されます。
あ 5日間の無料トライアル 自動的に開始します。クレジットカードは必要ありません。あなたの APIキー すぐに生成されます。
API キーをコピーします。これは、Bubble でプラグインを設定するときに必要になります。
myapp.bubbleapps.io、それを正確に入力してください。3 プラグインを設定する
GoLocal! 要素をクリックします。少なくとも、設定する 1つのフィールド:
最低限必要なセットアップ:
api_key→ GoLocal! プロジェクトから API キーを貼り付けます。API キーだけを使用して、GoLocal! はプロジェクト構成をロードし、訪問者のブラウザーまたは保存されたウィジェット選択を使用し、表示されている UI テキストを翻訳し、言語スイッチャーを表示します。
4 プラグインフィールド — リファレンス
api_key必須GoLocal! ダッシュボードからのプロジェクトの API キー。
ドメインバインド — クライアント側のコードに安全に含めることができます。
source_languageオプションアプリの元の言語の 2 文字のコード。例: en, uk, de.
ソース言語がすでに GoLocal プロジェクトで構成されている場合は、通常、これを空のままにしておきます。意図的にプロジェクト/ワーカーの値をオーバーライドする必要がある場合にのみ設定します。
target_languageオプション通常、このフィールドは空のままにしておきます。 ウィジェットと訪問者の永続的な選択により、ページ読み込み全体でアクティブな言語が制御されます。
次のようなハードコードされた値 fr 要素が初期化されるたびにその言語を強制し、訪問者の選択をオーバーライドできます。 Bubble アプリが意図的に言語状態を所有し、各ページに 1 つの安定した言語コードを提供する場合にのみ、動的値をバインドします。
enabledオプション翻訳をアクティブにするかどうかを制御するチェックボックス。デフォルト: チェック済み.
show_widgetオプション組み込みの言語スイッチャー ウィジェットを表示します。デフォルト: チェック済み。 Bubble アプリが独自の言語コントロールを提供し、呼び出しを行う場合にのみオフにします。 switch_language.
widget_positionオプションウィジェットの位置: bottom-right (デフォルト)、 bottom-left, top-right, top-left.
dataset_1オプション瞬時にロードできるように、Bubble データベースを事前に変換します。
構造化フォーマット (推奨):
// Bubble セットアップ:
「(カテゴリ) :テキストとしてフォーマット」を検索します
内容: {このカテゴリのタイトル ;このカテゴリの名前 ;このカテゴリの本文}
区切り文字: ,
// 別の型を追加します。
:append (Cures) を検索します。 :format as text
内容: {このキュアのタイトル ;このキュアの名前 ;この治療法の処方箋}
区切り文字: ,
内側のフィールド { } によって区切られる ; — で区切られたブロック ,。参照 データセット 詳細については。
do_not_translate_idsオプションカンマ区切りの要素 ID 決して翻訳しないでください。グループ/コンテナ ID を指定すると、すべての子が除外されます。
例: user-bio, code-block, brand-section
HTML ID は一意である必要があります。繰り返しグループ セルで同じ ID を再利用しないでください。代わりにクラスで do_not_translate_selectors を使用してください。
do_not_translate_selectorsオプション保存されたとおりに保持する必要がある再利用可能なコンテンツまたは繰り返しコンテンツ用の CSS セレクター。一致する要素とそのすべての子は除外されます。
例: .gl-user-content, [data-user-content], [id^="gl-user-content-"]
ユーザーが入力したデータベース値と繰り返しグループに推奨されます。クラスまたは ID プレフィックス セレクターは、重複する HTML ID を作成せずに、多くの行を安全に照合できます。
private_translate_idsオプション要素 翻訳されています しかし翻訳 グローバルにキャッシュされない。ユーザーごとのデータ (名前、アドレス) に使用します。
例: user-name, order-address
コンテンツをユーザーが入力したとおりに保つ必要がある場合は、このフィールドを使用しないでください。代わりに do_not_translate_selectors を使用して除外します。
5 データセット — Bubble データベースの翻訳
ほとんどの Bubble アプリはデータベースからのデータを表示します。データセットがないと、動的コンテンツはファーストビューで翻訳されるため、目に見える遅延が発生します。データセットはすべてを事前翻訳します インスタントロード.
形式 1: 構造化 — 複数フィールド項目の場合 (推奨)
各アイテムを包む {}、フィールドを区切る ; (セミコロン)、使用します , 項目間の区切り文字として使用します。
// Bubble: (カテゴリ) :format をテキストとして検索します
内容: {このカテゴリのタイトル ;このカテゴリの名前 ;このカテゴリの本文}
区切り文字: ,
// 追加: (Cures) :format をテキストとして検索します
内容: {このキュアのタイトル ;このキュアの名前 ;この治療法の処方箋}
区切り文字: ,
// 結果: {健康;ウェルネス;ガイド...},{美容;スキンケア;ルーティン...},{アスピリン;緩和;2回服用...}
{} で分割 ; — ブロックを分割 , — テキスト内のカンマは安全です。形式 2: シンプル — 単一値リストの場合
カンマのない短い値 (カテゴリ名、タグ) の場合:
内容: このカテゴリの名前 区切り文字: ,
// 出力: 電子機器、衣類、本、おもちゃ
重要: テキストにカンマが含まれる可能性がある場合は、常に構造化形式を使用してください。 {field;field} ラッピング。
normalized_query フィルターまたは条件内でのみ。 完全な Bubble ガイドを参照してください。6 Bubble 状態、イベント、アクション
メインの GoLocal! 要素はページ翻訳を所有し、アクティブな言語を Bubble に公開します。条件およびイベントの状態を使用して、翻訳ライフサイクルの正しい時点でワークフローを開始します。
1. ランタイム対応
translator_ready = yes GoLocal が初期化されたことを意味します。すべての動的 Bubble 要素の変換が完了したことを意味するわけではありません。
2. 言語が変更されました
language_changed アクティブな言語が変更されたときに起動されます。読む current_language ここです。
3. パス完了
translation_complete 翻訳バッチが完了した後に起動されます。動的コンテンツにより、後のバッチが作成される場合があります。
current_languagetextアクティブな 2 文字の言語コード。 PDF リンク、Bubble 条件、およびアプリ所有の言語 UI に使用します。
detected_languagetextランタイムによって報告された、検出されたソース/ブラウザ言語。
translator_readyyes/no変換ランタイムが初期化された後ははい。
is_translatingyes/noGoLocal が変換パスを処理している間は、はい。
translation_completeyes/no最新のパスの完了フラグ。
total_textsnumber現在のランタイム セッションで観察されたテキスト項目の数。
cached_local / cached_bundle / cached_servernumber診断キャッシュカウンター。サポートやパフォーマンスのチェックに役立ちます。
翻訳済み / エラー / tokens_usednumberランタイム変換およびエラーカウンター。
last_error / preload_statustext最新のランタイム エラーと診断用のプリロード ステータス。
要素のアクション
switch_language— 必要なアクションフィールドに切り替えますtarget_lang、たとえばfr.Start_translation— 観察と翻訳を開始または再開します。Stop_translation— 再開されるまで観察と翻訳を停止します。rescan_dom— Bubble ポップアップ、再利用可能な要素、または繰り返しグループの更新後にレンダリングされたコンテンツを明示的にスキャンします。
例: フランス語の PDF リンクを表示する
リンクまたはグループに Bubble 条件を作成します。 When GoLocal! A's current_language is "fr"。訪問者が言語を切り替えたときにワークフローを実行する必要がある場合は、次を使用します。 When GoLocal! A language_changed。待つ必要はありません translation_complete 選択した言語を読むだけです。
7 ユーザーデータ、フォーム、繰り返しグループ
GoLocal はインターフェイス テキストを翻訳しますが、ユーザーが入力または作成したデータは安定したままでなければなりません。現在のランタイムは、通常の入力、複数行入力、Quill エディターなどを保護します。 contenteditable ユーザーが入力している間の領域。
デフォルトで安全
- • 入力値および複数行入力値は、入力したとおりに保存されます。
- • Quill
.ql-editor入力中に他の編集可能な領域はスキップされます。 - • 電子メール、パスワード、番号、日付、ID、ファイルは常に元の Bubble 値を使用する必要があります。
表示には除外が必要です
保存されたユーザー コンテンツが後で通常の Bubble テキスト要素によって表示される場合、GoLocal はそれが UI コピーであるかユーザー データであるかを認識できません。その表示要素またはその最小のコンテナを非翻訳ゾーンとしてマークします。
推奨される繰り返しグループ設定
- 1. ユーザーコンテンツを表示するテキスト要素のみを選択します。 ボタン、見出し、静的ラベルを翻訳する必要がある場合は、繰り返しグループ全体を除外しないでください。
- 2. 各行に一意の動的 ID を与えます。gl-user-content-現在のセルのモノの一意のID
- 3. GoLocal 要素にセレクターを 1 つ追加します。do_not_translate_selectors = [id^="gl-user-content-"]
Bubble セットアップまたは再利用可能な要素でカスタム クラスを適用できる場合、 .gl-user-content はさらに簡単です。そのクラスを一度追加します do_not_translate_selectors.
サポートされている非翻訳マーカー
ランタイムは尊重します data-tr-skip, data-no-translate, translate="no"、ネストされた .notranslate 要素。構成された ID および CSS セレクター フィールドは、依然として最も簡単な Bubble ネイティブの方法です。
スキップとプライベート翻訳の違い
do_not_translate_* 元の値を保持します。 private_translate_ids 値は引き続き変換されますが、共有グローバル キャッシュは妨げられます。プライベート翻訳は、コンテンツを真に翻訳する必要がある場合にのみ使用してください。
home または check_box。アイコンがテキストで裏付けされている場合は、グリフ キーワードが翻訳されないように、最小のアイコン/コントロール コンテナを除外します。8 翻訳エディターとマニュアル修正
翻訳エディターは、製品の固定コピー (ナビゲーション ラベル、見出し、ボタン、ヘルプ テキスト、および 1 つのレビュー済み翻訳が必要なその他の語句) に使用します。手動入力はロックされており、後の自動翻訳によって置き換えられることはありません。
手動補正が上手い
ソース アップグレードプラン → フランス語の商品フレーズをレビューしました アメリオレ・ル・プラン。これは安定したインターフェイスのコピーであり、エディターに含まれています。
ユーザーデータを一度に 1 行ずつ修正しないでください
顧客が作成した名前 (例: 本籍地での旅行 Bubble 表示要素では除外する必要があります。何千もの ID 変換を追加することは、非変換ゾーンの安全な置き換えにはなりません。
- 1. GoLocal ダッシュボードでプロジェクトを開き、選択します 翻訳.
- 2. 正確なソースフレーズと言語のペアを検索します。
- 3. ターゲット値を編集するか、 翻訳を追加 新しい正確なソースフレーズの場合。
- 4. 保存します。エントリにはマークが付いています マニュアル、バンドルのバージョンが変更され、ランタイムによってプロジェクト ディクショナリが更新されます。
- 5. フレーズがレンダリングされる正確な Bubble ルートを再テストします。使用する
rescan_domサードパーティによる異常なレンダリングの後にフレーズが表示される場合のみ。
en → frではありません auto → fr。ランタイムは、プロジェクトの解決されたソース ペアを要求します。9 翻訳の仕組み
GoLocal は、レンダリングされた Bubble DOM を監視し、最初にプロジェクト バンドルとローカル キャッシュから翻訳を適用し、欠落または変更されたフレーズのみを要求します。 Bubble が後でレンダリングするポップアップ、再利用可能な要素、繰り返しグループの監視を続けます。
初期ページ読み込み
ランタイムはソース言語とターゲット言語を解決し、現在のプロジェクト バンドルを読み込み、表示されている UI テキストをスキャンし、組み込みのアンチフリッカー フローを通じてページを表示します。
キャッシュされた翻訳
既知のフレーズは、再生成せずにバンドルまたはブラウザのキャッシュから適用されます。バンドルのバージョンが変更されると、キャッシュされた古い値が無効になります。
動的Bubbleコンテンツ
DOM オブザーバーは、新しくレンダリングされたポップアップ、再利用可能な要素、条件付きで表示されるグループ、および繰り返しグループ セルを選択します。 rescan_dom は明示的なフォールバックです。
10 トラブルシューティングとリリーステスト
ページが 1 つの言語にリセットされます
Bubble アプリが意図的に言語を所有している場合を除き、すべてのページで target_language を空のままにし、GoLocal 要素を再利用できます。ハードコードされた値は初期化時に再適用されます。
ウィジェットがありません
show_widget がチェックされていること、最新のプラグイン バージョンがインストールされていること、および目的の GoLocal 要素が 1 つだけページを制御していることを確認します。次に、Bubble ステップバイステップ デバッガー モードの外でテストします。
ポップアップまたは新しい繰り返しグループ行は未翻訳のままです
要素が表示されるまで待ちます。通常、観察者はそれを自動的に見つけます。サードパーティ要素のレンダリングが異常な場合は、ポップアップまたはグループが表示された後に rescan_dom を実行します。
入力中に入力またはリッチ テキストが変更される
プラグインを更新し、現在のランタイムを確認し、保存ワークフローが、翻訳された表示テキストや normalized_query ではなく、元の入力/エディター値を読み取ることを確認します。
ユーザー作成のフランス語テキストが再翻訳される
do_not_translate_selectors を通じて表示テキスト/コンテナを除外します。 保護する対象は周囲のすべての静的 UI ではなく、最小の動的値を取得します。
手動補正は自動に戻ります
現在の手動入力はロックされています。ランタイムで使用されているのと同じソース テキストと正確な言語ペアを編集したことを確認してから、プロジェクト、ルート、フレーズ、テスト時間をサポートに送信してください。
月/日の名前は英語のままです
ネイティブ ブラウザまたは Bubble 日付ピッカー クロムは、ブラウザ/コントロール ロケールに従います。 GoLocal は周囲のラベルを変換しますが、内部の日付ピッカー UI は書き換えません。
Chrome は独自のページ翻訳を提供します
プラグインは、GoLocal 自体の実行を許可しながら、ブラウザー翻訳用にドキュメントを notranslate としてすでにマークしています。プラグインを更新します。 2 番目の翻訳拡張機能やスクリプトを追加しないでください。
翻訳後のテキストの折り返しが異なる
GoLocal は Bubble タイポグラフィを保持します。翻訳されたフレーズは長くなる可能性があるため、すべてのブレークポイントで Bubble の最小幅、最大幅、適合高さ、オーバーフロー、および応答ルールを確認してください。
Bubble 受け入れチェックリスト
- ✓更新せずにソース→ターゲット→ソースを切り替えます。
- ✓すべての Bubble ページと再利用可能なヘッダーの間を移動します。
- ✓ページの読み込み後にポップアップを開き、繰り返しグループの行を読み込みます。
- ✓通常のフィールドとリッチ テキスト フィールドを入力、貼り付け、編集、保存し、再度開きます。
- ✓各繰り返しグループ内で 1 つの除外されたユーザー データ値をテストします。
- ✓SearchBox、ドロップダウン、レガシー/Select2 MultiDropdown 検索をテストします。
- ✓すべての current_language 条件リンクと PDF/リソース リンクをテストします。
- ✓Chrome、Safari、モバイル幅、およびプライベート セッションを再テストします。
[GoLocal v4].11 価格設定＆請求
3つのプラン、すべてに 無制限の翻訳単語と無制限のターゲット言語.
| 特徴 | Starter | Pro | Business |
|---|---|---|---|
| 月額料金 | $15/mo | $35/mo | $89/mo |
| 年間価格 | $149/yr | $349/yr | $890/yr |
| 対象言語 | 無制限 | 無制限 | 無制限 |
| MAU 制限 | 30K | 150K | 1M |
| Projects | 1 | 1 | 2 |
MAU
翻訳を見たユニークな訪問者。ボットはフィルタリングされて除外されました。超過分 10% は無料、その後は 3/10,000 ドルの追加料金。
言語
すべての有料プランには、言語ごとの追加料金なしで無制限の対象言語が含まれています。
5日間の無料トライアル
すべての新しいプロジェクトは無料トライアルから始まります。クレジットカードは必要ありません。
12 パートナー Program
GoLocal! を推薦してお金を稼ぎましょう
紹介リンクを共有して獲得しましょう 定期的なコミッション あなたが連れてくるすべてのお金を払う顧客ごとに。
パートナーとして登録する
ダッシュボード → パートナー タブ → 「パートナー Program に参加」。独自の紹介リンクを取得します。
リンクを共有する
ブログ、YouTube、Bubble フォーラム、ソーシャル メディア、チュートリアル、またはクライアントとの直接。
コミッションを獲得する
紹介された各ユーザーのサブスクリプションの存続期間中、定期的に発生するコミッション。
給料を受け取る
残高が最低基準に達したら、銀行振込または PayPal 経由で支払いをリクエストします。
アプリを多言語化する準備はできていますか?
無料のプラグインをインストールし、プロジェクトを作成し、API キーを貼り付けると、Bubble アプリはあらゆる言語を話します。