Slack message APIを用いたGithub issue作成ショートカット


Slack message APIを用いてGithub issue作成をslackのmessageからできるようにします

slackを業務上でのチャットツールとして使用しているので、version管理で使用しているgithubへのissue作成をslack上でのやり取りから直接行えるようにしたくて開発しました。
実装してみたところ、かなり利便性が高いと思ったので、共有したいと思います。
基本的部分はslackのmessage APIのチュートリアルから引用しています。Slack チュートリアル
前提条件: 今回作成するアプリはnode.js環境が必要なため、ブラウザ上でnode環境を構築できるGlitchを使用します
glitchのコードはこのリンク https://glitch.com/edit/#!/slack-create-issue-pub から "remix" してください。Glitch の remix とは、GitHub の fork のような機能で、リミックスしたコードは自分のリポジトリとなりますので、好きなように書き換える事ができます。
後は.envファイルに自分のkeyを入力し、自分のgithubを入力するだけで、使えるようになります。

前半のAPIの設定はこのチュートリアル部分と全く同じです。
まずはSlack App ManagementからCreate New APPをクリックして次の画面を表示させます。
App Nameは今回はcreate a github issue、Work placeは自分がアプリを適用させたいワークスペースを選択してください。

次に Basic Information の App Credentials セクションまでスクロールします。ここにはアプリの API 認証キーがいくつかがありますが、このチュートリアルでは Signing Secret を使います。


この Signing Secret は隠されている状態ですが、まずそれを表示させ、その値を Node アプリのルートにある .env ファイルに 環境変数 SLACK_SIGNING_SECRET として保存します。このシークレットキーの使い方についてはのちの 「リクエスト情報の認証 」セクションで説明します。
SLACK_SIGNING_SECRET=15770a…
もう少し下にスクロールしていくと Display Information がありますのでそこでアプリのアイコンや詳細など編集することができます。
次に、左のメニューから Interactive Components をクリックして、そのページトップになる Interactivity をオンにしてください。するとフィールドが表示されます。

ここでは Request URL を入力します。このリクエスト URL とは、ユーザーがアクション機能を呼び出した際に Slack の API サーバーから送信されるペイロードデータの受け取り場所となる URL と考えてください。
注:この URL はあなたのアプリが稼働しているサーバーの URL となりますが、ここでは Glitch を使っていますので、リクエスト URL は https://my-project.glitch.me/actions のようになります。
Request URL を設定し終わったら、Shortcutsまでスクロールし、Create New Shortcut ボタンをクリックして、On messageを選択して次のフォームを表示します。


DetailsAction-namecreate-issue-by-glitch,short descriptioncreate an issue thorough message short cutCallback IDcreate-issueを入力してcreateしてください。

他の項目は比較的自由ですが、Callback IDは変更したらglitchのコードを変更する必要があるので、変更しないことをお薦めします。
Create ボタンを押し、次に場面で Save Changes をクリックしてください。

次は OAuth & Permissions へ行き Install App to Workspace をクリックして一旦このアプリをインストールします。インストール画面が表示されますのでそのまま続行し、ワークスペースにインストールしてください。終わってから OAuth & Permission ページに戻ると access tokens が表示されていますのでそれを取得します。トークンは他のキー同様、 .env ファイルに保存します。SLACK_ACCESS_TOKEN=xoxb-214…
次に、同じページ内でパーミションスコープを有効にする必要があります。下にスクロールして Scopes セクションまで行き、必要な bot スコープを追加します。ここでは次の二つの権限設定が必要です:
Add on a OAuth Scopeから次の2つを追加して、Tokens for Your WorkspaceにあるReinstall Appをクリックしてください。
commands メッセージ・アクションに必要な権限
chat:write メッセージを送信するのに必要な権限

これでSlack内でのAppの設定は完了です。
最後は冒頭のリンク https://glitch.com/edit/#!/slack-create-issue-pub からremixしたアプリに.envにGithub Access Tokenを入力してgitissue.jsgit-ownerに自分のユーザー名、
git-repoにissueを作成したいrepository名を入力してください。そして.envGLITCH_DEBUGGERの値にtrueを入力して完了です。

gitissue.js
octokit.issues.create({
    owner: 'git-owner',//ここにowner名 git-owner
    repo: 'git-repo',//ここにrepo名 git-repo
    title: initialdatas.title,
    body: initialdatas.body,
  }).then(({data}) => {
    console.log(data);
  }).catch(error => {
    console.log(error);
  }); 

これで最初に設定したワークプレイスでメッセージショートカットが使用でき、issue作成まで行えるようになっていると思います。

アプリのコード解説はこちらのページに書いています。
https://qiita.com/takaya787/items/9e74acd6b0b4f67bb4fd