水曜日, 6月 18, 2025
- Advertisment -
ホームニューステックニュースReplitで遊んでみた(ポケモンバトル、kintoneER図生成&JSカスタマイズツール) #生成AI - Qiita

Replitで遊んでみた(ポケモンバトル、kintoneER図生成&JSカスタマイズツール) #生成AI – Qiita



Replitで遊んでみた(ポケモンバトル、kintoneER図生成&JSカスタマイズツール) #生成AI - Qiita

こんにちわ、最近は生成AIやらガジェットにハマって1ヶ月で8万円溶かした、ノベルワークスのまとっち(@matoi_thai)です。この前使ったReplitが非エンジニアの僕には扱いやすかったので、やったことをQiitaに残しておきます。

こんな人に見てほしい👀

  • 環境構築とかデプロイとかよく分からない非エンジニア
  • コーディングせずに自然言語でアプリを作りたい人

Replitとは🧠

Webブラウザ上でプログラムの作成・実行・共有ができるクラウド型の統合開発環境(IDE)です。Replitに搭載されているAIエージェントに自然言語で指示するだけで、WebアプリのUIからDB連携まで丸ごと自動構築してくれます。

  • ① ポケモンバトル⚔️
  • ② kintone ER図生成ツール🧩
  • ③ kintone JSカスタマイズツール⚙️

①ポケモンバトル⚔️

2時間足らずで完成しました。

プロンプト

だいたいこんなプロンプトを入力しました。 ※他にも細かい追加プロンプトはしてます

通常のポケモンとは異なる動的なアニメーションで、3対3で乱戦するポケモンバトルを作って。
初代151匹のポケモンから3体選んだら、タイプ相性やステータスや運などで、勝敗が決まるようにして。

アプリ作成時の画面

左から、ファイル構成、エージェントの処理ログ、画面プレビュー
image.png

完成品

②kintone ER図生成ツール🧩

4時間掛かったと思います。(ログイン情報でアプリ情報取得するところが手こずった)

プロンプト

だいたいこんなプロンプトを入力しました。 ※他にも細かい追加プロンプトはしてます

kintoneにログインIDとパスワードで接続して、指定したアプリIDに紐付くアプリを全て洗い出して。
それらアプリのフィールド情報やリレーションを図示したER図を生成してくれるシステムを作りたいです。

アプリ作成時の画面

左から、ファイル構成、エージェントの処理ログ、画面プレビュー
image.png

完成品

③kintone JSカスタマイズツール⚙️

6時間以上は掛かった気がします。(Gemini APIキーの設定やらで手こずった)

プロンプト

だいたいこんなプロンプトを入力しました。 ※他にも細かい追加プロンプトはしてます

入力したカスタマイズ要望に応じたJavaScriptを生成してくれるkintone開発支援ツールを作って。
アプリフィールド情報を取得して、生成AIでJavaScriptを作って、それをkintoneにデプロイしたい。

アプリ作成時の画面

左から、ファイル構成、エージェントの処理ログ、画面プレビュー
image.png

完成品

非エンジニアが手軽なアプリ開発をするならReplitはオススメです。環境構築・画面UI・DB設計・デプロイといった難しいところを、自然言語でお願いするだけで良い感じにやってくれます。





Source link

Views: 0

RELATED ARTICLES

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

- Advertisment -