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

[エンジニアは忙しいからSlack×GASで翻訳する](https://qiita.com/10inoino/items/b010070338e4361635e5)

ちょっと前に書いた、上記の記事が60件を超えるLGTMとたくさんのストックをしてもらいまして、大変有難い限りで御座います。

上記の記事を私のFacebookで公開したところ、知り合いのエンジニアの方からアドバイスを頂きました。

> こういう1機能をシンプルに実行される場合はSlash commandsを使う方が一般的でおすすめです！description入られたりで初見でも分かるようになるので。

なるほどなるほど
`/remind`とかで呼び出せるSlackのSlash commandsは自作もできるのか。

ということで、今回は、前回作成した翻訳のアプリをSlash commandsで動作させることにしました。

主に[こちら](https://qiita.com/chikuwa111/items/7a1a349b82318a5861cc)の記事を基に、GASとSlackAppの準備をしました。
なので、上記記事と前回書いた記事の組み合わせになります。

#GASの準備
まずはGASの準備です。

Google Driveから新規＞その他＞Google App Scriptで開けます。

そして以下のコードを書きます。

```GAS
function doPost(e) {
  var verificationToken = e.parameter.token;
  if (verificationToken != '[SlackAppのVerification Tokenを入力]') {
    throw new Error('Invalid token');
  }

  var text = e.parameter.text;

  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');
  
  var response = { text: "日本語: "+ja+"\n英語: "+en+"\n中国語（簡体）: "+cn+"\n中国語（繁体）: "+tw+"\nベトナム語: "+vi+"\nフランス語: "+fr };

  return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON);
}
```

上記を記載したら、GASの公開＞Webアプリケーションとして導入…からAPIとして公開します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/7ca8daa8-5942-5a15-4dd2-1b63a906a36e.png)

最初に公開するときはProject VersionはNewになっていると思いますが、編集して、2回目以降の公開のときもNewにしてから公開してください。

また、Who has access to the appのところもAnyone, even anonymousにすることをお忘れなく。

その後、表示されるURLをどこかに控えておいてください。

とりあえずGASの下準備は以上です。

#SlackAppの準備

次にSlackAppの準備を行います。

[こちら](https://api.slack.com/apps)からSlackAppを作成します。

Appの名前とワークスペースを選択したら、Slash commandsの設定ページに移動。

私は以下のように設定しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/81801a8d-9551-5a7f-44c8-e187e0bf7f60.png)

これで`/trans`で発火するSlash commandsを作成できます。

Request URLの部分は先程控えたGASのURLを入力してください。

これを保存して、Basic Infomationに移動して、Workspaceにアプリを追加します。

その後、Basic Infomationの下の方にVerification Tokenが表示されていると思うので、そちらをGASのVerification Tokenのところにコピペして、再公開すれば完成です。
GASの再公開の際はVersionをNewにするのをお忘れなく。

#動作確認

動作確認です。

![実行結果3 .gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508796/6c9efa43-1580-73d0-f805-e94dae8dc4a2.gif)

ちゃんと動きました！


#Slash commandsのいいところ
WebhookとSlash commandsの2つで同じような動作をするアプリを作ってみたわけですが、感覚としてはSlash commandsの方が使いやすそうです。

##単純にかっこいい
なんかSlash commandsってSlackの大きな特徴の1つのような気がしておりまして。
そんなSlash commandsでアプリ作ってみました！って、webhookで言語拾ってアプリ動作させるより、なんかかっこいい気がします。

##利用ユーザー以外は見えない
`/remind`などのSlash commandsでもそうですが、利用ユーザー以外はレスポンスが見えません。

これは長所とも短所とも取れますが、今回のアプリに関しては、他のユーザーに見えてしまうと、翻訳の度にSlackが流れてしまい、うるさくなりそうだったので、長所として捉えられるかと思います。

##登録したワークスペース内だったら、どこのチャンネルでも使える
1番の長所はここかと思います。
WebhookでAPIをを叩いていたときは、登録した1つのチャンネルにしかレスポンスを返すことができませんでした。
しかし、Slash commandsは登録したワークスペース内であれば、どこのチャンネルでも利用することができます。

複数画面で開発をするエンジニアは、常にSlackにアクセスしやすいようにしていることが多いと思いますので、Slackにアクセス＞Slash commands叩くの2ステップで翻訳ができるのは、非常に使い勝手が良いですね。

##登録するSlackAppが1つで済む
前回のWebhookの場合は、Outgoing Webhookと自作したSlackAppをワークスペースに登録しないと利用できませんでした。

Slackは無料プランの場合は、ワークスペース1つにつき、10個しかアプリを登録できないため、その中から2つの枠を使ってしまうとなると、導入には少しハードルが上がります。

しかし、Slash commandsの場合は、Slackからコメントを拾い上げる作業はSlack側のSlash commandsが行ってくれるため、登録アプリは1つで済みます。

##利用の説明が不要
Slash commands登録時に、そのコマンドの説明と実行例を記載することができ、それ故Slash commandsの存在さえ分かれば利用できる様になります。
Slackの自作アプリあるあるで、頑張って作ったものの、仲間がなかなか使ってくれないというものがありますが、Slash commandsだったら使ってくれる機会も増えそうです。

#やってみて
前回のWebhookの翻訳アプリに比べて非常に作業も楽に作ることができました！
SlackAppを作成したいときは、それがまずSlash commandsで再現できないか検討するのも良いかもしれませんね！