ブログ
【学生投稿】生成AI「Grok」と共に挑む開発の最前線！「Novel Genesis Editor」大型アップデートの裏側
話題のAI「Grok」を相棒に、技術的な壁を乗り越えて「作りながらその場ですぐに試せる機能」をわずか数秒で実現させた、現役高校生エンジニアの驚きの開発秘話をお届けします。
はじめに（eスポ東海学生ネットより）
大同高校ICTプログラミング部の生徒さんから、自身で書いたブログの掲載依頼をいただきました。
今回は、生徒さんが執筆した内容を原文のまま掲載いたします。
生成AI「Grok」を活用してNovel Genesis Editorに新機能追加！
Novel Genesis Editor UD-Palette v1.4 を公開しました。
今回のアップデートでは、エディターにテストプレイ機能を導入し、作成中のシーンを、プロジェクトフォルダ内のスクリプトファイルにコードを貼り付けることなく、その場でプレイできるようになりました。
英語版・韓国語版エディターにも同様に試験実装を行っています。
今回のアップデートの開発には、Xに搭載されている生成AI「Grok」を活用しました。
このAIは、プロンプトのみからの生成はやや苦手な一方で、推理力・応用力に優れており、サンプルとなるコードを与えることで、既存のプログラムを目的に沿った形へと的確に書き換えてくれます。
テストプレイ機能の実装には、「インポートしたデータをブラウザのメモリ上に保持し、テストプレイ時に対応する素材を組み合わせて表示する」というロジックが必要でした。
しかし、この要件だけを伝えても生成されるコードにはバグが含まれたり、エディター全体のコードを読み込ませた場合でも、既存処理と干渉したり、意図とは異なる実装になったりすることがありました。
特にNovel Genesis Editorでは、ゲーム内容によってインポートされる素材の数や容量が大きく変動します。
「インポートしたデータをブラウザのメモリに保持する」という点について、AIは以下の2つの方法を提示しました。
・一度サーバーにアップロードし、URL経由で読み込む方法
・Base64に変換して必要なときにデコードする方法
しかし、Base64方式ではデータ量が膨大になり、テストプレイ時のロードが重くなってブラウザがクラッシュする可能性があります。
一方、サーバー保存方式は現実的ではあるものの、Node.js や Microsoft Azure などの環境構築・課金が必要となり、高校生の個人開発としてはハードルが高すぎます。
理想としてはローカルストレージ上の素材をそのまま参照したいところですが、ブラウザのセキュリティ制約により直接のパス参照は不可能です。
そこで採用したのが「Blob URL」という仕組みです。Blob URLは、ローカルから読み込んだファイルデータをブラウザのRAM上に一時保存し、それにアクセスするための仮想的なURLを生成する機構です。以下は、その動作を確認するためのサンプルコードです。
Novel Genesis Editorで出力される素材パスは相対パスであるため、本来はローカル環境でしか動作しません。
しかし、Blob URLを用いれば、相対パスを仮想URLに置き換えることで、ブラウザ上でも直接アクセス可能になります。
これにより、テストプレイ時に素材の参照先をBlob URLへ変換することで、高速かつ快適な実行環境を実現できます。
RAM上のデータを参照するため、実効アクセス速度も非常に高速です。
このHTMLの仕組みをGrokに学習させ、テストプレイ時にNovel Genesis Editorの素材パスを対応するBlob URLへ変換して実行するロジックを生成するよう指示しました。
その結果、わずか2回の思考で必要な関数と処理を出力し、所要時間は約7秒でした（通常のプロンプトベースのコーディングでは10〜20秒程度）。
単なる指示文だけでなく、具体的なサンプルを与えることで、精度と速度の両面で理想に近い結果が得られることが分かりました。
Grokはユーモアや皮肉のある応答で知られていますが、情報を基に推論し、それを応用して新たなロジックを構築する能力においても非常に優秀なモデルだと感じています。
みなさんもぜひ、生成AI「Grok」を活用してみてはいかがでしょうか。
※Android、iOSではブラウザの仕様上、ファイルインポートが一部不可能になる場合があります。技術的には可能です。
FAQページ：https://sites.google.com/view/novel-genesis-faq
◆その他の更新情報
- エディターを切り替える際の警告表示（日本語・英語・韓国語版エディターで実装）
- 英語版・韓国語版エディター 翻訳の欠落を修正
- 生成されたコードのコピー機能が反応しないバグを修正（日本語・英語・韓国語版エディターで修正）
- プロジェクトフォルダのインポートの際、データが割れるバグを修正（日本語版エディターで修正、英語・韓国語版ではバグ無し）
- Chrome系ブラウザでメモリの使用率を可視化
おわりに（eスポ東海学生ネットより）
いかがでしたでしょうか。AIを単なる「検索ツール」としてではなく、複雑なコードを共に組み立てる「開発パートナー」として使いこなす姿は、まさに次世代のクリエイターそのものです。専門的な内容ではありましたが、彼らの「より良いものを作りたい」という熱意が伝わってきましたね。
eスポ東海学生ネットは、こうした学生たちの主体的な挑戦をこれからも全力で発信していきます！
