クラファンのハードルを下げるべく、AI作成支援を作った話
この記事は2022年CAMPFIRE Advent Calendar 10日目の記事です
こんにちは。CAMPFIRE代表の家入です。
いや、しれっと上に「10日目の記事です」とか書いてますけど。これ書いてる今、12月21日。10日以上も遅れています。本当にすみません。
という訳で、ようやくです。いつもだったら経営者っぽく、１年の振り返りとか、ビジョンの話とか書くところですが、毎年同じようなことを書いている気もするので今年は趣向を変えてみました。
結論から言うと、OpenAIが提供するChatGPT APIを使って、クラファン作成支援プログラムを個人的に作ってみました。久々にコード書いた。まずは触ってみていただけたらどんなものかわかると思います。下のリンクから。
クラファンを簡単に！ - AIクラファンジェネレーター
https://cfgen.jp
AIクラファンジェネレーターってなに？
開いてみて貰えば一目瞭然だと思います。
例えば、フォームの「やりたいこと」に「バク転しながら世界一周したい！」と入力して送信すると、以下のようなクラファンプロジェクト風の文章が生成されます。
今回のプロジェクトでは、バク転をしながら世界一周を目標としています！世界一周をバク転で実現することで、世界中の皆さんにバク転を楽しんでいただき、子どもたちに尊敬と希望を与えることを目指しています。
このプロジェクトを達成するためには、200万円が必要となります。このプロジェクトの成功は、バク転をしながら世界一周をしていくことによって、地球規模の尊敬と希望を醸成することになります。また、このプロジェクトを通じて、色々な国を訪問し、文化や歴史を学び、世界中の人々と交流することにより、様々な課題を解決することを目指します。
このプロジェクトを支援した方へのリターンとして、世界一周の旅行記を公開します。また、プロジェクトが成功した場合、プロジェクトに参加した方へのサイン入りTシャツやバク転のチャプターを提供します。
皆さんの応援があれば、世界一周をバク転で実現することができます！どうぞ、ご支援のほどよろしくお願いいたします！
また、例えば「電話ができる画期的なスマートフォンを開発します！」と入力するとこんな感じ。
新しい世代のために、今までにない新しい画期的なスマートフォンの開発を行います！この新しいスマートフォンは、通常のスマートフォンとは異なり、電話を掛けることが可能となっています。
このプロジェクトのゴールは、1000万円の資金調達です。この資金を使って、新しいスマートフォンを開発するためのプロトタイプを作成し、生産ラインを開発し、市場に出荷する準備をします。
このプロジェクトをサポートすることで、社会課題としてのデジタルギャップを解決することができます。多くの人々に、安価で使いやすいスマートフォンを提供することで、コミュニケーション能力をアップさせ、技術の遅延を減らします。
支援者へのリターンとしては、サポート額に応じて、プロジェクトの進捗状況を記載したメールやサイン入りのTシャツなどをプレゼントいたします。
一緒に、このプロジェクトをサポートして、新しい世代への技術革新を実現しましょう！
リターン案や、このプロジェクトを通じて解決したい社会課題、想定されるリスクや課題まで補足してくれる優れものです。AIってすごい。
クラファンの高いハードル
クラウドファンディングのプロジェクトを立ち上げる、ってまだまだハードルが高いと思っています。10年間思い続けてる。それだけに、これまでそのハードルを乗り越えて挑戦してくださった皆さんを心から尊敬しています。本当にありがとうございます。
もちろん、僕らCAMPFIREメンバー一同、日々どうやったらもっとハードルを下げ、たくさんの方にクラウドファンディングを使っていただけるのか、議論や自問自答をしながら日々改良をしています。プロジェクト作成UI・UXはこのままで良いのか。審査フローはこのままで良いのか。不安を抱えたプロジェクトオーナーに伴走できているか。プロジェクトを上手く前に進められないユーザーさんにクレームをいただくこともしばしばです。
そして、ハードルを下げることが必ずしも良いことだけとは限りません。すべての方に安心安全に使ってもらえるサービスにするために、プロジェクトの信頼性も大事です。そのために審査フローの複雑性が増したり、入力していただく項目を増やす必要があったりなど、安心安全と使いやすさはトレードオフの関係になっていることもあります。「こうすれば全部まるっと解決！」なんて答えがないことだからこそ、向き合い続ける必要があります。
クラウドファンディングのハードルを下げるために、「フレンドファンディング」と銘打ってpolcaというサービスを出したこともあります。たくさんの方に愛していただいて本当に幸せなサービスだったのですが、残念ながら様々な法律の壁もあり、サービス継続を断念せざるを得ませんでした。（こっそりいつか復活できないか考えています）
ハードルを下げるために
クラウドファンディングのハードルはたくさんあります。やりたいことは明確であっても、例えば本文をどう書けば良いのか。目標金額はいくらにしたら良いのか。リターンはどう設計したら良いのか。
過去に同様のプロジェクトをやった方を参考にするという手もあります。CAMPFIREを開いていただければ、全てのジャンルにおいて成功事例がたくさんあります。そういった方々のプロジェクトを参考にするのは一つの手です。
ただやはり、プロジェクト本文ではしっかりと想いを伝える必要があります。「クラファン成功の秘訣」なんてものは無いのですが、あえて言うのだとしたらそれはやはり「熱量」なのだと思います。でもその本文をゼロから書くってとても大変。それならば叩き台となるプログラムを用意すれば良いのでは、と考えました。
Chat GPTとの出会い
OpenAIが出したChatGPTの凄さはもうご存知の方も多いとは思います。僕もとてつもない衝撃を受けました。新しいおもちゃを触るように、この１ヶ月はずっとChatGPTで遊び続けていました。
なんとかこの素晴らしい技術をもっとサービスに活かすことが出来ないか？なんてことを考えた結果、今回のプログラムを作るに至ったと言う訳です。
どうやって作ったのか
よし！久々にコードを書くぞ！と腕まくりをしたところまでは良かったのですが、あれ、どこから手をつければ良いのだっけ。書き方ももう忘れてきてるし…社内のエンジニアに相談してリソース奪うのもな…そうだ、ChatGPTに開発を手伝ってもらったという記事があったな、これだ！
ChatGPTは言語モデルベースのAIです。言語モデルとは、お題（プロンプト）に沿った文章を生成するモデルです。それ以上でもそれ以下でもありません。
従ってなんらかの機能を実装してもらう際もいきなり「機能」から「コード」の生成だとあまり満足いく結果は得られません。 もちろんChatGPTはかなり博識なのでそれっぽいコードは出してきます。ただ、そのような生成の仕方だとChatGPTが学習したコードにかなり依存したものが出力されるため、実際のユースケースとはズレたものが生成されますし、生成物の著作権リスクが大きくなります。
一方で実装しようとしているものの仕様や、ドメイン知識を十分に多く含めれば、ChatGPTは驚くほど賢くそれらの文脈を理解して適切な実装を生成してくれます。そのため、コードを生成する際にはChatGPTとペアプロしているように、何回も対話を重ねながら少しずつ目的のものに近づけていくとうまくいきます。
ChatGPTに相談しながらペアプロする
上記リンクを参考にしながら、ChatGPTに相談しながら作ってみることにします。（適度に端折ってますし、最後は結構手を入れているのでこのまま進めて完成する訳ではないことをご了承ください）
＞ いくつかの項目を入力するだけでクラウドファンディングの本文が生成される機能を実装したいです。要件をまとめてください。
＞ 以下が、クラウドファンディングの本文を生成する機能を実装するための一般的な要件です。
プロジェクトのタイトル: クラウドファンディングキャンペーンのタイトルを入力します。
プロジェクトの目的: クラウドファンディングキャンペーンの目的を入力します。これは、プロジェクトが何を実現するのかを説明するものです。
プロジェクトの概要: クラウドファンディングキャンペーンの概要を入力します。これは、プロジェクトがどのようなものであるかを説明するものです。
プロジェクトのタイムライン: クラウドファンディングキャンペーンを実施する予定のタイムラインを入力します。これは、プロジェクトがどのようなステップを踏んでいくのかを説明するものです。
プロジェクトの資金調達目標: クラウドファンディングキャンペーンでの目標金額を入力します。
プロジェクトで得られるもの: クラウドファンディングキャンペーンで得られるものを入力します。これは、支援者に対するリターンとして提供されるものです。
プロジェクトチームの紹介: クラウドファンディングキャンペーンを運営するチームを紹介するセクションです。ここでは、チームのメンバーやそれぞれの役割を説明します。
プロジェクトとの関連性: クラウドファンディングキャンペーンがどのように関連しているかを説明するセクションです。ここでは、プロジェクトが解決する問題やニーズ、そしてそれらを支援する意義を説明します。
プロジェクトのリスクと課題: クラウドファンディングキャンペーンにおいて、プロジェクトが直面するリスクや課題を明示します。これは、支援者がプロジェクトを理解する上で重要な情報です。
プロジェクトの進捗状況: クラウドファンディングキャンペーンの進捗状況を示すセクションです。ここでは、プロジェクトがどの程度進んでいるかを伝えます。
プロジェクトのアップデート: クラウドファンディングキャンペーンの進捗状況やプロジェクトに対する最新情報を支援者に伝えるセクションです。
プロジェクトのサポート方法: クラウドファンディングキャンペーンをサポートする方法を示すセクションです。ここでは、支援者がプロジェクトをどのように支援できるかを説明します。
プロジェクトへのアクセス: クラウドファンディングキャンペーンにアクセスする方法を示すセクションです。ここでは、プロジェクトにアクセスするためのURLやログイン情報を提供します。すごい、完全に必要な項目が網羅されてる。でも長い。
＞ もっとシンプルにしたいです。例えば、タイムラインやリターンはここでは必要ありません。
＞ どういたしましょう。それでは、さらにシンプルに、クラウドファンディングの本文を生成するために必要な情報をお伺いします。
プロジェクトのタイトル: クラウドファンディングキャンペーンのタイトルを入力します。
プロジェクトの目的: クラウドファンディングキャンペーンの目的を入力します。これは、プロジェクトが何を実現するのかを説明するものです。
プロジェクトの概要: クラウドファンディングキャンペーンの概要を入力します。これは、プロジェクトがどのようなものであるかを説明するものです。
プロジェクトの資金調達目標: クラウドファンディングキャンペーンでの目標金額を入力します。だいぶシンプルになりましたね。これをベースに進めていきます。
＞ ではこのプログラムのhtmlはどのようになりますか？
＞ 以下が、クラウドファンディングの本文を生成するプログラムを実装するためのHTMLのサンプルです。
<html>
<head>
<title>クラウドファンディングの本文生成プログラム</title>
</head>
<body>
<h1>クラウドファンディングの本文生成プログラム</h1>
<form action="generate.php" method="post">
<label for="title">プロジェクトのタイトル:</label><br>
<input type="text" id="title" name="title"><br>
<label for="purpose">プロジェクトの目的:</label><br>
<input type="text" id="purpose" name="purpose"><br>
<label for="overview">プロジェクトの概要:</label><br>
<textarea id="overview" name="overview"></textarea><br>
<label for="goal">プロジェクトの資金調達目標:</label><br>
<input type="text" id="goal" name="goal"><br>
<input type="submit" value="生成する">
</form>
</body>
</html>＞ それでは、generate.phpへpostされたときに、入力された項目をOpenAIのAPIに投げてクラウドファンディングの本文を生成するプログラミングを書いてください
＞ どういたしましょう。それでは、PHPを使用して、generate.phpへPOSTされたときに、入力された項目をOpenAIのAPIに投げてクラウドファンディングの本文を生成するプログラムをお伺いします。
以下が、サンプルコードです。
<?php
// OpenAIのAPIキーを変数に格納
$api_key = 'YOUR_API_KEY';
// OpenAIのAPIエンドポイントを変数に格納
$api_endpoint = 'https://api.openai.com/v1/text-davinci/completions';
// POSTされたとき
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// プロジェクトのタイトルを変数に格納
$title = $_POST['title'];
// プロジェクトの目的を変数に格納
$purpose = $_POST['purpose'];
// プロジェクトの概要を変数に格納
$overview = $_POST['overview'];
// プロジェクトの資金調達目標を変数に格納
$goal = $_POST['goal'];
// OpenAIに送信するリクエストボディを作成
$request_body = [
'prompt' => "プロジェクトのタイトル: $title\nプロジェクトの目的: $purpose\nプロジェクトの概要: $overview\nプロジェクトの資金調達目標: $goal\n",
'model' => 'text-davinci-002',
'max_tokens' => 2048,
'temperature' => 0.7,
];
// リクエストを送信
$ch = curl_init($api_endpoint);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($request_body));
curl_setopt($ch, CURLOPT_HTTPHEADER, [
"Content-Type: application/json",
"Authorization: Bearer $api_key"
]);
$response = curl_exec($ch);
curl_close($ch);
// レスポンスを取得
$response_body = json_decode($response, true);
// クラウドファンディングの本文を取得
$text = $response_body['choices'][0]['text'];
// クラウドファンディングの本文を出力
echo $text;
}おおおすごい。でも実行したらエラーが出ちゃいます。
＞ 実行したところ、Notice: Undefined variable: api_endpoint in というエラーが出ました
＞ そのようなエラーが発生する原因は、PHPで定義されていない変数を使用していることが考えられます。
この場合、$api_endpointという変数が定義されていないということですので、$api_endpointを定義する必要があります。
以下に、$api_endpointを定義する例を示します。
$api_endpoint = 'https://api.openai.com/v1/text-davinci/completions';
$api_endpointを定義することで、Notice: Undefined variable: api_endpoint in というエラーが出ることがなくなるはずです。
その他にも、$api_keyという変数も定義する必要がありますので、ご確認ください。
ですよね。ありがとうございます。
＞ bootstrap5を使ってデザインをしてください
＞ 以下が、サンプルコードです。
<html>
<head>
<title>クラウドファンディングの本文生成プログラム</title>
<!-- bootstrap5のCSSを読み込む -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" integrity="sha384-ZGuaJc5l5Q5r5v5jzAAoDx9kKgQW8A4M4egGw0wgKV1YWmZBmfS+OyL9X/f/G8Tv" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<h1>クラウドファンディングの本文生成プログラム</h1>
<form action="generate.php" method="post" id="form">
<!-- bootstrap5のフォームグループを使用 -->
<div class="form-group">
<label for="title">プロジェクトのタイトル:</label>
<input type="text" class="form-control" id="title" name="title">
</div>
<div class="form-group">
<label for="purpose">プロジェクトの目的:</label>
<input type="text" class="form-control" id="purpose" name="purpose">
</div>
<div class="form-group">
<label for="overview">プロジェクトの概要:</label>
<textarea class="form-control" id="overview" name="overview"></textarea>
</div>
<div class="form-group">
<label for="goal">プロジェクトの資金調達目標:</label>
<input type="text" class="form-control" id="goal" name="goal">
</div>
<!-- bootstrap5のボタンを使用 -->
<button type="submit" class="btn btn-primary">生成</button>
</form>
</div>
</body>
</html>途中で切れてしまう場合があります。そんな時は「続きをお願い」とか「途中で切れてます」なんて投げたら続きを表示してくれます。
まだまだ完全では無いAI
こんな感じで、まるでChatGPTとペアプロをしている感覚で作り上げていきました。久々にコードを書く素人プログラマにとって、これはとても心強かったです。実際、コードの大部分を自動化することが出来ました。「こういうサービスを作りたい！」というイメージが明確にあれば、適切な質問を投げていくことで完成までかなりサポートをしてくれると思います。実質半日くらいで出来ちゃいました。
一方で、やはり全部AIにお任せで完成すると言う訳ではありません。構造や文脈を整理し、適切な問いを投げかけるという作業が必要になるため、やはり完全な素人がゼロから、というのはまだまだ難しそうです。
まとめ
触っていただけたらわかるとは思うのですが、正直まだまだおもちゃレベルではあります。ですが、僕自身はある程度の手応えみたいなものは感じることが出来ました。AIが人間のやりたいことの実現をサポートしてくれる、そんな未来は、もう、すぐそこに来ている気がします。
僕たちCAMPFIREは引き続き、「誰しもが声を上げられる世界」の実現に向けてテクノロジーも活用しながら頑張っていきます。どうぞ応援よろしくお願いします。
いいなと思ったら応援しよう！
