<p>先日、「AIを説得せよ」というGPTアプリをリリースしました🎉🎉</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fe4a7574fb539" src="https://embed.zenn.studio/card#zenn-embedded__fe4a7574fb539" data-content="https%3A%2F%2Fai-settoku.salescore.jp" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://ai-settoku.salescore.jp" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://ai-settoku.salescore.jp</a></p>
<p>※7/21までの限定公開です。よかったら遊んでみてください！</p>
<p>※ありがたいことにたくさんアクセスいただいており、GPTの予算をオーバーしそうなので、早めに閉じるかも…</p>
<p>プロンプトを考えること以外（企画、Web開発、デザイン、クリエイティブ作成など）はほぼ自分一人でやってみました。<br>
リリース作業など含め、<strong>全工程の工数は12時間。</strong><br>
クイックな開発の舞台裏を公開します！</p>
<h1 id="%E3%83%8D%E3%82%BF%E4%BD%9C%E3%82%8A%E3%80%81%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E3%83%8D%E3%82%BF%E4%BD%9C%E3%82%8A%E3%80%81%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E4%BD%9C%E6%88%90" aria-hidden="true"></a> ネタ作り、プロンプト作成</h1>
<ul>
<li>会社のSlackで、社長が「ChatGPTを説得するゲームを作ってみた」と投稿</li>
<li>「これ、Webアプリでできたら面白いね」という話になり、カジュアルに作ってみることに</li>
<li>プロンプトは社長に考えてもらいつつ、他は全部自分で開発することにした</li>
</ul>
<h1 id="mvp%E9%96%8B%E7%99%BA%EF%BC%881.5%E6%99%82%E9%96%93%EF%BC%89">
<a class="header-anchor-link" href="#mvp%E9%96%8B%E7%99%BA%EF%BC%881.5%E6%99%82%E9%96%93%EF%BC%89" aria-hidden="true"></a> MVP開発（1.5時間）</h1>
<ul>
<li>とりあえず「botと話せること」という最低限の要件でのリリースを目指す</li>
<li>Webフレームワーク: <a href="https://nextjs.org/" target="_blank" rel="nofollow noopener noreferrer">Next.js</a>で開発。API Routesを使うことで簡単にバックエンドも作れる</li>
<li>UIライブラリ: 使い慣れた<a href="https://ant.design/" target="_blank" rel="nofollow noopener noreferrer">Ant Design</a>と<a href="https://tailwindcss.com/" target="_blank" rel="nofollow noopener noreferrer">Tailwind CSS</a>
</li>
<li>GPT周り: <a href="https://www.npmjs.com/package/openai" target="_blank" rel="nofollow noopener noreferrer">openai</a>を使う</li>
<li>バリデーション: <a href="https://zod.dev/" target="_blank" rel="nofollow noopener noreferrer">Zod</a>でリクエストとレスポンスを検証。型安全な開発</li>
<li>セキュリティ: 悪意あるユーザー対策も簡単にしておく。rate limitなど（詳細は省略）</li>
<li>本番環境: Next.jsアプリだし<a href="https://vercel.com" target="_blank" rel="nofollow noopener noreferrer">Vercel</a>を使ってみる。リポジトリ選択するだけで本番環境構築は終わり。楽。</li>
</ul>
<p>最低限のMVP実装がここまでで完了👏👏</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/66dc0d6f73ec-20230709.gif" alt loading="lazy" class="md-img"></p>
<h1 id="%E7%A4%BE%E5%86%85%E3%81%8B%E3%82%89fb%E3%82%92%E3%82%82%E3%82%89%E3%81%86">
<a class="header-anchor-link" href="#%E7%A4%BE%E5%86%85%E3%81%8B%E3%82%89fb%E3%82%92%E3%82%82%E3%82%89%E3%81%86" aria-hidden="true"></a> 社内からFBをもらう</h1>
<p>社内向けにβリリースして、感想を集めます。<br>
概ね楽しんでもらえたものの、以下のFBをもらいました。</p>
<ul>
<li><strong>回答が返ってくるまでの読み込みが長い</strong></li>
<li><strong>説得できたかどうか判断しづらい</strong></li>
<li><strong>ただ会話するだけなので、ゲーム感が薄い</strong></li>
</ul>
<p>もともと「低工数で作ってリリースする！」というコンセプトでしたが、<br>
せっかくなので可能な範囲でFBに対応してリリースすることにします。</p>
<h1 id="server-sent-events%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%99%E3%82%8B%EF%BC%882%E6%99%82%E9%96%93%EF%BC%89">
<a class="header-anchor-link" href="#server-sent-events%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%99%E3%82%8B%EF%BC%882%E6%99%82%E9%96%93%EF%BC%89" aria-hidden="true"></a> Server-Sent Eventsに対応する（2時間）</h1>
<p>本家ChatGPTでリアルタイムで回答が表示される体験は、Server-Sent Eventsという技術を使ったものになります。<a href="https://zenn.dev/chot/articles/a089c203adad74" target="_blank">詳しくはこちら</a>。<br>
SSEを使って、回答のUXを上げてみましょう。<br>
Next.jsでの実装の場合、先人の知恵をコピペするだけでだいたい動きました。感謝。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b18e9f41e22b3" src="https://embed.zenn.studio/card#zenn-embedded__b18e9f41e22b3" data-content="https%3A%2F%2Fzenn.dev%2Fk_kind%2Farticles%2Fchatapi-stream" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/k_kind/articles/chatapi-stream" style="display:none" target="_blank">https://zenn.dev/k_kind/articles/chatapi-stream</a></p>
<p>…が、どうやらVercelへリリースする場合、SSEの実装が上手く動かないようです。<br>
<a href="https://zenn.dev/saikou_kunisaki/articles/8046641b01a384" target="_blank">Edge Functionを使うと上手くいくという記事</a>も見かけましたが、手元で軽く動作検証したところ、上手くいきませんでした。</p>
<p>今回は特にVercelにこだわる必要性もありません。<br>
普通にWebサーバーを立てることにして、慣れ親しんだ<a href="https://zenn.dev/katsumanarisawa/articles/c9da48652f399d" target="_blank">Render</a>にリリースします。Renderはやっぱり最高。</p>
<p>SSEという初めての技術を使ったり、Vercelでどうにか頑張ろうとして時間を食ってしまいました。<br>
まあ初めての技術を使うときはこれくらい時間がかかるのは仕方ないと割り切ります。</p>
<h1 id="%E8%A8%B4%E6%B1%82%E7%94%A8%E7%94%BB%E5%83%8F%E3%82%92%E4%BD%9C%E3%82%8B%EF%BC%881%E6%99%82%E9%96%93%EF%BC%89">
<a class="header-anchor-link" href="#%E8%A8%B4%E6%B1%82%E7%94%A8%E7%94%BB%E5%83%8F%E3%82%92%E4%BD%9C%E3%82%8B%EF%BC%881%E6%99%82%E9%96%93%EF%BC%89" aria-hidden="true"></a> 訴求用画像を作る（1時間）</h1>
<p>今回のアプリは、リリース後にTwitterで宣伝する予定です。<br>
簡単なもので良いので、リリース用の画像があるとグッとそれらしくなります。また、ここでアプリの世界観を固めておくと、この後UIデザインをするのも捗ります。<br>
ということで、簡単なキャッチ画像を作ってみましょう。</p>
<ul>
<li>ムードボードの作成
<ul>
<li>
<a href="https://www.pinterest.jp/search/pins/?q=%E6%8C%91%E6%88%A6%E7%8A%B6%20%E3%83%90%E3%83%8A%E3%83%BC&amp;rs=typed" target="_blank" rel="nofollow noopener noreferrer">Pinterestで「挑戦状 バナー」とかで検索</a>するなどして、イメージに近い既存画像を集め、デザインの方向性を固める。</li>
<li>今回は実際にボードの作成はしていないのですが、真面目にデザインをするときは実際に作ったりします</li>
</ul>
</li>
<li>メイン画像を画像素材から探す
<ul>
<li>
<a href="https://stock.adobe.com/jp/" target="_blank" rel="nofollow noopener noreferrer">Adobe Stock</a>や<a href="https://www.shutterstock.com/ja/" target="_blank" rel="nofollow noopener noreferrer">Shutterstock</a>がおすすめ</li>
<li>メインの一枚絵でクオリティが高いやつを配置すれば、それだけでなんとなく良いデザインになる</li>
</ul>
</li>
<li>訴求テキストを考える
<ul>
<li>というか全体の企画を詰める</li>
<li>
<code>AI Challenge</code> <code>AIを説得せよ</code> などのコンセプトを固める</li>
<li>「Amazonギフト券プレゼント！」とかあった方が、よりイベント感が出て良いので予算もらう</li>
</ul>
</li>
<li>Figmaで適当に組み合わせて終わり
<ul>
<li>高度なデザインスキルはデザイナーさんのものだけど、組み合わせて配置するくらいの力はエンジニアも持っておくと便利</li>
<li>
<a href="https://www.amazon.co.jp/%E3%83%8E%E3%83%B3%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%82%BA%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%96%E3%83%83%E3%82%AF-%EF%BC%BB%E7%AC%AC4%E7%89%88%EF%BC%BD-Robin-Williams-ebook/dp/B01LW1BC2L/ref=tmm_kin_swatch_0?_encoding=UTF8&amp;qid=&amp;sr=" target="_blank" rel="nofollow noopener noreferrer">ノンデザイナーズ・デザインブック</a>を読んでおけばOK</li>
</ul>
</li>
</ul>
<p>作成したキャッチ画像<br>
<img src="https://storage.googleapis.com/zenn-user-upload/2b2e3a9a22b5-20230709.png" alt loading="lazy" class="md-img"></p>
<h2 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E5%8F%97%E3%81%91%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E5%8F%97%E3%81%91%E3%82%8B" aria-hidden="true"></a> デザインレビューを受ける</h2>
<p>優しきデザイナーさんがサクッとレビューしてくれて、最終的に以下に仕上げていただきました。<br>
より洗練された印象になりました。感謝………！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/cb90067d9231-20230715.jpg" alt loading="lazy" class="md-img"></p>
<h1 id="ui%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%EF%BC%882%E6%99%82%E9%96%93%EF%BC%89">
<a class="header-anchor-link" href="#ui%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%EF%BC%882%E6%99%82%E9%96%93%EF%BC%89" aria-hidden="true"></a> UIデザイン（2時間）</h1>
<p>UIデザインもまともにしてみます。<br>
そんなに気合をいれるつもりもないのですが、最低限として以下を行います。</p>
<ul>
<li>チャット部分をよく見るデザインにする</li>
<li>入力フォームにシャドウを効かせてオシャレに</li>
<li>シンプルすぎるのを避けるためにヘッダーをつけてロゴを配置</li>
<li>レスポンシブ対応。スマホ対応</li>
</ul>
<p>この辺は慣れてる人なら瞬殺だと思います。<br>
自分はフロントエンド開発が苦手なのと、toCアプリの開発に慣れてないので少し時間がかかりました。</p>
<h1 id="%E4%BB%95%E4%B8%8A%E3%81%92(5%E6%99%82%E9%96%93)">
<a class="header-anchor-link" href="#%E4%BB%95%E4%B8%8A%E3%81%92(5%E6%99%82%E9%96%93)" aria-hidden="true"></a> 仕上げ(5時間)</h1>
<p>ここまでで基本機能はできているのですが、ここから細かい機能の仕上げを行なっていきます。<br>
今回の開発工数の半分近くがここに割かれています。やはり細かいブラッシュアップに時間がかかりますね。</p>
<h3 id="%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%90%8D%E5%85%A5%E5%8A%9B%E3%81%A8%E3%82%A4%E3%83%B3%E3%83%88%E3%83%AD%E3%83%80%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3(1%E6%99%82%E9%96%93)">
<a class="header-anchor-link" href="#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%90%8D%E5%85%A5%E5%8A%9B%E3%81%A8%E3%82%A4%E3%83%B3%E3%83%88%E3%83%AD%E3%83%80%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3(1%E6%99%82%E9%96%93)" aria-hidden="true"></a> ユーザー名入力とイントロダクション(1時間)</h3>
<p>ユーザー名入力は必須ではないのですが、ゲームらしさをだすためできれば入力してもらうことにします。<br>
ついでにゲームのルールを説明するモーダルを初期表示することにします。<br>
ここをどんなUIにするか迷って、少し時間がかかりました。</p>
<h3 id="%E6%88%90%E5%90%A6%E5%88%A4%E5%AE%9A%E3%81%A8%E3%82%BF%E3%83%BC%E3%83%B3%E5%88%B6%E9%99%90(1.5%E6%99%82%E9%96%93)">
<a class="header-anchor-link" href="#%E6%88%90%E5%90%A6%E5%88%A4%E5%AE%9A%E3%81%A8%E3%82%BF%E3%83%BC%E3%83%B3%E5%88%B6%E9%99%90(1.5%E6%99%82%E9%96%93)" aria-hidden="true"></a> 成否判定とターン制限(1.5時間)</h3>
<p>現状だとゲーム感が弱いので、以下の仕様をいれます。</p>
<ul>
<li>発言は10回までにする。10回すぎたらゲームオーバー</li>
<li>AIが説得されたら、ゲームクリア画像を出す</li>
</ul>
<p>急にロジックが増えてまともなゲームっぽくなってきました。粛々と実装します。<br>
ゲームオーバー、ゲームクリアに関しても、単にテキストを表示するだけでなく、素材を使うとグッとそれっぽくなります。<br>
今回はゲームの雰囲気に合わせて、アイソメトリック画像を中心に選びました。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/bdbdfe425b36-20230709.jpg" alt width="450" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/270fb89a1b9e-20230709.jpg" alt width="250" loading="lazy" class="md-img"></p>
<h3 id="google%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E4%BD%9C%E6%88%90(30%E5%88%86)">
<a class="header-anchor-link" href="#google%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E4%BD%9C%E6%88%90(30%E5%88%86)" aria-hidden="true"></a> Googleフォーム作成(30分)</h3>
<p>正解した人向けにAmazonギフト券を送りたいんだけど、メールアドレスの収集どうしようか…？<br>
と少し迷って、素直にGoogleフォームを表示することにしました。<br>
ついでに感想を聞く項目もつけておきます。</p>
<h3 id="%E8%87%AA%E5%8B%95%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%80%81%E3%82%B9%E3%83%9E%E3%83%9B%E5%AF%BE%E5%BF%9C%E3%80%81%E5%BE%AE%E8%AA%BF%E6%95%B4%EF%BC%881%E6%99%82%E9%96%93%EF%BC%89">
<a class="header-anchor-link" href="#%E8%87%AA%E5%8B%95%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%80%81%E3%82%B9%E3%83%9E%E3%83%9B%E5%AF%BE%E5%BF%9C%E3%80%81%E5%BE%AE%E8%AA%BF%E6%95%B4%EF%BC%881%E6%99%82%E9%96%93%EF%BC%89" aria-hidden="true"></a> 自動スクロール、スマホ対応、微調整（1時間）</h3>
<p>AIからのリプライに合わせて、自動でスクロールさせます。これをやらないと、画面外にテキストが生成されてしまいます。<br>
また、スマホでバーチャルキーボードが出てきた時の表示が微妙なのを改善しようとしましたが断念。</p>
<h1 id="%E5%AE%8C%E6%88%90">
<a class="header-anchor-link" href="#%E5%AE%8C%E6%88%90" aria-hidden="true"></a> 完成</h1>
<p>ということで、合計12時間で完成！<br>
なかなかいい感じになったのではないでしょうか。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/5d634b4ac107-20230715.png" alt loading="lazy" class="md-img"></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/a05110c3d501-20230715.png" alt loading="lazy" class="md-img"></p>
<h1 id="%E5%8F%8D%E7%9C%81">
<a class="header-anchor-link" href="#%E5%8F%8D%E7%9C%81" aria-hidden="true"></a> 反省</h1>
<ul>
<li>
<a href="https://vercel.com/templates/next.js/nextjs-ai-chatbot" target="_blank" rel="nofollow noopener noreferrer">VercelがAI Chatbotのテンプレートを用意している</a>のに開発完了してから気づいた…。これ使えばもっと楽できたか</li>
<li>プロンプトを仕上げるのが難しすぎる（長くなるので、この話はまた別で…）</li>
<li>企画にもっと時間を割きたかったな…と思うところ多数</li>
</ul>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
<p>今回のミニゲームは半分お遊びですが、実はSALESCOREではメインのプロダクト開発でもLLMの利用が始まっています。<br>
LLMを使ったサービス開発に興味のある開発者さん、お気軽にお声がけください！</p>


GPTアプリを1.5日で作ってリリースする 〜 「AIを説得せよ！」が出来るまで

Server-Sent Eventsに対応する（2時間）

ユーザー名入力とイントロダクション(1時間)

成否判定とターン制限(1.5時間)

自動スクロール、スマホ対応、微調整（1時間）

GPTアプリを1.5日で作ってリリースする〜「AIを説得せよ！」が出来るまで

Discussion