いつも大変お世話になっております。ファービーと申します。

「すごくない」kintone　その２ Advent Calendar 2024の13日目の記事となります。

初アドベントカレンダー＆note投稿ということで、アドベント系の記事でよく見かけるカレンダー埋め込みってどうやるん？というところからスタートです。お手柔らかにお願いします。
（↑無事カレンダーは埋め込めたようですが、よくわからないうちに埋め込まれてました。どうやったんだろう。）

さて今回は、ちょっと今更感はありますが生成AIのコーディング能力がすごいらしいという噂をちらほら聞くので、AIの力も借りつつkintoneでおもちゃ作りをしてみました。

kintoneのレコード一覧画面を、某チャットツール風にしてみる

今回のターゲットは鼻？のアイコンでお馴染み？の某チャットツールです。

一部業務で使っていますが、フォーラム機能は割と便利です。
ただしkintoneも使ったりslackも使ったり某チャットツールも使ったり、、と、ちょっとツールが多すぎて疲れます。
今回は彼とのお別れを決意し、彼の良い所はkintoneで実現しちゃおうという作戦です。

たすけてAI

とはいっても、エンジニアをしておりますが普段はバックエンドの開発がメインで、フロントエンドは正直得意ではありません。
そこでAIにたすけを求めることにします。

デザインをつくる

まずはデザインを作ってもらいます。今回の相棒はClaudeさんです。
某チャットツールのスクリーンショットを貼り付けて丸投げします。

するとものの数十秒でこんなものが返ってきました。

一部スタイルが崩れてはいますが、一発でこのレベルのものが返ってくるとはちょっと衝撃でした。
ちなみにスクリーンショットなしで適当に指示しても勝手にレイアウト考えて作ってくれます。

↓

要件とワイヤーフレームをちゃんと作って指示すれば、かなり良い感じのものが返ってくるんじゃないでしょうか。ほんとに衝撃です・・・（語彙力）

機能を追加していく

こんな感じの粗い指示にも嫌な顔ひとつせず、どんどん実装していってくれます。素敵です。

さてClaudeでこのまま指示をして手を加えていってもいいですが、規模が大きくなってくるにつれてデグレが頻発し、私もムッとして指示も更に粗くなり、険悪なムードになってしまいました。
某X等漁ってみると、どうやらここから先はCursorを使うのがよさそうということがわかりました。

というわけでここでClaudeとはお別れし、Cursorにバトンタッチです。
とはいっても、Cursorでも結局肝心のAIはClaude Sonnet 3.5を使うので、完全にお別れするわけではありません。

Claudeで作ったものをローカルに移したいので、そのまま直球で質問したらちゃんと教えてくれました。

Cursorでさらに機能追加していく

CursorはAIの活用に特化したエディタですが、VSCodeがベースなので、ほぼ違和感なく使うことができました。
右側に表示されるチャットペインから、Claudeと同じ要領でどんどん指示を出して実装してもらいます。

Claudeと違い一から作り直すのではなく、部分的に改修を行うのでスピードが格段にあがったのと、デグレもかなり減りました。素敵です。
チャットで指示→修正内容確認→適用→ローカルサーバーに反映→ブラウザでGUI確認、という作業を繰り返します。

見た目がだいたいできてきた

そんなこんなで3時間ほどAIとやり取りし、だいぶ形になってきました。
Reactなんてさっぱりわかりません、ここまででコードは1行も触ってません。

kintoneとのコミュニケーション部分はさすがに難しそうなので自分で書きます。

とはいえここまでのものが3時間でできてしまうとは・・・自力で書いたら多分2か月以上かかる気がする・・・素敵です。

kintoneでどうやって実現する？

さて、やっと本題のkintoneの話です。
ここまでで以下の機能を入れました。

1. チャンネル・カテゴリ機能

2. スレッド/コメント投稿機能（ファイル添付可能）

3. スレッドタグ/ステータス機能

4. 未読数表示機能

5. メンション機能

某チャットツールの機能を色々盛り込んでみましたが、じゃあこれらをkintoneでどうやって実現するか考えていきます。

チャンネル・カテゴリ機能

チャンネルを管理するマスタアプリを作り、ルックアップする形としました。
マスタアプリのフィールド構成は以下の通りです。

カテゴリ名: ドロップダウン
チャンネル名: 文字列一行

カテゴリは管理者が追加、チャンネルは一般ユーザーも追加できるようにしました。
左ペインのカテゴリ横のプラスボタンを押すと、チャンネルを作成できます。

• カテゴリは管理者がkintoneのアプリ設定で追加したドロップダウン選択肢から選ぶ

• 某チャット風GUI上でチャンネル名を入力して作成を押すと、マスタアプリにレコードが追加される

といった具合です。

スレッド/コメント投稿機能

• 1スレッド=1レコード

• メッセージはテーブルで管理

  • 1行目がスレッド本文

  • 2行目以降がコメント

で表現します。
アプリはこんな感じ。

投稿画面はこんな感じ

コメント内添付ファイルは悲願の機能です・・・（kintoneのコメント機能で添付ファイルが使えないのはめっちゃ不便・・・なんとかなりませんかね・・・）

スレッドタグ/ステータス機能

まずタグ機能については、文字列一行フィールドに対してカンマ区切りで格納することにしました。

ただこの方法、既に登録されているタグの一覧を出すには毎回全レコード読む必要があるので、
ルックアップ＋テーブルといった構成でタグマスタを作りつつ、複数選択もできるようにする、っていうのもありかもしれません🤔

ステータス機能についてはシンプルにドロップダウンに格納します。
カテゴリと同じく、増やしたい場合は管理者がkintone側をいじる必要があります。

某チャ風GUIではこんな感じです。

未読数表示機能

コメントテーブルの中に、未読ユーザーを管理するためのユーザー選択フィールドを用意してそこで未読ユーザーを管理します。

動きとしては、

スレッド作成/コメント投稿時: メンションフィールドに入っているユーザーを未読ユーザーフィールドにコピー
スレッド/コメント閲覧時: 未読ユーザーフィールドからログインユーザーを削除

こんな感じです。
某風GUIでは、チャンネル一覧ペインで未読数を表示します。
自分（ログインユーザー）が未読ユーザーフィールドに含まれているレコードの数を出してます。

メンション機能

シンプルにユーザー選択フィールドで表現します。
実装に関してはこれが一番苦労していたように思います。。

でも、メンションのユーザー名にホバーするとユーザー情報を表示するなど、勝手に気を利かせて色々やってくれました。

さいごに

実際にこれをやったのは2024年10月下旬ぐらいで、本記事作成着手までに1か月半近く空いているわけですが、この間にもさまざまツールが出てきていて、日々すさまじいスピードで世界が変わっていっているように思います。
（この記事を書いている途中にDevinも正式公開され話題となっているようです）
今回試した方法も、すでに今更感があります。

AIのすごさに驚いたという驚き屋の話がメインでkintone味が薄くなってしまいましたが、こんな機能kintoneで実現するならどうしようか、と考える時間はやっぱり楽しいですね。
わざわざデータベース建てたりしなくても手軽におもちゃ作りできるのも素敵です。

今回作ったものは性能面など本格的に利用するにはまだまだ色々考えないといけないことは多々あるので、引き続き楽しみながらいじっていこうと思います。