🎨

GAS で多言語対応やってみた

2025/01/29に公開

はじめに

クラウドエース第三開発部の角谷(かどたに)です。
Google Apps Script(以下、GAS)を使用した開発において、多言語対応をやってみたのでその方法を紹介します。

対象読者

  • GAS 開発を行っている方(特に ASIDE を使用する方)
  • GAS で多言語対応を行いたい方
  • ASIDE 環境で外部の npm パッケージを使用したい方

手順

前提条件

  • Node.js がインストールされている

手順 1. ASIDE で GAS の開発環境を構築

今回は ASIDE というフレームワークを用いて、GAS の開発環境を構築します。

  • ASIDE: clasp、ESLint、Prettier、Jest があらかじめ適切に設定済みで、TypeScript で記述するローカル GAS 開発環境を提供するフレームワーク

外部から GAS を操作するために、Google Apps Script API をオンにします。以下から行えます。
https://script.google.com/home/usersettings

以下のコマンドを実行し、clasp から Google アカウントにログインします。クライアントの認証情報が .clasprc.json として保存されます。

$ npx @google/clasp login

以下のコマンドを実行し、プロジェクトを作成します。

$ npx @google/aside init

入力や選択が求められるので、今回は次のように行います。
最後に、スプレッドシートと GAS スクリプト エディタのリンクが表示されるので、それぞれブラウザで開いておきます。

✔ Project Title: … i18n # なんでも良い
✔ Create an Angular UI? … No / Yes # No を選択(デフォルト)
✔ Generate package.json? … No / Yes # Yes を選択(デフォルト)
✔ Adding scripts...
✔ Saving package.json...
✔ Installing dependencies...
✔ Installing src template...
✔ Installing test template...
✔ Script ID (optional): …  # 入力なし
✔ Script ID for production environment (optional): … # 入力なし
✔ Creating i18n...

-> Google Sheets Link: https://drive.google.com/open?id={スプレッドシート ID}
-> Apps Script Link: https://script.google.com/d/{スクリプト ID}/edit

手順 2. "Hello Apps Script!" を確認

以下のコマンドでデプロイを行います。

$ npm run deploy

ブラウザで開いている GAS スクリプト エディタで [実行] ボタンをクリックし、実行ログに「Hello Apps Script!」が表示されることを確認します。

手順 3. npm パッケージのインストール

多言語対応に必要な npm パッケージをインストールします。

  • i18next: 国際化対応を行うためのパッケージ
  • @rollup/plugin-node-resolve: npm パッケージをバンドル(複数のファイルを 1 つのファイルにまとめる)するための rollup のプラグイン
    • ASIDE では rollup を用いて、src/ 内のファイルを 1 つの js ファイル(dist/ 内の index.js)にまとめ、このファイルをデプロイします
  • @rollup/plugin-json: JSON ファイルをバンドルするための rollup のプラグイン
$ npm i i18next
$ npm i @rollup/plugin-node-resolve
$ npm i @rollup/plugin-json

手順 4. rollup プラグインの設定

インストールした rollup のプラグインを適用するために、rollup.config.mjs を以下のように修正します。

rollup.config.mjs
import cleanup from 'rollup-plugin-cleanup';
import license from 'rollup-plugin-license';
import prettier from 'rollup-plugin-prettier';
import typescript from 'rollup-plugin-typescript2';
import { fileURLToPath } from 'url';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import json from '@rollup/plugin-json';

export default {
  input: 'src/index.ts',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    cleanup({ comments: 'none', extensions: ['.ts'] }),
    license({
      banner: {
        content: {
          file: fileURLToPath(new URL('license-header.txt', import.meta.url)),
        },
      },
    }),
    typescript(),
    prettier({ parser: 'typescript' }),
+    nodeResolve(),
+    json(),
  ],
  context: 'this',
};

手順 5. 多言語対応の実装

src/ 内に locales/ ディレクトリを作成し、翻訳用の en_US.json, ja_JP.json を配置します。

en_US.json
{
  "helloAppsScript": "Hello Apps Script!"
}
ja_JP.json
{
  "helloAppsScript": "こんにちは Apps Script!"
}

i18next の設定を行うために、src/ 内に i18n.ts を作成します。

  • lng: 使用する言語を設定します。GAS で用意されている関数 getSpreadsheetLocale() を使用します。これはスプレッドシートで設定している「言語と地域」を返す関数で、例えばアメリカ合衆国に設定されていれば en_US、日本は ja_JP を返します
  • fallbackLng: フォールバック言語を設定します。en_USja_JP 以外が lng で設定された場合は en_US で翻訳します
  • resources: 各言語で使用する翻訳を設定します

以上の設定により、スプレッドシートの「言語と地域」を変更することで、翻訳に使用する言語を切り替えることができます。

i18n.ts
import i18next from 'i18next';
import en_US from './locales/en_US.json';
import ja_JP from './locales/ja_JP.json';

i18next.init({
  lng: SpreadsheetApp.getActiveSpreadsheet().getSpreadsheetLocale(),
  fallbackLng: 'en_US',
  resources: {
    en_US: { translation: en_US },
    ja_JP: { translation: ja_JP },
  },
});

export default i18next;

i18next の 翻訳関数 t() を使用するように example-module.ts を修正します。翻訳用の JSON ファイルから、関数の引数 helloAppsScript に対応する値を返します。

example-module.ts
import i18next from './i18n';

export function hello() {
-  return 'Hello Apps Script!';
+  return i18next.t('helloAppsScript');
}

これで、 src/ 内は以下のようになっています。

src/
├── example-module.ts
├── i18n.ts
├── index.ts
└── locales/
    ├── en_US.json
    └── ja_JP.json

テストコードでは en_US を固定で使用するようにします。getSpreadsheetLocale()en_US を返すモックを作成するように example-module.test.ts を修正します。

example-module.test.ts
+global.SpreadsheetApp = {
+  getActiveSpreadsheet: jest.fn().mockReturnValue({
+    getSpreadsheetLocale: jest.fn().mockReturnValue('en_US'),
+  }),
+} as unknown as typeof SpreadsheetApp;
+
import { hello } from '../src/example-module';

describe('example-module', () => {
  describe('hello', () => {
    it('Returns a hello message', () => {
      expect(hello()).toBe('Hello Apps Script!');
    });
  });
});

手順 6. 多言語対応の確認 "こんにちは Apps Script!"

スプレッドシートで [ファイル] → [設定] をクリックし、[言語と地域] が「日本」であることを確認します。

GAS スクリプト エディタで [実行] ボタンをクリックし、実行ログに「こんにちは Apps Script!」が表示されることを確認します。

次に、スプレッドシートの [言語と地域] を「アメリカ合衆国」に設定します。
同様に、実行ログに「Hello Apps Script!」が表示されることを確認します。

おわりに

以上で、ASIDE を用いた GAS 開発における多言語対応の方法を紹介しました。
この記事が何かの役に立てれば幸いです。

Discussion