Angular5による多言語サイトの構築方法

8135 ワード
I18n 多言語化 Angular Angular5 TypeScript2 I18n テキストリンク

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

参照

その他

変更ログ

  - 2018.5.4　バージョン0.2をアップロード

著作権

copyright 2018 by Shuichi Ohtsu (DigiPub Japan)

ライセンス

MIT © Shuichi Ohtsu