はじめに💫
こんにちわ、最近は金欠なので日本でおとなしく仕事する予定のノベルワークスのまとっち（@matoi_thai）です。Uiverseがかなり良くて、kintoneで色々活用できそうなので、試したことを記事で共有します。
こんな人に見てほしい👀
- イケてるUIコンポーネントを使いたい人
- kintoneの画面をかっこよくしたい人
Uiverseとは✨
HTMLとCSSで作られたイケてるUIコンポーネント（ボタン、チェックボックス、カード、スピナー等々）が無料で大量に公開されているサイトです。Figmaにコピーすることもできるので、WebアプリのUIデザインに使われます。
今回試したこと🎨
下記の手順でkintoneをカスタマイズしてみました。
- UiverseでイケてるUIのHTMLとCSSをコピーする
- 生成AIでkintone用Javascriptに変換する
- できたJavascriptをkintoneに設定する
① マリオコイン
使用したUiverse🧩
実装概要🛠️
- 編集画面
- スペースフィールドにマリオコインの絵を配置
- ？ブロックをクリックしたらコインの数値を1増やす
完成品🎉
② プロフィールカード
使用したUiverse🧩
実装概要🛠️
- 一覧画面（カスタマイズビュー）
- プロフィールカード表裏にレコード情報を表示
- チェックを入れると一覧レコードを絞り込み
完成品🎉
おわりに💬
基本的には生成AIに丸投げで作りました。HTMLとCSSをJavascriptに変換した時に位置がズレたりしますが、何度もやり直しさせて、最終的にはいい感じに仕上がりました。