ng5-i18n-multilingual Angular5による多言語サイトの構築方法
ng5-i18n-multilingual はAngular5によって多言語サイトを構築するためのサンプルプログラムです。
ビデオ解説（英語）
https://youtu.be/74OCrD6Ckgg
ビデオ解説（日本語）
https://youtu.be/AUXpQvqGjeA
ビデオ開始時のプロジェクト・ソース
https://github.com/Ohtsu/ng5-i18n-demo.git
デモサイト
https://ohtsu.github.io/ng5-i18n-multilingual/
ファイナル・プロジェクト・ソース
https://github.com/Ohtsu/ng5-i18n-multilingual.git
概要
- _ng5-i18n-multilingual_はAngular5で多言語サイトを作成するためのサンプルプログラムです。
前提条件
- Node.js
- TypeScript2
- Angular/Cli (for Angular5 or later)
インストール
このプログラムをインストールするには：
- まずディレクトリを作成し、そこに移動します。
$ mkdir mydir
$ cd mydir
- GitHubによりクローンを作成します。
$ git clone https://github.com/Ohtsu/ng5-i18n-multilingual.git
- _ng5-i18n-multilingual_に移動し、npm installを実行します。
$ cd ng5-i18n-multilingual
$ npm install
ローカルサーバーでのチェック
英語（デフォルト）版の開始
コマンドラインで以下のように入力してローカル・サーバーを起動します。
$ ng serve
ブラウザで**http://localhost:4200**にアクセスすると、以下のページがブラウザに表示されます。
- 初期画面
日本語版の開始
次のようにローカルサーバーを起動します。
$ npm run start:ja
同様に、**http://localhost:4200**にアクセスすると、以下のページがブラウザに表示されます。
- 初期画面
フランス語版の開始
次のようにローカルサーバーを起動します。
$ npm run start:fr
同様に、**http://localhost:4200**にアクセスすると、以下のページがブラウザに表示されます。
- 初期画面
多言語サイトデータの作成方法
Package.jsonファイルを変更する
上記のようにローカルサーバーを使用する場合、動的に言語の変更はできません。
実際のサイトでは、URLに基づいて言語を変更できます。
これを準備するには、言語ごとにBase hrefを変更する必要があります。以下のように、ビルド時にパラメータを設定する必要があります。
URLは言語ごとに変更されます。
"build": "ng build --aot --output-path dist/ --base-href /ng5-i18n-multilingual/",
"build:ja": "ng build --aot --output-path dist/ja --base-href /ng5-i18n-multilingual/ja/ --i18nFile=src/locale/messages.ja.xlf --i18nFormat=xlf --locale=ja",
"build:fr": "ng build --aot --output-path dist/fr --base-href /ng5-i18n-multilingual/fr/ --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr"
デフォルト /ng5-i18n-multilingual/
日本語 /ng5-i18n-multilingual/ja/
フランス語 /ng5-i18n-multilingual/fr/
ここでは、このプログラムの実行結果としてGitHub Pagesを使用しているため、 /ng5-i18n-multilingualを追加しています。したがって、GitHub Pagesを利用する場合は、この部分を独自のリポジトリ名にする必要があります。
GitHub Pagesとは別の独自のサイトを使用している場合は、そのような文字列を追加する必要はありません。
多言語のサイトデータを構築する方法
まず、自分のサイトに基づいてBase href文字列を変更する必要があります。文字列 /ng5-i18n-multilingualを独自の文字列（またはnull）に変更します。
コンパイル
次に、以下のようにコンパイルする必要があります。
npm run build
npm run build:ja
npm run build:fr
自分のサーバーにサイトデータをアップロードする
コンパイルが成功すると、プロジェクトのルートディレクトリに distディレクトリが生成されます。
distディレクトリにあるすべてのファイルとディレクトリを自分のサーバにアップロードする必要があります。
詳細は以下のビデオをご覧ください。
ビデオ解説（英語）
https://youtu.be/74OCrD6Ckgg
ビデオ解説（日本語）
https://youtu.be/AUXpQvqGjeA
バージョン
- TypeScript : 2.4.2
- @angular/cli : 1.5.0
- Node : 6.11.3
参照
-
"Internationalization (I18N)",
https://v2.angular.io/docs/ts/latest/cookbook/i18n.html -
"Internationalization (I18N) Japanese Translation by mixplace in Qiita",
https://qiita.com/mixplace/items/3f1e1190e38c14f5297d
その他
- 「Angular5用カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド」
https://www.udemy.com/1450138/learn/v4/content
変更ログ
- 2018.5.4 バージョン0.2をアップロード
著作権
copyright 2018 by Shuichi Ohtsu (DigiPub Japan)
ライセンス
MIT © Shuichi Ohtsu