2021-08-28

【個人開発】Webサービス「東方同人音楽流通検索」をリリースしました🎉

東方原曲個人開発東方アレンジ東方サブスク東方同人音楽流通東方同人音楽流通検索

こんにちは、迷い家の白猫のシロです。

本日、2021年08月28日にWebサービス「東方同人音楽流通検索」をリリースしました🎉

東方カラオケ検索に続き、東方楽曲の検索サイト第2弾です。

どんなサービス？

タイトルで見て分かる通り、東方同人音楽流通経由で配信されている東方楽曲をサークル名・アルバム名・楽曲名・原曲名で検索することができるサービスです。

対象音楽配信サービス
- Spotify
- Apple Music

その他の音楽配信サービスは、対象外です。対応する予定はありません。

本日(8/28)の配信楽曲までカバーしています。

※非公式サイトです。あくまでも個人開発です。

機能

サークル名・アルバム名・楽曲名・アーティスト名・原曲名で検索
高速検索、あいまい検索
モバイルフレンドリー
アルバムのジャケットやアルバム名をクリック/タップすることで、音楽配信サービスのアルバムページに移動
アーティスト名をクリック/タップすることで、音楽配信サービスのアーティストページに移動(Spotifyのみ)
楽曲をクリック/タップすることで、音楽配信サービスの楽曲ページに移動

おことわり

現在、全文検索サービスやホスティングサービスの、無料プランで運用しております。
利用数が増えると無料枠を超える可能性がございますので、サイト継続のため広告(Google AdSense)の設置を予定しております。ご了承ください。

画面

PC画面
- トップ画面
- 検索画面
モバイル画面
- トップ画面
- 検索画面

現在は諸事情で初回表示していますが、初回表示されないように変更する予定です。

画面説明

f:id:shiroemons:20210827222040p:plain

その他

今回のトップ画面に、東方サブスクランダム選曲アプリへのリンクを設置いたしました。ランダムで東方楽曲を1曲選曲してくれます。こちらも合わせてご利用ください。

対象音楽配信サービス
- Spotify
- Apple Music
- YouTube Music

雑記

東方楽曲のサブスクが開始される前から作りたかったサイトです！

21日から東方アレンジのサブスク解禁されるけど、絶対起きる何が配信されているかわからない問題

約1万7000曲配信されても、聴かれなかったら意味がない

これを解決するポータルサイトとか作りたい...
原曲で配信されてる楽曲絞り込みたい
配信される曲リストプリーズ
— シロ (@shiroemons) 2020年12月17日

ポータルサイトではありませんが、原曲名で検索できるようになり大変満足です！

いつから作り始めたか

検索データは、8月1日頃には準備できていました。サイトは、今月の8月20日から作り始めてから、22日頃には公開できるレベルまで作りました。

こちらを見てもらえると少しだけ経過がわかります。

技術系のお話

この話は、Zennで記事にしようかなと思っています。軽く話しておくと...

東方同人音楽流通の情報収集アプリ(touhou_music_discover)
- Ruby v3.0.2
- Rails v6.1.4.1
東方同人音楽流通検索のフロントエンド
- Next.js v11.1
- React.js v17.0.2
- TypeScript v4.3.5
- Tailwind CSS v2.2.7
- ホスティング: Vercel
東方同人音楽流通検索のバックエンド
- 全文検索サービス: Algolia

OFUSE(オフセ)

支援していただける方がいましたらこちらから、お願いいたします🙇‍♂️

ofuse.me

東方同人音楽流通検索

music.touhou-search.com

今後とも、迷い家の白猫をよろしくお願いいたします🙇‍♂️

2021-08-27

「東方同人音楽流通検索」ができるまでの道のり

東方サブスク東方アレンジ東方原曲東方同人音楽流通東方同人音楽流通検索

発端はサブスク配信開始前(2020/12/17)

21日から東方アレンジのサブスク解禁されるけど、絶対起きる何が配信されているかわからない問題

約1万7000曲配信されても、聴かれなかったら意味がない

これを解決するポータルサイトとか作りたい...
原曲で配信されてる楽曲絞り込みたい
配信される曲リストプリーズ
— シロ (@shiroemons) 2020年12月17日

サイト作る宣言(8/1)

東方のサブスク

今月(8月)の宿題
東方同人音楽流通の非公式ポータルサイトを作る

とりあえずAlgoliaにデータは準備した。
※Spotify限定予定 pic.twitter.com/DdsYO4CMRX
— シロ (@shiroemons) 2021年7月31日

完成させる！と心に誓った瞬間

東方のサブスク

今回公開するサイトを作るモチベーションを上げてくれてありがとうございました。
このいいねが無かったら多分、完成しなかったと思います。

このいいねがあった瞬間に、あっ完成させないと行けないやつだ！とグッとモチベが上がりました。🙇‍♂️ pic.twitter.com/LplzP5Y501
— シロ (@shiroemons) 2021年8月24日

作成開始(8/20)

まだまだ試行錯誤中 pic.twitter.com/bATzfMYbOK
— シロ (@shiroemons) 2021年8月19日

原曲で検索できるようにしてるの pic.twitter.com/UWIEJOetWd
— シロ (@shiroemons) 2021年8月19日

まだノープラン pic.twitter.com/j8mGNFSNqb
— シロ (@shiroemons) 2021年8月19日

まだまだノープラン pic.twitter.com/AvDLQ0yVKW
— シロ (@shiroemons) 2021年8月20日

なんかそれっぽくなってきた気がする pic.twitter.com/6HLhIv9nTb
— シロ (@shiroemons) 2021年8月20日

だいぶそれっぽくなってきた！ pic.twitter.com/1voFBnjKKK
— シロ (@shiroemons) 2021年8月20日

完成形が見えてきた気がする pic.twitter.com/PMgyLdiFSt
— シロ (@shiroemons) 2021年8月20日

いい感じになって来た気がする pic.twitter.com/b2FnG1kwX9
— シロ (@shiroemons) 2021年8月20日

それなりに動くものできた

それなりに動くものが出来たっぽい pic.twitter.com/EFYF85IGHc
— シロ (@shiroemons) 2021年8月20日

レイアウト修正に本気出す/完成(8/22)

東方のサブスク

だいぶ公開できるレベルになってきた！ pic.twitter.com/hVGg8qgLff
— シロ (@shiroemons) 2021年8月21日

少し機能紹介

東方のサブスク

公開前にちょこっと機能紹介

ジャケット画像やアルバム名をタップするとアルバムのページに飛びます。 pic.twitter.com/M7LtwfbPYq
— シロ (@shiroemons) 2021年8月23日

リリース(8/28 9:00)

【⚡リリースのお知らせ⚡】
本日「東方同人音楽流通検索」をリリースしました🎉

東方同人音楽流通経由で配信されている東方楽曲を検索することができるWEBサービスです‼️

■対象サービス
・Spotify
・Apple Musichttps://t.co/PXd0X0jML4 #東方同人音楽流通検索
⛩#東方アレンジ活性化大作戦⛩
— シロ (@shiroemons) 2021年8月28日

2021-08-12

東方同人音楽流通配信曲リスト

東方同人音楽流通東方サブスク東方アレンジ東方

東方同人音楽流通で配信されている楽曲をリストでまとめました。

docs.google.com

※ Spotify、Apple Musicのみまとめてます。

情報収集アプリを自作して、調査しています。

github.com

2021-06-12

FerrumをHerokuで動かすためにやったこと

github.com

特に設定を行わずに、Herokuでferrumを実行した場合、以下のようなエラーが出力される。

/app/vendor/bundle/ruby/3.0.0/gems/ferrum-0.11/lib/ferrum/browser/command.rb:32:in `initialize': Could not find an executable for the browser. Try to make it available on the PATH or set environment variable for example BROWSER_PATH="/usr/bin/chrome" (Cliver::Dependency::NotFound)

やったこと

Herokuにbuildpacksをセットする

$ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-multi.git --app [アプリ名]

.buildpacksを準備する

$ touch .buildpacks

.buildpacks

https://github.com/heroku/heroku-buildpack-ruby
https://github.com/heroku/heroku-buildpack-chromedriver.git
https://github.com/heroku/heroku-buildpack-google-chrome.git