Node.js
I18n
Express.js
ECT

Node.js+Express.js+i18n+ECT:多言語サイトを構築したい

More than 1 year has passed since last update.

多言語サイトを構築したい。

※「≈≈≈」は省略を表す


バージョン

$ node -v

v6.2.1

$ cat package.json

{
≈≈≈
"dependencies": {
"ect": "^0.5.9",
"express": "~4.13.1",
"i18n": "~0.8.2",
≈≈≈
},
≈≈≈
}


localesの用意

$ mkdir locales

$ cat locales/en.json

{
"i18ntest": {
"Hello": "Hello world!"
}
}

$ cat locales/ja.json

{
"i18ntest": {
"Hello": "素敵な世界!"
}
}


app.js

≈≈≈

var ect = require('ect');
var i18n = require('i18n');
≈≈≈
// view engine setup
var ectRenderer = ect({ watch: true, root: __dirname + '/views', ext : '.ect' });
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ect');
app.engine('ect', ectRenderer.render);
≈≈≈
// i18n settings
i18n.configure({
locales: ['ja', 'en'],
defaultLocale: 'ja',
directory: __dirname + '/locales',
objectNotation: true
});

app.use(i18n.init);

app.use(function (req, res, next) {
if (req.session.locale) {
i18n.setLocale(req, req.session.locale);
}
next();
});
≈≈≈


使い方

$ cat app.js

≈≈≈
var test = require('../routes/test');
≈≈≈
app.use('/', test);
≈≈≈

$ cat routes/test.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
res.render('test', {});
}

module.exports = router;

$ cat views/test.ect

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= @__("i18ntest.Hello") %></title>
</head>
<body>
<h1><%= @__("i18ntest.Hello") %></h1>
</body>
</html>


確認方法

ブラウザの言語設定を日本語/英語にしてアクセス

例)Chrome(51.0.2704.103 (64-bit)):英語:

スクリーンショット 2016-06-22 23.06.19.png


応用編

$ cat routes/test.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
res.render('test', { message: 'Hello' });
}

module.exports = router;

$ cat views/test.ect

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= @__("i18ntest.Hello") %></title>
</head>
<body>
<h1><%= @__("i18ntest." + @message) %></h1>
</body>
</html>