SlackとGASを連携して翻訳BOTを設定する。

### 経緯
オフショアを活用した開発を行うときに、BrSEやコミュニケータを通した翻訳が煩わしくなってきた…しかし、私は英語が得意ではない（出来ない）。
Slackに翻訳BOTを設定することに。お金がないので無料が絶対条件！

hubotを検討したが、サーバが必要らしく断念。
手ごろなGASで設定することに。

---
### イメージ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/5eeb45fa-933d-aaef-cc4e-d1b4f7ae5b2b.png)


#### Slackからの呼出し方法（本当は/コマンドにしたい所）

- 翻訳命令
 
```
chlang **原文の言語** **翻訳先の言語** **翻訳対象の文書**
例)
chlang ja en 今日の調子はどうですか？
```

- ヘルプ機能

```
chlang help
```

---
### Step1.GoogleAppsScriptを作成

  1. 手持ちのGoogleアカウントのGoogleドライブを表示し、GoogleAppsScriptを新規作成する。
     ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/0a01a5d5-5a12-cede-b2f2-29e7cc5ef3a9.png)

     ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/25fb6b05-c4a0-1c3a-5e0d-6997946e808e.png)

  2. GoogleAppsScriptにSlackAPIを導入
    SlackApp Library Key `M3W5Ut3Q39AaIwLquryEPMwV62A3znfOO`
    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/8487bb17-5e94-3066-c01d-40d19fc7ebbf.png)
    ライブラリキーを設定。
    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/d8775e13-411b-e11b-a4bf-b3d38b711b25.png)![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/9ababb53-d348-304b-f078-816743e6dabd.png)

  3. プログラムを作成
    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/37cef34a-9b56-e5a7-9e8d-8db8a4fd902f.png)



```javascript:コード.gs
function doPost(e) {
  
  // Slack WEB トークンを設定 < https://api.slack.com/custom-integrations/legacy-tokens >
  var token = "";
  
  // 応答時のBOT名
  var bot_name = "chlang";
  
  // アイコンはかっこよくするために…適当に借用
  var bot_icon = "https://hiyokoyarou.com/wp-content/uploads/2017/09/metoron-110x110.png";

  // 発信webフックのTokenを設定
  var verify_token = ""

  // トークンのセキュリティチェック
  if (verify_token != e.parameter.token) {
    throw new Error("invalid token.");
  };

  // SlackAPPの作成
  var slackApp = SlackApp.create(token);

  var body = e.parameter.text.substr(7); // chlang 以降の抽出
  var tmpSplit = body.split(" ",2);
  var original_lan = tmpSplit[0]         // 原文の言語
  var convert_lan = tmpSplit[1]          // 翻訳先の言語
  var response;
  
  if (original_lan == "help") {
    
    // 結果の編集
    response = "　chlang *原文の言語* *翻訳先の言語* *翻訳対象の文書*\n "
             + "例) \n"
             + "chlang ja en 今日の調子はどうですか？\n\n"
             + "言語種類\n" 
             + "```\n" 
             + "'is'     …  アイスランド語                     'cs'     …  チェコ語\n" 
             + "'ga'     …  アイルランド語                     'te'     …  テルグ語\n" 
             + "'az'     …  アゼルバイジャン語                 'da'     …  デンマーク語\n" 
             + "'af'     …  アフリカーンス語                   'de'     …  ドイツ語\n" 
             + "'am'     …  アムハラ語                         'tr'     …  トルコ語\n" 
             + "'ar'     …  アラビア語                         'ny'     …  ニャンジャ語\n" 
             + "'sq'     …  アルバニア語                       'ne'     …  ネパール語\n" 
             + "'hy'     …  アルメニア語                       'no'     …  ノルウェー語\n" 
             + "'it'     …  イタリア語                         'ht'     …  ハイチ語\n" 
             + "'yi'     …  イディッシュ語                     'ha'     …  ハウサ語\n" 
             + "'ig'     …  イボ語                             'ps'     …  パシュトゥー語\n" 
             + "'id'     …  インドネシア語                     'eu'     …  バスク語\n" 
             + "'cy'     …  ウェールズ語                       'haw'    …  ハワイ語\n" 
             + "'uk'     …  ウクライナ語                       'hu'     …  ハンガリー語\n" 
             + "'uz'     …  ウズベク語                         'pa'     …  パンジャブ語\n" 
             + "'ur'     …  ウルドゥー語                       'my'     …  ビルマ語\n" 
             + "'et'     …  エストニア語                       'hi'     …  ヒンディー語\n" 
             + "'eo'     …  エスペラント語                     'fi'     …  フィンランド語\n" 
             + "'nl'     …  オランダ語                         'fr'     …  フランス語\n" 
             + "'kk'     …  カザフ語                           'bg'     …  ブルガリア語\n" 
             + "'ca'     …  カタロニア語                       'vi'     …  ベトナム語\n" 
             + "'gl'     …  ガリシア語                         'iw'     …  ヘブライ語\n" 
             + "'kn'     …  カンナダ語                         'be'     …  ベラルーシ語\n" 
             + "'el'     …  ギリシャ語                         'fa'     …  ペルシア語\n" 
             + "'ky'     …  キルギス語                         'bn'     …  ベンガル語\n" 
             + "'gu'     …  グジャラート語                     'pl'     …  ポーランド語\n" 
             + "'km'     …  クメール語                         'bs'     …  ボスニア語\n" 
             + "'ku'     …  クルド語                           'pt'     …  ポルトガル語\n" 
             + "'hr'     …  クロアチア語                       'mi'     …  マオリ語\n" 
             + "'xh'     …  コサ語                             'mk'     …  マケドニア語\n" 
             + "'co'     …  コルシカ語                         'mg'     …  マダガスカル語\n" 
             + "'sm'     …  サモア語                           'mr'     …  マラーティー語\n" 
             + "'jv'     …  ジャワ語                           'ml'     …  マラヤーラム語\n" 
             + "'ka'     …  ジョージア語                       'mt'     …  マルタ語\n" 
             + "'sn'     …  ショナ語                           'ms'     …  マレー語\n" 
             + "'sd'     …  シンド語                           'mn'     …  モンゴル語\n" 
             + "'si'     …  シンハラ語                         'hmn'    …  モン語\n" 
             + "'sv'     …  スウェーデン語                     'yo'     …  ヨルバ語\n" 
             + "'zu'     …  ズールー語                         'lo'     …  ラオ語\n" 
             + "'gd'     …  スコットランド・ゲール語           'la'     …  ラテン語\n" 
             + "'es'     …  スペイン語                         'lv'     …  ラトビア語\n" 
             + "'sk'     …  スロバキア語                       'lt'     …  リトアニア語\n" 
             + "'sl'     …  スロベニア語                       'ro'     …  ルーマニア語\n" 
             + "'sw'     …  スワヒリ語                         'lb'     …  ルクセンブルク語\n" 
             + "'su'     …  スンダ語                           'ru'     …  ロシア語\n" 
             + "'ceb'    …  セブアノ語                         'en'     …  英語\n" 
             + "'sr'     …  セルビア語                         'ko'     …  韓国語\n" 
             + "'so'     …  ソマリ語                           'fy'     …  西フリジア語\n" 
             + "'th'     …  タイ語                             'zh-CN'  …  中国語（簡体）\n" 
             + "'tl'     …  タガログ語                         'zh-TW'  …  中国語（繁体）\n" 
             + "'tg'     …  タジク語                           'ja'     …  日本語\n" 
             + "'ta'     …  タミル語                           'auto'   …  言語を検出する\n" 
             + "```\n" 

  } else {
    
    var message = body.substr(original_lan.length + convert_lan.length + 2 );          // 翻訳対象の原文
    // Google翻訳の実行
    message = LanguageApp.translate(message, original_lan, convert_lan);
    
    // 結果の編集
    response = e.parameter.user_name + "さんの投稿を翻訳します。　[" + original_lan + "] -> [" + convert_lan + "]\n ``` \n" + message + "\n ``` ";
    
  }
  
  return slackApp.postMessage(e.parameter.channel_id, response, {
    username: bot_name,
    icon_url: bot_icon
  });
  
}
```
---
### Step2.Slack WEB Tokenを確認

2020.9.24 Legacy token generatorが利用できなくなっていたので、WebTokenの取得方法の説明を変更

1. https://api.slack.com/apps
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/d141b06b-2358-d3f3-ef04-5440bdb41d38.png)

2. [Create New App]をクリック
3. Workspaceはご利用になるWorkspaceを選択してください。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/34abea50-1eec-a7c8-3b85-b0eb9e1b6fa2.png)
4. TokenKeyを作成します。
    1. [OAuth & Permissions]に移動
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/c1beafad-057f-ca68-da48-ca32af03e454.png)
    2. [Scopes - Bot Token Scopes]に[channels:read][chat:write]を追加
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/f9d38551-1463-4e81-e869-fc006f3b8ad3.png)
    3. [Install App to Workspace]をクリックして設定
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/8734c7bb-68f6-054b-b297-c68bae32eb91.png)
4. xoxbから始まる、これです。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/484afad3-53f3-9181-6d84-b4353f31c79e.png)





  * 確認した内容をGoogleAppsScriptのtokenに反映
    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/8ff48844-6ecf-9d40-3342-437b31678b7b.png)

### Step3.発信webフックを設定

  ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/08895a60-ee7e-2825-777d-f60f89c55971.png)
  ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/f4bba5d1-41a3-f02e-31d8-29492fb678d6.png)
  ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/7480d76a-9c9c-efa1-932a-28582de662ef.png)
  ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/85b26fd0-f825-38bb-69ad-1b83d12a8850.png)

  * トークンをGoogleAppsScriptのverify_tokenに反映
    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/28785e5a-2096-3623-6deb-d298b3c56b4d.png)


### Step4.SlackとGoogleAppsScriptを連携
  * GoogleAppsScriptをウェブアプリケーションとして導入
    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/f07a7194-8740-cdb0-649e-e34ea13c5bd8.png)
    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/f2cd8fcd-3663-615d-229d-40c18fd7a27c.png)
    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/8c318296-d28a-2f08-c58b-17dd7faae23f.png)

  * ウェブアプリケーションURLを発信webフックに設定
    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/4ed30f49-3e2c-6e68-00e5-62e11aad8011.png)

---
### 動作確認
Slackのパブリックチャンネルで実行してみる。

`chlang help`
![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/0677cbb5-bc67-c862-e3bd-df1d89f3fc5a.png)

　help機能が使えた！アイコンもちゃんと生きている！


`chlang ja en 今日の調子はどうですか？`
![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/1a0717f4-b814-102c-be48-ae1ba0ab9712.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/282054/7e76e4fd-4409-ff9d-55a6-fcdabb1234c4.png)
複数行にも対応可能！

---
簡単なコミュニケーションはSlackで直接やり取りできるようになった。
次は、GITLABからの通知を自動翻訳できるように…出来たらやってみたい！