Bubble.io で言語スイッチャーを設定すると、ユーザーは言語を簡単に切り替えることができます。 この機能は、世界中のユーザーを対象とするアプリケーションにとって特に価値があり、ユーザーは好みの言語でプラットフォームを操作できるようになります。 人気のノーコード開発プラットフォームである Bubble.io は、開発者がコーディングに関する広範な知識がなくても多言語アプリケーションを作成できるようにする組み込みのローカリゼーション機能を提供します。
Bubble.io に言語スイッチャーを実装するには、通常、開発者はアプリの設定でサポートする言語を定義することから始めます。 次に、ユーザーが言語を変更するために操作できるドロップダウンまたはボタン要素を作成します。 この記事では、自動翻訳サービス Web サイトの 1 つを使用して Bubble.io に言語スイッチャーを設定する方法について説明します。
Web サイトに言語スイッチャーを追加するのには理由がないわけではありません。 Bubble Web サイトにセットアップする必要がある理由は次のとおりです。
多言語の Bubble.io Web サイトで言語を切り替えることの重要性を理解したところで、それを実装する方法について説明します。 通常、Web サイト翻訳サービスはこの機能を提供しており、ユーザーのニーズに合わせて調整できます。
ただし、すべての翻訳サービスがカスタマイズ可能でユーザーフレンドリーな言語スイッチャーを提供しているわけではありません。 したがって、さまざまなフレームワークに対応し、柔軟な言語切り替え機能を提供する自動翻訳サービスを選択することが非常に重要です。
これらの基準を満たす自動翻訳サービスの 1 つがLinguise。 Linguise、人気のある CMS や Bubble.io などの Web ビルダーと統合された、高度にカスタマイズ可能で使いやすい言語切り替え機能を提供します
LinguiseBubble とのシームレスな統合を提供し、開発者が多言語アプリケーションに言語切り替えを簡単に組み込めるようにします。 Linguiseの高度な機能とユーザーフレンドリーなインターフェイスを活用することで、Bubble Web サイトでの言語スイッチャーのセットアップと保守を簡素化できます。
Bubble.io Web サイトにLinguiseインストールし、言語スイッチャーを設定する手順は次のとおりです
まずは無料のLinguiseアカウント、Web サイトのドメインを追加します。 サブスクリプション プランを選択する前に、30 日間の無料トライアルを利用できます。
次に、翻訳を承認するためにドメインを登録する必要があります。 「https://」を含むドメイン名をコピーし、プラットフォームとして「other」を選択します。
次に、ソース言語とターゲット言語を選択します。
Linguiseダッシュボードに Web サイトを登録した後、2 つのインストール オプションがあります。
DNS レコードを自動的に追加するには、 「DNS を自動的に接続する」をクリックします。 Entri と呼ばれるこの機能は、DNS レコードを管理することでインストール プロセスを簡素化します。 あるいは、DNS レコードをドメイン プロバイダーに手動でコピーすることもできます。
ボタンをクリックすると、Entri は登録された Web サイトの URL を分析し、パブリック DNS レコードを調べて、必要なプロバイダーと DNS レコードを特定します。
次に、 「[ドメインプロバイダー]で認証」 (例：Cloudflare)をクリックします。 この操作により、ドメイン プロバイダーのログイン ページにリダイレクトされ、ログインして続行できます。
ログインすると、Entri は適切な DNS レコード (言語ごとに 1 つの DNS、検証キー用に 1 つの TXT DNS) をドメインに自動的に追加します。
認証後、Entri はすべての DNS 設定が正常に構成されたことを通知します。 すべての DNS エントリがドメインに伝播されると、変換機能が使用できるようになります (通常は 20 ～ 30 分かかります)。
手動インストールの場合は、以下の手順に従ってください。
手動インストールの場合は、fr.domain.com や es.domain.com などの多言語ページの設定に必要な DNS レコードを表示する画面にリダイレクトされます。
これらの要素を Bubble.io DNS 設定にコピーします。
次に、ドメイン マネージャーにアクセスし、DNS セットアップ領域に移動します。 指示に従ってコピーします。
各レコード タイプ (TXT および CNAME) の例を次に示します。
すべてのレコードを追加すると、構成は次のようになります。
すべてのレコードをドメイン DNS に追加した後、「DNS 構成を確認」ボタンをクリックして DNS の伝播を確認します。
DNS 検証には通常 30 分から 1 時間程度かかります。 完了すると、 Linguiseダッシュボードの DNS リストの横に緑色のインジケーターが表示されます。 Bubble.io Web サイトを翻訳する準備がほぼ整いました。 残っているのは、国旗を含む言語スイッチャーにリンクすることだけです。
言語スイッチャーは、ユーザーが好みの言語を選択できるようにするフラグ ポップアップです。 これを実装するには、ドメイン登録プロセスの最後またはドメイン設定内で提供されるコードを Bubble.io サイト ページのヘッダーにコピーします。 国旗言語スイッチャーは公開 Web サイトに自動的に表示されます。
次に、Bubble Web サイトのパネルに移動します。 左側のサイドバーメニューの「設定」をクリックし
「詳細設定」の「ヘッダー内のスクリプト/メタタグ」まで下にスクロールしますLinguiseを貼り付け、[保存] をクリックしてサイトを公開します。
言語スイッチャーのセットアップを開始するには、 Linguiseの[設定] > [言語フラグの表示]。 このページでは、いくつかの設定を調整できます
フラグと言語名、フラグと言語の略語、または言語名のみの表示を組み合わせることができます。 ユーザーが認識しやすいように、フラグと言語名の両方を使用することをお勧めします。
メインディスプレイを設定した後、表示されるフラグのデザインをさらにカスタマイズします。
旗のデザインを構成した後、旗の色とサイズをさらにカスタマイズできます。 調整できる設定は次のとおりです。
最後に、フラグ ボックスの影の設定を調整できます。 最初のオプションでは、Web サイトに表示される各旗アイコンにシャドウ効果を適用できます。 次のオプションは、ユーザーが言語フラグの上にマウスを置いたときの影の効果を制御します。
必要な調整をすべて行ったら、「保存」ボタンをクリックしてカスタマイズの変更を適用します。 次に、Bubble Web サイトにアクセスして、構成が正常に適用されていることを確認します。 このように言語スイッチャーが表示されます。
セットアップ後、Bubble の多言語 Web サイトで言語スイッチャーがどのように機能するかを確認できます。
次に、Web サイトをスペイン語などの他の言語に翻訳できます。
Bubble 多言語 Web サイトで言語スイッチャーを正常に設定したら、サイトと訪問者の両方のために言語スイッチャーを最適化するためのヒントを考慮することが重要です。
Bubble.io Web サイトに言語スイッチャーを実装する場合、簡単に認識できる言語フラグまたはアイコンを使用することが重要です。 これらの視覚的な手がかりは、ユーザーが好みの言語をすばやく識別して選択するのに役立ちます。 たとえば、地球のアイコンは言語オプションを表すものとして広く理解されています。 あるいは、国旗を使用することもできますが、言語は常に 1 つの国に関連付けられているわけではないため、問題が発生する可能性があることに注意してください。
例: Amazon の Web サイトでは、上部のナビゲーション バーで現在選択されている言語 (例: 「EN」) の横に小さな地球アイコンが使用されています。 このシンプルかつ効果的なアプローチにより、ユーザーは現在の言語設定に関係なく、言語オプションをすばやく見つけることができます。
フラグは便利ですが、単独で使用すべきではありません。 ネイティブ スクリプトに言語の名前をフラグやアイコンと一緒に含めると、明確になり、潜在的な混乱を回避できます。 これは、複数の国または地域で話されている言語の場合に特に重要です。
例: Airbnb Web サイトの言語スイッチャーには、言語名と国旗が表示されます。 たとえば、「English (US)」には米国の国旗が表示され、「Français」にはフランスの国旗が表示されます。 この組み合わせにより、ユーザーは好みの言語オプションを正確に識別できます。
言語スイッチャーの配置は、ユーザーのアクセシビリティにとって重要です。 一般的な場所には、ヘッダーの右上隅、フッター内、またはメイン ナビゲーション メニュー内などがあります。 重要なのは、メイン コンテンツ領域を乱雑にせずに、簡単に見つけられるようにすることです。
例: Web サイト tiffany.com では、言語スイッチャーがページの右下隅にあり、常に表示され、アクセスできます。 この一貫した配置により、ユーザーはサイトのどこにいても言語オプションをすぐに見つけて使用できます。
言語スイッチャーがデスクトップ コンピューターからスマートフォンまで、すべてのデバイスで適切に動作することを確認します。 小さい画面では、オプションの水平リストの代わりにドロップダウン メニューを使用するなど、デザインを調整する必要がある場合があります。
例:ユネスコ Web サイトの言語スイッチャーは、さまざまなデバイスに美しく適応します。 デスクトップでは、ヘッダーに水平のリストとして表示されます。 モバイルでは、コンパクトなドロップダウン メニューに変換され、モバイルのレイアウトを損なうことなく使いやすさを確保します。
Bubble.io Web サイトのすべてのページで、言語スイッチャーのデザイン、機能、位置を同じに保ちます。 この一貫性により、ユーザーは現在のページに関係なく言語オプションの場所を正確に知ることができるため、サイトをより効率的に移動できるようになります。
例: Web サイトでは、ホームページから製品ページ、チェックアウト プロセスに至るまで、すべてのページのフッターに言語スイッチャーが一貫して配置されています。 この一貫性により、ユーザーはブラウジング中やショッピング中にいつでも簡単に言語を切り替えることができます。
これで、Bubble.io 多言語 Web サイトの言語を選択する方法はすでに理解できました。 言語セレクターを読み出すことでさまざまなメリットが得られ、さらに前述の点に基づいた最適化につながります。
言語セレクターを効果的に最適化すると、ユーザー エクスペリエンスが大幅に向上します。 Linguiseにサインアップし、 Bubble.io Web サイトと統合し、言語セレクターをカスタマイズしてユーザー エクスペリエンスを向上させます。
ウェブサイトの自動翻訳、国際SEOなどのニュースを受け取る！
メールを共有せずに終了しないでください。
宝くじに当たるという保証はできませんが、翻訳に関する興味深い情報ニュースや、時折割引を受けることはお約束できます。
