楽曲”樹”録機能を追加しました
投稿日：
更新日：
PTfansをご覧いただきありがとうございます。
「楽曲”樹”録」という機能を本日追加しました。（日本語版のみ、英語版は後日公開予定）
備忘録として、また実装までの道のりをここに書いておこうと思います。
前置き：
PTfansというファンサイトを作ろうと思った理由の一つが、プラが過去に世に出した音源の記録をまとめたいという気持ちでした。
ご存知の通りプラは30年を超えるキャリアの中で所属事務所、レーベルの移籍を何度も経験しており、最新のオフィシャルサイトには移籍前にリリースした音源の情報はありません。
また現在主流となっている音楽配信のサブスクサービスでも、一部音源は未だ聞くことができず、名曲の数々の情報が確認しづらい状況です。
そこで新たにPlastic Treeを好きになった人にも、長年応援している海月にも使いやすいような形で、データベースを整理し、誰でも使えるような形とすることで、微力ながら記録を残そうと思いました。
まとまっている情報：
現状、曲ごとに以下の項目をまとめました。
・収録されたCDの種類
・CDの発売日
・CDのタイトル
・CDの中で曲順は何番目なのか
・曲名
・バージョン（rebuild、など）
・作詞、作曲者
・歌詞のリンク※うたネットに掲載がある場合のみ
・各音楽サブスクのリンク※配信されている場合のみ
・YouTubeの動画リンク ※公式にMVまたはPPPダイジェスト映像がある場合のみ
曲がシングルで発売された後、アルバムにも収録された、など複数回音源になっている場合は音源化された回数分すべて、行が表示されることになります。
曲数とCD枚数は検索結果の上に表示させるようにしましたので参考になるかと思います。
「Sinkって今まで何回CDに収録されたんだろう？」「アキラさんの作曲した曲は何曲あるんだろう？」そんな情報も検索することが可能です。
サブスクとYouTubeリンクは画面幅が狭いスマホでは非表示としています。検索結果が横に広くわかりづらくなってしまうので…リンクをみたい場合は画面を横に傾けてみてください。ほとんどのスマホであれば表示できるかと思います。
実装までの技術的なはなし：
今回はWordpressプラグインのTablepressを用いてJavascriptにて動作させています。
カスタムHTMLブロックで用意した検索ボタンが押された後、テーブルをフィルタするJavascriptが実装され、検索結果としてページ上に返る形をとっています。
必要な楽曲のデータベースはトップページの「今日の1曲」実装時にすでにスプレッドシートにまとめていましたので、今回まとめ直す作業はなく、スプレッドシートをcsvで落としTablepressにインポートするのみでした。
今日の1曲実装時に考えていた通り、Google Apps Scriptを用いてスプレッドシートのデータをJSON形式に変換し、その中から該当する行のみを取り出して表示、としたかったのですが、結果を返した際のテーブルデザインがうまく調整できず、テーブルを埋め込むプラグインを使うことにしました。このポストをした時点ではまだGASを使おうと思っていたときですね。
Tablepressプラグインは直感的かつシンプルで使いやすいですね。ただ関数が使える訳ではないので、データベースの加筆修正がある際はスプレッドシートを追記→再度csvをインポートすることになるかなと思います。プラが新譜を出した際にこの作業が必要になります。
JavascriptのコードはGemini先生に随分と助けてもらっています。CSSは段々と自分でやりたいことが自分でできるようになってきましたので、レスポンシブ対応は大体自力で頑張りました。
いろんな形で検索し、不具合は潰したつもりではありますが、使っていくうちに出てくる部分も出てくるかなと思います。
ライブの予習復習に、Plastic Treeのお友達への布教に、こちらの機能をぜひ使っていただいて、何かあれば情報提供を何卒よろしくお願いします。
XでのリプやDM、お問い合わせフォームへの送信、マシュマロでのメッセージ、どこからでも構いません。
今回実装まで辿り着けて一仕事終えた感覚がすごいので、今後は細かなサイトのレイアウト変更などマイナーチェンジをしていこうかと思います。
英語版のリリースも近日中に頑張ります！
皆様も良い海月ライフを！