Enliru's AI Lab

← ホームに戻る

公開日:

AIの力を借りて、知識ゼロからブラウザゲーム&ポータルサイトを作った話

AIとWebサイト開発をイメージしたイラスト

こんにちは、Enliruです!
このたび、自作のブラウザゲームを公開するポータルサイトを立ち上げました。

実はこのサイト、デザインからゲームのプログラミング、さらにはサーバー(Nginx)の設定に至るまで、その大部分をAI(生成AI)のサポートを受けながら構築しています。本記事では、どのようにしてこのサイトが完成したのか、その軌跡をご紹介します。

なぜAIを使ってサイトを作ろうと思ったのか

以前から「自分で作ったゲームをWeb上で公開したい」という漠然とした目標がありました。しかし、一からHTML / CSS / JavaScriptを学び、さらにサーバー周りの知識まで身につけるには、莫大な時間と労力がかかります。

そこで目をつけたのが、昨今話題の生成AIによるコーディング支援です。「AIと対話しながらなら、自分一人で悩む時間を減らして、スピーディーにモノづくりができるのではないか?」と考えたのが始まりでした。

実際の開発フロー

開発は主に以下のような流れで進めました。

1. ゲームロジックの構築

最初は「上から落ちてくる箱をキャッチする」というシンプルなアイデアだけがありました。
「HTML5のCanvasを使って、マウス操作で自機を動かして落ちてくるアイテムを拾うゲームのコードを書いて」とAIに指示(プロンプト)を出すことで、数秒でベースとなるJavaScriptのコードが出力されます。あとはそれをコピーして、少しずつ調整していくという作業です。

2. ポータルサイトのデザイン

次に、作ったゲームを展示するための「枠」が必要になりました。
サイトのデザインも、「ブルーとホワイトを基調とした、モダンでフラットなデザインのギャラリーサイトのHTML/CSSを作って」とリクエストするだけで、現在のこのサイトの基礎となる綺麗なCSSが生成されました。

3. 自宅サーバーの公開設定(難所)

一番詰まったのが、せっかく作ったサイトを世界に公開するための設定です。
「UbuntuでNginxを動かして、HTTPS(SSL証明書)でアクセスできるようにしたい」という要望に対し、AIはターミナルで実行すべきコマンド(Let's Encryptの設定など)を順番通りに教えてくれました。エラーが出た際も、そのエラー文をそのままAIに投げ返すだけで解決策を提示してくれたため、非常に助かりました。

まとめと今後の展望

AIの登場により、「アイデア」さえあれば、専門的なプログラミングの文法を知らなくても、形にできる時代になったと痛感しています。

もちろん、最終的な調整や「自分が本当に作りたいもの」の言語化は人間の仕事ですが、強力なアシスタントとしてこれほど心強いものはありません。
今後は、このサイトにさらに新しいミニゲームを追加していくとともに、今回のような開発日誌や、ちょっとした便利ツールなども公開していきたいと考えています。

引き続き、Enliru's AI Lab をよろしくお願いします!

この記事が面白かったらシェア!

𝕏 でポストする
← ホームに戻る