mimonjo

みつきくらしげ文書

NEXTLIGHTのReleasesページを改造しました

2024/10/29 2:35:40

新しい Releasesページ が公開されました 🎉

新しいReleasesページ

変わったところ

シングルリリースの掲載

シングルとしてリリースされている作品の掲載をスタートしました!

シングルリリース

現状はコンピレーションアルバムに収録されているものが、一足先に聴ける感じになっています。
が、きっとそのうちシングルリリースでのみ聴くことができる楽曲もリリースされることでしょう。

そういったものもNEXTLIGHTが贈る尊いボカロエレクトロなので、しっかり掲載してまいります。

サンプルパックの掲載

NEXTLIGHTは NEXTLIGHT PRODUCER PACK と称してサンプルパック、プリセット集の販売を行っております。

NEXTLIGHT BOOTH

この変更からサンプルパックたちもコンピレーションアルバム、シングルリリースと同じくReleasesページへの掲載が始まります!

Reno Serum Essentials

とはいえ、これは仮のデータなので見せられるものは何もないのですが…
いくつかのサンプルを単体で聴けるようになるので、気持ちよく購入に踏み切れると思います…!

いい感じのフィルタリング・アニメーション

コンピレーションアルバム、シングルリリース、サンプルパックが全て同じページに詰め込んだため、目的のものが探しにくくなってしまったことでしょう。

でも安心。
カテゴリごとの絞り込み表示が行えます!

Twitterでみる
(すいません、動画を埋め込める仕組みをまだ作ってないのでTwitterでみてください...)

シャラララッ、とカードのように心地よく動いてくれてぼくもうれしいです。
nextlight.io では色々な要素に Framer Motion というフレームワークでアニメーションをつけています。
ここではAnimatePresenceを使ってフィルタリングによって見えなくなったり見えるようになったりしたものをいい感じに動かしています。

これ、全部を自力で作ろうとするとかなり面倒くさいんですがぜ〜〜〜んぶFramer Motionがやってくれたのでひじょ〜〜〜に簡単でした。
しかもAnimatePresenceを使うとイイヨというのはChatGPTが教えてくれました。もしかして人間いらない?

たのしい

シングルリリース用、サンプルパック用に別途データ構造を作ってこれらの機能を作ったので若干扱いが面倒ではあるものの1かなり自由に作り分けができる設計を行いました。

なのでコンピレーションアルバムではXFDのYouTube埋め込みをしていた箇所がシングルリリースではTwitter (現X(笑)) の埋め込みにしていたり、サンプルパックのページでは独自の機能を提供しています。

また新しいフォーマットのコンテンツが出てきたらデータ構造を見つめ直さねばなりませんが、しんどくなるまではこれで戦っていこうと思います。

バグや掲載情報の誤りなど見つけた場合はお気軽にお申し付けください!
以上、業務報告でした。

Footnotes

  1. 例えば一覧を出したいとき、コンピ、シングル、サンプルパックの3種類の一覧を別々で取ってきて合体させている。表示したいときはコンピ、アルバム、シングルのどれであるかを確認した後、適切なUIにはめ込んだりしてる。めんどくさかった。