どうも、つよぽん(@tsuyopon_xyz)です！
今回は最近作った「YouTubeインストリーム広告閲覧アプリ」の話をしたいと思います。
想定している対象読者は以下のとおりです。
- このアプリを使ってみたい方（動画広告の運用者など）
- どのように開発したか興味ある方（現役エンジニア、プログラミング学習者）
アプリを早速使ってみたいという方は「こちら」からページに飛んでいただけたらと思います。
今回の記事で話している「YouTubeインストリーム広告」とは、動画再生前に流れる広告動画のことを指しています。
広告動画の長さは「5~6秒」の短いものもあれば、2~3分と長めの動画もあります。
また、動画の公開レベルで言うと「一般公開」「限定公開」の2種類の動画が確認できます。
Twitterでアプリの紹介をした際に頂いた嬉しい声も載せておきます^^
絶対こういうサービス出てくると思ってた。
SaaSにすればかなり売れそう https://t.co/X74qSqQSlD— おだんご (@odango_IT) March 10, 2021
めっちゃ欲しい！！！です！！ https://t.co/HCt3aId0y1
— 🐡ふぐ (@UIUI_AD) March 10, 2021
面白そう
欲しい、笑 https://t.co/dHH0gybvoq— ハチミツ (@hatimitumoon) March 11, 2021
YouTubeインストリーム広告閲覧アプリの内容（動画広告運用者向け）
アプリの使い方は上の動画でイメージを付けていただけたらと思います。
YouTubeインストリーム広告閲覧アプリでできること
このアプリでできることは以下のとおりです。
- 一覧ページ
- 2021年3月7日以降に自動収集したYouTubeインストリーム広告で使われている動画が一覧で観れる
- ソート機能（投稿日の古い順・新しい順、再生回数の多い順・少ない順など）
- フィルタ機能（タイトルに特定の文字列が入っているものだけを表示）
- 動画詳細ページ
- 動画の再生
- サムネイルの表示
- タイトルの表示
- 詳細文の表示
- 投稿日時の表示
- チャンネル名の表示
- カテゴリの表示
- カテゴリIDの表示
- タグの表示
- 再生回数の表示
- 公開設定の表示（公開 or 限定公開）
- 対象のインストリーム広告の最終取得日
- 対象のインストリーム広告の取得日履歴
- 新着ページ（2021年3月13日追加）
- 直近24時間で新たに追加された広告動画だけを表示
YouTubeインストリーム広告閲覧アプリの活用例
想定しているデータの活用方法は次のとおりです。
投稿日時は古いけれど今でも広告を流しているということは、費用対効果が良い広告なのかな？
投稿日時は新しいけど、再生回数がすごく多いな。広告費をたくさんかけているのかな？
同じようなサムネイルの動画がたくさんあるな。色々とテストしているんだろうな。
他の漫画広告のストーリー構成を参考にしよう。繰り返し観れるから構成を分析しやすいな。
もちろん上記以外でも活用方法は動画広告運用者によっていろいろあるかと思います。
YouTubeインストリーム広告閲覧アプリの更新頻度
24時間ごとに、「YouTubeインストリーム広告閲覧アプリ」にアクセスがあったタイミングで裏側でデータ更新を行います。
技術的な話になりますが、Next.jsの「ISR」の機能を活用して更新しています。
YouTubeインストリーム広告閲覧アプリで使っている技術（エンジニア向け）
使っている技術をフロントエンドとバックエンドに分けて説明していきます。
フロントエンドで使っている技術
フロントエンドで使っている技術は以下のとおりです。
- Next.js（TypeScriptで実装、ISRを有効にして静的ファイル生成を行う）
- Vercel（ビルド&デプロイ、GitHubと連携）
- Material UI（デザイン周り）
- Firebase（Firestore、Analytics）
Next.jsについて
Next.jsに関しては「【全コンテンツ一般公開中】Next.js&TypeScript体験シリーズ」でも15本の動画と、数本のスライドで解説しています。
「ISR」や「静的ファイル生成」について知らないか方は「【全コンテンツ一般公開中】Next.js&TypeScript体験シリーズ」を参考にしていただけたらと思います。
Vercelについて
「Vercel」はNext.jsと相性の良いWebサービスになります。
Vercelを使うことでNext.jsで作ったWebアプリを無料でインターネットに一般公開できるので、Webアプリを一般公開する際の選択肢の1つとして認識していただけたらと思います。
Material UIについて
Material UIは、楽してWebページの見た目を整えたいときに便利なツールです。
Bootstrapを聞いたことがある人は、Bootstrapと同じようなものと認識しても問題有りません。
Material UIについては、先ほども紹介した「【全コンテンツ一般公開中】Next.js&TypeScript体験シリーズ」の中の1つである、
「【体験Next.js&TypeScript】Material UIを使ってデザインを整える（全5回）」で実際に使いながら解説しているので、そちらも参考にしていただけたらと思います。
Firebaseについて
Firebaseを知らない方は、再生リスト「Firebase入門」で19本の動画（2021年3月11日現在）で解説しているので、再生リスト「Firebase入門」をご覧になっていただけたらと思います。
バックエンドで使っている技術
フロントエンドの次は、バックエンドの技術スタックを見ていきましょう。
バックエンドで使っている技術は以下のとおりです。
- Firebase（Cloud Functions, Firestore, Cloud Scheduler）
- Puppeteer
- YouTube Data API
Firebaseについて
Firebaseはフロントエンドでも説明しましたが、バックエンドでも使っています。
Cloud Functionsを使ってYouTube Data APIを使って取得した動画データをFirestoreに保存しています。
Cloud Functionsは、再生リスト「Firebase入門」の中でも取りあげているので、Cloud Functionsの使い方を知りたい方は動画の方も参考にしていただけたらと思います。
また、Cloud Functionsで提供されている機能の1つとして「スケジューリング機能」というものがあります。
スケジューリング機能を一言で説明すると「あらかじめ設定した決められた時間に、Cloud Functionsを実行できる機能」になります。
このスケジューリング機能を活用すると「Firestoreの自動バックアップ」「定期的なデータの自動収集」などが実現可能となります。
Puppeteerについて
「Puppeteer」は、普段人の手で行っているWebブラウザの操作を、プログラムで操作できるライブラリになります。
Puppeteerを使うことで、JavaScriptで「Webスクレイピング」が可能となります。
「YouTubeインストリーム広告閲覧アプリ」では、Puppeteerを利用して、YouTubeインストリーム広告の動画IDを取得するようにプログラムしています。
YouTube Data APIについて
「YouTube Data API」は、その名前の通りYouTubeの様々なデータを取得できるWeb APIです。
さきほど「Puppeteerを使ってYouTubeインストリーム広告の動画IDを取得する」と話しましたが、
この動画IDをYouTube Data APIで利用して、YouTubeインストリーム広告の動画を取得しております。
どんなデータが取得できるか興味のある方は「こちら」のページでデータ構造が定義されているので、そちらをご覧いただけたらと思います。
さいごに
「YouTubeインストリーム広告閲覧アプリ」はビジネス勉強会で動画広告の話が出たときに思いついたアイデアで、
「これ作ったら面白そう」「動画広告の運用している人の役に立つかな」と思って、調査機関含めて1週間くらいで作ったアプリになります。
一旦ゼロイチのフェーズが出来たので、しばらくはデータ収集だけを行う予定でいます。
追伸
データの自動収集に関してですが、最初はAWSやCloud Functionsのスケジューリング機能を使って行おうと思ったのですが、
クラウドのサーバーを使ってPuppeteerを使うと、中々インストリーム広告が表示されないという問題が発生しました。（9割くらいは広告が表示されない感覚）
そのため、現在（2021年3月11日現在）は僕がパソコン作業をしているときに、僕のパソコン上で自動収集プログラムを走らせてデータを少しずつ蓄積していっている感じです。
「もしかしたら、女性が使っているパソコンで自動収集プログラムを走らせたら女性向けの広告がたくさん取得できるのかな？」と考えています。
LINE登録で無料特典を受け取る
次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。
- Webエンジニアになりたいけど何から学習を始めれば良いかわからない
- 今まで独学で頑張ってきたけど、独学に限界を感じてきた
- プログラミングは出来るけど、大きめのコードが書けない
「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。
