Zenn
📝

Slackのworkflowでgithubにissueを作成する独自stepを追加する

2020/12/07に公開
GitHub
JavaScript
Slack
tech

概要

本記事は、DMMグループ Advent Calendar 2020 - Qiita 7日目の記事でもある
趣旨を理解の上、楽しんでもらえれば幸いだ

今年10月のアップデートで解放されたSlack workflowの独自stepについて着目し、実際に追加を行い、workflowからお手軽にgithubにissueを作成する際の留意事項を簡単に紹介する

cf. A step in the right direction. Introducing a new way to extend your… | by Adam Marinelli | Slack Platform Blog | Medium

はじめに

今回はSlack製のbotフレームワークであるslackapi/bolt-js: A framework to build Slack apps using JavaScriptを利用して、サクッと追加できるようにする。その際の留意事項を伝えることをゴールとしているため、あまり細かいフォローは行わない予定である。不明点などはコメントなどでお知らせをもらえると可能な限りレスを入れたいと考えている

なお、今回紹介する機能は無料プランでは利用できないため、この点についても留意されたい
Slack でワークフローを設定する | Slack
Slack 有料プラン vs フリープラン | Slack

今回のアップデートについて

知らない方のために少々フォローアップを行おう
既に把握済みの方は、ここは読み飛ばしてもらって構わない

2019年の10月に登場したSlakのworkflow機能の追加アップデートのような位置付けと認識している

cf. ワークフロービルダーが新登場 : Slack で簡単にタスクを合理化 | Slack

これまではformの表示とmessageの送信の2種類のSlack公式のstepが利用できたが
今回のアップデートを有効にすると、Slack以外のthird partyが作成したstepも追加できるようになる

既にGoogleSpreadSheetなどのstepも公開されているため、
まずはSlackからSpreadSheetへ1行追加する例をみていこう

まずこんなシートを用意する

Slackのworkflow builderから簡単な入力formを作成する
ここまではこれまでのSlackでもできたことだ

次にformのkeyとsheetのkey名をマッピングする

他の項目を同様に埋めて、作成したworkflowを実行すると、シートに追記される

わざわざSpreadSheetを開くことなく、Slackから追記できるようになった

これまででも、ある程度しっかりとコードを書けば実現できたが
それをなしに、ここまでできるようになったのは、実にうれしいアップデートである

自分が追加する拡張stepを利用する

さて、本題に移ろう。

拡張step自体は、自分で作ることも可能だ
今回はSlack製のbotフレームワークであるslackapi/bolt-js: A framework to build Slack apps using JavaScriptを利用して、SlackBotのAppとして動かし、独自stepを追加できるようにする
せっかくの独自stepなので、外部に入力内容を記録する例として、Githubへのissueを起票する内容を紹介する

準備

設定の仕方はきっちりとドキュメントが用意されており、
読者なら基本こちらに従っていく形で準備を進めることができるだろう
Slack | Bolt for JavaScript

ドキュメントにも記載があるため、あえてこちらから細々と説明はしないが、
以下の3つを頭に入れて読み進めると、すんなりと理解しやすいかもしれない

  • 作成するworkflowのIDを決める
  • 作成するSlackAppの設定で2箇所有効にする設定がある
  • 3つの関数を定義する
    • workflow追加時の設定view表示
    • workflow設定・更新時の保存処理
    • workflow実行時の処理

実装について

Githubの特定リポジトリにissueを起票できるようにする場合、workflow実行時の処理は概ねこんな感じの定義となる

execute: async ({ step, complete, fail }) => {
    const { inputs } = step;
    console.log(`execute called with: ${JSON.stringify(inputs)}`);

    const result = await octokit.issues.create({
      owner: 'mesh1nek0x0',
      repo: 'bolt-workflow-example',
      title: inputs.taskName.value,
      body: inputs.taskDescription.value,
    });

    const outputs = {
      taskName: inputs.taskName.value,
      taskDescription: inputs.taskDescription.value,
      issueUrl: result.data.html_url,
    };

    // もし全て OK なら
    await complete({ outputs });

    // もし何か問題が起きたら
    // fail({ error: { message: "Just testing step failure!" } });
  },

※全体は後ほどGithubで公開するので、しばしお待ちいただきたい

outputsの定義について

このoutputsはworkflowのstepで後続にデータを引き継ぐ設定となる、
今回だと発行したissueのURLがそれだ

これはsave関数もexecute関数のどちらもoutputsに定義しておかないと、
SlackのUI上から選択できなかったため、留意しておきたい

save: async ({ ack, step, view, update }) => {
// 省略

    const outputs = [
//　省略
      {
        type: 'text',
        name: 'issueUrl',
        label: 'created issue url',
      },
    ];

    await update({ inputs, outputs });
  },

実行サンプル

作成したBotAppをworkspaceにインストールし、botを起動させると、stepが追加できるようになる

実行するとこのような感じとなる

おわりに

少々駆け足となったが、以上である。
ほぼドキュメントの通りで、留意すべきところは設定周りや値の引き継ぐぐらいだろうか

まだキャッチアップできてなかった方たちが、
本記事をきっかけにworkflowをより活用して、
ちょっとしたルーチン業務のさらなる効率化につながれば幸いである

明日のDMMグループ Advent Calendar 2020 - Qiita 8日目もぜひお楽しみに

Discussion