CodepenによるWebアプリとPADによるExcel集計&メール送付の自動化

# はじめに
体調報告業務の面倒な作業を無くす為に、CodePenを使用して体調報告する事を通知して気づかせるWebアプリ「きづくん」と、Power Automate Desktop(PAD)を使用して体調報告の未登録日をメールで自動通知してくれる「みまもるくん」を制作しました。

# 使ったサービス
◆[CodePen](https://codepen.io/)
◆[Power Automate Desktop](https://powerautomate.microsoft.com/ja-jp/robotic-process-automation/)

# CodePenで制作した「きづくん」の完成動画
アラームが鳴りますので音量にご注意願います。

https://www.canva.com/design/DAFQZFBhVOY/watch


# CodePenで制作した「きづくん」の仕様
・パソコンのスタートアップに入れて、パソコン立ち上げ時に自動で開く常駐プログラムとして使用する事を前提としています。
・コードは、こちらを参照願います。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abKbMrG" data-user="ktnzrtzqwvrmeji" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ktnzrtzqwvrmeji/pen/abKbMrG">
  体調報告　試作7　きづくん</a> by 白川圭司 (<a href="https://codepen.io/ktnzrtzqwvrmeji">@ktnzrtzqwvrmeji</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 「きづくん」の機能
・アラーム時間をセットできます。
・スヌーズ機能でアラーム時間を10分後にできます。
・下線部分をクリックする事でリンク先を開けます。
・設定した時間に、リンク先を自動で最前面に開きます。
・設定した時間にアラームが11秒間鳴ります。
・アラーム終了後に、アラートが出ます。
・アラートは説定時間を分単位で超過するまでOKボタンでは消えません。

# 「きづくん」の課題
・別のアプリやブラウザを全画面で開いていた場合に、リンク先が最前面で開かなかったり、アラームが鳴ならない場合があり、「きづくん」を開いているブラウザとの関係で稼働が変わる事を確認しています。
今後継続して、修正していきます。

# PAD(Power Automate Desktop)で制作した「みまもるくん」の完成動画
こちらをクリック願います。

https://www.canva.com/design/DAFQH-0PM4A/watch

# PAD(Power Automate Desktop)で制作した「みまもるくん」の仕様
Formsの集計データより、メールアドレス別の未登録日を自動集計して、未登録者にだけメールで自動で通知します。

自動処理のフローは次の通りです。
1)Formsの集計データを自動で起動します。
2)Excelのデータを読み取ります。
3)必要な情報であるメールアドレスと登録日付をコピーします。
4)集計用フォーマットを起動します。
5)集計用フォーマットのシート「実績」をアクティブに設定します。
6)アクティブにしたシートに3)のデータを書き込みます
7)～9)メールアドレスと登録日付を繋げた情報を作る為に、CONCATENATE関数をLoop処理で書き込みます。
※裏方となりますが、別シート「未入力データ」でメールアドレス別の未登録日を関数を組んで自動集計しています。
10)集計用フォーマットを保存します。
11)集計用フォーマットのシート「未入力データ」をアクティブにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2792549/ddba01e9-e4d2-788b-7eaf-d0a8e0455ec9.png)
12)シート「未入力データ」内のデータを読み取ります。
13)Loop処理を開始します。
14)Outlookを自動で起動します。
15)集計用フォーマットのシート「未入力データ」からメールアドレスを読み取ります。
16)確認用メッセージで内容確認
17)集計用フォーマットのシート「未入力データ」から未登録日を読み取ります。
18)確認用メッセージで内容確認
19)集計用フォーマットのシート「未入力データ」から未登録日の日数を読み取ります。
20)確認用メッセージで内容確認
21)未登録日の日数でSwitch処理します。
22)未登録日の日数が有るある(0で無い)場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2792549/70fbb838-ae97-2474-25bb-a843c6bb9a91.png)
23)Outlookからメール送信します。
24)未登録日の日数が0の場合
25)何もしません。
26)Loop処理終了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2792549/a3f5359e-72c3-b622-0579-30f9f6b6b53e.png)

# 終わりに
Codepenは、2ヶ月しか経っていない初心者でプログラムを知らなかった私でもプログラムを作る事ができる素晴らしいツールですが、もっと作りたいものを作る為には、JavaScript等の基本的な文法や使用方法を勉強する必要があると思いました。
CodePenであれば、すぐにコードを試すことができますので、その特性を活かして継続して勉強していきます。
PADには、人の手でできる事ができない場合もあり、全てを自動化する事は難しいと思いましたが、PADの得意な分野を自動化する事でも十分な効果があると思いました。
また、一部の機能しか使用していない為、他の機能も試してみたいと思いました。

![きづくん&みまもるくん.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2792549/1d47b0d8-1589-1ce7-3047-040e5626f932.png)


# 関連記事
noteに記事を書いておりますので、背景や目的などはこちらを参照願います。

https://note.com/preview/nfd53dfd31857?prev_access_key=638f4b73b9cb1631e63321e19a403b5a