VTuber「剣城まひる」さんの配信予定システム (非公式) をリリースしました

日付:

"はーれはれ" 1 期生「剣城まひる」さん

新人 VTuber 剣城 (つるぎ) まひるさんは, 2021 年 5 月から活動を開始した新しい VTuber プロダクション "はーれはれ" の 1 期生です.

そんな剣城まひるさんの 1 週間の配信予定を確認できるファンサイト (Web アプリケーション) およびそのバックエンドシステムを開発しました. 本記事ではこの Web アプリケーション・システムを紹介します.

なお, 剣城まひるさんについての紹介は京都大学バーチャル YouTuber 同好会 (京 V 同) のブログ "V推しなんしょ" にて公開しています. 下記よりご覧いただけます.

"剣城まひる 配信予定 [非公式]" の機能

Web アプリケーションを開くとすぐに 1 週間の配信予定を閲覧できます. 配信タイトルとサムネイル画像が表示されている場合はクリックまたはタップで待機所または配信に移動できます. (スマートフォンでアクセスしていて YouTube アプリがインストールされている場合は YouTube アプリが開きます.)

特にスマートフォンの場合, ホーム画面にショートカットを作っておくことをおすすめします. iOS / iPad OS の Safari と Android の Chrome で動作確認済です.

また, [自分のカレンダーに追加] ボタンから Google カレンダーやお使いのカレンダーアプリに登録が可能です. カレンダーを追加しておくと, カレンダーアプリ上で通知等の機能を利用できるようになります.

Q: なんで作ったんですか？

A: 自分が欲しかったから

初配信を自分の Google カレンダーに登録したことがきっかけです. 推しの配信を見逃したくないので, 今後もずっとカレンダーに登録しておくんだろうな, と思ったときに「他の人もカレンダーに手入力してるんじゃないか？」と気付きました.

剣城まひるさんの最初のチャンネル登録者数の目標は 5 万人 [1] ですから, そうなると毎回同時に 5 万回のカレンダー登録が発生することになります. これが 1 回にまとまったら良いのにな.... と感じたので, そうなるように作りました.

もしかしたらその頃にははーれはれ公式が配信予定を公開するつもりだったかもしれませんが....

Q: 自分のカレンダーに追加すると何が出来るんですか？

A: 色々できますが, 1 番のメリットは配信の任意時間前に通知を設定できることです

Google カレンダーの設定にて配信開始の任意時間前にリマインド通知を設定可能です.

その他, Web アプリでは今後 1 週間分の表示であるのに対し Google カレンダーでは過去の配信を含め登録されているすべての配信予定を確認できます.

また, Google カレンダーにも待機所 / アーカイブ動画の URL が記載されているので, そこから直接 YouTube にアクセスできます.

最後に

私は絵を描くのが得意ではないのでファンアートで活動を支援することが難しいです. 一方 Web システムの開発のような自分の得意な分野で推しの VTuber を支援できれば嬉しいなと思います.

剣城まひるさんのファンが増えたり, 今いるファンがより快適に推し事できたり, そういったところにこのサービスが良い影響を与えていれば幸いです.

お問い合わせ: https://ggtk.app/contacts

なお本記事は 2021/05/16 (日) にオンラインで開催された LT 会 "焼肉争奪戦！NU CAMP Dev&Pub LT Party presented by ねこもり" に登壇した際の発表内容を文章に整理したものです.

 
 
 
 

開発裏話

ここから先はより詳細な技術的な話や開発過程について知りたい人向けです.

システム概要

配信予約システムは Google Calendar API [2] , YouTube Data API [3] を使用して, Google Apps Script [4] と Firebase [5] 上で動作しています. システムの構成を以下に示します.


今の所, Google カレンダーに手動で予定を登録しています.

バックエンドの動き

最初はイベント名を空白にし, 配信開始日時を設定し, 詳細欄にタグを記載して保存します. イベントの新規作成をトリガーに Google Apps Script の特定の関数が実行され, タグをパースして配信開始日時とともに Cloud Firestore [6] へ保存します.

次に生配信の待機所 URL が公開されれば, イベントの詳細欄に URL を手動で追記して保存します. この編集の保存をトリガーに Google Apps Script の特定の関数が実行され, 待機所 URL に含まれる動画 ID を使って, YouTube Data API によって配信タイトルとサムネイル画像の URL を取得します. Google カレンダーのイベント名を取得した配信タイトルに変更し, 配信タイトルとサムネイル画像の URL を Cloud Firestore へ保存します.

フロントエンドの動き

フロントエンドのフレームワークには React.js を用いています. また, UI コンポーネントの中心に Material UI を用いています.

Web アプリケーションが Firebase Hosting [7] から Web ブラウザに読み込まれるとすぐに Cloud Firestore の所定のコレクションから 1 週間の配信予定を取得します. 取得した配信予定から配信開始日時, タグ, 配信タイトル, サムネイル画像の URL, 動画 ID を取り出して画面に表示します.

UI / UX デザインとシステム設計

このシステムを作ろうと思ってすぐに書いたこのメモだけで, 勢いで走りきりました. 一晩でリリースしたかった [8] ので Adobe XD と draw.io (diagrams.net) を開く時間が惜しかったんです. 許してください. ごめんなさい.

開発期間

git の commit 履歴を確認すると, 開発に取り掛かり始めて環境を整えたのが 2021/05/03 18:40 で, v0.1.0 (一番最初の) リリースは 2021/05/04 07:07 だったので, v0.1.0 の開発期間は 12 時間 27 分です. 半日くらいですね. 突貫開発ですみません.

"[非公式]" の位置が揺れている理由

  1. "剣城まひる 配信予定 [非公式]"
  2. "[非公式] 剣城まひる 配信予定"

の 2 つの表記を場所によって使い分けています. 使い分けている判断基準は「後半が省略された際に "[非公式]" を優先的に見せるべきか」です.

Web サイトのタイトル (Web ブラウザのタブや閲覧履歴に表示される) では, 非公式であることは隠してはならないと考えています.

なぜなら初めてアクセスしたユーザに非公式であることを認識してもらう必要がある, または, 非公式であることを隠してはならない, と考えているからです. ですから, Web サイトでのタイトルには先頭に "[非公式]" を表示しています.

一方ホーム画面にショートカットを追加する際や Google カレンダー上のカレンダーのタイトルでは一覧の中で区別しやすいことが重要であると考えています.

よって先頭に "[非公式]" があると肝心の "剣城まひる 配信予定" のほとんどが省略されてしまう可能性があり, それを避けるためマニフェストファイルでのアプリケーション名や Google カレンダーでのカレンダー名では末尾に "[非公式]" を表示しています.

ソースコードは公開しないのか

公開しない予定です. ただし剣城まひるさん本人または所属事務所により要求があった場合にはそちらに従う予定です.

API は公開しないのか

Google Calendar API を利用することでカレンダー上のデータを利用できます.

Cloud Firestore 上のデータは今の所アクセスできませんが, 要望があれば検討します. その場合 Cloud Funtions for Firebase [9] で REST API を作ることになると思います.

 
 
 
 

References

[1] ^ 剣城まひる, Japan. 【初配信】新Vtuber事務所"はーれはれ"始動☼1期生3人で初配信やっちゃいます！！【新人VTuber】. (May 2, 2021). Accessed: May 2, 2021. [Online Video]. Available: https://www.youtube.com/watch?v=z5sY1f3G9bk

[2] ^ Google LLC. “Calendar API.” Google Developers. https://developers.google.com/calendar (May 7, 2021).

[3] ^ Google LLC. “YouTube Data API.” Google Developers. https://developers.google.com/youtube/v3 (May 7, 2021).

[4] ^ Google LLC. “Apps Script.” Google Developers. https://developers.google.com/apps-script (May 7, 2021).

[5] ^ Google LLC. “Firebase.” Firebase. https://firebase.google.com/ (May 7, 2021).

[6] ^ Google LLC. “Cloud Firestore.” Firebase. https://firebase.google.com/docs/firestore (May 7, 2021).

[7] ^ Google LLC. “Firebase Hosting.” Firebase. https://firebase.google.com/docs/hosting (May 7, 2021).

[8] ^ Twitter. https://twitter.com/TakumaNitori/status/1389151693514838017 (May 3, 2021).

[9] ^ Google LLC. “Cloud Functions for Firebase.” Firebase. https://firebase.google.com/docs/functions (May 7, 2021).

コメント

コメントを投稿