山田隆一公式サイト

1549.【GPT-5】ChatGPTで、『パズルのようなもの』という図形を組み合わせていく活動ができるアプリを作ってみました。【HTML/CSS/JavaScript】

2025/08/24

...

生成AI「ChatGPT」の使い方はぜひこちらをご覧くださいませ。

...

今回は、ChatGPTでパズルのようなアプリを作ってみました。

パズルのようなもの

今回は、『パズルのようなもの』というアプリを作りました。

の図形を組み合わせて、いろいろと作ることができるアプリです。ただ・・・それだけのシンプルなアプリです。

凸凹パズルのようなもの

(画像をクリック・タップすると遊べます)

こちらは、私が本ブログで書いている『僕は発達とともに、前を向いて生きていく。』という連載を題材としております。

僕は発達凸凹とともに、前を向いて生きていく。紹介

この連載ではと、の字をこのようにオレンジ色で、の字を水色(薄い青)で表現しております。

こののブロックを組み合わせていろいろと作ることができるアプリです。

凸凹パズルのようなもの

初期状態ではこのようにブロックがそれぞれ5個ずつランダムに配置しております。

凸凹パズルのようなもの

ブロックを増やすこともできます。このように増やしたいブロックの数を指定して「生成」ボタンを押せばその数だけ増えます。

凸凹パズルのようなもの

・・・やりたくなりますよね。ブロックを増やしまくること。しかし無数にブロックを増やすと大きな負荷がかかってしまいます。

したがって、ブロックの数が100個を超えることになると、「上限を超えています。」というメッセージを表示できるようにしております。こういった細かい設定もChatGPTで指定すれば対応してくれました。

凸凹パズルのようなもの

他にもこうやってブロックを回転できたり、

凸凹パズルのようなもの

不要なブロックを削除できたりします。

ブロックを動かしているだけでも、気がついたらこんな時間、となるかもしれない。そんなアプリです。

...

お読みいただき、ありがとうございました。

凸凹パズルのようなもの

(Thank you!のつもりですが、かなり強引になってしまいました!)