エンジニアのエンジニアによるノンプログラミングのためのZapier(課題管理をやりたかった)

この記事は [ハンズラボ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/handslab) 24日目の記事です。

今年も、この季節がやってまいりました。
去年も一人で過ごしていました。
今年も一人です。

本当は[AWS re:Invent](https://reinvent.awsevents.com/)で発表された[DeepComposer](https://aws.amazon.com/deepcomposer/)を試してみた！
というモノを書きたかったのですが、間に合わず。

次回は`カラオケ平均70点の音痴男性がDeepComposer試してみた`でお会いしましょう。:microphone:

ではなく。

## はじめに
弊社はチームにもよりますが、[Backlog](https://backlog.com/ja/)を主に利用しています。
合わせて、Slackも使用しています。([Slackに関する弊社AdbentCalendar記事](https://qiita.com/bakuwarorin/items/714b6ba302a9f4c5b355))

POSチームは決済ログの調査依頼がきたら調査しなければなりません。
そのためチケット制にしようという声が上がり、今回の記事になりました。

要はSlackからBacklogに課題登録したい。

## 序章
- 1863年11月19日リンカーンはゲスティバーグ演説を行った。
- 2019年11月19日私はBacklogを整理行った。
- 同年12月20日POSチームBacklogが荒廃した。

Backlogにない課題もちらほら。
世紀末です。

## 現代の知恵を使用する
- チケット制にしよう。
- Backlogの課題追加自動化できるらしいよ。
- SlackのWorkflowもあります。
- ~~ノンコーディングのほうがなんかネタになりそう~~

### ここから導き出されたモノ。
[Zapier](https://zapier.com/)
IFTTTよりも優れてるらしい。
制限は。うん。。。


### フロー(制作側)
1. [Slack Workflowで雛形を作る。](#Slack-Workflowで雛形を作る。)
2. [ZapierでZapを作る。](#Zapの作成)

### フロー(利用側)
1. Workflowの雛形で入力
2. リアクションをつける。


ではまいろう。

## Slack Workflowで雛形を作る。
[Workflow](https://slack.com/intl/ja-jp/features/workflow-automation)を利用します。
まずなんだと思われる方は、[こちらの記事](https://qiita.com/kazushi_iizuka/items/5cd9c3bb0bde9803cac0)をお読みいただければと思います。

#### 名前決め
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/375fefd2-12c0-c09b-9247-d94f00f382ba.png)

#### Actions menuを選択
![Pasted_Image_2019_12_23_18_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/dd902629-be85-cb4a-7087-e188fb8faa9e.png)

#### 導入するチャンネルの決定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/7119ec6f-3605-1188-a221-7a5562fbe96b.png)

#### 雛形フォームの作成
![Pasted_Image_2019_12_23_18_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/6b0786ae-19d2-5eb0-1a14-9d2ee909231c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/6afdc9a4-07ef-e97f-b114-1d5b198b5893.png)

今回は

- summary(Short answer) -> Backlogの課題名
- discription(Long answer) -> 課題の詳細

をそれぞれ入力させるようにしました。

画像では、`Send submitted responses to a channel...`にチェックはついていませんが
つけて、回答の吐き出し先を`導入するチャンネル`へしてください。

## Zapの作成
Zapierってなんぞやって方は、[こちらの記事](https://qiita.com/nottegra/items/c248f8c4474439f40a49)をご覧ください。
非常にわかりやすくまとめられており、参考になりました。

#### リアクションがつけられたら発火させる
<img width="961" alt="Pasted_Image_2019_12_23_18_35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/6f3984d8-4161-4959-eeab-e9515b3864f9.png">

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/52b11d0c-bba4-a8d0-f730-232761236693.png)
Choose Trigger Event -> `New Reaction Added`を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/7be9b53c-bb94-8013-d357-aeb13b97d549.png)
Reaction -> あまり頻繁に使用されないリアクションを選択しましょう。(カスタムリアクションも選択可)
Channel -> `導入するチャンネル`を選択。

#### 一度スプレッドシートへ吐き出す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/0739cdc8-a6ac-ec59-b4a4-b67e549ca9ae.png)


|data1|data2|data3|
|-----|-----|-----|


上記の表のようなスプレッドシート(シート1)を作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/9df71c34-e6ab-2d84-65e8-08f3756e8420.png)

slackで特定のリアクションをつけた投稿を取得します。

- data1 -> リアクションをつけたslackの本文
- data2 -> リアクションをつけた人の名前
- data3 -> タイムスタンプ

あとで使いやすいようにログとして保存するのが目的です。

#### フォーマットする。

遅くなりましたが、Slackから取得できる本文は以下のようになります。

``` text:Slackでリアクションをつけた本文
*testform* submission from @daisudaisuke 
*sample* てすとだす 
*sample2* ここは何も関係ない 
*discription* 来週末(12/26)帰ります。 皆さんお元気で。 良いお年を。 お体にはお気をつけて。
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/ccce09ec-9ac6-82a0-d327-bf7d4cc62008.png)

先ほどの手順で取得した、テキストを整形します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/13cd46bb-3d91-8f7f-2d6c-144ac994f74f.png)

Separatorは`*`にしているので、summary,discription内にあればそこで改行されてしまいますのでご注意を。

#### スプレッドシートに整形したものを連携する。

|from|backlog_title|discription|
|----|-------------|-----------|


上記の表のようなスプレッドシート(シート2)を作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/b98d4bd4-6ecb-2c2e-b60d-f9acf88014ee.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/a251e487-c1f6-cfdc-aa10-8b1b9dd73616.png)

- from -> フォームの回答者
- backlog_title -> Backlogの課題名
- discription -> 課題の詳細

となっています。
backlog_titleは上記のsummaryと同じです。



ちなみに`output_item`はこれでも指定できます。

``` text:output_item
{{xxxxxxx__output__Item 3}} // submission from @daisudaisuke
{{xxxxxxx__output__Item 5}} // てすとだす
{{xxxxxxx__output__Item 7}} // ここは何も関係ない
{{xxxxxxx__output__Item 9}} // 来週末(12/26)帰ります。 皆さんお元気で...
```

#### BacklogにPOSTしよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/6c957548-fde9-cab1-0e01-7a77f0f41359.png)

<img width="839" alt="貼り付けた画像_2019_12_24_2_00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104403/8c1e527c-baf1-66db-5bc3-bd35a443b487.png">


- BacklogAPIキー
- projectId
- issuTypeId


これは`curl`とかで頑張って取得してください。

あとは[BacklogAPI](https://developer.nulab.com/ja/docs/backlog/api/2/add-issue/#%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC)を読んで課題登録に必要なものをかけば終わりです。


## ね。簡単でしょ?
この記事が書かれているということは、コーディングしたくてウズウズしているはずです。
ノンコーディングってしんどいということがわかりました。

もうやりたくないです。:innocent:

というのは嘘で。
コーディングできるのであればもっと自由にできると信じています。

さくっと作るときとても便利な機能だと感じました。

もちろん、重複登録できるし、BacklogAPIキーが自分のとかは内緒だよ。
サンタさんが来てくれないよ:santa:


「[ハンズラボ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/handslab)」 記念すべきクリスマス:christmas_tree:の25日目は @Angelan1720 さんです！