開発室ブログ

Firebase JavaScript Node.js Vue Youtube Data API 雑談

にじさんじのチャンネル登録者数ランキングアプリつくってみた

どうも僕です。
会社のブログで技術的な要素を絡めつつ、完全に趣味全開のオタク臭い記事を書いて他の弊社社員をドン引きさせていくスタイルです。

※この記事は基本的に「にじさんじとは?」という話と「技術」の話が主ですので技術的な事に興味が無い方は飛ばし読みしていただくか、下記リンクから直接サイトへどうぞ

非公式にじさんじランキング

目次

  1. にじさんじランキングアプリのプロトタイプ作ってみた
  2. 「にじさんじ」って何?
    1. Youtuberについて
    2. バーチャルYoutuberについて
    3. にじさんじについて
  3. ちなみに個人的に好きなにじさんじライバー
    1. エクス・アルビオ
    2. アンジュ・カトリーナ
    3. 社築(やしろきずく)
    4. 鈴鹿詩子(すずかうたこ)
    5. 他のオススメライバー
  4. にじさんじランキングアプリについて
    1. 開発の際に使ったもの
    2. Vue CLI を利用したVueプロジェクトの作成
    3. Firebaseプロジェクトの作成
    4. Firestoreでリアルタイムでのデータ反映
    5. CSSフレームワーク「Vuetify」
    6. Youtube Data APIでのチャンネルデータ取得
    7. Vue.jsとFirebaseで爆速アプリ開発が可能なワケ
  5. さいごに

にじさんじランキングアプリのプロトタイプつくってみた

記事タイトルの通り「にじさんじのチャンネル登録者数ランキング」のプロトタイプを作ってみました。
あくまでプライベートで作ったプロトタイプなので、弊社とは一切関係のないものなんですが、紹介してもOKと言われたので紹介します。
何か問題があればひっそりとこの記事が消えると思います。

Qiitaなどで 「Vue.jsとFirebaseで爆速アプリ開発…!」 系の記事よく見るので、今回は試しにVue.js + Firebaseでやってみました。

さすがにデザインまでやる時間はなかったのでCSSフレームワークとして
Vuetifyを利用して既存のComponentを並べた感じです。

実作業時間(環境構築等含め)はおおよそ半日くらいです。
(本当に爆速でできました)

「にじさんじ」って何?

全く知らない人向けに「にじさんじ」について説明するために前提である

  • Youtuberについて
  • バーチャルYoutuberについて

についても説明する必要がありそうなので念の為説明します。
上記を知っている方は飛ばして問題ありません。

Youtuberについて

Youtuberという単語は聞いたことはあると思います。

HIKAKINやフィッシャーズなど様々なYoutuberが活動中です。

今時の小学生が将来なりたい職業の上位にYoutuberが入っているそうです。

最近ではテレビに出演するYoutuberの方もいるらしいですね。

僕はテレビ見ないから知らないですけど

バーチャルYoutuberについて

続いてバーチャルYoutuberについてです。
Youtuberと比べると聞いたことない人のほうが多いと思います。

一言で言えばCGやイラストのキャラクターを用いて動画配信・投稿を行うYoutuberのことです。
「Vtuber」だったり「バーチャルライバー」と呼ばれる事もあります。(動画配信の媒体がYoutubeだけでは無いこともあるため)

3Dモデルを用いて、モーションキャプチャなどで「中の人」が体を動かすと画面上のモデルも同様の動きをしたり、
「中の人」の表情を読み取って画面上の2Dキャラクターの表情もリアルタイムで変化したり、Vtuberによって様々です。

数年前にKizunaAIというユーザがバーチャルYoutuberとして動画投稿を開始しました。
「バーチャルYoutuber」という単語を使い始めたのも恐らくこの人だと思います。

そこから次々と、多くの個人や企業がVtuberとしての動画配信Vtuberに関わるマネジメント業務などを行い始めました。

そんなこんなで一部の界隈でひっそりとブームが起きていたVtuberですが、現在では推定で1万人前後のVtuberが居るのでは?と言われています。

ちなみに、最近では深夜番組として地上波でもバーチャルYoutuberが出演してるらしいです。

僕はテレビ見ないから知らないですけど

にじさんじについて

ようやく本題(?)のにじさんじの説明です。

にじさんじは先ほど説明したバーチャルYoutuberのグループです。
バーチャルYoutuberのグループというのはかなり多く存在しますが、その中の一つですね。

にじさんじでは自己紹介のときに「ライバー」や「バーチャルライバー」としている事が多いので
それに則ってここからはVtuberではなくライバーと呼びたいと思います。

にじさんじの特徴として言えるのが下記だと思います。

  • 所属しているライバーの人数が多い(現時点で約90人)
  • 配信スタンスがライバーそれぞれで自由奔放
  • 男性ライバーも結構居る
  • いい意味で頭がおかしい(面白い)ライバーが多い

人数が多いと言っても全員が一堂に会して配信しているわけではなく、基本的には各々のライバーが個人で配信を行っています。
複数のライバー同士でコラボ配信として一緒に配信することもあります。

各ライバー毎に配信スタンスにも結構違いが見られるので自分の「ツボ」にハマる人も見つけやすいです。

また、これも人数が多い事によるメリットなんですが、常に誰か彼かが配信をしているので
何人か「面白いな~」と思うライバーを見つけるとにじさんじから逃れることができなくなります。

オススメです

ちなみに個人的に好きなにじさんじライバー

エクス・アルビオ

突如バーチャル世界に降臨した、異世界の英雄。
元の世界に戻る方法を探しているが、ゲームにハマってしまって滞り気味。

公式サイトより引用

こんばんエーーーーーックス!!!!!!!!!

オススメポイント

  • 全力でバカをやりつつ、言動が適当な感じが面白い
  • 他のライバーからドッキリを仕掛けられた時のリアクションが秀逸
  • たまに出るエビオ(クス・アルビオ)構文が面白い
  • 初心者向け

エビオ構文(例)

  • すごい自然に吐きそうになる時ないですか?なにもしてないのにいきなりでそうになることとか!僕はないですけど
  • 最近、低反発枕を買って、めちゃくちゃ寝心地いいんですよね。それで遅刻しちゃったなあって、まあ低反発枕買ってないんですけど
  • (裏でドッキリを準備されていて普段より視聴者が多い件について)今日人数多くない?ええ~?ちょっと色々ツッコむわ。まあいいやツッコまないわ。色々ツッコむわ

アンジュ・カトリーナ

ボロボロの小屋で時間を忘れて錬金術の研究に明け暮れている。
大人っぽい女性的な体に憧れており、実はその研究をしているとかしていないとか。

公式サイトより引用

おまたせ、待った?

オススメポイント

  • 雑談放送多め
  • トークが面白い
  • 同期ライバーのリゼ・ヘルエスタとの掛け合いが面白い
  • 初心者向け

社築(やしろきずく)

26歳男性IT企業の社員、プログラマーでそれなりに優秀。本人は謙虚な性格、いつも疲れた喋り方。優しく流されやすい性格。
週休35時間でそれ以外は常に仕事をしている。空いた休み時間に試しに配信をして、何かしら面白いものなど発見できたらいいなと考えてる。

公式サイトより引用

飲み友の皆さん、お疲れ様です。

オススメポイント

  • オタクトークであれば基本なんでも拾える知識量
  • オタクトークが楽しい
  • 初心者向け

鈴鹿詩子(すずかうたこ)

画面の向こう側の世界のチビっ子たち人気絶大のカリスマ的「うたのおねえさん」。子供向け番組で歌やことば遊びを披露している。
飾らないルックス、安心感を与える歌声から親世代からの評判も良い。 (実は26歳)婚期を逃すのではと密かに危機感を抱いている。

公式サイトより引用

画面の前のよい子のみんな~!こ~んにっちは~!

オススメポイント

  • 古の腐女子
  • こーんにっちわー!
  • 雑談で話すエピソードが面白い
  • BLについて語りだすと止まらなくなるのも面白い
  • 割と上級者向け

他のオススメライバー

他にもオススメライバーがたくさんいるんですが、全部は紹介しきれないので興味がある方は是非自分で見つけてみてください!

にじさんじランキングアプリについて

にじさんじの説明で長文になってしまい、おまけみたいな感じになってしまいましたがここから少しだけ技術のお話です。

冒頭にも書きましたが今回作ったアプリがこちらです。

非公式にじさんじランキング

実は既に類似のサービスはあったりするので、「Vue+Firebaseで自分なりのアプリを作ってみたかった。」というのが動機として大きいです。

開発の際に使ったもの

  • Vue.js
  • Firebase ( Hosting, Firestore )
  • Vuetify
  • Youtube Data API

主にこの4つです。

Vue CLI を利用したVueプロジェクトの作成

既にNode.js, npm(またはYarn)がインストールされていれば速攻で環境構築できます。
ちなみに僕はYarn派です。

# yarn global add @vue/cli
# vue create project-name

これだけ。 YarnでVue CLIをインストールし、vue createコマンドから対話型インターフェースで
初期インストールするソフトウェアを選択してすぐに開発に取り書かれる環境が整います。

Firebaseプロジェクトの作成

# yarn global add firebase-tools
# firebase login
# firebase init
# firebase deploy

本当にこれだけ。 firebase-toolsをインストールしてfirebase loginコマンドでfirebaseアカウントにログインし、
任意のディレクトリでfirebase initコマンドから利用するfirebaseサービスなどを選択し、
firebase deployでFirebase Hostingへのデプロイが完了します。

Firestoreでリアルタイムでのデータ反映

FirestoreはNoSQLデータベースなので簡単な構成であればサクッと作れます。
なおかつ、リアルタイム同期もサポートしているため、Firestore側のデータが変更されると、すぐにVue側のデータ表示も変更されます。

今回のアプリでも登録者数のデータが変更されると開いたままのブラウザでもスッ…とデータ表示が変わってくれます。
(今のところリアルタイム同期はあまり活用できていませんが…)

ちなみに、Firestoreは

操作 件数
読み取り 5万/日
書き込み 2万/日
削除 2万/日

まで無料で利用できます。

今回みたいな個人で実験的に作るアプリにはすごく助かりますね。

CSSフレームワーク「Vuetify」

Bootstrapには大分飽きてきていたのでせっかくなので新しいCSSフレームワークを使ってみました。

やっつけで作った割にはそれっぽいレイアウトにはなったのでよかったです。
ただレスポンシブ対応がまだなのでそのへんは後々やっていきたいと思っています。

Youtube Data APIでのチャンネルデータ取得

今回のアプリではYoutube Data APIを利用してチャンネルデータを取得しています。

Youtube Data APIを利用にするにはGoogle Cloud PlatformでAPIキーを発行する必要があるので、
個人のGCPアカウントでサクッとAPIキーを発行して利用しています。

チャンネル登録者数などの取得

https://www.googleapis.com/youtube/v3/channels?part=statistics&id=[YoutubeチャンネルID]&key=[先ほど発行したAPIキー]

チャンネル概要文やサムネイル画像のパスなどの取得

https://www.googleapis.com/youtube/v3/channels?part=snippet&id=[YoutubeチャンネルID]&key=[先ほど発行したAPIキー]

これでサクッと取得ができました。 Youtube Data APIの利用制限はFirestoreと違って少々厳し目なので、今回はここで取得したデータをFirestoreに固定で保存して利用することにしました。

Vue.jsとFirebaseで爆速アプリ開発が可能なワケ

サーバー周りの事に気を使わなくても良い

これに尽きると思います。

セキュリティルールも簡単にかけますしね。

あとは、Vue自体が同様のフレームワークであるReactやAngular2などと比べてとっかかりやすくサクッと実装が可能というのもあります。

便利な世の中ですよほんと…。

さいごに

これで、にじさんじとにじさんじランキングアプリの紹介は終わりです。

僕はどうにもブログ記事を締めるのが苦手なので、今回はトレンドブログの記事のモノマネをして締めたいと思います。

い か が で し た か ?

RecentPost