ショート動画用のスライド画像をブラウザで作成できるウェブアプリです。
使い方の説明動画
雑学動画や商品紹介のショート動画でよく使われる縦型動画の中央に画像、その上下に文字を入れるスタイルのスライド画像をブラウザ上で簡単に作ることができます。
アプリは下記ページで利用できます。
ショート動画用画像生成器 α版
https://ntako.net/gen1/
このWebアプリはChatGPTで作りました。ChatGPTを使ったプログラミングにご興味のある方は下記もご一読ください。
ChatGPTでのアプリ開発について
今回は、ブラウザ上で動作する画像生成アプリの制作を行いました。このようなChatGPTと協力してプログラムを作る進め方は、他のプログラム制作でも応用して同様の流れで進めることができます。まず、はじめに必要なことは「何を作るのか」という具体的な内容です。「作りたいもの」と「プログラムの内容（表示や動き）」を要件として箇条書きで書き出して、ChatGPTへの制作依頼分を作るところから始めました。
■今回のケース
作りたいもの : ブラウザ上で画像を読み込んで文字を付けて縦型画像をダウンロードできるアプリ。
制作依頼分 : 下記要件のブラウザで動作するウェブアプリのコードを書いてください。HTML、CSS、JSは一つにまとめて書いてください。
【要件】
・縦型（縦1920px×横1080px）の画像を作成できるアプリ。
・作成する画像のレイアウトは「文字上」、「画像」、「文字下」の要素があり、画面上部 横1080px、縦510pxを「文字上」の表示領域。画面中央 横1080px、縦900pxを「画像」の表示領域。画面下部 横1080px、縦510pxを文字下の表示領域とする
・ユーザーが画像をアップロードすると作成する中央に画像の表示領域に配置される。
・縦長の画像の時は高さを基準に縦900pxに合わせ、横長の画像の時は横幅を基準に横1080pxに合わせて縮小する。
・「文字上」と「文字下」のテキストは改行入力できる。
・文字と背景の色が変更できる。初期設定は文字「黒」で背景「白」。
・設定項目の下にプレビュー画像を表示し、その下に「ダウンロード」ボタンを配置。
・ブラウザのサイズに合わせて表示するレスポンシブ対応。
※今回の実際の制作では別アプリを作っている途中で要件変更を行って作ったのでこの依頼文でスタートした訳では無いのですが、はじめからこのアプリを作る場合はこのような要件でスタートするという一例です。
■使用するプログラミング言語について
制作物が決まると自ずと使用するプログラミング原語が絞られます。今回はWebブラウザで動作するアプリの制作だったので、Webページを制作で使われるプログラミング原語がベースとなりました。自分が作りたいものを表現するためにどのプログラミング言語を使用するのが良いのかわからない時は、はじめにそれもChatGPTに質問して考えてもらいましょう。質問する時も先に制作物の「要件」を決めておき、「下記要件のアプリを作りたいです。（要件を書く）これの作り方を考えてください。」とチャットすれば使用するプログラミング原語も教えてくれます。
■制作の進め方
プログラミング部分は基本的にはChatGPTにプログラムのコードを書いてもらってコピー＆ペーストするだけです。重要なのは、「実際にプログラムを動かしてどうなったか」を理解してその状況を正確にChatGPTに報告する部分です。これを行うとChatGPTが改善方法を考えて修正したコードを書いてくれます。それをコピペで実装してまた動作確認してまたChatGPTに報告。この繰り返しで制作を進めます。進め方はできるだけ最低限必要な機能の実装で進めるのがおすすめです。
■見た目（UI）の実装方法
ChatGPTでアプリを作ると、機能重視で見た目は最低限の要素で構築されます。ここからUIデザインが必要になるのですが、この部分をChatGPTに依頼するのはまだ難しいと思います。そこで今回はtldrawというアプリを使ってUIを生成しました。tldrawはブラウザ上でウェブページなどのレイアウトをスケッチするとそれっぽいデザインを生成してコードで出力してくれるアプリです。ここで作成したUIデザインのコードをコピーしてChatGPTにペーストして「今作ったアプリの機能をこのUIのコードに統合してください。」と依頼すると見た目を反映したコードを生成してくれます。
■完成プログラムの公開
今回はブラウザアプリなので完成品をWebページに公開しました。公開方法は一般的なホームページ制作と同じでレンタルサーバーなどにアップして公開します。
https://ntako.net/gem1/
■おわりに
ChatGPTを活用したブラウザゲームの開発は、プログラミングの基礎を学びながらアプリを完成させる楽しさを体験できる機会になります。これからChatGPTを使ったプログラミングを始める方の参考になれば幸いです。。