GAS で多言語対応やってみた
はじめに
クラウドエース第三開発部の角谷(かどたに)です。
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 をオンにします。以下から行えます。
以下のコマンドを実行し、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: 国際化対応を行うためのパッケージ
- Repository: github.com/i18next/i18next
- Homepage: www.i18next.com
-
@rollup/plugin-node-resolve: npm パッケージをバンドル(複数のファイルを 1 つのファイルにまとめる)するための rollup のプラグイン
- ASIDE では rollup を用いて、
src/
内のファイルを 1 つの js ファイル(dist/
内のindex.js
)にまとめ、このファイルをデプロイします
- ASIDE では rollup を用いて、
- @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
を以下のように修正します。
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
を配置します。
{
"helloAppsScript": "Hello Apps Script!"
}
{
"helloAppsScript": "こんにちは Apps Script!"
}
i18next の設定を行うために、src/
内に i18n.ts
を作成します。
- lng: 使用する言語を設定します。GAS で用意されている関数 getSpreadsheetLocale() を使用します。これはスプレッドシートで設定している「言語と地域」を返す関数で、例えばアメリカ合衆国に設定されていれば
en_US
、日本はja_JP
を返します - fallbackLng: フォールバック言語を設定します。
en_US
、ja_JP
以外が lng で設定された場合はen_US
で翻訳します - resources: 各言語で使用する翻訳を設定します
以上の設定により、スプレッドシートの「言語と地域」を変更することで、翻訳に使用する言語を切り替えることができます。
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
に対応する値を返します。
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
を修正します。
+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