JSON
I18n
static-site-generator

langsheet を使って翻訳データをテーブル一覧表示する

More than 1 year has passed since last update.

langsheet というモジュールを使うと、翻訳データの入った JSON ファイルを html の table の表現に変換することができます。

例えば、次のような各言語の JSON ファイルを持っていたとします。

英語:

{
  "app.hello": "Hello {name}!",
  "app.form.email": "Mail address",
  "app.form.first_name": "First name",
  "app.form.last_name": "Last name",
  ...
}

日本語

{
  "app.hello": "こんにちは {name}さん!",
  "app.form.email": "メールアドレス",
  "app.form.first_name": "名",
  "app.form.last_name": "姓",
  ...
}

フランス語

{
  "app.hello": "Bonjour {name}!",
  "app.form.email": "Adresse mail",
  "app.form.first_name": "Prénom",
  "app.form.last_name": "Nom de famille",
  ...
}

スペイン語

{
  "app.hello": "¡Hola {name}!",
  "app.form.email": "Correo Electronico",
  "app.form.first_name": "Nombre de pila",
  "app.form.last_name": "Apellido",
  ...
}

韓国語

{
  "app.hello": "{name}, 안녕!",
  "app.form.email": "메일 주소",
  "app.form.first_name": "이름",
  "app.form.last_name": "성",
  ...
}

これを langsheet でビルドすると以下のような html ページになります。

スクリーンショット 2017-08-29 21.39.22.png

翻訳アプリは SaaS 形式のものが多い (PhraseApp, OneSky, Transifex等) ですが、 小さいアプリなどの場合は SaaS を利用せずに単純に JSON のキーバリューで翻訳文言を管理したい場合もあると思います。そんな場合に、langsheet を利用して、フレーズの ID と言語のマトリックス表示のビューを作ることで、翻訳不整合や翻訳漏れのチェック作業が簡略化できます。

使い方

まず npm でインストールします

npm install langsheet

次に langsheet.yml を作成して、ソースとなる JSON のパスを指定してください。

langsheet.yml
source: source/i18n/*.json
title: My App Language Data

以上を設定した上で、 langsheet コマンドを実行します。

npx langsheet build

以上で build/ 以下に index.html が作成され、言語/翻訳一覧テーブルを閲覧することができます。