クソアプリアドカレの大本命！？文字通り「クソ」をブラウザ上で60fpsで水に流す技術
この記事は クソアプリ Advent Calendar 2025 の4日目の記事です。
はじめに：なぜ「流す」のか
こんにちは。
私は普段コードを書かない非エンジニアです。
関わっていた新規事業がクローズすることになり、これを機に長年の夢だったアプリ制作をしてみようと思い、今回のクソアプリアドカレにチャレンジしてみました。
現代社会はストレスに満ちています。
言いたいけど言えない愚痴、X（Twitter）の下書きに溜まっていく本音……。
これはいわば 「精神的な便秘」 です。
クソ業務を頼まれたのに、「クソ業務！！！！」と言えないのは辛いですよね？
（注：私はクソ業務を頼まれていません）
でも、既存の「愚痴りサイト」は単にテキストを投稿するだけでした。
しかし、我々が求めているのは 「物理的な排出感（カタルシス）」 ではないでしょうか？
そこで私は、 「入力した愚痴を質量のある物体（💩）に変換し、物理演算で積み上げ、豪快な水流で洗浄する」 というソリューション、『クソ流し (KUSO FLUSH)』 を開発しました。
📱 デモ・アプリはこちら
https://kusoflush.com
(※音が出ます)
技術スタック：クソアプリに課金はできない
「ネタに固定費はかけられない」という鉄の掟のもと、以下の完全無料スタックを採用しました。
| カテゴリ | 技術 | 選定理由 |
|---|---|---|
| フロントエンド | Vanilla JS | フレームワークなしで軽量化 |
| 物理エンジン | Matter.js | 2D物理演算のデファクトスタンダード |
| ホスティング | Cloudflare Pages | 商用利用OK・帯域無制限・爆速 |
| サウンド | Web Audio API | ファイル容量削減のため |
| 解析 | GA4 | 「流されたクソの総量」を計測するため |
実装のポイント：無駄なこだわり
ただのジョークアプリですが、ユーザー体験（UX）のために無駄に技術力を投入しました。
1. Matter.jsによる「排泄感」の追求
最初はDOM要素を物理演算させていましたが、スマホで「特大の愚痴（100個以上のオブジェクト）」を生成するとFPSが低下しました。
そこで、Canvas API を使用したレンダリングに切り替え、数百個のオブジェクトが衝突しても60fpsでヌルヌル動くように最適化しています。
// 実際のレンダリングループ（イメージ）
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
objects.forEach(body => {
// 物理演算の座標に合わせてCanvasに絵文字を描画
// DOM操作を行わないことで高速化
ctx.save();
ctx.translate(body.position.x, body.position.y);
ctx.rotate(body.rotation);
ctx.fillText('💩', 0, 0);
ctx.restore();
});
requestAnimationFrame(render);
}
2. ファイルを使わない「動的サウンド生成」
排泄時の「プリッ」という音や、水洗時の「ジャー」という音。 フリー素材を探すのが面倒だったのと、読み込みを速くしたかったため、Web Audio API を使ってプログラムで音を合成しました。
// 水洗音（ノイズ）をオシレーターで合成するイメージ
const oscillator = audioContext.createOscillator();
oscillator.type = 'sawtooth'; // ノコギリ波
// 周波数を下げていき「ジャー」という音を作る
oscillator.frequency.exponentialRampToValueAtTime(40, audioContext.currentTime + 2);
oscillator.start();
これにより、音声ファイルなしでブラウザがその場で音を奏でる仕様になっています。
でも、公共の場で音が出ると恥ずかしいというフィードバックを受けて、実装したはいいものの、音はオフにしていますw
3. 非エンジニア流「AIペアプログラミング」
私はJavaScriptが書けません。すべてのコードは AI（ChatGPT） とのペアプログラミングで生成しました。
特に苦労したのは 「ウンチの弾性」 の調整です。 「もっとボヨンボヨンさせて」「流すときは渦を巻くように吸い込んで」といった、エンジニアが聞いたら怒り出しそうな指示をAIに投げ続け、理想の挙動を実現しました。
学んだこと
・物理演算は癒やし: オブジェクトが積み重なり、崩れる様を見るだけで人は癒やされます。
・技術の無駄遣いは楽しい: 「ウンチを流す」ためだけにCanvasの描画ロジックを最適化している時が一番楽しかったです。
・Cloudflare最強: これだけの機能を持っていてランニングコスト0円は個人開発の味方すぎます。
おわりに
年末のデトックスに、ぜひ『クソ流し』をご活用ください。 もし気に入っていただけたら、LGTM（いいね）をお願いします！
🚽 クソ流し (KUSO FLUSH) https://kusoflush.com