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ディレクトリにあるすべてのファイルとディレクトリを自分のサーバにアップロードする必要があります。

詳細は以下のビデオをご覧ください。