テニス観戦が趣味の、カルロビッチと申します。初投稿です。

作るもの

Slackの絵文字が小さいので、LINEスタンプくらい大きくできたら楽しいなと思い、投稿された絵文字をもとにBotが大きなスタンプを投稿するコマンドを作りました。
既存記事がサーバー用意系でハードル高かったため、Google Apps Script（GAS）だけで作ります！非エンジニアの方でもわかるように書きます

全体像

SlackAppからスラッシュコマンドでスタンプ名をGASに対してPOSTし、GASでそのスタンプ名をSlack APIのemoji:listに投げて画像URLを取得、その画像をattachmentにもったJSONをSlack側に返して画像を表示させる。

Slack側の設定

1. Slack Appを作成

https://api.slack.com/apps?new_app=1
「From Scratch」 → 名前とワークスペースを設定 → 「Create」

2. Commandを作る

「Slash Commands」 → 「Create New Command」

Commandの設定を入力します。Request URLはあとで入力するので、とりあえず仮のURLを入れてSaveしましょう。

3. ワークスペースにAppをインストール

① サイドバーの「App Home」からPresenseの欄を「Edit」、Botの見た目を設定

わたしは、名前が見えると可愛くないので、今回全部「.」や「l」という名前にしました。

※ ここを設定せずInstallすると謎のエラーになります。

② サイドバーの「Basic Information」から「Install to Workspace」

4. Scopeを設定

このアプリはコマンドを受け取る以外何の権限ももっていないので、権限を持たせます。
サイドバーの「OAuth & Permissions」から、「Scopes」で、「Add an OAuth scope」で、絵文字を読むために「emoji:read」を選択しましょう。Bot側だけで大丈夫なはずなのですが、僕はUser側のtokenで作ってしまったので、両方に付与しちゃいました。

この画像のようになればok。
※ 今回のGASアプリケーションは全体に公開されるため、不要なscopeを与えないようにしましょう。レガシーなトークンで実装するのもやめましょう。

5. tokenを取得

サイドバーの「OAuth & Permissions」から、「User OAuth token」をコピーしておきましょう。これを後ほどGASで使います。

※ このtokenは公開しないようにしましょう。

GAS側の設定

１. 任意の場所にスプレッドシートを作り、上のバーから「拡張機能」→「Apps Script」を開く

Googleドライブから直接作っても問題ないです。

2. コードを記述

このコードをコピペしてください。


// 関数名がこの名前でなければGASがPOSTを受け取れない
function doPost(e) {
  const stamp = encodeURIComponent(e.parameter.text);
  // スタンプの前後のエンコードされた「:」を削除
  const name = stamp.replace(/%3A/g, '');
  const img = getEmojiBy(name);
  if (!img) {
    return ContentService.createTextOutput('絵文字がありません');
  }
  const response = {
    "response_type": "in_channel",
    "attachments": [
      {
        "image_url": img
      }
    ],
  };
  const payload = JSON.stringify(response);

  const output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  output.setContent(payload);
  return output;
}

function getEmojiBy(name) {
  const token = 'ここに先ほどのtokenを入力';
  const url = 'https://slack.com/api/emoji.list?pretty=1';
  const headers = {
    'Authorization': 'Bearer ' + token
  };
  const options = {
    'method': 'GET',
    'headers': headers,
  };
  const res = UrlFetchApp.fetch(url, options);
  const data = JSON.parse(res);
  if (!data.ok) {
    return '';
  }
  const img = data.emoji[name];
  if (!img) {
    return '';
  }
  return img;
}

上記関数内のconst token = ''の部分の''の中に、先ほどSlackでコピーしたtokenを貼り付け、保存してください。

※ ちなみに、doPest()内でLoggerを置いてもLogが出力されません。GCP連携を行えばいけるようです。僕は、doPost関数の外でなるべくデバッグして、createTextOutputでテキスト出力する、という感じで頑張りました。

3. デプロイ

このコードを外部から実行できるようにします。GAS画面の右上から「デプロイ」を押してください。

「新しいデプロイ」→「ウェブアプリケーションとして」→「次のユーザーとして実行：自分」「アクセスできるユーザー：全員」にして、デプロイを押してください。
完了したら、https://script.google.com/macros/s/----/execというURLが発行されるので、これを「コピー」。

Slackにもどる

slackに戻ってSlashコマンドのリクエスト先を変更

サイドバーの「Slash Commands」から、先ほど作った/stampの右側の編集マーク✏️を押して、「Request URL」に上でコピーしたhttps://script.google.com/macros/s/----/execのURLを入力し、「Save」してください。

slackで試してみる

/stamp :スタンプ名:と打ってみてください。無事にBotが現れたらOK！

楽しいスラックライフを！

参考

https://tech.grooves.com/entry/2017/04/04/122107
https://qiita.com/dbgso/items/54cfa5c79d119888747c

ありがとうございました！