動画の数字を一画面で見る「見える化アプリ」を作りました。作り方とつまずいた点

2026年11月10日 05:41

KAKUGOX(カクゴックス)ではショート動画の数字を一画面で見るためのアプリを作って毎日使っています。

この記事では何が見えるのか、どう動いているのか、作る途中でつまずいたことを紹介します。
動画の数字を手間をかけずに見たい人に向けた記事です。

何ができるのか

YouTubeとTikTokの動画の数字を集めてグラフで見られるようにしたアプリです。

画面の上のボタンでYouTubeとTikTokを切り替え、右上のメニューでチャンネルを切り替えます。
グラフの棒や点を押すとその動画に切り替わります。
グラフはライブラリを使わずSVGで描いています。

毎朝7時30分にMacで自動のスクリプトが動くように設定しています。
YouTubeの数字を取り、アプリ用のデータを作って、データベース(Firebase)に送ります。
そのあと前回との違いと分析の結果をDiscordのスレッドに投稿します。

TikTokの数字は公式の仕組みでは取れません。
TikTok Studioの画面の数字を手で記録しています。

画面は静的なページでCloudflare Pagesで公開しています。
数字の置き場はFirebaseのRealtime Databaseです。
ログインした人だけが見られる作りで、費用は0円で収まっています(2026年11月1日の時点の構成)。

YouTubeの承認は7日で切れました。
いまのGoogle Cloudの同意画面は「テスト」の状態で承認が7日で失効します。
切れたことに気づけるように、承認が切れたらDiscordに知らせる仕組みを足しました。

Firebaseは空の配列を保存しません。
他のチャンネルの表示を足した直後にログイン後の画面が「数字を読み込めませんでした」と止まりました。
動画が0本のチャンネルでは動画の配列そのものが届かないことが原因でした。
配列や項目が欠けて届く前提で書き直して直しました。

11月7日に画面をKAKUGOXのホームページと同じデザインに作り直しました。
黒に近い赤の背景、赤い斬撃、金の差し色、斜めのボタン、大きな細長い数字です。

社内で使うアプリでログインした人だけが見られます。
そのためこの記事にリンクは貼っていません。

次はココナラに出品したサービスについて書く予定です。

この記事の下書きはAI(Claude)の力を借りて作っています。
公開の前には人の目で内容を確認しています。
Xでも日々のことを発信しますのでよければフォローしてください。