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

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

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

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

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

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

主にこちらの記事を基に、GASとSlackAppの準備をしました。
なので、上記記事と前回書いた記事の組み合わせになります。

GASの準備

まずはGASの準備です。

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

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

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として公開します。

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

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

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

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

SlackAppの準備

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

こちらからSlackAppを作成します。

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

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

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

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

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

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

動作確認

動作確認です。

ちゃんと動きました！

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で再現できないか検討するのも良いかもしれませんね！