多言語Webアプリケーションの開発は、今日のグローバル化デジタルランドスケープではオプションではありません。ユーザーは、ネイティブ言語でコンテンツとやり取りし、エンゲージメント、コンバージョン、市場拡大に直接影響を及ぼすという経験を期待しています。Model-View-Controller(MVC)パターンは、固形ローカリゼーション技術と組み合わせ、スケーラブルで保守可能なアプリケーションの構築に実績のあるアーキテクチャを提供します。この記事では、コアコンセプト、実用的な実装手順、およびMVCベースのプロジェクトに複数の言語を取り入れるための最良のプラクティスについて説明します。

MVCパターン: 局在化のための自然な適合

MVCアーキテクチャは、アプリケーションを相互接続するコンポーネントの3つに分けます。モデル、ビュー、およびコントローラー。この問題の分離は、各コンポーネントが国際化(i18n)およびローカリゼーション(l10n)のために拡張または変更することができるため、多言語のサポートを追加する場合に特に価値があります。

  • [モデル:]]は、データとビジネスロジックを管理します。 多言語アプリの場合、モデルは、データベース、API、リソースファイルから、言語固有のコンテンツを保存または取得する必要があります。
  • []ビュー:[]]]]] プレゼンテーションレイヤーを処理します。ビューは、各言語でコンテンツを正しく表示するために、ローカライズされた文字列、日付/数値のフォーマット、および方向-awareレイアウト(RTL/LTR)を使用します。
  • [ コントローラ:]] ユーザ入力を処理し、ロケールを検出し、ビューに渡る前に適切なリソースまたはデータを選択します。

このクリーンな分離は、新しいリソースファイルやエントリを作成することで、ビューテンプレートを調整して、これらのリソースを参照し、コントローラーが正しいロケールを選ぶことを確実にすることで、新しい言語を追加できることを意味します。ビジネスロジックやデータベーススキーマを書き換えることなく、すべての言語を使用できます。

主ローカリゼーション技術

文字列ストレージのリソースファイル

リソースファイル(JSON、YAML、XML、または.resx)は、コードから外部に言語固有の文字列を保持します。例えば、Laravelは]ファイルを使用します。ASP.NET Coreは]ファイルを使用します。そして、多くのJavaScriptフレームワークはJSON翻訳ファイルを使用します。基本的なパターンは、キー値のペアです。

  • 英語版
  • フレンチ

リソースファイルを使用して、アプリケーションロジックに触れずに翻訳者が作業できるようにトライバイアル化し、コードベースをクリーンに保ちます。

局所検出と交渉

ユーザーのアプリケーションは、ユーザーの優先言語を自動的に検出する必要があります。 一般的な戦略は次のとおりです。

  • []ブラウザのアクセシブルヘッダ:[]をパースして、ユーザーの優先順位を確認できます。
  • []ユーザプロファイルの設定:]] 選択したロケールをセッションまたはユーザログイン後にデータベースに保存します。
  • ]URL接頭文字またはサブドメイン:[など、 ]または]。
  • Cookieまたはローカルストレージ:[]]]セッション全体でユーザーの言語選択を主張します。

コントローラーは、例えば、ユーザの正確な設定を試し、デフォルト言語に戻ります。 W3C 国際化活動(])W3C i18n)は、コンテンツ交渉に関する詳細なガイダンスを提供します。

多角化、性別、書式化

ローカリゼーションは単純な文字列の置換を超えた。異なる言語は、複雑な複数ルール(例:「1項目」と「2項目」)を英語で作成していますが、ポーランド語またはアラビア語で複数のフォーム)があります。多くのフレームワークは、Laravelの、Symfonyの、およびICUメッセージフォーマットの組み込みの複数種類を提供しています。同様に、日付、時刻、数字、通貨のフォーマットは、ローレルゲン規則(例:[FLT:])を[FLT:]]、Symfonyの[[FLT:]]、およびICUメッセージ形式]を尊重しなければなりません。

コンテンツ翻訳戦略

データベースに保存されている動的コンテンツ(例、製品の説明、ブログ投稿)には、いくつかのオプションがあります。

  • []言語列:]]1つの言語ごとのデータベース列(例えば、])、[])。 シンプルで、多くの言語ではスケーラブルではありません。
  • []] 翻訳テーブルを分離する:[ A [ 任意の翻訳可能なエンティティティティティと多形態の表。 これはより柔軟で、データベース正規化のベストプラクティスに従います。
  • JSON 列:]] は、JSON オブジェクトを言語キーで保存します。 プロトタイプ作成が迅速ですが、クエリとメンテナンスが困難になる可能性があります。

期待される言語とコンテンツサイズに合ったアプローチを選択します。

集中化によるMVCの統合:ステップバイステップガイド

典型的なPHPまたはC# MVCフレームワークで多言語Webアプリケーションを構築していると仮定しましょう。次の手順では、MVCフローにローカリゼーションを配線する方法を示します。

1. 多言語データのためのモデルを設計して下さい

複数の言語をサポートするエンティティティティティを定義します。例えば、モデルには、]モデルと、 [の1対対の関係があるかもしれません。LaravelのEloquentのようなORMでは、正しい翻訳を自動的にロードするためにトレイトまたは専用のパッケージを使うことができます。同様に、静的なUI文字列のリソースファイルはローカルキーによって編成されるべきです。

2. ローカル検出用のコントローラーの設定

ベースコントローラー(またはミドルウェア)では、 locale の検出を実行します。アプリケーションの現在の locale をユーザの好みに基づいて設定します。Laravel では、

protected function setLocale(Request $request)
{
 $locale = $request->segment(1); // from URL
 if (in_array($locale, config('app.available_locales'))) {
 app()->setLocale($locale);
 session(['locale' => $locale]);
 }
}

ASP.NET Core では、自動交渉を処理するミドルウェア を追加できます。 コントローラーは ] オブジェクトを使用して、正しい翻訳を返します。

3. ローカリゼーション機能を使用してビューを開発する

ではなく、ハードコーディングの文字列をビューで使用し、ローカリゼーションヘルパーを使用します。Laravel Bladeではを使用します。ASP.NET Razorでは、。動的コンテンツの場合、翻訳されたモデルインスタンスを現在のロケールに基づいてビューと表示フィールドに渡します。また、日付と番号のフォーマットが使用されることを確認してくださいまたは。

例えば、Laravel Bladeの簡単なログインページスニペット:

<h2>{{ __('auth.login_title') }}</h2>
<form>
 <label>{{ __('auth.email') }}</label>
 <input type="email" name="email">
 <label>{{ __('auth.password') }}</label>
 <input type="password" name="password">
 <button type="submit">{{ __('auth.login_button') }}</button>
</form>

4. 言語切り替えを有効にします

可視言語セレクター(ナビゲーションまたはフッターのドロップダウン)を提供します。ユーザーが言語を選択すると、コントローラーまたはJavaScriptが現在のロケールを更新し、選択を保存します。可能であれば、同じルートでユーザーを続けて、新しいロケールプレフィックスで同じURLにリダイレクトします。

最良のプラクティスと検討

一貫したコンテンツ管理

翻訳を同期させ続ける。リソースファイル用のバージョン管理を使用し、翻訳管理システム(Lokalise、Crowdinなど)を使用して、より大きなチームに検討してください。翻訳キーの複製は避けてください。可能であれば再利用してください。

多言語サイト向けユーザーエクスペリエンス

  • []言語セレクター:]]] クリアで表示されたボタンやフラグアイコン(アクセス性のためのaltテキスト付き)を使用します。
  • []:[]]]] セッション、クッキー、データベースを介してユーザーの言語を主張します。
  • []ブラウザの設定を調べる:[]]) 最初にアクセスすると、ブラウザの優先言語が自動的に使用されます。
  • ] hreflang:[ で、各ページの言語バージョンの代替言語に関する検索エンジンに伝えるために、HTML [[] の属性を実装します。例えば、]。

パフォーマンスの最適化

  • []キャッシュ翻訳:]]] リソースファイルをメモリにロードし、キャッシュします(Laravelのを使用して)。
  • ヒータ読み込み翻訳:[]]] 翻訳可能なモデルをクエリする際に、エンタローディングを使用して N+1 クエリの問題を回避します。
  • []ローカライズのオーバーヘッドを最小化:[サービスコンテナまたはセッションで解決されたロケールを保存して、検出ロジックを繰り返しずにグローバルに利用できるようにします。

アクセシビリティとインクルーシブ

ローカル化したコンテンツはアクセス可能でなければなりません。言語属性()と[)が正しく設定されていることを確認してください。 ]タグで適切に設定されていることを確認してください。 複数の言語で適切なARIAラベルを使用してください。 各サポートされている言語のスクリーンリーダーでテストします。 ]]W3C国際化FAQ]]は、ドキュメントの言語の設定に関するガイダンスを提供します。

多言語MVC開発を支えるツールとフレームワーク

ほとんどの近代的なMVCフレームワークは、堅牢なビルトインまたはコミュニティサポートのローカライズパッケージを持っています。

  • Laravel(PHP):]]]]])は、ローカリゼーションヘルパー、複数化ルール、JSONおよびPHPリソースファイルのサポートが含まれています。 Laravelのローカリゼーションドを参照してください。
  • [ASP.NET Core(C#):[ は、] インターフェイスと、リソースファイルとスマートローカリゼーションで提供します。 []]ASP.NETコアローカリゼーションガイド[]は、包括的なものです。
  • [ レール上のRuby:[] 広範な複数化ルールと日付/数値のフォーマットで YAMLファイルとI18n APIを使用します。 [ レール国際化ガイド]を参照してください。
  • []Django (Python):[]]]] テンプレートタグで gettext と翻訳文字列をサポート。 []]] ジャンゴ国際化 docs[] は、すべてをカバーしています。
  • []Symfony (PHP):[]) XLIFF、YAML、PHP形式のサポートで翻訳コンポーネントを使用します。 []]Symfonyの翻訳を参照してください。

リアクトのようなフロントエンドのMVCフレームワークは、Requireのようなのようなライブラリ(ICUメッセージフォーマットに基づく)は、MVCのようなバックエンド構造とうまく統合します。

コンテンツ

MVCパターンを使用して多言語Webアプリケーションを構築することは、実証済みの保守可能なアプローチです。 MVCへの懸念の分離を活用することで、開発者は、コードベース全体をリファクタリングすることなくローカリゼーションを導入することができます。 リソースファイル、ローカライズ、および慎重なデータベース設計は、コアツールキットを形成し、フレームワークは、サポートインフラストラクチャを提供します。 Webは、グローバルリーチを要求し続けています。 MVCアーキテクチャ内の固体ローカリゼーション慣行に投資することで、ユーザーの満足、アクセシビリティ、および市場の存在下での配当を支払います。