kintoneにログインボーナスみたいなものを実装する

今回はkintoneにログインしたらポイントが貯まる、ログインボーナスのようなカスタマイズです。

# 仕様

kintoneにログイン（ポータルを表示）すると「ログインボーナス」のダイアログが表示されます。
ログボ（ログインボーナスの略）アプリにポイントが溜まっていきます。1日1ポイント！のように。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/d2092ec7-09eb-a2c3-b310-69d2bb961a33.png" width=600>


**管理者は全員分のポイントが見られる**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/2cb8d5fc-a229-b9d0-d55e-5919ef2c2fae.png)

**一般ユーザーは自分の分だけ見られる**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/a51f7980-72ae-59bf-f6bd-cc7dbde0e2fc.png)

**ポイント比較？はグラフなどで**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/62451444-6e5a-5efe-8af2-70c5614f513f.png)



# ログボアプリの作成

では早速作っていきましょう。
まずはログインボーナスをためていくアプリを作成します。

## フォームの設定
| フィールド種類 | フィールドコード | 初期値|その他|
|:-:|:-:|:-:|:-:|
| 日付  | 日付  |レコード登録時の日付を初期値にする  |必須|
|  ユーザー選択 |ユーザー選択   |ログインユーザー   |必須|
| 数値  | ポイント  | 1  |必須、キャンペーン期間は2ポイントとかでも良さそう|
| 文字列(1行)  | キー  |  なし |重複禁止＆必須|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/2dd364e0-e4a9-0948-3214-cac6d68c9fd6.png)

## アプリのアクセス権
Everyoneはレコード閲覧と追加だけ許可しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/b34b4183-f6e1-9d11-5699-f16da28bae1d.png)


## レコードのアクセス権
すべてのレコードについて、レコードの内容を見るべきグループ（例ではAdmin）の人は全部許可。
フォームのフィールドを追加して「ユーザー選択」のユーザーは閲覧だけできるようにしておきます。
Everyoneはチェックを全部外しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/37c98f33-74b5-d5fd-760f-7cd724b144e5.png)


## フィールドのアクセス権
キー以外のフィールドは閲覧だけOKとしておきます。キーはJavaScriptで編集するのでここでは設定しません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/e6215bd7-56de-a235-8d7c-8e7c479ae3c7.png)


# JavaScript

JavaScriptはログボアプリのJavaScriptとポータルに設定するJavaScript2種類あります。

## ログボアプリのJavaScript

一般ユーザーにはそもそも「編集権限」がないのですが、新規追加の権限はあります。
というわけで、JavaScriptで、「アプリで直接新規追加する際の制限」をかけます。
たくさんレコードを追加したらズルイですからね。
キーは「日付_ユーザーコード」とし、重複禁止かつ必須とします。
このキーを設定することにより、1日1回しかログボは付与されないようにできます。

```js
(() => {
  "use strict";

  // 新規追加時、キーはアプリから値の変更ができないようにする。
  kintone.events.on(["app.record.create.show"], (event) => {
    event.record.キー.disabled = true;
    return event;
  });

  // 新規追加時、キー（日付_ユーザーコード）を設定する
  kintone.events.on(["app.record.create.submit"], (event) => {
    event.record.キー.value =
      event.record.日付.value + "_" + event.record.ユーザー選択.value[0].code;
    return event;
  });
})();
```

## ポータルのJavaScript

kintoneシステム管理のJavaScript / CSSでカスタマイズに
Cybozu CDNにある下記2つを追加しておきます。

**Luxon**（日付用）
`https://js.cybozu.com/luxon/1.26.0/luxon.min.js`

**SweetAlert v2.x**（ダイアログが可愛くなる）
`https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js`

```js
(() => {
  "use strict";
  kintone.events.on(["portal.show"], async (event) => {

    //今日のログボゲット済みか調べるパラメータ
    const getbody = {
      app: ログボアプリのID,
      query: `ユーザー選択 in (LOGINUSER()) and 日付 = TODAY()`,
      totalCount: true,
    };

    // ログボゲット済みか確かめる用
    const resp = await kintone.api(
      kintone.api.url("/k/v1/records", true),
      "GET",
      getbody
    );

    // 0件だったらログボゲット
    if (resp.totalCount === "0") {
      // ログイン中のユーザ情報取得
      const loginUser = kintone.getLoginUser();
      // 今日の日付ゲットする
      const date = luxon.DateTime.local();
      // レコード追加パラメータ。
      const postbody = {
        app: ログボアプリのID,
        // ※recordにはキー（日付_ユーザーコード）を設定。（他フィールドは初期値仕様なので設定不要）
        record: {
          キー: { value: date.toFormat("yyyy-MM-dd") + "_" + loginUser.code },
        },
      };
      const getLogb = await kintone.api(
        kintone.api.url("/k/v1/record", true),
        "POST",
        postbody
      );

      // SweetAlert
      swal({
        title: "ログインボーナス",
        text: "1ポイントゲットしたよ",
        icon: "success",
        button: "受け取る",
      });

    }
    return event;
  });
})();
```

# まとめ
ログインボーナスをためてどうするか？という課題もあると思いますが、kintoneにログインするのがちょっと楽しくなるかも知れません。