Makeを使ってお仕事依頼の受け取りと進捗管理を効率化！

### 小さなタイムロス
自分の活動している団体で広報の仕事を委託されており、依頼主から受け取ったイベントの内容をTwitter向けに加工して告知をしています。仕事の依頼は1日1件くらいの頻度でGmailで受け取っているのですが、私用のGmailを使っているためよく「あの依頼メールどこに行ったっけ…？」となりがちで、**小さなタイムロスが起こっていました。**
また私を含めて2人でこの業務を行っているため、**どちらがどの記事を担当するかを都度調整する必要があり、ちゃんと実行ができているかの記録もやりたい** と思っていたものの中々手を付けられずにいました。最近勉強したMakeを利用して実現してみたいと思います。

### 実現したいこと
やりたい手順の流れとしては以下です。
➀特定のワードが入ったメールを受け取る
➁LINEに特定のメールが届いたことが通知される
➂届いたメールの内容がスプレッドシートに転記される

::: note
➁の通知の手段としてLINEを採用した理由は、同じ仕事をしているメンバーとのやり取りを普段はLINEで行っているためです。
➂でスプレッドシートを採用した理由は普段の活動ではGoogleDriveを使用しており、その中でこの業務も管理ができるといいと思ったからです。
:::

### 実装方法
#### 使用ツール
以下のツールを使用しました。ここでは各アカウントの作成方法などについては解説を省略いたします。
[Make](https://www.make.com/en)
[Google Drive](https://www.google.com/intl/ja_jp/drive/)
スプレッドシート (あらかじめご自身のGoogleDrive内に作成しておくことをお勧めします。)

#### 完成したMakeのシナリオ
以下のように連携されている状態を目指して制作を進めていきました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/c14d5d7e-5379-6b60-16e7-f6f9aada4961.png" width="70%">

#### ➀Gmailの転送設定をする。(ここが一番時間がかかります。)
まずはMakeのシナリオ作成画面から「Webhook」を選択し次に「Custum mailhook」を選択してください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/6cef2b19-1413-9088-a061-3f7917b49b05.png" width="60%">
すると、Makeに連携する用のメールアドレスが作成されます。
このアドレスは実際に設定した動きがしているか検証するために使用するので、メモ帳などに記録しておくことをお勧めします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/b744fc78-6e43-9eb3-0d1b-70e36ec8631a.png" width="60%">
取得したメールアドレスをもとに、Gmail上で振り分け設定を行います。
Gmailでの振り分け設定は以下を参考に設定してください。
[Gmail のメールを他のアカウントに自動転送する](https://support.google.com/mail/answer/10957?hl=ja)
転送設定時に認証コードをGmail上で求められる場合があるので、その際は
以下のように一度Mailhookとスプレッドシートを連携し、認証コードを取得してください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/ad7fe6d2-06a5-1f3b-2ddb-b721f55fffa0.png" width="60%">
スプレッドシートは「Add a row」を選択し設定は以下のようにしました。今回は特にシートにこだわりがなかったので、このシートにそのまま目的のメールも転記するようにしました。もしシートを変更したい場合は「Choose a Drive」や「Spreadsheet ID」の項目を変更してください。

::: note info
※スプレッドシートの設定についてはPCの画面上ではスクロールで項目を確認することができますが、画像サイズ上横並びにさせていただきました。
:::
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/b8642429-64b3-d04c-db1a-6e5a1c3d9eeb.png" width="60%">

一度、シナリオを開始し、認証コードの送付を実行すると以下のような行がスプレッドシート内に作成されます。認証コードを確認し、Gmail上で転送設定を行って下さい。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/8b9a3409-782d-d3eb-7cb2-0fc73ca9ddcf.png" width="60%">

#### ➁LINEと連携させる
新規にモジュールを立ち上げて、「LINE」を選択し「Send a Notification」を選択し、以下のように設定しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/faec20aa-7ae3-f49a-b63c-bf6cc545458d.png" width="60%">

::: note info
今回LINEではメールが届いたことさえ分かればいいので、タイトルを示す「Subject」を指定しました。本文の内容も通知したい場合は「Text」を選ぶことで対応ができますが、1000字を超えるとLINEの文字数上限の影響でエラーが起こるので注意が必要です。
:::

#### ➂実際に実行してみる。
ここまで作成を終えたら、実際に意図通りに動くか試してみましょう。
左下の「Run once」を実行し実際に動くかを検証します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/78bd9071-9eb3-b56c-4bbe-17eb6a3c3343.png" width="60%">
LINEの通知とSpreadSheetが連携されていることを確認します。
画像のように通知も行作成もできていることを確認しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/3e622ab5-ba89-ac38-2226-707a501c8f84.png" width="70%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/7dec1861-8bdb-8f4b-ea18-78d91bf9e428.png">


#### 実際に使ってもらった感想
一緒に仕事をしている同僚に作った動作している様子を見せて感想をもらいました。

::: note info
**感想**
・これまではメールが来たらGmailを毎回見る必要があったが、今後はLINEを見るだけで済むと思うと楽になりそう。Spreadsheetにデータが転記されるのも進捗管理がしやすいのでありがたい。
・すでにあるLINEグループにこのBotを追加できるといい。
・ExcelファイルやPDFが添付されていることも多いのでそれもLINEで一緒に送られたら嬉しい。
:::
既にあるLINEグループに加えたいのは私も感じており、何度か試したのですがIDの連携がうまくいかず時間切れとなりました。業務効率化を進めるためにまだまだ改善していこうと思います！

### 制作の悲喜こもごも
制作にあたって躓いた箇所があったのでこちらも合わせて共有します。
#### Gmailの個人アドレスの場合の認証
最初はWebhookではなくGmailのモジュールをしようとしたのですが、@gmail.comなどの個人アドレスの場合は認証設定を行う必要があるため、結構苦労しました。
以下のサイトを参考にして認証をすることができました。もしGmailモジュールで進められる方がいたらご活用ください。(文章は英語ですがGIFが参考になりました。)
[参考記事](https://www.make.com/en/help/connections/connecting-google-services-using-a-custom-oauth-client?_ga=2.116434181.2007554217.1667800987-263463890.1667558782)
#### メールの文字化け
Gmailの認証ができたのも束の間、実際に作成したシナリオを実行をしてみると文字化けが発生し恐怖のLINEが送られました。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Makeつかっててこの文字化けが来た時はちょっと怖かったな…<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/sC3MCVf7eZ">pic.twitter.com/sC3MCVf7eZ</a></p>&mdash; あべれん (@rencoln1229) <a href="https://twitter.com/rencoln1229/status/1589926263917268992?ref_src=twsrc%5Etfw">November 8, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
原因としては送信者か受信者のどちらかの文字設定が「iso-2022-jp」だったために文字化けをしてしまう、と考えられます。これをエンコードできるように以下の記事を参考にphpなどにも触れてみたのですが、うまく動作せず、Webhookモジュールを使っての実装を行いました。

[IntegromatのGmail文字化け](https://blog.ybizeff.com/integromat-gmai-encode/)