ついカっとなって、本の購入申請ワークフローを作った話 #Slack

この記事は、JSL (日本システム技研) Advent Calendar 2019 - Qiita の5日目の記事です

TL;DR

社内の書籍の購入申請の仕組みを紙から電子に切り替えようと試みた話です。
（SlackのワークフローとGASを使って）

ことの始まり

「Grid Systems in Graphic Design」の和訳版があった。

Grid systems in graphic design｜グリッドシステム　グラフィックデザインのために | ボーンデジタル

社内Slackの分報にそんなポストが。欲しくてたまらなかったけど、試用期間中の僕の手元にそんなお金はなかった。

「そうだ。本の購入申請の仕組みがあるじゃないか」

技術書や業務に関係のある書籍なら会社に購入してもらう仕組みが我が社にはある。
これを利用しない手はない。そう思って僕は手続きを確認した。

Google Driveから申請用紙を探しだし、それを紙を印刷して、必要事項を記入して、ハンコを押して上長承認、社長承認を得れば、購入可能、そんなよくある仕組みだ。

早速紙を印刷して必要事項を記入しハンコを押して、、これで上長承認さえもらえすれば、あとは買うだけ。

ただこれはだいぶ時間がかかりそうだ。。。上長に「業務で役に立つのか」「費用の回収計画を説明してくれ」
など購入理由を問い詰められ、書類を書き直し再度レビューしてもらい。。
２ヶ月はかかるな。。すぐに読みたいのに。。
まあ本自体もWEBだと軒並み在庫はないし。。高値をつけて転売されている。。ちょうど良いか。。
などと考えていた。

その日はすでに上長が客先で不在であったため、書類をもって総務のひとに相談した。
「はい。分かりました。あしたには買えますよ」
「！？＞＜＋L＋L <POKL`*」

驚愕だ。早すぎる。
メンバーが隣の街の書店で本の在庫を見つけてくれて、さらに買いに走ってくれて、

週明けには本を手に入れることができた。

そんな最高な仕組みがあるにもかかわらず、社内ではあまり使われていないようだ。（去年度9冊、本年度7冊）
メンバにヒヤリングしてみたところ、

申請書を探すのがだるい
申請書を印刷して書くのがだるい
そもそもそんな仕組みがあったの？？

ということで、Slackで簡単に申請できるように試みてみました。

技術

Slack
- ワークフロー
- InCommingWebhhok
- OutGoingWebhook
GAS

実装の流れ

チャンネルを作成し、Slackワークフローを登録する
Botを作成し、IncomingWebhookを利用可能にする
GAS
GASをOutgoingWebhookに登録

以下にかいつまんで書きます。

チャンネルを作成し、Slackワークフローを登録する

本の購入申請用のSlackチャンネルを作成し、次にワークフロービルダーを選択します。

作成ボタンをより、名前をつけて次へを押下。

アクションメニューを選択し、適宜設定。
新規に追加したチャンネルを設定します。

必要事項を記入するフォームを追加し、右上の公開するボタンを押下。

すると、チャンネルの右上にかみなりのようなマークが追加されワークフローが利用可能になります。

フォームに記入し、送信を押下すると、以下のような感じでSlackに投稿されます。

Botを作成し、IncomingWebhookを利用可能にする

Slack API: Applications | Slack で「Create α Slack App」を選択。
App Name,Development Slack Workspace を設定。

Activate Incoming Webhooks を有効にし、投稿したいチャンネルを設定。

COPYボタンを押下しWebhook URLを取得しておきます。（これがGASからSlackへ投稿するときに必要）

GAS

Google Driveにて任意のスプレッドシートを作成し整えます。

スプレッドシートのメニューより「ツール->スクリプトエディタ」を選択。

コードは以下のような感じ。

//Outgoing Webhook のTOKEN（後述）
var WEBHOOK_TOKEN = "xxx";
// SlackからのPostを受け取る
function doPost(e) {
  if (WEBHOOK_TOKEN != e.parameter.token) {
    postSlack("debug:tokenが不正なアクセスがあったらぼ〜" ); 
    throw new Error("invalid token.");
  }
  try{
    var data = e.parameter.text;
    record(data);
    postSlack("申請完了ラボ！\n承認をしばしまつラボ〜！"); 
  }
  catch (e) {
    postSlack("debug:失敗ラボ〜〜！\nたぶんフォーマットエラーらぼ〜 :tsurai: \n ```" +  e + "```" ); 
  }
}

// Slackへ投稿する
function postSlack(text){
  //incomingwebhookを設定する
  var url = "前述のWebhook URL";
  var options = {
    "method" : "POST",
    "headers": {"Content-type": "application/json"},
    "payload" : '{"text":"' + text + '"}'
  };
  UrlFetchApp.fetch(url, options);
}

// スプレッドシートへ記入する
function record (data) {
  var recordsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('購入申請'); 

  //入力する行のオブジェクトを取得
  var lastrow = recordsheet.getLastRow();
  var recordrow = lastrow + 1;

  //投稿日時を取得
  var formatdate = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy-MM-dd HH:mm:ss');
  //Slackのポストを整える
  var lists = data.split(/\*/)
  //ユーザ名を整える
  applicant_user = lists[2].split(/\<|\>/)
  auth_user = lists[12].split(/\<|\>/)
  //スプレッドシートを更新する
  recordsheet.getRange("A" + recordrow).setValue("=ROW()-1"); // No
  recordsheet.getRange("B" + recordrow).setValue(formatdate); // 申請日
  recordsheet.getRange("C" + recordrow).setValue('=VLOOKUP("' + applicant_user[1] + '",ID!A:B, 2,FALSE)'); // 申請者
  recordsheet.getRange("D" + recordrow).setValue(lists[4]); // 本のタイトル
  recordsheet.getRange("E" + recordrow).setValue(lists[6]); // 税込金額
  recordsheet.getRange("F" + recordrow).setValue(lists[8]); // URL
  recordsheet.getRange("G" + recordrow).setValue(lists[10]); // 購入希望理由
  recordsheet.getRange("H" + recordrow).setValue('=VLOOKUP("' + auth_user[1] + '",ID!A:B, 2,FALSE)'); // 承認者
}