GoogleスプレッドシートとGASを使って静的な多言語サイトの流し込みを完全自動化する

静的な多言語サイトを制作する際、言語数や更新頻度次第で膨大な時間がかかるケースがあると思います。
今回作成するのは、そういったケースで効率的に流し込み行うための仕組みです。

内容としては、下記のように各ワードに紐づくソーステキストを設定することで、言語展開はタスクランナーで処理されるようにします。

| ソーステキスト | ja | en |
|:-:|:-:|:-:|
| title | サイトタイトル | SiteTitle |
| article | 記事本文 | SampleText |

この翻訳データをGoogleスプレッドシート上で管理して、プロジェクト側はjson形式でこのデータをダウンロードした後、テンプレートエンジン（Handlebars）に読ませて、いい感じに出力します。

シートのダウンロードには、Google Apps Scriptを使います。

※ 完成形は[コチラ](https://github.com/y-eioki/qiita-gas-translate)のリポジトリです。

## 必要なもの
- Node.js >=6.11.0
- gulp
- googleのアカウント

## 翻訳データの作成

まず[Googleドライブ](https://drive.google.com/drive/u/0/my-drive)で、新規にスプレッドシートを作成します。
作成したら、今回翻訳データとして使うサンプルを[**コチラ**](https://docs.google.com/spreadsheets/d/1og709ajh6JPG-uJA2nJCkFoq0tFITKX50gym4EL8ymE/edit?usp=sharing)に用意していますので、丸ごとコピーして下さい。

その後、「**スプレッドシートのID**」をどこか分かりやすい場所へメモしてください。

IDは、URLの`[シートのID]`の部分の文字列です。
`https://docs.google.com/spreadsheets/d/[シートのID]/edit#gid=0`

## スプレッドシートをjsonにするGASの作成

次に、Googleドライブで新規にスクリプトを作成して、[**コチラ**](https://script.google.com/d/1r1s8Qk7VP9fG_jgJ0njScN9YPyoI-oGs8529_hdrqvD6krjmD7aCLStp/edit?usp=sharing)のスクリプトを丸ごとコピーして下さい。  

スクリプトは[Googleドライブ](https://drive.google.com/drive/u/0/my-drive)の、「新規 > その他 > Google Apps Script」から作成できます。
項目がない場合は、「アプリを追加」から、「Google Apps Script」を検索して、「接続」を押すことで選べるようになります。

コピーしたら一度保存します。
保存する際、「プロジェクト名の編集」という画面で入力を求められますが、「翻訳GASサンプル」など適当に名前を付けます。

保存したら、「公開 > ウェブアプリケーションとして導入...」
を開き、「アプリケーションにアクセスできるユーザー:」を「全員」にして、「更新」します。

続けて、「ファイル > プロジェクトのプロパティ > 情報タブ」
を開き、「**プロジェクト キー**」という項目がありますので、こちらをメモします。

さらに、「リソース > Cloud Platform プロジェクト...」
を開き、「**このスクリプトが現在関連付けられているプロジェクト:**」の下部にあるリンクをクリックします。

すると新規タブでGoogle Developer Consoleのページが開くので、画面上部の検索欄に「**Google Apps Script Execution API**」と入れて検索し、「**有効にする**」を押してください。

![api_active.jpg](https://qiita-image-store.s3.amazonaws.com/0/28146/bd06c4db-0a5c-153b-9a66-6670d3041914.jpeg)

続けて「認証情報」に進み、「**認証情報の作成**」から「OAuth クライアントID」を作成します。
アプリケーションの種類は「その他」を選びます。

作成したら青枠で囲っているボタンを押して認証情報（client_secret_*.json）をダウンロードしてください。

![download_json.jpg](https://qiita-image-store.s3.amazonaws.com/0/28146/f6b57884-c53e-6241-5520-94a64ac4f2ca.jpeg)

※ GASは下記のコードを参考に、作成しています。
[https://gist.github.com/daichan4649/50b988f66193c5bf0ffe#file-main-gs](https://gist.github.com/daichan4649/50b988f66193c5bf0ffe#file-main-gs)

## プロジェクト側の準備

[コチラ](https://github.com/y-eioki/qiita-gas-translate)のリポジトリをForkしてください。
Forkしたら、`./src`に先ほどダウンロードした`client_secret_*.json`を置きます。
（「*」の部分には、文字列がついていると思いますので、「client_secret.json」にリネームしてください。）

次に、`./src/gulp/spread2json/spread2json.js`を開いて、`scriptId`と`sheetId`の箇所を、それぞれメモしていたもので置き換えてください。

### 実行してみる

`./src`で以下のコマンドを実行してください。

```shell
$ npm i
$ gulp spread2json
```

この時、初回のみ認証を求められますので、「Authorize this app by visiting this url:」に表示されているURLをブラウザで叩き、先ほどスプレッドシートとスクリプトを作成したGoogleアカウントと同じアカウントでログイン（認証）してください。

![スクリーンショット 2017-07-02 15.41.26.jpg](https://qiita-image-store.s3.amazonaws.com/0/28146/3e20e6ae-f12c-6e65-d45f-e14a775885e5.jpeg)

認証が成功するとコードが表示されますので、「Enter the code from that page here:」に入力します。
![スクリーンショット 2017-07-02 15.44.47.jpg](https://qiita-image-store.s3.amazonaws.com/0/28146/43080109-5f88-7e46-e08f-3a955c998d7c.jpeg)

すると、`Authorized successfully.`と表示され、
`./src/gulp/languages`に`ja.json`と`en.json`が保存されているかと思います。

正常にダウンロードできたら、以下のコマンドでwatchが走りますので、この状態で`./src/hbs/index.hbs`を保存して、`http://localhost:6000`と、`http://localhost:6000/en`を確認してみてください。スプレッドシートに入力していた内容が出力されているかと思います。

```
$ gulp
```

hbsに記載している、`__.***`の、`***`の部分がスプレッドシートのソーステキスト名と紐付いているので、ここを変更することで言語分だけ自動でページ展開されます。

言語を増やす場合は、スプレッドシートの列を増やして対応してください。

## 補足

### GASの認証まわりについて

公式のガイドに載っている[Node.js Quickstart](https://developers.google.com/apps-script/guides/rest/quickstart/nodejs)をベースにしています。

リポジトリ上では、[コチラ](https://github.com/y-eioki/qiita-gas-translate/blob/master/src/gulp/utils/gapi_authorize/gapi_authorize.js)のファイルです。

### 翻訳データの出力について

今回はAssemble（Handlebars）を使って書き出していますが、ejsなど別のテンプレートを使用しても同じ処理ができますので、ぜひ使い慣れているテンプレートでtaskを組み替えてお試しください。

今回使ったAssembleのtaskは[コチラ](https://github.com/y-eioki/qiita-gas-translate/blob/master/src/gulp/tasks/assemble_i18n/assemble_i18n.js)です。