Express + ejsで i18n

Node.js ネタ。 Heroku でシンプルなんだけどちょっと動的なサーバサイドを持つwebサイトを作りたいといったときに Node.js は便利。 こういう時 PHP とか Ruby なら Sinatra とか選択肢があると思うけど、Node.js のアクセスを捌く力を知ってからはできるだけシンプルなやつはNode.js を使うようにしてる。 Heroku に上げるのもめちゃめちゃ簡単だしな。

ということで 今回なんで動的にしたかったのかというと、国際化対応のサイトを作りたかったからだ。ユーザーのブラウザの言語に応じて同一URLで内容を書き換えるようにした。

他のブログ漁ってみると、express のバージョンが低いやつで i18n してたり、 jade っていう独自のHamlみたいなHTMLテンプレートエンジン使ってたりと自分に合うのがなくて自分でちょっと頑張った。

Express プロジェクトの作成

もう npm とか Express とか Node.js とか入れてある前提

express -e  myapp
cd myapp
npm install

コード修正

package.json

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.4.8",
    "i18n": "*",
    "ejs": "*"
  }
}

app.js

var express = require('express');
var routes = require('./routes');
var http = require('http');
var path = require('path');
var i18n = require('i18n');

var app = express();
i18n.configure({
  locales: ['en', 'ja', 'fr', 'de', 'ko'] ,
  directory: __dirname + '/locales',
  cookie: 'mycokie'
});
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.favicon(express.favicon(__dirname + '/public/favicon.ico')));
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(i18n.init);
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', routes.index);
http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

そんで locales/ja.js とかを作って、以下のようなjsonを作る。

{
  "locale": "ja",
  "title": "マイアプリ"
}

views/index.ejs で以下のように使える

<%= __('title') %>

この書き方が割と自分が慣れ親しんでいるので、ejs を選んだ。HTMLテンプレートエンジンといえばこの書き方だよな、って個人的に思っている。w

所感

これだけで 国際化対応のウェブサイトを作れちゃうんだから、何かWebサイトを作るなら世界を見据えていきたいところ。そっちのほうが夢があるじゃない！

てな感じで今回は 以下のページを作りました。 iPhone アプリでたら随時報告します。

Unleashed Revolution

このサイトは日本語、英語、韓国語、フランス語、ドイツ語に対応しています。Google 翻訳とかじゃなくて、以下のようなやり方で翻訳しました。

アプリを無料で他言語対応させる方法 - ボクココ

組み合わせを再帰で作るときの考え方

CodeIQで組み合わせを作らなきゃいけない問題があって、その問題がJavaScriptで解かなきゃいけないから、それを考えていた。
前に、ハノイの塔のプログラムを作ったおかげで、再帰についての考え方はなんとなくわかった。要は「数学的帰納法」。これの考え方が身についているか。

さて、組み合わせについて考える。こういう時はまず1の時から見る。1の時は、

  ＜＜１＞＞

を返せばいい。さて、2からはどうか。これも当たり前で、

　＜＜1,2＞,＜2，1＞＞

でおｋ。
さて、このときどのような変化が起こっているのだろう?それが最も大事だ。
そこで行き着いた考えがこれだ。
"n-1で出た結果のそれぞれの配列の順番1つずつに新しい値を挿入する"
自分で説明しててもこれはわかりにくい日本語だから図で解説。

これは、n=2のとき。次の3にするには、2個の要素に3を入れるべき個所が3か所ある。
それを埋めていけばいいわけだ。
プログラムが以下。

    var makeComb = function(n) {

        if ( n == 1 ) {

            return 1;

        }

        var prevComb = makeComb(n - 1);

        var currComb = [];

        for (i = 0; i < prevComb.length; i++) {

            for (j = 0; j < prevComb[i].length + 1; j++) {

                var copied = prevComb[i].concat();

                copied.splice(j, 0, n);

                currComb.push(copied);

            }

        }

        return currComb;

    };

なんかJavaScriptの参照が色々うざく、そしてspliceメソッドが意味不明な戻り値を返すので、オブジェクトのコピーをconcat()でやっている。
まぁそれ以外は、読めるコードなんじゃないだろうか。
こうなるとnがめっちゃ大きくなったときとか考えなきゃいけないんだろうけど、とりあえずはいいや。