日本語

AngularJS チュートリアル

AngularJS アプリケーション

AngularJS - 国際化

こんにちは、Web開発者の卵さんたち！今日は、AngularJSの国際化の世界に興味深く飛び込んでみましょう。あなたの近所の親切なコンピュータサイエンスの先生として、私はこの魅力的なトピックをガイドします。お気に入りの飲み物を手に取り、リラックスして、一緒に潜りましょう！

AngularJS - Internationalization

国際化とは？

コードを書く前に、国際化とは何かを理解しましょう。素晴らしいウェブサイトを作成したとしましょうが、英語だけでしかない場合、どうでしょうか？異なる国の人々がそれを使いたい場合、国際化が役立ちます！あなたのウェブサイトにパスポートを与えるようなものです。

国際化（しばしばi18nと略されます - 'i'と'n'の間に18文字があります）は、アプリケーションを設計して、エンジニアリングの変更なしにさまざまな言語や地域に適応できるプロセスです。

なぜ国際化が重要か？

こう考えると、アイスクリーム屋を経営していたら、一つの味だけ提供するでしょうか？もちろんやめておきますよね！異なる味を対応するでしょう。ウェブサイトも同じです。AngularJSアプリケーションを国際化することで、世界中の人々にとってアクセシブルでユーザーフレンドリーにします。すべての味のデジタルアイスクリームを提供するようなものです！

では、袖を上げて、AngularJSが国際化を簡単にする方法を見てみましょう。

AngularJSを国際化するための設定

まず第一に、AngularJSアプリケーションを国際化対応させる必要があります。私たちはangular-translateライブラリを使用します。これは、アプリケーションを翻訳するための魔法の杖のようなものです。

以下のように設定します：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.4/angular-translate.min.js"></script>
</head>
<body>
<div ng-controller="TranslateController">
<!-- アプリケーションの内容はここにきます -->
</div>
<script src="app.js"></script>
</body>
</html>

app.jsファイルでは、AngularJSモジュールを設定し、翻訳プロバイダを設定します：

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
// 設定はここにきます
}]);

app.controller('TranslateController', function($scope, $translate) {
// コントローラのロジックはここにきます
});

デンマーク語ロケールの例

では、アプリケーションをデンマーク語に翻訳する簡単な例を作成してみましょう。なぜデンマーク語かというと、私のクラスにデンマークのパンに夢中だった生徒がいたので、彼のためにです、ラースさん！

app.jsを更新します：

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.preferredLanguage('en');
}]);

app.controller('TranslateController', function($scope, $translate) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});

以下のことを行っています：

  1. 英語（'en'）とデンマーク語（'da'）の翻訳を定義します。
  2. 英語を推奨言語に設定します。
  3. コントローラ内で言語を切换するchangeLanguage関数を作成します。

HTMLを更新します：

<div ng-controller="TranslateController">
<h2>{{ 'TITLE' | translate }}</h2>
<p>{{ 'FOO' | translate }}</p>
<button ng-click="changeLanguage('en')">{{ 'BUTTON_LANG_EN' | translate }}</button>
<button ng-click="changeLanguage('da')">{{ 'BUTTON_LANG_DA' | translate }}</button>
</div>

出力

このコードを実行すると、以下のように表示されます：

  • タイトルが「Hello」と表示されます。
  • パラグラフが「This is a paragraph.」と表示されます。
  • 「English」と「Danish」のラベルがついた2つのボタンが表示されます。

「Danish」ボタンをクリックすると、アプリケーションがデンマーク語に切换されます：

  • タイトルが「Hej」と表示されます。
  • パラグラフが「Dette er et afsnit.」と表示されます。
  • ボタンのラベルが「Engelsk」と「Dansk」に変更されます。

魔法のようですね！でも忘れてはいけません、これは魔法ではなく、AngularJSとあなたのコーディングスキルの力です！

ブラウザロケールの例

では、一段階進んでみましょう。ユーザーのブラウザ言語を自動的に使用するようにアプリケーションを設定するどうでしょうか？これは、ユーザーが尋ねる前にその言語で話しかけるようなものです！

app.jsを修正します：

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.useLocalStorage();
$translateProvider.fallbackLanguage('en');
$translateProvider.registerAvailableLanguageKeys(['en', 'da'], {
'en*': 'en',
'da*': 'da'
});
$translateProvider.determinePreferredLanguage();
}]);

新しい点は以下の通りです：

  1. ローカルストレージを使用してユーザーの言語設定を記憶します。
  2. 英語をフォールバック言語に設定します。
  3. 使用可能な言語キーを登録します。
  4. determinePreferredLanguage()を使用してブラウザの言語を自動的に検出します。

出力

ユーザーがウェブサイトを訪れると、以下のようになります：

  • ブラウザの言語がデンマーク語に設定されている場合、デンマーク語バージョンが表示されます。
  • それ以外の言語が設定されている場合、英語（フォールバック）が表示されます。
  • 選択された言語が次回訪問時にも記憶されます。

あなたのウェブサイトは、ユーザーの環境に適応するカメレオンのようです！

結論

そして、ここまでです、皆さん！私たちのAngularJSアプリケーションを多言語対応させました。国際化はただの翻訳ではなく、世界中のユーザーにとって迎える体験を作ることです。

コーディングの旅を続ける中で、常にユーザーを考えましょう。彼らがコペンハーゲンにいるかカリフォルニアにいるかにかかわらず、あなたのアプリケーションは彼らの言語で挨拶できます。

練習を続け、好奇心を持ち続け、誰もがC-3POよりも多くの言語を話すアプリケーションを作るかもしれません！次回まで、ハッピーコーディング！

Credits: Image by storyset

前のチュートリアル:
AngularJS - カスタムディレクティブ
次のチュートリアル:
AngularJS - ToDo アプリケーション