CUSTOMINEでアプリの「いいね」ボタンを作ってみた。

Customine Advent Calendar 2023　19日目担当します。
初投稿です！よろしくお願いします！

# アプリを評価する「いいね」ボタンを実装してみよう！
「このアプリ、便利じゃん」「こんなアプリ作ってくれてありがとう！」
みたいなことを言葉で伝えずにボタンポチで伝える。
アプリ作成者にとっては承認欲求が高まります。
さらに集計・分析が出来れば「当社にとってイケてるアプリとは？」の
傾向が紐解けるようになるかも知れません。

という事で、コメントとかではなくkintoneアプリそのものに「いいね」ボタンを付けてたいと思います。

# いいねボタンを作る
まず超簡単に、ただただ「いいね」ボタンを作ります。
「ボタンをメニュー位置に配置する」アクションを一覧画面に登場させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630030/c5eae5ec-ac02-8737-87f9-9bb84afa15da.png)
これだけで「いいね」ボタンが出来ます。超簡単ですね。
絵文字もつけてわかりやすくしてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630030/88d722cf-57a1-0d9f-6d0b-dfbd4334d779.png)
これで完成！
無限プチプチのように「ただただ、いいねを押した気になれるボタン」です。
嫌なことがあったり何も考えたくないとき、生産性のない会議に出てるときなどは、
このボタンをひたすらポチポチし続けることでストレスが少しは緩和できそうです。
一方、これはこれでいいかも知れませんが、これだとアプリ作った本人の承認欲求が満たせないです。
それは由々しき事態ですね。

# 集計アプリにデータを飛ばす
「いいね」が押されたら別アプリにデータを飛ばしてカウントしつつ、ログを取っていきます。
これでアプリ作成者の承認欲求を担保します。
まず、集計用のアプリを作ります。こんな感じかな？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630030/e4340875-6edb-6327-82bd-87e589dba7ae.png)
フィールドタイプはこんな感じです。
　アプリID：文字列（数値でもOK）
　アプリ名称：文字列
　アプリ作成者：ユーザー選択
　カウント：数値（初期値にゼロをセットしておくといいかも）
　テーブル
　　いいね日時：日時
　　いいねした人：ユーザー選択

ひとまず、「いいね」ボタンを付けたアプリ情報のレコードを1件作っておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630030/e56c4c36-4386-d364-83e4-f7edfb29da24.png)
続いてCUSTOMINEでデータ更新を組んでいきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630030/e0c1fa8e-1409-b956-5379-ae2ee0bd6142.png)
ボタンを押したあとの動きはざっくりこんな感じです。
①ボタンを押したとき　→　キーを指定してレコードを取得する。
　※集計アプリのレコードを取得し、現在のカウント数を取得します。
②レコードを更新する
　※①で取得したカウントに「+1」した数値をカウントフィールドにセットします。
　　これで「いいね」数を1増やします。
③ログインユーザーを取得する
　※誰が「いいね」したかがわかるようにします。
④レコードを指定アプリのテーブルに書き出す
　※テーブルにいいねした日時といいねしたユーザー名をログとして書き出します。

これで基本的な機能は完成です。
試しに「いいね」ボタンを2回押してみたところ、ちゃんと集計アプリのカウントも「2」になり、
テーブルにもいつ誰が「いいね」したかわかるようになってますね。
でも、「いいね」してくれない人に圧をかけるのはやめておきましょうね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630030/a756c8e1-8191-e761-3bde-df17810b8a67.png)

# もう少しちゃんとしたものにしてみる
これだけでも充分っちゃ充分なんですが、時間が許すのであれば、もう少しカスタマイズを。
・「いいね」連打が出来ないようにする。
・「いいね」ボタンの隣に「いいね」数を表示してみる。
これをやってみましょう。

まず、「いいね」連打が出来ないようにします。
自分で作ったアプリを自分で何度も「いいね」押せば神アプリになってしまいます。
自作自演で神アプリを爆誕させるのも楽しいですが、強くてニューゲームみたいなもんなので、優越感に浸れるのは最初の数秒だけだと思います。

まず手始めに、先ほど作ったアクションの最後に「ボタンを無効化する」のアクションを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630030/7111dced-0b2d-d46e-d8b9-37927e9e2e55.png)
これで一度押せばボタンが無効化されるので、「いいね」連打は出来なくなります。
ただ、これだけだとリロードすると再いいねが出来てしまいます。
自作自演したい場合は「F5」→「いいね」を繰り返せば、やっぱり神アプリが爆誕してしまいます。

そこで、一覧表示アクションにて集計アプリを読み込んで「同ユーザーのいいね履歴をチェックする」というアクションを加えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630030/531132b4-a70d-cf1a-3e7d-9b4902351a71.png)
「一覧画面を表示したときにボタンを配置する」のアクションの後ろに以下のアクションを追加します。
①ログインユーザーを取得する
②キーを指定してレコードを取得する
　※集計アプリのレコードを取得します。
③他のレコード内のテーブルをレコードとして取得する
　※②のレコード内のテーブル内のデータを取得します。
④フィールドが条件を満たすレコードが1つ以上あるならば　の条件を追加
　※「いいねした人」＝「①で取得したログインユーザー」を指定。
ここで比較値のテキストボックスには「$10.code」のように、「ユーザーコード」を指定します。条件に合致したら、ボタンを無効化するアクションを組みます。

これで、同じユーザーが「いいね」を押せるのは1回までの公平性の高い「いいね」ボタンが出来ました。

次に、「いいね」ボタンの隣に「いいね」数を表示してみます。
まず手始めに「こんなイメージかなー？」程度に、「メニュー位置に文字を表示する」でレイアウトイメージを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630030/efb7d7f6-64e1-e532-d058-ca2f5b30af88.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630030/657866b4-4a23-60a9-25be-756c5cb05c4b.png)
これは結構簡単ですね。
①キーを指定してレコードを取得する
　※集計アプリのレコードを取得します。
②表示する文字に変数としてカウントフィールドの値をセット。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630030/b671a8ce-60e7-29df-4c11-d1fd922adbb1.png)

# 他のアプリへのコピー
はい、ざっくりですがこんな感じで「いいね」ボタンの実装が割と簡単に出来ました。
たぶん、慣れてる人であれば構築時間は30分も掛からないのかなと思います。
書き出し機能を使って、複数のアプリに実装する事も出来るので、アプリ作ってくれた人のアプリに実装して、その人の承認欲求を上げる一助にしてもいいかも知れません。
※へーしゃは社風的に「いいね」が集まりにくいので微妙ですが。。。ｗ

他のアプリにコピーして実装する場合、アプリIDを直接指定しているので、そこは修正が必要ですね。
CUSTOMINEの基本機能ではアプリIDやアプリ名は取得できないので、JavaScriptが書ける方は、12/1のｲｼｲｹﾝﾀﾛｳさんの投稿を参考にして、アプリIDも変数にすることが出来れば、簡単に他のアプリにコピーしまくれます。
参考：https://qiita.com/kentaro1sh11/items/c417d2fd7a8f525f2eb0