4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Node.jsの仮想DOM用のi18nライブラリ作った

Last updated at Posted at 2016-12-20

Mithril、Vue.jsの仮想DOM用のi18nライブラリ作ったの続きです。というか、クロスポストしようとして楽しようとしたらダメだったので別エントリーで。

前回のエントリーでだいたいの使い方は紹介したので、node.js用の機能を。

CLIでの使い方

CLIツールでは基本的な使い方は変わりません。おさらいとして、機能をフルに使ったサンプルを紹介します。主語の性別によるコンテキスト、数値情報のよる複数形、フォーマッティングによる変数への代入です。

const i18n = require('i18n4v');

i18n.translator.add({
{
  "values": {
    "Yes": "はい",
    "No": "いいえ"
  },
  "contexts": [
    {
      "matches": { "gender": "male" },
      "values":{
        "%{name} uploaded %n photos to their %{album} album":[
          [0, 0, "%{name}は彼の%{album}アルバムに写真%n枚をアップロードしました"]
        ]
      }
    },
    {
      "matches": { "gender": "female" },
      "values": {
        "%{name} uploaded %n photos to their %{album} album":[
          [0, 0, "%{name}は彼女の%{album}アルバムに写真%n枚をアップロードしました"]
        ]
      }
    }
  ]
});

i18n("%{name} uploaded %n photos to their %{album} album", 1,
  { name: "John", album: "Buck's Night" },
  { gender:"male" }
); //  ->  Johnは彼のBuck's Nightアルバムに写真1枚をアップロードしました

i18n("%{name} uploaded %n photos to their %{album} album", 4,
  { name: "Jane", album: "Hen's Night" },
  { gender: "female" }
); //  ->  Janeは彼女のHen's Nightアルバムに写真4枚をアップロードしました
})

なお、node.js環境ではselectLanguages()を使って、OSの言語情報を取得できますが、setLanguage()は未サポートです。

サーバでの使い方

CLIやブラウザは各環境でユーザが見る言語のみを相手にしていれば良かったのですが、サーバは複数の言語をロードしておいて、適切な言語をユーザごとに提供する必要があります。

Express 4.0以降だと次のようなrequestのacceptsLanguageメソッドを使ってクライアントブラウザの言語情報を取得できるとのことです。まだ自分では試していませんが・・・

const i18n = require('i18n4v');

const en = i18n.create({
    values: {
        cat: "cat"
    }
});
const es = i18n.create({
    values: {
        cat: "gato"
    }
});
const ja = i18n.create({
    values: {
        cat: ""
    }
});

const languages = {en: en, es: es, ja: ja}

const express = require('express');

app.get('/cat', function(request, response) {
    var t = languages[request.acceptsLanguages('en', 'es', 'ja')] || en;
    response.send(t('cat'));
});

コマンドラインツール

i18n4vコマンドを使うと、ソースコードやHTMLから翻訳のキーを抽出します。-fをつけると、キーをそのまま翻訳語として登録するので、プライマリー言語のJSONを出力するときに使うと便利です。また、一度実行したあとに実行すると、差分情報だけを適用するため、翻訳語がなくなることはありません。

このコマンドはnpmパッケージでi18n4vをインストールすると使えるようになります。

使う時は、出力先の言語と、入力のソースディレクトリ(複数可)をしています。

$ i18n4v -o languges/ja.json bin src
$ i18n4v -o languges/en.json -f bin src

次のようにi18n4vパッケージの関数を割り当てて、その関数の引数で渡した文字列をキーとします。

const i18n = require('i18n4v');
i18n('Translation Word');

HTMLも、data-i18nがついているタグのテキストをキーとして抽出します。

<span data-i18n>What's your name?</span>

さて、サーバ言語としてはGoにも要注目ですよね。辞書ファイルは単なるJSONなので言語を跨いでの再利用もしやすいはずです。ということで、Goの詳細についてはGolang用のi18nパッケージを作ってみたを参照してください。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?