【ハッピーハックデイ】SuperColliderを使ってPHP経由で音を鳴らす仕組みを作ってみた
エンジニアのTです。
フラッグシステムでは月に1回「ハッピーハックデイ」という取り組みがあります。
この日は開発部のメンバーが普段のプロダクト開発の手を止め、各々が「やってみたいこと」をします。
普段はプロダクトに関わる技術に触れる機会が多いので、プロダクトとは関係のない技術に触れ・共有できる貴重な時間です。
1日の流れは、ざっくり次のとおりです。
朝：テーマ発表
日中：もくもく作業
夕方：全員でやったことを発表
今回は、私が取り組んだ内容をご紹介します。
なぜこのテーマ？
きっかけはLaravel Live Japan2026のセッションで紹介されたテーマです。めちゃくちゃ面白くて、「自分でもやってみたい」と思いました。
SuperColliderとは
ざっくり言うと、音の設定値を渡すと音を鳴らしてくれる仕組みです。
たとえば次のような値を渡せます。
音色
長さ
音量
間隔
これらをSuperColliderに渡すと、音が出ます。
今回作ったのは、次のような流れです。
フロント → PHP → SuperCollider → PHP → フロントフロントから送った SuperCollider のコードを、PHP が SuperCollider に渡して音を鳴らします。
あわせて、SuperCollider から返ってきた再生イベントを PHP が受け取り、フロントがポーリングして可視化します。
その結果、ブラウザから操作して、ローカルの SuperCollider で音が鳴るところまで動かすことができました。
当日の流れ
出勤後、Slackでテーマ宣言してスタートしました。
宣言からお昼までのあいだに、
フロント → PHP → SuperCollider → PHP → フロントの経路は一通りつなげることができました。
お昼以降は、”フロントで音の流れる様子を可視化すること”に取り組みました。
Laravel Live Japan2026のセッションでも可視化されていてわかりやすかったので、自分でもやってみたかった、という理由です。
ざっくり指示を出してAIに任せつつ、簡単な発音マーカーを流すところまではできました。
残った時間で発音マーカーの作り込みと迷いましたが、発表用のメロディー準備に取り掛かることにしました。
発表用のメロディーもAIに依頼し、みんながよく知る曲の一部を流すことにしました。
いざ鳴らしてみると、メロディーの一部が変……。
調整を試みましたが間に合わず、「変なのも含めて聞いてもらおう」とそのまま発表に臨みました。
LTでは、仕組みの説明に加えて実際に音を流し、設定値次第で聞こえ方が変わるところや変なメロディーまで共有できました。
ざっくり指示でAIに作ってもらった発音マーカー。
発音4回ごとに赤い棒、それ以外を青い棒にして、強迫っぽく見せる（by AI）
音楽の知識はほとんどないんだけど…
私は音楽を「聞く専門」で、楽譜もかろうじて少し読める程度。絶対音感など当然ありません。
「メロディーなんて作れるのか？」と不安でしたが、設定値はAIに聞けば答えが返ってくるので問題ありませんでした。
大事なのは、仕組みを理解することだと感じました。
おわりに
今回私はSuperColliderとPHPをつないで音を鳴らすところまでやってみました。
「変なメロディー」も含めてみんなに聞いてもらえて、ちょっと笑いが起きたのがいちばんの収穫です（笑）
ハッピーハックデイは、毎月いろんなテーマの話が聞けるのが醍醐味です。
これからも楽しく続けていきたいなと思っています。
書いた人
開発 T＞バックエンドエンジニア。イーべ！開発チーム所属。金融機関での勤務経験を経てキャリアチェンジし、現在はシステムの裏側を支えています。金融業務で培った「正確さ」や「仕組みを整える視点」を、プロダクトづくりにも活かしたい。入社後、100キロウォークにはまりました。
本記事は、弊社エンジニアたちが、それぞれの視点や経験をもとに自由に執筆しているものです。そのため、記事の内容は当社の公式見解を示すものではありません。
NEWS一覧へ