#Slack Message APIを使ってmessage-shortcut からissue作成

###今回は自分が前回作成したSlack message APIを用いたGithub issue作成ショートカットのコード内容について書いていきます。
基本的部分はslackのmessage APIのSlack チュートリアルから引用しています。
全コードはこちらのGlitchから確認ください。 https://glitch.com/edit/#!/slack-create-issue-pub
Glitchからremixをすることで、簡単に実装することが可能です。
**実装の手順はこちらのページに書いています　**
Slack message APIを用いたGithub issue作成ショートカット
開発環境:　node.js: v10.15.3, javascript
使用ツール: Glitch

今回のメインのファイルはindex.js,confirmation.js,gitissue.js,verifySignature.js,.envの以上5つのファイルで、他のファイルは環境構築用です。
verifySignature.jsについては一切 Slack チュートリアルと変わらないので、割愛します。
index.jsファイルには、slack APIからactionを受け取り、そのactionのtypeによって行動を選択して実行しています。
今回のshortcut用のformを作成して、shortcut ボタンが押されたら、それが表示されるように設定します。

index.js

const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');
const qs = require('qs');
const app = express();

const apiUrl = 'https://slack.com/api';
const rawBodyBuffer = (req, res, buf, encoding) => {
  if (buf && buf.length) {
    req.rawBody = buf.toString(encoding || 'utf8');
  }
};

app.use(bodyParser.urlencoded({verify: rawBodyBuffer, extended: true }));
app.use(bodyParser.json({ verify: rawBodyBuffer }));

/*
/* Endpoint to receive an action and a dialog submission from Slack.
/* To use actions and dialogs, enable the Interactive Components in your dev portal.
/* Scope: `command` to enable actions
 */
/* ここでshortcuｔ用のmodalを送信しています。*/
app.post('/actions', (req, res) => { 

  const payload = JSON.parse(req.body.payload);
  const { type, user, view } = payload;  
  
  console.log(JSON.parse(req.body.payload));
  


  // Message action triggered
  if(type === 'message_action') {
 
    // Open a modal with the selected message pre-populated
    openModal(payload).then((result) => {
      if(result.data.error) {
        console.log(result.data);
        res.sendStatus(500);
      } else {
        res.sendStatus(200);
      }
    }).catch((err) => {
      res.sendStatus(500);
    });
  }  else if(type === 'view_submission') {
     //ここにformを提出後の処理を書き足します。 
  }   
});
/* 表示されるフォームをここで定義します */

const openModal = async(payload) => {
  
  const viewData = {
    token: process.env.SLACK_ACCESS_TOKEN,
    trigger_id: payload.trigger_id,
    view: JSON.stringify({
      type: 'modal',
      title: {
        type: 'plain_text',
        text: 'Create a github issue'
      },
      callback_id: 'create-issue',//登録したアプリのcall back IDを入力
      submit: {
        type: 'plain_text',
        text: 'Create'
      },
      //blockにinputする内容を決定　今回はGithub issue作成に必要なtitleとbody
      blocks: [
        {
          block_id: 'title',
          type: 'input',
          element: {
            action_id: 'title_id',
            type: 'plain_text_input',
            multiline: true,
            initial_value: ""
          },
          label: {
            type: 'plain_text',
            text: 'Issue Title'
          }
        },
        {
          block_id: 'body',
          type: 'input',
          element: {
            action_id: 'body_id',
            type: 'plain_text_input',
            multiline: true,
            /*Slack APIがMessage shortcutを通して、送られてきたmessageデータを
              payloadから取り出しinitial_valueに設定します。　*/
            initial_value: payload.message.text
          },
          label: {
            type: 'plain_text',
            text: 'Issue Body'
          }
        }
      ]
    })
    await axios.post(`${apiUrl}/views.open`, qs.stringify(viewData));
    //console.log(result.data);
};
const server = app.listen(process.env.PORT || 5000, () => {
  console.log('Express server listening on port %d in %s mode', server.address().port, app.settings.env);
});

###次はform提出に関する実行をします###

次にformをsubmitした後の処理をそれぞれ定義します。
この処理は大きく２つになります。

確認用のmessageをbotから送信(confirmation.js)
formのtitle,bodyの情報でgithub APIからissueを作成する(gitissue.js)

それぞれの処理は各ファイルで定義して、index.jsにimportする形にしています。
確認用のmessageをbotから送信(confirmation.js)

confirmation.js

// slackへのform送信はaxiosとqsを用いて行います。
const axios = require('axios');
const qs = require('qs');

const apiUrl = 'https://slack.com/api';
/*送信用formatを用意し、(userId,view）を引数に設定しています。　
 slackではsubmit後にviewにtextデータを追加して送信してくれるので、それをそのまま引数に設定しています。*/

const sendConfirmation = (userId, view) => {
  let values = view.state.values;

  let blocks = [
    {
      type: 'section',
      text: {
        type: 'mrkdwn',
        text: 'issue was created successfully!\n\n'
      }
    },
    {
      type: 'section',
      text: {
        type: 'mrkdwn',
        text: `*title*\n${values.title.title_id.value}`
      }
    },
    {
      type: 'section',
      text: {
        type: 'mrkdwn',
        text: `*Message*\n${values.body.body_id.value}`
      }
    },
  ];

  let message = {
    token: process.env.SLACK_ACCESS_TOKEN,
    channel: userId,
    blocks: JSON.stringify(blocks)
  };

  axios.post(`${apiUrl}/chat.postMessage`, qs.stringify(message))
  .then((result => {
    console.log(result.data);
  }))
  .catch((err) => {
    console.log(err);
  });
}
module.exports = { sendConfirmation };

###次にgithub APIを用いてissueを作成します###
formのtitle,bodyの情報でgithub APIからissueを作成します。(gitissue.js)

gitissue.js

//今回はissue作成でRESTfull APIでのissue作成を簡略化してくれる　octokitを使用します
const { Octokit } = require("@octokit/rest");
const GITHUB_ACCESS_TOKEN = process.env.GITHUB_ACCESS_TOKEN;
// octokitインストールにPersonal_Access_Tokenを代入することでOAuth2認証を行えます。
const octokit = new Octokit({
  auth: GITHUB_ACCESS_TOKEN
});

const sendOctokit = (view) => {
  let values = view.state.values;
//viewデータで送られてきた情報を取得します
  let initialdatas = {
    title: values.title.title_id.value,
    body: values.body.body_id.value ,
  };
  //octokintでのissue作成
  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);
  }); 
}

module.exports = { sendOctokit };

以上でsubmit後の処理のコードは完成です
後はこれらをindex.jsにimportして、formを提出後の処理を記入する場所に追加します。

index.js

const confirmation = require('./confirmation'); //confirmation.js利用のため
const gitissue = require('./gitissue'); // gitissue.js利用のため

if(type === 'message_action') {
  //......
} else if(type === 'view_submission') {
  //form提出後の処理を書く
  res.send(''); // Make sure to respond immediately to the Slack server to avoid an error
  gitissue.sendOctokit(view);// gitissue.jsからimport
  // DM the user a confirmation message
  confirmation.sendConfirmation(user.id, view);// confirmation.jsからimport
}

以上でアプリのcode部分は完成です。