「国際化」に対応したウェブアプリケーションを Node.js で作る方法を調べたので、メモ替わりに残しておきます。
ここでの「国際化(internationalization, i18n)」はウェブブラウザで設定した言語によって自動的に英語表記にしたり、日本語にしたり、・・・という切り替えを行えるようなものです。自動翻訳とかそういうものではありません。またブラウザで設定した言語は HTTP リクエスト時に "Accept-Language" ヘッダで送信されることになるので、後述の動作確認は curl コマンドでこのヘッダを指定して行っています。
このような国際化対応アプリケーションを Node.js で、正確には Node.js + Express + EJS の環境で作ってみました。
Node.js で国際化対応アプリケーションを作る場合、i18n というパッケージを使うのが手っ取り早いです:
https://www.npmjs.com/package/i18n
ソースコード(app.js)はこんな感じにしました。余計な部分を削ぎ落として、最小限必要な部分だけを残しています(赤字部分が i18n 関連の箇所です):
今回は英語(en)と日本語(ja)に対応したアプリケーションにしました。
また '/' にアクセスした時に ejs の index テンプレートを使った画面が表示されるような内容にしています。ちなみに index テンプレート(public/index.ejs)の内容は以下のようになっています:
テンプレート内で subject と body という2つの変数を使った表記を行っています。実際にはこれらの部分に言語設定に合わせた内容が表示されることになります。
そして言語ファイルを以下のように用意します:
(英語用: locales/en.json)
(日本語用: locales/ja.json)
英語設定で利用した場合、上記の subject 変数部分は "subject", body 変数部分は "body" と表示されます。また日本語設定の場合、それぞれ "サブジェクト" と "本文" となります。
これで準備できました。 npm install して実行(node app)します:
確認は別の端末から curl で行いました。まずは Accept-Language を en(英語)にしてアクセス:
次は日本語設定でアクセスした場合:
期待通りに動いています!
アプリケーションの国際化そのものはこれだけで出来ました。そして問題になるのは「どうやって色んな言語用の JSON リソースファイルを用意するか?」です。1つ1つ翻訳サービスなどを使いながら作る、という方法もありますが、そんな言語リソースファイルの翻訳作業は IBM Cloud の Globalization Pipeline サービスを使うと英語のリソースファイルから各言語に翻訳したリソースファイルをまとめて作ることができてとても便利です。このサービスについては以前のブログで使い方も含めて紹介しているので参照ください:
Globalization Pipeline サービスがリリースされました!
と、最後は宣伝でしたw
ここでの「国際化(internationalization, i18n)」はウェブブラウザで設定した言語によって自動的に英語表記にしたり、日本語にしたり、・・・という切り替えを行えるようなものです。自動翻訳とかそういうものではありません。またブラウザで設定した言語は HTTP リクエスト時に "Accept-Language" ヘッダで送信されることになるので、後述の動作確認は curl コマンドでこのヘッダを指定して行っています。
このような国際化対応アプリケーションを Node.js で、正確には Node.js + Express + EJS の環境で作ってみました。
Node.js で国際化対応アプリケーションを作る場合、i18n というパッケージを使うのが手っ取り早いです:
https://www.npmjs.com/package/i18n
ソースコード(app.js)はこんな感じにしました。余計な部分を削ぎ落として、最小限必要な部分だけを残しています(赤字部分が i18n 関連の箇所です):
//. app.js var express = require( 'express' ), fs = require( 'fs' ), ejs = require( 'ejs' ), i18n = require( 'i18n' ), request = require( 'request' ), session = require( 'express-session' ), app = express(); var port = 3000; app.set( 'views', __dirname + '/public' ); app.set( 'view engine', 'ejs' ); i18n.configure({ locales: ['en', 'ja'], directory: __dirname + '/locales' }); app.use( i18n.init ); app.get( '/', function( req, res ){ res.render( 'index' ); }); app.listen( port ); console.log( "server starting on " + port + " ..." );
今回は英語(en)と日本語(ja)に対応したアプリケーションにしました。
また '/' にアクセスした時に ejs の index テンプレートを使った画面が表示されるような内容にしています。ちなみに index テンプレート(public/index.ejs)の内容は以下のようになっています:
<html> <head> <title><%= __('subject') %></title> </head> <body> <h1><%= __('subject') %></h1> <hr/> <%= __('body') %> </body> </html>
テンプレート内で subject と body という2つの変数を使った表記を行っています。実際にはこれらの部分に言語設定に合わせた内容が表示されることになります。
そして言語ファイルを以下のように用意します:
(英語用: locales/en.json)
{ "subject": "subject", "body": "body" }
(日本語用: locales/ja.json)
{ "subject": "サブジェクト", "body": "本文" }
英語設定で利用した場合、上記の subject 変数部分は "subject", body 変数部分は "body" と表示されます。また日本語設定の場合、それぞれ "サブジェクト" と "本文" となります。
これで準備できました。 npm install して実行(node app)します:
$ npm install $ node app
確認は別の端末から curl で行いました。まずは Accept-Language を en(英語)にしてアクセス:
$ curl http://localhost:3000/ -H 'Accept-Language: en' <html> <head> <title>subject</title> </head> <body> <h1>subject</h1> <hr/> body </body> </html>>
次は日本語設定でアクセスした場合:
$ curl http://localhost:3000/ -H 'Accept-Language: ja' <html> <head> <title>サブジェクト</title> </head> <body> <h1>サブジェクト</h1> <hr/> 本文 </body> </html>
期待通りに動いています!
アプリケーションの国際化そのものはこれだけで出来ました。そして問題になるのは「どうやって色んな言語用の JSON リソースファイルを用意するか?」です。1つ1つ翻訳サービスなどを使いながら作る、という方法もありますが、そんな言語リソースファイルの翻訳作業は IBM Cloud の Globalization Pipeline サービスを使うと英語のリソースファイルから各言語に翻訳したリソースファイルをまとめて作ることができてとても便利です。このサービスについては以前のブログで使い方も含めて紹介しているので参照ください:
Globalization Pipeline サービスがリリースされました!
と、最後は宣伝でしたw
コメント