エンジニアは忙しいからSlack×GASで翻訳する

日本のエンジニアの皆さん、今日もお疲れさまです。

忙しいエンジニアの皆さんは、わからない英単語とか出てきたときどうしてますか？
なんかGoogle翻訳開くものめんどくさいじゃないですか。
わざわざブラウザ立ち上げて、翻訳先の言語設定して、って。

だから使い慣れているSlackで外国語が翻訳できたら便利だなと思って作ってみました。

#やりたいこと
1. Slackでトリガーワードと文字列を投稿
2. トリガーワードをOutgoing WebHookで拾って、GAS(Google App Script)で作成したAPIをPOST
3. GASで翻訳してSlackにメッセージとして結果を返す

構成としては以下を参考にして作成しています。
https://qiita.com/pistaman/items/a542119ea28871960477

#Slackの準備
まずはSlackの準備から行います。

##Outgoing WebHook
SlackのAppから「Outgoing WebHook」を検索して追加します
<img width="671" alt="1 (2).PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/fc826a1c-07b6-8f29-d246-a077ce4bbcc7.png">

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/1001e913-e45d-da50-32c7-348410c41cf1.png)

インテグレーションの設定では、以下の様に設定を行います。

- チャンネル：botを追加したいチャンネル
- 引き金となる言葉：いわゆるトリガーワードです。この後に続く言葉を翻訳します。今回はtrans.でやっていますが、お好みでどうぞ。
- URL：ここにはGASで生成するURLが入るので、後から入力します。
- トークン：後ほど使うので、どこかに控えておいてください

その他はご自由に

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/2d1dd401-c2a2-a5fd-93d7-56667775c5ed.png)

入力したら一旦保存してください。

##SlackApp
次にSlackAppの準備です。
下記URLから作成します。
https://api.slack.com/apps

名前とワークスペースを入力すると次のような画面に移ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/b5543c7f-7637-2543-fefb-f080b13bf263.png)

permissionをクリックして、以下のようにやったらうまくいきました。
要はメッセージを送る権限がほしいだけです。
（こんなパーミッションあるよ！って方いたら是非教えて下さいm(_ _)m）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/2d49ca5b-9d5d-aaf6-bfcf-62ceaabfd1b6.png)

パーミッションの設定を終えると、同画面の**Install App to Workspace**がクリックできるようになるので、クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/e2d8fb33-f305-376f-b7e9-b3f720bd3e41.png)

Workspaceにインストールできると、**Bot User OAuth Access Token**っていうトークンが出てくるので、これも控えておいてください。

それができたら、**App Home**から、**Always Show My Bot as Online**をONにしておいてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/63cc03fc-aa3d-f435-5bc9-8679013e7eb1.png)

#GASの準備
ここまで来たらGASの設定です。

ファイル＞プロジェクトのプロパティ＞スクリプトのプロパティから
プロパティ：**SLACK_ACCESS_TOKEN**
値：SlackAppのBot User OAuth Access Token
を入力して保存します。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/20f23c45-a392-2c34-db1a-4f757ab9e509.png)

リソース＞ライブラリからSlackAppを追加
プロジェクトキー:`M3W5Ut3Q39AaIwLquryEPMwV62A3znfOO`を入力すると出てきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/8b0b6247-9c81-dbdd-5cb1-f12f4de92cbd.png)

その後、GASのコードを以下に書き換えます。

```:main.gs
function doPost(e) {
  var token = PropertiesService.getScriptProperties().getProperty('SLACK_ACCESS_TOKEN');
  var verifyToken = "Outgoing webhookのトークン";

  if (verifyToken != e.parameter.token) {
    throw new Error("invalid token");
  }
  
  var text = e.parameter.text.slice(6);
  
  var slackApp = SlackApp.create(token); 
  var ja = LanguageApp.translate(text, '', 'ja');
  var en = LanguageApp.translate(text, '', 'en');
  var cn = LanguageApp.translate(text, '', 'zh-CN');
  var tw = LanguageApp.translate(text, '', 'zh-tw');
  var vi = LanguageApp.translate(text, '', 'vi');
  var fr = LanguageApp.translate(text, '', 'fr');
  slackApp.chatPostMessage(e.parameter.channel_id, "日本語: "+ja+"\n英語: "+en+"\n簡体語: "+cn+"\n繁体語: "+tw+"\nベトナム語: "+vi+"\nフランス語: "+fr);
}
```

`verifyToken`にはOutgoing webhookから取得したトークンを入力してください。
また、`var text = e.parameter.text.slice(6);`の部分は、トリガーワードが`trans.`だから6文字にしてますが、トリガーワードが異なる場合は、それに応じて変えてください。
コードを書いたら、公開＞Webアプリケーションとして導入...をクリックし、公開します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/a2eff852-4658-f520-a26f-60ee96e617ea.png)

あと、GASを更新する際は、Project versionをnewにしないと行けないみたいですね。

この際に現れるCurrent web app URLをOutgoing webhookのURLに入力して、完成です。
（Slackのチャンネルにbotを追加しておくこともお忘れなく）

#動作確認
![実行結果2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/6620b21e-81d1-607a-ebe1-67c70a252993.gif)


見てもらうと分かるように、これの良いところは日本語→外国語の翻訳は勿論のこと、外国語→日本語、外国語→外国語の翻訳もできます。

```
  var ja = LanguageApp.translate(text, '', 'ja');
  var en = LanguageApp.translate(text, '', 'en');
  var cn = LanguageApp.translate(text, '', 'zh-CN');
  var tw = LanguageApp.translate(text, '', 'zh-tw');
  var vi = LanguageApp.translate(text, '', 'vi');
  var fr = LanguageApp.translate(text, '', 'fr');
```

ここで本来`LanguageApp.translate`の第2引数には、翻訳前の言語の言語コードを入力するのですが、空文字で入れると、言語を自動判別してくれるので、いろんな言語を翻訳できるようになってます。

#やってみて
初めてSlackAppを作成してみましたが、慣れれば1時間ぐらいでサクッと作れそうですね！
スプレッドシートに保存するようにすれば、アプリの多言語対応とかもできるかも！とか思ったりしてます。

#参考文献
- [SlackのOutgoing WebHooksとGoogleAppsScriptで簡単な会話botを作ってみた](https://qiita.com/pistaman/items/a542119ea28871960477)
- [Google翻訳APIを無料で作る方法](https://qiita.com/satto_sann/items/be4177360a0bc3691fdf)
- [SlackとGAS(Google Apps Script)を連携してBotを作ろう](http://maekawa-yoshimiki-1119.hatenablog.com/entry/2020/03/18/175942)
- [言語コード一覧 ](https://www.benricho.org/translate/languagecode.html)
- [Google Apps Script試行錯誤Blog](https://www.pre-practice.net/2018/01/blog-post_17.html)