わかったブログのトップページで泳いでいる「鰯の群れ」を、誰でも作って、保存して、自分のホームページに貼れるようにしたい。そう思いついてから、およそ20分で形にしたウェブサービスが「群れ工房」です。
今回使ったのは、話題の Claude Opus 5.5です。この記事では、群れ工房ができるまでの流れと、「まず公開して、使いながら直す」というやり方で見えてきたことをまとめます。
群れ工房でできること
群れ工房は、たくさんの点を簡単なルールで動かして、動く模様を作るサービスです。ログインは要りません。
- 鰯の群れ・銀河・粘菌・カオスの方程式など、10種類の技法で作品を作る
- 作った作品を保存して、ギャラリーで公開する
- ほかの人の作品に投票し、ランキングで見る
- ホームページに貼るための埋め込みコードを取り出す
- 画像や動画で保存して、スマホの壁紙やSNSに使う
ちなみに、トップページの鰯は「Boids(ボイド)」と呼ばれる群知能の仕組みが元になっています。「近すぎたら離れる」「向きを揃える」「仲間の中心へ寄る」という3つのルールだけで、群れ全体の形が生まれる、というものです。
思いついてから約20分で形にした
作り始めるときに伝えたのは、おおまかに次の内容でした。
- ブログのヒーローにある鰯や銀河を、眺めたり、作ったり、保存したりしたい
- ホームページに埋め込むコードも出したい
- みんなの作品に投票して、ランキングを作りたい
Opus 5.5は、ブログのリニューアルで作ったコードをまず読み込みました。そのうえで、「この鰯はBoidsという技術です」と説明し、ほかにも使えそうな理論(流れ場、ストレンジアトラクタ、葉序、粘菌シミュレーションなど)を挙げてくれました。そこから、それらをまとめて扱える画面まで、一気に作ってくれました。
最初の版は、およそ20分でできあがりました。
本番の公開には、このあとPHPとMySQLで作り直し、エックスサーバーのサブドメインに置いています。サーバーへのアップロードや、データベースのテーブル作成も、SSH経由でClaudeがやってくれました。わたしがやったのは、サーバーパネルでのデータベース作成と、パスワードの入力くらいです。
完成度より、まずは公開
今回いちばん意識したのは、「作り込む前に、まず公開する」ことです。
実は以前、別のサービスを作ったとき、公開前の確認に時間をかけすぎたことがありました。それでも本番で使ってみると、「入力して、保存して、表示される」という一連の流れがつながっていない、という問題が見つかりました。手元でいくら確認しても、実際に使ってみないとわからないことがあります。
そこで今回は、最低限の動作と安全面だけを確かめたら、すぐに公開しました。公開してから、自分で触りながら直していきました。
使いながら見つかった不具合
実際に公開して使ってみると、いくつも問題が見つかりました。
- 日本語のタイトルが「???」に化けた:サーバーに古い文字コードの設定(EUC-JP)が残っていたのが原因でした。ブログ本体の設定には触らず、アプリ側でUTF-8に固定して直しました。
- スマホで画面が左右にずれる:技法ボタンの英語名がはみ出して、ページの幅を押し広げていました。
- スマホで録画や画像保存がうまくいかない:Facebookアプリの中のブラウザでは、ファイルの保存自体ができません。またiPhoneでは、タップの直後でないと保存が止められることがあります。そこで、保存ボタンから共有メニューを開き、写真アプリに保存できる形に変えました。
- ブログのトップの鰯が入っていなかった:鰯には2つの方式があり、片方しか入っていませんでした。移植してみると、元のコードにも「群れが画面の外へ泳ぎ去ってしまう」小さなバグが見つかりました。ブログ側もあわせて直しています。
どれも、公開前にじっと眺めているだけでは気づきにくいものです。スマホで触ってみて、「あれ、ずれるな」「保存できないな」と感じたところを伝えるだけで、原因の調査から修正、本番への反映まで進めてくれました。
使いながら育てていく
群れ工房は、今も少しずつ機能が増えています。最近は、スクリーンセーバー用の全画面表示や、スマホの壁紙サイズでの画像保存、縦長の動画の録画を追加しました。
AIと一緒に作ると、「作る」ことそのものにかかる時間は、驚くほど短くなります。だからこそ、早く出して、実際に使って、気づいたことを直していく。このサイクルを速く回せることが、いちばんの強みだと感じました。
よかったら、群れ工房で自分だけの群れを作ってみてください。気に入った作品には、ぜひ投票をお願いします。
コメント