Qodlyページのローカライズ：実践ガイド

4Dアプリケーションのローカライゼーションは、主にデスクトップアプリケーション用に設計されたXLIFFアーキテクチャー（ ）により、数十年にわたってサポートされてきました。

しかし、ブラウザーの動作は異なります。

そのため、4D Qodly Pro は、Webインターフェース用に調整された、新しいビルトイン国際化アプローチ(i18n)を導入しています。これにより複数言語に対応した Qodlyページをより柔軟に作成することができるようになります。

では、実際にどのように機能するのか見てみましょう。

HDI: Qodlyページのローカライズ

ローカライズとは一体何でしょうか？

ローカライゼーション(ローカライズ)とは、アプリを異なる言語、地域、あるいは文化的なニュアンスに対応させるプロセスのことで、単にテキストを翻訳するだけでなく、現地の期待に応えるためにデザインや機能をカスタマイズすることです。

4D Qodly Proでは、ローカライゼーションは国際的なユーザーの獲得と維持に不可欠です。彼らの言語や文化を尊重することで信頼を築き、より強い関係や高い満足度を育みます。ローカライゼーションはまた、製品を自然で直感的なものにし、世界中のユーザーに対して摩擦を減らすことで、その普及を促進します。

開発の早い段階でローカライゼーションを構想に組み込むことで、アプリを新しい市場にスムーズに展開できるようになり、効率的なスケーリングと世界的な競争力の維持が可能になります。海外展開を想定していない場合でも、ローカリゼーションの可能性を先に計画しておくことで、後で時間とコストを節約し、グローバルな市場への成長を加速させます。

使用例:最小限のローカライゼーションUIの構築

今回の例では、テキストコンポーネントと、ユーザーが言語を選択できるセレクトボックスを表示するシンプルなページを作成することを考えます。

• テキストコンポーネントには、次のようなテキストを使用します。“This application is available in multiple languages. You can switch your preferred language at any time from the settings menu.”(“このアプリケーションは複数の言語に対応しています。設定メニューから好きな言語にいつでも切り替えることが可能です。”)
• このアプリでは、英語、フランス語、スペイン語、日本語をサポートするものとします。

ステップ1：UserLanguage Qodly ソースによる言語選択

言語選択を実装する場合、アプリケーションでサポートされているすべての言語をリストアップしたセレクトボックスが必要になることがよくあります。ここではカスタムのQodlyソースを作成するのではなく、4D Qodly Pro が提供しているUserLanguageと呼ばれるビルトインQodlyソースを使用し、この作業を効率化します。

UserLanguage Qodly ソースは自動的に以下のことを行います：

• UserLanguage.supported を使用して、利用可能な言語をセレクトボックスに入れていきます。

• UserLanguage.selected を介して選択された言語を取得できます。

やるべきことは、セレクトボックスにUserLanguage.supported を割り当てるだけです。その結果、エンドユーザーは実行時に言語を切り替えることができます。他に必要なロジックはありません。

ステップ 2: ロケールの作成

言語選択のためにこのQodlyソースをフルに活用できる前に、まずアプリケーションがサポートするロケールを定義する必要があります。

ロケールとは？

ロケールとは、アプリがユーザーにコンテンツを表示する方法を決定する、特定の言語/地域の設定を意味します。

ロケールの作成方法

アプリのロケールを管理するために、Qodly Studio のエクスプローラーに新しいローカライゼーションセクションが追加されました。

 

最初のロケールを追加するには、ローカリゼーションセクションの新規ロケール追加ボタンをクリックするだけです。

クリックするとドロップダウンメニューが表示されますので、追加したいロケールを選択してください。今回の例では、英語、フランス語、アラビア語、そしてスペイン語を選択します。

ステップ 3: QODLYページ編集中にローカライズを切り替える

4D Qodly Proでは、ヘッダーパネルにロケール切り替えコントロールがあります。これにより、編集モードでQodlyページをプレビューしたり、直接翻訳することができます。

一度ロケールを選択すれば、以下のようなことが可能になります:

• その言語設定専用のテキスト、画像、レイアウトなどの編集が可能です。

• あらゆる視覚的な変更 (フォントサイズ、配置、コンテナサイズなどの変更) は、現在アクティブなロケールにのみ適用されます。

• 画像などは、ターゲット設定に応じて入れ替えることができます。

つまり、Qodlyでのローカライゼーションは文字列だけではありません。完全なUI 適応といえます。

アラビア語やヘブライ語など、右から左へのレイアウトを必要とする言語に役立ちます。

✅翻訳が長かったり、異なるフォーマットが必要な言語に最適です。

💡 ローカライゼーションはStateともシームレスに連動します – つまり、ローカライズされた変更は、ページで定義されたStateのバリエーションと一緒に適用されます。

ステップ4：よく使う翻訳をキーで再利用する

翻訳された文章が複数のページやコンポーネントにまたがって表示される場合、それを翻訳キーとして保存することができます。

翻訳キーとは?

翻訳キーは、アプリケーション内の多言語コンテンツを管理するために使用される一意の識別子です。すべてのコンポーネントに翻訳されたテキストを手入力するのではなく、キーをコンポーネントにバインドします。各キーは、サポートされているすべての言語のテキストのバージョンを保存するため、アプリケーションをクリーンで一貫性のある、メンテナンスしやすい状態に保ちます。あるキーのテキストを更新すると、そのキーが使用されている場所であればどこでも自動的に反映されます。

今回の使用例では、textコンポーネントにバインドされた翻訳キー“key1“を使用します。

サポートされている4つの言語での表示は以下の通りです：

英語：This application is available in multiple languages. You can switch your preferred language at any time from the settings menu.

フランス語：Cette application est disponible en plusieurs langues. Vous pouvez changer votre langue préférée à tout moment depuis le menu des paramètres.

スペイン語：Esta aplicación está disponible en varios idiomas. Puedes cambiar tu idioma preferido en cualquier momento desde el menú de configuración.

日本語：このアプリケーションは複数の言語で利用可能です。設定メニューからいつでもお好みの言語に切り替えることができます。

アプリケーション内で“key1“が使用されている場合、Qodlyは自動的に選択されたロケールに基づいた正しいバージョンを表示します。これは、効率的で信頼性が高く、多言語でアプリを拡張するのに理想的な方法です。

翻訳キーの作成とバインド方法

ロケールが何も選択されていなければ、テキストコンポーネントのラベルをダブルクリックすることで、最初の翻訳キーを作成し、バインドすることができます。他のコンポーネントに対しても、プロパティパネルで同じことができます。

 

またこの他に、Localizationセクションでキーを管理することもできます。このセクションでは、すべてのキーとその翻訳が一箇所に表示され、簡単に閲覧・編集することができます。

どちらの方法でも、アプリの成長に合わせてローカライズを整理しておくことができます。

💡 ローカライゼーションは単にテキストを翻訳することだけではありません。アラビア語やクルド語などの言語では、アプリが自然でユーザーフレンドリーに感じられるように、テキストの方向を左から右へ、右から左へと切り替えるなど、レイアウトを調整する必要もあります。

ステップ5：翻訳のインポートとエクスポート

すべての翻訳キーと値をJSONまたはCSV形式でダウンロードできます。

これにより、以下のことが可能になります：

• コンテンツを外部で翻訳する (AIや翻訳サービスを使用することも可能です)

• 翻訳チームと共有する

• ワンクリックでQodlyに再アップロード

これは、数十のロケールがある大規模なプロジェクトで特に役立ちます。

ボーナスヒント：ユーザーの言語設定を保存する

サーバーサイドのパーソナライズ（エラーメッセージやデータベースからのローカライズされたコンテンツなど）のために、ユーザーの希望する言語をSession オブジェクトに保存することができます。

これは、Qodlyページ自体に存在しないデータであっても、クライアントとサーバーの両方で一貫したエクスペリエンスを維持するのに役立ちます。

UIに表示されるもの

アプリをプレビューすると、セレクトボックスを使用して言語を切り替えると、テキストが即座に更新される様子がわかります。ユーザーが選択したロケールがリアルタイムで反映され、スムーズな体験ができます。

しかし、ユーザーが手動で言語を選択しなかった場合はどうなるでしょうか？

その場合、4D Qodly Proが舞台裏でスマートな処理を行います。何層にもレイヤーされた戦略に従って、あなたのアプリが常に最も適切な言語でコンテンツを表示するようにします：

• セッション保存言語：ユーザーが以前に言語を選択した場合、Qodlyはそれを記憶します。ユーザーが選択した言語はセッションに保存され、次回アプリを開いた時に自動的に適用されます。
• ブラウザの言語検出：ユーザーの初回訪問時、保存された設定がない場合、Qodlyはブラウザのデフォルト言語をチェックします。その言語がサポートされているロケールのいずれかと一致する場合、その言語が自動的に選択されます。
• プライマリー・ロケール・フォールバック: セッションやブラウザに一致するものがない場合、Qodlyはローカライゼーションセクションで定義されたプライマリーロケールの設定をデフォルトとして使用します。

そのため、ユーザーが積極的に言語を選択してもしなくても、あなたのアプリは常に自然で親しみやすく、すぐに使える方法で表示されます。

最後に

グローバルユーザーは後から付け足すものではなく、次なるチャンスです。ローカライゼーションを早期に統合することは、アプリを翻訳するだけでなく、どこに行ってもネイティブだと感じられる製品をデザインすることにつながります。

第一印象が重要な現在の世界では、ユーザーの言語を話すことは贅沢な機能ではありません。むしろ新しいスタンダードというべきものです。そして、4D Qodly Proがあれば、明瞭で、効率的で、自信を持って、そのスタンダードを満たすことができます。

ローカライズのベストなタイミングはいつか？それは、ユーザーから要求される前に実装することです。