レトロRPGメッセージメーカー：プログラミング初心者×ChatGPT 2作目
レトロRPGメッセージメーカー
プログラミング初心者がChatGPTに手伝ってもらいながら、なんとか作成したもの、の2作目となります。
今回作ったのは「レトロRPGメッセージメーカー」。
テキストを入力することで、ファミコン時代のロールプレイングゲームのメッセージウィンドウみたいなGIFアニメ（平たくいうと、ドラクエのメッセージウィンドウみたいなやつ）を生成することができるWebアプリです。
前回作った「時間足アラーム」は、デイトレに役立てる便利ツール的なものでしたが、今回はエンタメアプリ（ネタアプリ？）という感じですね。
今回もChatGPT canvasで作成
前回の「時間足アラーム」は「ChatGPT 4o with canvas」で作成しましたが、今回もcanvas機能を使っています。
ただ、「ChatGPT 4o with canvas」というモデルは選択肢から消えてしまっているようですね。
現在は、チャットエリアのツールアイコン（ツールを表示）から「キャンバス」を選択するカタチになっているようです。（2024.12.25）
どのモデルでも使える標準の機能という扱いになった、ってカンジでしょうか。
ChatGPTでの制作プロセス
今回の書き始めはこんなカンジです。
入力エリアに入力したテキストが、1文字ずつ表示される。
（ロールプレイングゲームのテキスト表示のように）
ザックリすぎる説明でしたが、伝わったようです。
AIは優秀だなぁ。
（いや、改めて見るとザックリすぎる。Webアプリを作りたいとも言ってないのにHTML+JavaScriptで出力されている。canvasだからか？それとも以前のやりとりから推測してる？）
表示エリアで文字表示が再生されている様子を、GIFアニメで保存するような機能を追加したい。
上記のように尋ねると、JavaScriptのライブラリ「html2canvas」と「gif.js」の導入を提案してくれました。
もちろんどういうものか知らないので、それぞれのライブラリについて説明を…というか、そもそもライブラリとはどういったものなのか？勝手に使っても良いのか？そのレベルから教授してもらいました。
「html2canvas」は、HTMLで表示したものをCanvas要素として描画し、画像化できるもの。
「gif.js」は、GIFアニメーションを生成するもの。
という認識です。（だいたい合ってる？）
これらを導入した段階でプロトタイプと呼べそうなカタチにはなっているので、自分のやりたいことは実現可能か、このまま進めていけそうか、早い段階でプロジェクトの見通しを立てられるのが便利なところですね。
その後、ナンダカンダ機能の追加や調整を繰り返し、完成に至りました。
「DQフォント」に感謝
当アプリには、Webフォントとして「DQフォント」を導入しています。
もう何年も前になりますが、ドット絵ゲームを紹介するサイトを作成した際にも「DQフォント」を使わせていただいたことがあります。
今回も、「ピクセル文字のフォントならDQフォントがイイなぁ」とすぐに思いついたので、こちらのフォントを選びました。
毎度お世話になっており、感謝しております。
「DQフォント」には漢字も含まれてないですし、制約も多いんですけど、なんかこれが好きなんですよねぇ。
まぁ漢字は使えないほうが、当アプリの場合は面白いと思いますし。
SNSへの投稿を想定した工夫
当アプリでGIFアニメを作った際には、是非SNS等に画像を投稿してほしいワケです。
ただ、SNS（というかX（Twitter）しかチェックしてないですが）への画像投稿機能の導入はなんだかハードルが高そうなので、断念しました。
APIの制限とかヤヤコシそうなカンジがするし、X（Twitter）側の仕様もコロコロ変わりそうな気がするし。
なので、お手数ですが、一旦画像を保存していただいてから、それを手動で添付してポストしてもらう、というカタチになってます。
あと、X（Twitter）ではGIFアニメに表示される「再生/停止ボタン」がメッセージと重なっていました。
なので、それを回避するために出力画像の下部に余白を設け、ついでに推奨するハッシュタグを記載しておきました。
使っていただけると幸い
今回もいろいろ試行錯誤しながら、楽しく作成することができました。
前回のアプリを作成して以来、「何か自分に解決できる問題はないか」「何かネタは落ちてないか」とアンテナ感度が上がってる気がします。
とても良い状態なのではないかと思います。
また第3弾に向けて、頑張る所存でございます。
そんなワケで、今回作った「レトロRPGメッセージメーカー」、使っていただけると嬉しいです。
感想なんかもあれば、是非お気軽に。
ナニトゾ。
レトロRPGメッセージメーカー
https://apps.anklelab.net/rpg-message/