こんにちは！タスキーの古舘です！
前回の投稿から半年以上空いてしまいました…！
大変遅くなりすみません。。

今回は「AppSheetを使ってピアボーナスアプリを作ってみたよ！」の第2弾！

開発に至った経緯やアプリ構想について記載した前記事はこちら👇

この構想をもとにアプリをどのように作っていったのか、今回は実践的なところを少しご紹介していきます！

1)まずはフォーム回答項目を考える！

前回の記事でも記載したとおり、このアプリは従業員同士で賞賛メッセージを送り合うアプリです👏
そのため、従業員がフォームにメッセージを入力⇒アプリで確認できるという機能がメインです。

まず初めに、AppSheetでアプリを作るうえでのデータベースとなるスプレッドシートを作り、各列に入れるフォーム回答項目名を入れていきます。

フォーム内での回答項目にしようと考えたのがこちら。

2)各回答項目の設定をする！

スプレッドシートをAppSheetに取込み、各項目（Columns）の設定をしてきます。

①の「入力日」はいちいち入力するのが面倒なので
TYPE：Date
INITIAL VALUE：TODAY()
として自動反映。

②の「入力者名」③「褒める相手」については毎回自分で名前を手入力させると手間もかかるし入力間違いによる文字列のブレも起きそう…。
そこで、別途Googleアカウントと従業員名を紐づけて一覧化するための従業員マスタTableを作成し

●AppSheetにログインしたGoogleアカウントから②の入力者名を自動反映
　⇒入力者アドレスのColumnのINITIAL VALUEを[=USEREMAIL()]に設定
　　従業員マスタTableでアドレス（Googleアカウント）と従業員名紐づけ

●③は従業員マスタからもってきた従業員名をプルダウン選択
　⇒Enumを使用し従業員マスタTableの従業員名から択一選択

となるようにしました。

従業員マスタTableは、メッセージ送受信時に受け取ることのできるポイント数も反映されるよう、このように組みました。
※ポイント数は送受信数に応じスプレッドシートで集計・計算しています。

④の「お褒めのメッセージ」（＝Column Name：ほめタス内容）は自由入力のため　TYPE：Long Text　で設定。

⑤の「メッセージカード画像添付」はカード画像をプルダウン選択できるようにしたかったので
TYPE：Enum
Type Details＞Values：GoogleDrive内のImageフォルダに保存したカード画像のファイル名
Base type：Image
Input mode：Dropdown
で設定。

結果、フォームのカード添付画面がこんなかんじになりました！

かわいい…💛
カードを添えることで、より気持ちが伝わる気がしますね。
ちなみにカード画像も社内で作成しており、季節ごとの限定画像も随時追加しています！

⑤と⑥の間に仕切りメッセージを入れ、⑥の「返信メッセージ」は自由入力のため　TYPE：Long Text で設定。

ここまでで、フォーム入力画面、メッセージ回収・一覧TableのColumnはこんなかんじに仕上がりました！

3)自分宛のメッセージを抽出した画面を作る！

1)2)でフォームの設定を行い、メッセージを送り一覧で確認するところまではできたのですが、一覧画面だと全スタッフのメッセージが蓄積され表示されるので、自分宛のメッセージが分かりづらい！

そこで、自分宛のメッセージを抽出して別タブで確認できるように設定しました。
ログインアカウント＝メッセージの宛先（褒める相手）になっているメッセージを抽出するようなSliceを作成し、「MYほめタス」という名称で追加したViewのDataに設定。

好みの仕様にView側の表示設定をして…

自分宛のメッセージのみ確認できるタブができました！

同様にして、Viewを追加し、従業員別の獲得ポイント数も確認できる「ポイント確認」タブも追加しています。

4)通知設定をする！

アプリ自体はおおかた完成ですが、メッセージに通知機能をつけたい！
せっかくお褒めのメッセージをもらっても「気付かなかった！」となると、もったいないですよね。

当社では社内外のコミュニケーションでChatworkを使用しているため、ほめタスのメッセージ送信があったらChatworkに通知が来るように設定しました！
正直、この設定が一番苦戦しました…😓
（設定時にはこちらのブログを参考にさせていただきました！）

設定には Bots の機能を使用しています。

まずはトリガーの設定（When this EVENT occurs）について。

新規でメッセージ送信（アプリ上でのフォーム回答）がされたら通知されるようにしたいので、アプリの入力フォームに紐づいているTableを選択し
Event Type：Data Change , Add only
で設定しました。

続いてRun this PROCESS部分。

①Task name：任意の設定のため「チャットワーク通知」に設定
②Call a Webhookを選択
③Task name：対象となるTableを選択
④Preset：Custom
⑤Url：https://api.chatwork.com/v2/rooms/【チャットルームID】/messages?body=【チャットへの通知メッセージ】

⑥HTTP Verb：Post
⑦HTTP Content Type：Form_URL_ENCODED
⑧HTTP Headers：X-ChatWorkToken:【チャットワークトークン】

この設定で、Chatworkに通知がいくようになりました🎉

5)さいごに

以上、プログラミングの知識ゼロ担当者がAppSheetと格闘しながらピアボーナスアプリを作ってみたお話でした！

このアプリを作成してから、社内のちょっとした出来事でもお礼を伝える、褒め合う習慣が増え、社員のモチベーションアップや会社の雰囲気づくりに良い影響を与えているなと感じています😊

また、月に一度のMJ会議では月間の「ベストほめタス賞」「もっと教えて欲しいタス賞」を選出し、良い褒め事例や興味深い褒め事例を全社で共有しています！

社員の皆さんに活用していただいている様子を見ると、作って良かった～と嬉しくなりますね✨
拙い文章でしたが、AppSheetを使ってアプリを作成する方やピアボーナス制度を作ろうと思っている方の参考になれば幸いです！

以上、最後までご覧いただきありがとうございました！

＼＼＼ JOIN US！／／／

▼採用情報▼

▼Wantedly▼

▼YouTube▼