サブスクで聴けるアイマス楽曲のまとめサービスを作成・正式に公開してから、おおよそ2週間が経ちました。公開した後も特にフロントエンドには多数の改修を加えました。

STREAM@S

前回の記事はこちら

サブスクで聴けるアイマスの音楽を見つけてシェアできるWebサービス - STREAM@S | Lon Sagisawa

反響

ろくに宣伝をしておらず、個人のTwitterにも鍵をかけていることもあり、急遽作成したサービス用アカウントのお知らせツイートはほとんど伸びていません。それでも数名のWeb開発者のPの目に留まり、数日前からバックエンド側の楽曲データの補完のプルリクエストをいただいています。アイマスSKK辞書以来の反響で、この感触は久しぶりです。

Add MILLION THE@TER GENERATION 01 - 18 by hizumiaoba · Pull Request #6 · lonsagisawa/stream-api.kitahina.co

行った改修

まず公開時の記事に書いた予定にあった改修は全て行いました。

• ブランド追加対応
  • ミリオンの9thライブがあったので、それを意識してミリオン対応を入れました
  • まだ全曲対応ではありませんが、外部からのコントリビュートを得られており、思っていたよりかなりスムーズに進みそうです
  • SideMはMoIW後辺りに着手、3月15日をターゲットにやろうと思います
• OGP対応
  • VercelのEdge Functionを使いました。おそらく全部自前でやるよりは楽だろうとは思います
• SNSシェアボタン
  • TwitterとDiscord辺りと考えていたらDiscordはその手のボタンを置けないらしく、現状はツイートボタンのみです
  • Pが実際に使ってるSNSって何だろう？Twitter以外はインスタぐらいしか思いあたる所はないんですが
  • imastodon.netを含むFediverseに移住する人も増えてくると思われるので、URLをクリップボードにコピーするボタンなんかは需要があるかもしれない
• バックエンドのフレームワークをHonoに移行
  • 若干手間取りましたがコードの見通しがとてもスッキリしました

その上でさらに

• お知らせページ作成
  • 思ったより使わないのでTwitterに統合しようと思っています
• 検索
  • 諸々ありAstroのスターターを徘徊していたところFuse.jsを発見し、フロント側が現状非常に軽量なためちょっとぐらい重くしても問題ないこと、Algolia等のソリューションよりSTREAM@Sには合っているということで即導入
  • データセットの関係であまり実用性がないので、そこはそのうち拡充したい

を追加しました。

今後行いたい改修

実運用に入り、特に楽曲数の多いミリオンライブまわりで問題が出てきたためその解消・省力化にリソースを割いていきます。

• 掲載しているアルバムの拡充
  • これは最優先で、ミリオンライブは今月中に完了させる見込みです
  • 短期的にはミリオン9thで披露された楽曲は1月19日(ミリラジ感想回)までに網羅
  • 先述しましたが外部からのコントリビュートもあるので、想定していたよりはずっと早く終わりそうです
• アルバム一覧のAPIからの自動生成
  • ミリオンライブの楽曲ページのソースはPrettierを通した状態で560行を越え、大変なことになっています
  • これをAPIからの情報でなんとか自動化できないかということです
  • Deno Deployに新しいソースをデプロイした時点でWebhookを発火させる、といったことはできないようなので、デプロイを走らせるのは手動になりそうです
  • これができればよりSTREAM@SのアーキテクチャはJamstack的になり、SideMの追加もかなり楽になるはず
• 検索まわりの拡充
  • 曲名から収録されているアルバムを調べられるようにする程度にとどめる予定です
  • きまぐれユモレスクがどのCDに入っているか、即答できるPはそんなに多くないはず
  • データセットの量がさらに増えるので、これも負担は大きいですが、貼るサイド以上に聴くサイドの体験がかなりよくなるはず
  • ふじわらはじめAPIの活用も検討しています
  • シャイニーカラーズがサブスクに開放している楽曲数はこういう実験をするのにはちょうどいいので、まずシャニでやってみるのも良いかもしれない
• CSSの整理
  • Tailwindによって効率よく見た目のよいサイトができているわけですが、一方コードに関してスパゲッティとまでは言わないにしろ、非常に見通しが悪くなっています
  • CSS Modulesと@applyディレクティブを駆使して見通しを良くします
  • コンポーネントの適切な切り出しなども入ってくるので、フロントのリファクタリングに近い作業になりそう

STREAM@Sではご意見・ご要望も募集しています

現在めっちゃ作りたいモードなので、ご要望に関してはkitahina.co ServicesのTwitterアカウントへのリプライ、GitHubアカウントをお持ちの方はお気軽にリポジトリにIssueを立てていただければ、すぐに検討いたします。また楽曲データのコントリビュートも歓迎しております。
またSTREAM@S使ってるよ、応援してます、といったお気持ちは、kitahina.co Servicesアカウントへのフォロー、告知ツイートのリツイート/いいね、リポジトリへのStarを送っていただければこちらに届きます！是非どんどん使って楽しんでください。