見出し画像

そうだ、VJに使う楽曲情報画像を自動生成しよう

あおお/A-ZERO

昨日、下北沢altotoにて#治安維持会 による東方ボカロ対戦 (#東ボカ) というイベントでVJをしました。その名の通り、東方サイドとボカロサイドに分かれてDJするイベントです。

MVが無い曲何を出せばいいんや問題

ボカロサイドは結構MVが豊富なので、アニソンVJ的な感じができるのですが、東方サイドは「MV全然ないやん。どうするよ」となりました。クラブVJをやってもいいのですが、ずっとはしんどいし。

そこで、同人系音楽イベントでよくみる、楽曲名・アーティスト名・アルバム名表示をやればいいのでは？ということで、真似して作ってみたらいい感じでした。

こういう画像をVJに重ねる

しかし、これをやろうと思ったのがイベント前日。今回の担当はDJ3人x約20曲分用意したい画像があってなかなかこれを手作業で作るのはしんどすぎる。。

そこで、本業でもお世話になっているデザインツールのFigmaを使って半自動化させることにしました。

Google スプレッドシートを準備

Google スプレッドシートで情報をまとめます。DJさんからセトリを事前提出してもらう必要があります。これはもうお願いするしかない。

rekordboxユーザーの場合、「プレイリスト > プレイリストをファイルに書き出す > テキストファイルとして書き出し(*.txt)」すると、Googleスプレッドシートへの記入が楽です。

最終的には以下のように整形します。画像のURLも入れます。

楽曲情報シート　1行目に名前をつける

シート右上の共有ボタンから一般的なアクセスを「リンクを知っている全員」にして、リンクをコピーします。

共有URLをゲット

Figma

ブラウザ上で動くWeb系で今最もイケイケなデザインツールです。（最近はAdobeに買収されて話題になってましたね）
PhotoshopとかIllustratorとかよりも、図や文字だけの簡易的な画像を作るならこちらを使ったほうがいいです。個人なら無料で使えます。

Figmaはプラグインが豊富でして、'Google Sheets Sync'というものを使うとGoogle スプレッドシートと連携できます。

レイアウト配置

16:9のFrameを作って、画像、タイトル、アーティスト、アルバム名の枠を用意します。
中身を変更したいパーツはGoogleスプレッドシートで1行目に書いた名前に `#` を頭につけて名付けます。

配置してみた図

テンプレ化するため、Frameに対してコンポーネント化しておきます

作りたい分複製しておきます


プラグイン 'Google Sheets Sync'

Figmaはプラグインが豊富でして、その中でGoogle スプレッドシートと連携する 'Google Sheets Sync' をインストールすると、Runができるようになります。

Runすると、ダイアログが出るので、Googleスプレッドシートの共有URLを入れ、Fetch & Sync を押します。

なんといい感じに曲情報が入るようになりました。ｳｵｵｵｵｵｵ

いい感じに入る

AutoLayout機能でさらにいい感じに

↑の画像をよく見てもらえればと思うのですが、長い名前が入った場合に表示崩れが起こってしまっているので、AutoLayout機能を活用すると文字数（中のコンテンツ）に応じていいかんじのレイアウトになってくれます。これがFigmaの強力なところですね。

クソ長い名前が入っても自動で再レイアウトされるので大丈夫
Before / After

実践

こうして、今回も無事治安維持出来ました。めでたしめでたし（？）

まだできそうなこと

楽曲情報からジャケット画像の手動取得

今回はジャケット画像URLは検索して入れる必要があり、そこは手作業になってしまいました。
`アーティスト名 AND アルバム名` で検索して画像検索結果の1番目を自動取得するスクリプトも組めばもっといい感じになるでしょう。
でもGoogle画像検索APIはもう死んだという噂なので難しいのかもしれない。IMPORTXMLでスクレイピングすればいけるかなぁ（未調査）

画像じゃなくて動画にする

出力をパーツ分けにしてAfterEffectsと連携し動画まで自動生成できればもっとカッコいいのですが、そこまでは流石に時間切れで無理でした。またの機会があれば。

この記事が気に入ったらサポートをしてみませんか？