メインコンテンツへスキップ
見出し画像

自作アプリ「Song2Game」-あなたの音を音ゲーに。

    「だれでも曲を音ゲーにして配れたら面白い」
    と思って、つくりました。
    Song2Game というブラウザアプリです。

    手持ちの音楽ファイル(mp3など)をブラウザにドラッグするだけで自動で音ゲーに変換できます。スマホもパソコンもOKです。
    触ってみて、ぜひご意見ご感想くださいませ。

    ▶ 使ってみる

    まずサンプルゲームで遊んでみてください。

    https://song2game.vercel.app

    ▶サンプル曲提供
    志村ユリカさん
    Spotify:

    本当にありがとうございました。

    ▶ 動作環境
    PC・スマホ両対応。

    画像

    ⸻

    ■ こんなことができます

    ▼ 音源ファイルをドラッグするだけでリズムゲームに

    MP3 / WAV / M4A 等の音源ファイルをブラウザにドラッグすると、自動で解析して譜面が作られ、その場ですぐ遊べます。会員登録もインストールも不要です。
    自動、ということで、細かいことは気にしないでください。

    サンプル曲も 3 曲入っているので、自分の曲を用意しなくてもまずは試せます。

    画像
    基本はドロップするだけです。

    ▼ アレンジ機能

    スタート前に色々アレンジできます:

    ・背景色 / テーマ / 波模様アニメーション
    ・歌詞の追加・タイミング調整
    ・レーン数(1〜4 / ダブルあり)でむずかしさ調整

    画像
    背景色等、色々変更できます
    画像
    歌詞の調整

    歌詞タイミングは、自動だと精度がかなり厳しいので、ほぼ手動調整になります。(やりたい人だけの機能です…)
    追記:歌詞タイミング機能、強化しました。

    ▼ 作った音ゲーは 3 通りで配布できる

    方法 1:☁ クラウド公開
    URL 1 つで誰でも遊べる(リンクを共有するだけ)

    方法 2:📦 HTML として書き出し
    配布、自分のサイトに埋め込める

    方法 3:📦 .s2g として書き出し
    他端末で続きを編集できる

    ⸻

    ■ こだわった点

    画像

    ▼ 「音楽家が自分の曲をプロモーションできる」を意識しました

    「自分の曲を音ゲー化して SNS に投稿する → 友達が遊ぶ → 元の音楽に興味を持つ」というフローを想定しています。
    ゲームの雰囲気も曲の世界観にあわせてカスタマイズできるようにしました。

    「私の曲を音ゲーにしました!」

    そうやって遊んでもらえたら、ちょっとした宣伝になるはず。

    ▼ プライバシー重視

    音ゲー化処理はすべてあなたの端末内(ブラウザ内)で行われます。
    クラウドに送られるのは「☁ クラウドに公開」ボタンを自分で押した時だけ。それ以外は曲が端末から出ません。

    ⸻

    ■ 機能の区別

    ▼ 無料機能(登録不要)

    ・自動音ゲー化(レーン 1〜4 / ダブルあり)
    ・背景色(全体一括)
    ・差し色(accent)
    ・波模様アニメーション(5 種類のプリセット)
    ・動画 / 静止画切替(端末負荷に合わせて)
    ・歌詞の追加・編集
    ・3 つの配布方法すべて

    ▼ 有料機能(BOOTH で解放パスを販売中・¥500(暫定価格))
    現在全機能解放中です!

    BOOTH 商品ページ
    https://kinomeno.booth.pm/items/8493257

    ・ロング曲対応(無料 3 分 → 10 分まで)
    ・デザイン選択(シーン別の背景色・画像・演出プリセット)
    ・譜面密度の細かい調整(±20%)
    ・ランキング公開(自分の公開ゲームに 10 位ランキングを載せる)

    買わなくても、基本機能だけで一通り遊べます。気に入った人だけ、解放パスをどうぞ。

    ⸻

    ■ ご支援のお願い

    このアプリは個人で開発・運営しています。気に入っていただけたら、以下のいずれかでご支援いただけると、開発の励みになります:

    💛 note の記事サポート機能
    (この記事の一番下のサポートボタン・100 円から)

    ☕ Ko-fi でコーヒー1杯
    https://ko-fi.com/kinomeno
    (ワンクリックで投げ銭・海外からも対応)

    ✨ BOOTH で全機能解放パス
    https://kinomeno.booth.pm/items/8493257
    (¥500・有料機能の解放 = そのまま開発支援に)

    どれも本当にうれしいです。

    ⸻

    ■ 開発裏話など

    技術スタックは以下のとおりです:

    ・フロント:React + Vite
    ・ゲームエンジン:Canvas 2D + Web Audio API(自前実装)
    ・クラウド:Cloudflare Workers + KV + D1
    ・ランキング:Supabase
    ※私にはよくわかりません(!)

    「ブラウザで完結する音ゲー」というジャンルはあまり例がないので、UI / UX 設計はかなり試行錯誤しました。1 つの画面でドラッグ → スタート → リザルト までスムーズに行けるように、何度も作り直しました。(AIが)

    実装の詳細や苦労した点については、別の記事で改めて書こうと思います。

    ちなみに、例によって、私は一文字もプログラムを書いていません。やばい時代です。
    でも、一番の収穫は、自分でこういう、割と本格的に役にたちそうな(たたなそうな)ツールが作れたこと、かなと思います。
    読んでいただきありがとうございました。

    ⸻

    ■ お問い合わせ

    不具合・改善要望:この記事のコメント、または X。
    https://x.com/kinome_no

    ⸻

    🎵 さあ、あなたの音楽を音ゲーにしよう。

    ▶ Song2Game を遊ぶ
    https://song2game.vercel.app



    プレイ動画

     
     
    いろいろなことに興味が向きます。なんと日本から出たことがありません。

    あなたへのおすすめ