はじめに
うい！NTAKOです。今回はChatGPTでHTMLとCSSとJavaScriptを使ったウェブアプリ作り方をご紹介します。この記事では、ChatGPTを使ったアプリ開発やゲーム開発の進め方の1つの方法がわかるようになります。
※注意：今回の内容は制作内容が指呼し複雑になるため、無料版のChatGPT 3.5では難しいので有料版のChatGPT 4を使用しています。どちらのGPTにもHTMLとCSSとJavaScript知識はあるので無料版でも頑張ればできると思います、ですが、無料版では会話のキャッチボールの精度のが低いため、修正回数に圧倒的増えると思います。GPT 3.5とGPT 4の差は、同じスキルを持った子供と大人でイメージするとわかりやすいです。子供にお使いを頼むと「話をちゃんと聞いていないで間違えがち」とか「何かを忘れてくる」といった感じでやり直しの回数が増えるイメージです。これがプログラミングでは致命的で、修正を依頼した時に今の修正は直したけど、そもそもの前提条件は忘れて変な変更を加えてくるなどが起こりガチになります。
ChatGPTでルーレットアプリを作ってみよう
1.ChatGPTへのアクセス
まずOpenAIの公式ウェブサイトにアクセスします。
https://chat.openai.com/
2.HTMLとCSSでルーレットアプリ作成の依頼文を送信する
アプリ制作の依頼文に必要なのは「何を作るのか」という具体的な内容です。「作りたいもの」と「プログラムの内容（表示や動き）」を要件として箇条書きで書き出して送ります。今回は「メモ帳」（右クリック→名前を付けて保存でDLできます）にルーレット枠の入れるテキストを改行で書いたものをユーザーが読みんで使えるルーレットを作成します。そこでは下記のように依頼文を作成しました。
ブラウザで動作するルーレットのウェブアプリを作りたいです。下記要件でコードを書いてください。HTML、CSS、JSは1つに統合してください。
【要件】
・初期画面のレイアウトは上から、1段目にルーレットの円。2段目にファイル読み込み、3段目に【スタート】ボタンと【ストップ】ボタン、4段目に「当たり表示」枠とする。
・メモ帳やエクセルのデータをユーザーが読み込んで、テキストの行ごとに円形を均等にスライスしたルーレット枠にテキストを配置。
・テキストは、円の中心から外円までの間に放射状に配置。
・スライスはコントラストのあるおしゃれなカラー6色で構成。
・【スタート】を押すと、ルーレットが高速で回転し続ける。
・【ストップ】を押すと、ルーレットが3～8回転の間のランダムな角度で滑ってからゆっくり止まる。
・「当たり表示」として、当たった部分のテキストを画面下に大きく表示。
・エンターキーか画面タップで【スタートを】ボタンを押す前の状態にリセット。
すると、コード生成してくれたので、メモ帳にコピペして「index.html」として保存して開いて確認します。ルーレット枠に表示する「メモ帳」を読み込んだらこのような表示になりましたた。実際のページがこちら。
実際のアプリを触ってみて動作チェックを行います。そして気になったところの修正や追加要素の依頼を出します。修正依頼のコツは「現状を伝えてそれをどう修正する」という流れで伝えることです。
・初期画面にもルーレットを表示してください。初期ルーレットはテキストはなしでスライスは6色。
・ルーレットの右側に当たり部分を示す「◀当たり」をオシャレなスタイルで表記してください。
・【スタート】を押してもルーレットがすぐに止まります。まわり続けるように修正。回転速度は今の10倍に。
・【ストップ】を押すとルーレットがスローダウンして1～3回転の間のランダムな角度でゆっくり止まるようにしてください。。
すると、修正したコード生成してくれたので再度確認します。このようなアプリになっていました。実際のページがこちら。
動作は問題なかったのですが、「◀当たり」マーカーがブラウザの右側に吸着していました。この部分の修正依頼を出します。
「◀当たり」のマーカーがブラウザの右側揃えになっていてルーレットから離れるので、常にルーレットの右隣から動かないようにしてください。。
そして、生成された修正コードを再度確認します。このような表示になっていました。実際のページがこちら。
今度は「◀当たり」マーカーが」ルーレットに重なっていたのでこの位置の微調整を行いたいと思いました。こういった微調整の場合は自分で数値を直した方が早いことが多いので、下記のように質問してみました。
すると、下記のような返事が出たコード内のある数値を変えるだけで変更ができるとのことなので数値を自分で打ち替えて最適な位置に修正します。。
「◀当たり」マーカーをルーレットの右隣からさらに右に移動させたい場合は、CSSスタイルでrightプロパティの値を調整することで実現できます。現在の設定はright: -50px;となっており、これをもっと大きな負の値に変更することで、マーカーを右に移動させることができます。
例えば、マーカーをさらに右に100px移動させたい場合、rightプロパティの値を-150pxに変更します。以下はその部分のCSSコードの変更例です：
これで完成しました。実際のページがこちら。
このようにグラフデザインを生成することができます。今回は1本ずつの単純な棒グラフではなく、2列の国比較グラフをさらに全体のカテゴリで比較するという少し複雑な依頼内容だったので少し修正回数も多くなったかなという感じです。
おわりに
ChatGPTを使ったアプリの作成は、ちょっと進んでは戻っての繰り返しに陥りやすいですが、落ちつて修正を進めてください。ChatGPTは正常に動くと思ったコードを書いていますが、それがきちんと動くかをGOPT自身あが確認することはできません。ですので、私達自身が不具合の状況を把握してきちんとGPTに伝えてあげる必要があります。慣れてくるとGPTが理解しやすいであろう指示の仕方もわかってきますので、根気よくやってみてください。そうすることで、プログラミング初心者でもアプリを作ることができます。