はじめに
こんにちは。普段はコードを書かない非エンジニアの「クソ流し」の中の人です。
突然ですが、皆さんストレス溜まってませんか？
言いたいけど言えない愚痴、X（Twitter）に書くと炎上が怖い本音……。
そんな「精神的な便秘」を解消するために、「入力した愚痴を物理演算でウンチに変えて、豪快に水に流す」という、文字通りのクソアプリ『クソ流し (KUSO FLUSH)』 を開発しました。
📱 実際のアプリはこちら
(※音が出ます)
この記事では、JavaScriptが書けない私が、AI（ChatGPT） に指示出しをするだけで、どのようにして物理演算やAI診断機能を実装し、ランニングコスト0円で運用しているのか。その開発の裏側とノウハウを共有します。
作ったもの：『クソ流し (KUSO FLUSH)』
ただのジョークアプリに見えますが、技術的には意外と真面目なことをやっています。主な機能は以下の通りです。
- 物理演算 (Matter.js)
入力した文字数に応じて「ウンチ」のサイズが変わり、ボヨンボヨンと積み重なります。 - 流体表現
「流す」ボタンを押すと、水流の渦が発生し、物理演算でオブジェクトが吸い込まれていきます。
技術スタック：月額0円へのこだわり
「ネタアプリにお金はかけられない」という強い意志のもと、徹底的に無料枠を活用しました。構成は以下の通りです。
| カテゴリ | 採用技術 | 選定理由 |
|---|---|---|
| フロントエンド | HTML5 / Vanilla JS | フレームワークなしで軽量化 |
| 物理エンジン | Matter.js | 2D物理演算の定番 |
| ホスティング | Cloudflare Pages | 商用利用OK・帯域無制限 |
| バックエンド(AI) | Cloudflare Workers | 無料枠でAPIを叩くため |
| AI API | OpenAI API | gpt-4o-mini (安価で高速) |
| 解析 | Google Analytics 4 | カスタムイベント計測 |
サーバー代もDB代もかかっていません。唯一かかったのは独自ドメイン代（年間1円〜）だけです。
非エンジニア流「AIペアプログラミング」の極意
私はコードが書けないので、AIに 「要件定義書」を渡して実装してもらいました。
意識したのは 「曖昧な指示をしない」 ことです。具体的な事例を2つ紹介します。
1. 「物理演算が重い」問題の解決
最初はDOM要素（<div>）を物理演算させていたのですが、スマホで100個を超えると動作がカクカクになってしまいました。
そこで、エンジニアっぽい解決策をAIに提案させるのではなく、 「やりたいこと」と「制約」 をセットで相談しました。
私:
「スマホでもヌルヌル動かしたい。DOM操作だと重いと聞いたから、別の方法（Canvas APIなど）を使って描画する方式に書き換えて」
AIは即座に、Matter.Render（デバッグ用）を使わず、requestAnimationFrame のループ内で ctx.fillText を使って絵文字を描画するコードを書いてくれました。
これにより、数百個のウンチが流れても爆速で動くようになりました。
2. フリー素材を使わない「動的サウンド生成」
効果音を探すのが面倒だったので、ここもAIに無茶振りしました。
私: 「mp3ファイルを使わず、Web Audio APIのオシレーターを使って、『プリッ』という落下音と『ジャー』という水流音をプログラムで合成して」
結果、ブラウザが音をリアルタイム合成するようになったので、音声ファイルの読み込み待ちがなくなり、アプリの軽量化にも成功しました。
よくある質問 (FAQ)
技術的なポイントや運用について、よく聞かれることをまとめました。
Q. 本当にランニングコストは0円ですか？
A. はい。Cloudflare Pagesの無料枠と、ドメインの初年度1円キャンペーンなどを活用しているため、月額固定費はかかっていません。
Q. 開発期間はどれくらいですか？
A. AIとの壁打ちを含めて、プロトタイプは数時間、ブラッシュアップを含めても数日で完成しました。
Q. スマホでも動きますか？
A. はい、レスポンシブ対応しており、スマホの縦画面で遊ぶのが一番楽しいように調整しています。
さいごに
非エンジニアでも、AIという最強のパートナーがいれば、物理演算を使ったリッチなWebアプリを作れる時代になりました。
もし日常のストレスが限界に達した際は、ぜひ 『クソ流し』 で物理的にスッキリしてください。
🚽 クソ流し (KUSO FLUSH)
