サブスクのプレイリストからカラオケ収録曲を抽出するサービス【今年中に開発したい】
masa5714昨今のエンタメ
- テレビ発で流行するだけの時代は結構前に完全に終わっている。
- YouTubeやサブスクによって音楽の多様化が進んでいる。
- アルゴリズムによる人気の偏りが著しいものの、"音楽はインターネット上で聴くもの" と定着したためネットでディグるのが当たり前になった。まだ売れていないアーティストも結構な人数に聴かれるようになっている。（2014年頃の10万再生の価値が2024年では50万再生ぐらいになったと感じている。）
課題
- 多様化が進みすぎて自分の中では有名な曲なのにカラオケに収録されていない曲が多すぎる。めちゃくちゃ検索かけないといけない。
- だが、デンモク等での検索があまりにも怠すぎる。
解決策
- YouTubeやサブスクのプレイリストとカラオケ機器の楽曲を紐付けしてどれが歌えるのかを抽出する。
- カラオケ機器へと直接予約を投げられるようにする。（HTTPリクエストで投げられることを確認済み。）
頭の中にはずっとあったアイデアだが、なかなか手を動かすまでには行かなかった。
スクレイピング技術に対する自信がかなり付いて、そんなに難しくないアイデアなのでそろそろ実現することにした。また、紐付け作業でページレンダリングを大量にしなきゃダメそうだけど、Android端末を買い集めたので遂に実現してもよさそうだなという気持ちになった。あとはテンプレートマッチングによるスクレイピングも確立できたのでDOMがどんなに複雑でも耐えられるようになった。
masa5714ロゴ
MINT mate box というバンドが好きで名前も好きだったことからパクった。ロゴ自体には何ら意味はない。後付するならばサブスクとカラオケの障壁を取り除くことを表している的な感じ？
mateの意味をググるとなんか深そうな意味にこじつけできそうｗ
masa5714誰でも思いつくアイデアだけどなんで存在しないワケを考える
アイデアを思いついてから2年ぐらい経つが未だに誰もやろうとしない。
そこにはなにか理由があるはず。考えてみよう。
- お金にならない。マネタイズ無理くね？
- カラオケ機器、サブスク両者の権利を侵害しているような気がしなくもない。ただ、データ加工による価値の創出によりカラオケ業界への貢献はできると思う。（サブスク側への恩恵が薄いが。）
- カラオケに頻繁に来るような人しか使わなそう。
- データベースを作るのが手間すぎる。紐付け作業に人力作業が含まれることになる。
- スクレイピングがそれなりに大変である。
- みんなAIに夢中。
ポジティブなことを考える
- 普通にめちゃくちゃ便利そう。
- カラオケという性質上、友達などに勧める可能性が期待できる。口コミによる拡散の可能性が十分にある。
masa5714マネタイズを考えてみる
- プレイリストのXXXX曲目以上の解放は動画広告を見ろ！嫌なら課金してくれ！系のやつ。
- アーティストのチケット情報掲載。チケット販売のアフィリエイトリンク。IPアドレスから都道府県を検出して県内の情報を先頭に取り出して出力する。
masa5714運用費用
Cloudflare Pages + Supabase + Cloud Storage（GCP）で運用していく。
ドメイン代はかかるものの、それ以外はほぼ0円でいける。Cloudflare R2を使わないのは特別な理由はないが小さな画像をたくさん読み込むことになるサービスだと思われるので、リクエスト数で課金されるのは適さないだろうと判断したため。
masa5714デザイン苦手すぎるから実装し始めた
figmaの使い方ほとんど分からない。
オートレイアウト使うとabsoluteっぽい要素をどうやって配置できるのか分からなかったり、ちょっとした変更がそこそこ辛い。やっぱり実装しながらデザイン決めた方がイメージしやすいなぁってことで実装を開始している。
masa5714トップページ（LP）
冒頭で共感を求め、ファーストビュー内で何ができそうか推測できる訴求を掲載することにした。言葉が多めになってしまうところを少なめに認識してもらえるように考えたつもり。
masa5714新規登録 / ログイン
新規登録とログインは同じページから行えるようにする。（というか、Supabaseがそうしてくれる。）
フォームは置かないことで実装コストを下げる。
下部の「Supabaseで保護されています。」は海外サイトで見かけた「Secured by ◯◯◯」がかっこいいなと思って付けてみた。
masa5714ホーム（認証後）
冒頭に機種とサブスクと同期ボタンを設置。
設定ページに置くことも考えたが、切り替えのしやすさは重要だろうと考えて剥き出しにしておいた。
マネタイズとしてのスポンサード
マネタイズが難しいサービスだと感じたので、スポンサードという欄を設置することにしてみた。一般のファンが好きなアーティストを拡めるために身銭を切って出稿したり、企業などが動画広告を出稿できるようにする。
少しでも広告へのストレスを下げる取り組みとして、動画は自動再生ではなく、能動的にタップしてもらう形式を採用する予定。
カラオケ収録抽出結果ページを閲覧するには4ページ閲覧毎に、スポンサードの動画を15秒再生しなければ開けないという仕様 にしようと考えた。となると、ユーザーとしてはこのスポンサード欄がほぼ全員に観られるものだと認識することだろう。そして、熱狂的なファンはアーティストを全力で応援したいものである。（根拠は無い。アイドルやインディーズバンドが好きな僕の経験に基づくだけ。）
誰でも出稿可能な低価格な広告欄として気軽に掲載できる環境を提供する。昨今の投げ銭文化を鑑みれば課金勢が現れても不思議ではないと思う。（サウナイキタイにもユーザーメリットの無い謎のロッカーシステムに課金するヘビーユーザーが居たりするし。）
スポンサード自体が発見のコンテンツでありながら、スポンサードが邪魔なら有料課金すれば非表示という選択肢を用意したい。
出稿が無い場合は編集部側がピックアップした動画を掲載するようにする。
プレイリスト一覧
プレイリストの画像をサブスクから取得して出力する。プレイリスト内のカラオケ収録割合を円形のプログレスみたいなやつで表現する。感覚的にページを開く価値を認識できるかも？ってことで。
デザインの工夫としてサムネの上下にグラデーションを付与した。（サブスク側のデザインパクっただけだけど......。）グラデが無いと背景と画像でパキッと別れてしまいマッチ感がなかった。グラデつけるだけで全然違った。今後の開発にも取り入れていきたい手法だった。
▼グラデ無し版
キャプチャ上で見るとそんな悪くもないが実機でみるとグラデあった方が圧倒的に馴染んていた。あと、タイトルや情報への集中力が切れる感じがする。
masa5714ダークテーマっぽいデザインすごく簡単かも。
デザインが苦手な人は多分ダークテーマから始めた方がいいかも。
#222 や #333 などすごく簡単なカラーコードで強弱を付けていけば良いだけだった。デザインが全くできない僕ですら、上のキャプチャたちは結構それなりにモダンな見た目になっていると自信がある。謎の自信が湧いてきた。笑
ライトテーマはダークテーマを基準にして配色を考えていけば、そんなに滅茶苦茶なデザインにはならないんじゃないかなと感じた。
ということで、個人開発はダークテーマから作り始めた方がいいぞ！
（そもそもライトテーマよりもダークテーマの方が人気だし。最悪ライトテーマ作らんでもいい。）
背景色は #000 よりも #222 の方が濃淡の余地があり良かったという情報も共有しておく。#000 よりも濃い色は存在しないワケで。 背景よりも強い色を使える余地を残すのがデザインに必要 なんだなーとも感じた。
masa5714技術的にできるけどやらないこと
DAMもJOYSOUNDもQRコードで標準アプリで連携して、スマホから予約を投げることができる。この通信方法をプロキシ挟んで解析してみたところ、HTTPリクエストをPOSTするだけで実現しているようだった。実際に認証情報を抜き出して Postman で任意の曲番号を投げた結果、普通に予約できた。
しかし、これはハック的な要素が強く、不正アクセスに該当すると感じた。
スクレイピングについて何も思わない僕ですらさすがにここまでは踏み込んじゃダメだと思ったのでやめておく。
masa5714Vaulというライブラリが最高すぎるぞ！
ハンバーガーメニューとか自分で実装する必要すら無いレベル。
これを使う前提でデザインを組んだ方が絶対いいぞ。