【kintone】レコード共同編集プラグイン

「同じレコードを他の人と同時に編集してしまって、保存ができなかった」という経験はございませんか？
そこで今回、[レコード共同編集プラグイン](https://github.com/Atsushi-Eda/kintone-co-edit)というものをつくりました。
同じレコードの同時編集がバシバシできるようになります。

## デモ

左のAさんと右のBさんが、同じレコードを同時に編集する様子です。
「同時編集中ユーザーの表示」と「他ユーザーの編集操作の即時反映」が主な機能です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/peyJPQAUV5U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

※「他ユーザーの編集操作の即時反映」については、[フィールド値変更時イベント](https://developer.cybozu.io/hc/ja/articles/202166270#step3)に対応しているフィールドでのみ利用可能です。

## お金

プラグイン自体は、無料公開しています。
ただし、プラグインを利用するにあたり、ご自身でAWS環境を用意して頂く必要があります。

主に使っているのは、Amazon API GatewayのWebSocket APIです。

https://aws.amazon.com/jp/api-gateway/pricing/#WebSocket_APIs

> 無料利用枠では、月間のメッセージ数 100 万件 (送信または受信) および接続時間 750,000 分が最大 12 か月間ご利用になれます。

とのことなので、作りたてほやほやユーザーの方は大抵無料枠で済むかと思います。

## 注意事項

### プラグインにバグがあった場合の責任は負いかねます

バグとして怖いのは、大量リクエストが発行されることです。
リクエストが増えるとその分課金額が高くなります。

「他ユーザーの編集操作の即時反映」は、フィールド値変更時イベント内でWebSocket APIを用いたメッセージ送信をすることで実装しています。
[フィールド値変更が誰によるものなのかチェック](https://github.com/Atsushi-Eda/kintone-co-edit/blob/master/src/desktop/classes/ChangeChecker.ts#L23)して、自身によるものの場合のみメッセージ送信するようにしています。

この「フィールド値変更が誰によるものなのかチェック」に考慮漏れがあった場合、ユーザー間でメッセージを送り合い続ける危険を孕んでいます。

筆者は、開発中にバグらせて7万メッセージ送信をやらかしました。
現在は、プラグイン側で[メッセージ送信数制限](https://github.com/Atsushi-Eda/kintone-co-edit/blob/master/src/desktop/classes/ChangeChecker.ts#L14)をかけて対策はしています。
無限ループにはならないように作っているつもりですが、一度コードを確認してからご自身の判断でご利用ください。

### 機密情報の取り扱いにはご注意ください

後ほどご説明するWebSocketURIが流出した場合、メッセージの盗聴が可能です。
機密情報を扱うようなアプリにはそのまま適用しないことをおすすめします。

## 設定

### 用意・インストールするもの

- [AWS アカウント](https://aws.amazon.com/jp/free/)
- [AWS SAM CLI](https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-sam-cli-install.html)
- [Git](https://git-scm.com/)

### エンドポイントの作成

[kintone-co-edit-endpoint](https://github.com/Atsushi-Eda/kintone-co-edit-endpoint)をcloneして、sam deployします。

```bash
$ git clone https://github.com/Atsushi-Eda/kintone-co-edit-endpoint.git
$ cd kintone-co-edit-endpoint
$ sam deploy --guided
```

deploy時に設定値のようなものが聞かれますが、全部デフォルトのままEnterでOKです。

deploy完了時に「wss://~」と「https://~」のようなURLが出力されます。

```bash
...

-------------------------------------------------------------------------------------------------
Outputs
-------------------------------------------------------------------------------------------------
Key                 WebSocketURI
Description         The WSS Protocol URI to connect to
Value               wss://*****.execute-api.ap-northeast-1.amazonaws.com/Prod <- これと

Key                 HttpURI
Description         The HTTPS Protocol URI to connect to
Value               https://*****.execute-api.ap-northeast-1.amazonaws.com/Prod <- これ
-------------------------------------------------------------------------------------------------
```

この2つのURLはプラグイン設定で使うので、メモしておいてください。

### 一時保存アプリの作成

フィールド値の変更履歴を一時保存するアプリを作成します。
あとから編集を開始したユーザーにも、それまでの変更を反映するために用意する必要があります。

[アプリテンプレート](https://github.com/Atsushi-Eda/kintone-co-edit/releases/download/1.0.1/kintone-co-edit-temporary-app-1.0.1.zip)をkintoneに読み込み、アプリを作成してください。
作成したアプリのIDはプラグイン設定で使うので、メモしておいてください。

### プラグインの設定

[プラグイン](https://github.com/Atsushi-Eda/kintone-co-edit/releases/download/1.0.1/kintone-co-edit-1.0.1.zip)をkintoneに読み込み、レコード共同編集をしたいアプリでプラグイン設定をしてください。

![スクリーンショット 2021-12-22 0.15.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528077/50de9238-ba5c-70a4-0b5b-233b8299bf0f.png)

エンドポイントの作成でメモした「wss://~」と「https://~」というURL、一時保存アプリの作成でメモしたアプリIDを設定してください。

設定は以上です。