ijimaso / youtuber-calendar

YouTube可視化Webアプリ

YouTuber Calendar

概要

自分のYouTubeアカウントに登録しているチャンネルの動画情報をカレンダー上で確認できるWebアプリです．

コンセプト

YouTubeに投稿された動画は，公式Webページ上では，縦あるいは横に羅列されているだけで大変見づらいです．
また，各動画の投稿時間は，1週間前，2週間前などのようにアバウトに表示されるため，その動画がいつ投稿されたのか一目で分かりづらいという欠点もあります．
そこで，カレンダーの各セルに動画のサムネイルとタイトルを可視化することで，動画が投稿された日時と動画情報のリンクがしやすくなるようなWebアプリを開発しました．
また，好きなYouTuberがいる人にとっては，あえて昔の動画を取得することで，「このYouTuberはこのころにこんな動画を上げてたのか～，懐かしいな～」などというように感傷にも浸れちゃいます笑

主要機能

• 選択した登録チャンネルとクリックした日付から動画情報を取得し，カレンダー上に可視化する機能
• 可視化した動画から実際の動画ページに遷移する機能
• 自分の登録チャンネルを取得する機能

使い方

1. マイチャンネルIDフォームに自分のチャンネルIDを入力し，OKボタンを押す．
   ※ YouTube Data APIの仕様上，チャンネルIDによっては，自分の登録チャンネルが取得できない場合もあるので，ご了承を🙇
2. 右のセレクトボックスで動画情報を取得したい登録チャンネルを選択する．
3. カレンダー上で動画を取得したい日時を選択する．
4. カレンダーの右上にある取得ボタンを押す．

使用ライブラリ・API

フロント

FullCalendar v4
Bootstrap 4.2.1

API

YouTube Data API v3

youtuber-calendar's Issues

アイデア

• ユーザが選択したチャンネルの動画を指定本数だけ，APIで取得してセルに描画
  →チャンネル，指定本数はドロップダウンメニューから指定

進捗リスト

• YouTube data APIを用いて，データをクロール

• FullCalendarでカレンダーセルを作成

Todo

フロント

• カラー決定
  →YouTubeなので赤(#cd201f)がメインカラー

• カレンダーをカスタマイズ
  →セルにはサムネイルだけ表示
  →セルのサムネをホバーすると，タイトルがツールチップに表示される

• ヘッダーデザイン

- [ ] フッターデザイン

デプロイ

• Github Pagesを使って，アプリをデプロイ