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 ページになります。

翻訳アプリは 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 が作成され、言語/翻訳一覧テーブルを閲覧することができます。

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

使い方