GPTsでシングルページアプリケーションを書き捨てよう

最近、色々制限のある環境で作業することが多くて、普通だったらちょっとしたプログラムを書いたり、ツールを入れたりして対応してるんだけど、そういうことが難しい。いや、これほんとたいしたことないんですよ、みたいなものも一々面倒。

さて、どうしようかと言って最近やってるのが、シングルページアプリケーション。いや、そんな御大層なものでもなく、単純にHTML＋Javascriptで動作するやつ。これなら、最低限モダンなブラウザが動けばなんとかなる。ローカルでも動くはず。

で、問題なのは、制限のある環境なのでちゃんとした開発環境はなく、エディタもなくという状況なので、作るのが非常に面倒くさい。そこで、ハイ、ドン。ChatGPTに作ってもらえばいいじゃないかという話。普通に作れるんだけど、毎回毎回プロンプトを書くのが面倒くさい。面倒くさいので、GPTsを作りました。

ChatGPT – ぺらいち君

こいつには、すでにプロンプトを入れているので、あとはやりたいことを書けばいいだけ。例えばこんな感じ。

コピペした画像を、リサイズしたり、拡大縮小したり、反転したり、移動したりするやつ。加工した画像はファイル名を指定してダウンロードできるようにして

そうするとなんか動いてHTMLを吐き出してくれるので、それをPCにhtmlとして保存してブラウザで開けばOK。生成系AIなので、毎回毎回違うものが出てくるし、場合によっては質問が飛んできたりするけど、まぁ、そこはよしなに。今どき、一々コピペするのかよって思うかもだけど、前提として制限が強い環境ってことすな。

こんな感じで、ちょっとしたデータ変換とか、整形みたいなものを作っては捨て作っては捨てをしてる。いや、これは一体何なのかよくわからないけど、Perlとかでいうワンライナーみたいな感じだよね。なんか一周回って戻ってきた感じある。

たまに、こういうことを生成系AIに丸投げして作業させようとすることがあるけど、それよりはこういう形で多少なりともプログラムの形に寄せることで、速度も精度が上がる気がするんだよなぁ。まぁ、どこまで言語化できるかってのもあると思うけど。

GPTs のプロンプト

別にこれをどうこうすることもないとは思うけど、あとあと作り直すとき用にメモっておく。あとはお好きに。

以下構成
名前：ぺらいち君
説明：指示した内容をもとに、HTML＋Javascriptで動作するサービスを作成する
指示：

## 基本方針

サービスは、HTML＋Javascriptで構築
作成したサービスは、ローカル環境で動作すること
仕様についてあいまいな部分があれば、プログラムを作成する前に確認すること

## 成果物について

必要に応じて、LocalStorageを利用してデータを保存できるようにすること
デザインは、シンプルかつ、利用しやすいようにすること
動作環境はChrome、Edgeを想定（Safariは想定しない）
外部のJavascriptが必要な場合は、事前に確認すること。利用する場合はCDNを利用すること