☕

Youtube上に勉強カフェを作った話

2022/05/25に公開

Python

こんにちは、趣味でプログラミングに勤しむ大学生です。

今回の記事では僕が作成したYoutube上のカフェ、「バーチャル勉強喫茶 Virtual Study Cafe」について述べていきます。

少しでもいいなと思ったらいいねよろしくお願いします〜

つくったもの

まず、Youtube上のカフェってなんやねん。。。説明しろや( *｀ω´)

ひー、すんません！！とりあえず「一見は百聞にしかず」、まずは下の動画を見てください。

上記写真はYoutube配信のスクショです。画面にカフェが映ってますね。このカフェにYoutubeのチャットを通してさまざまなアクションを起こすことができます！

例えば、カフェに入店したり、コーヒーを注文したり、勉強科目を設定したり、休憩したりなど様々なことができます。基本的には、勉強など何か集中して作業したい人に向けたサービスです。作業用BGMの進化版みたいなイメージですね。「カフェに入店→勉強などの作業→カフェから退出」、というのがこのサービスの利用の流れです。

気になった人は、24時間配信しているので是非見に来てください〜

使用技術

利用したものは以下の通り。もし記事が好評だったら具体的なコードの解説もしようかな...知らんけど

フロントエンド

HTML
CSS
JavaScript(vue)
Canva（画面デザイン）

バックエンド / Bot

Python
Youtube Data API
Google Sheets API
CloudFireStore

紹介

デザイン

カフェらしいおしゃれでかわいいデザインにしようと頑張った。筆者にはこれが限界です…笑　オシャレナニそれオイシイノ...? byおしゃれとは無縁な大学生

こういうデザインを今までしたことなかったからすごく大変でした...
デザインには、Canvaを使用しました！ネコちゃんがかーいい:relaxed:

BGM

カフェにいるような気分を味わえるオサレなBGMがかかっています。勉強が進むは進む。いい曲だから死ぬまでに一回は聞いとかないとねえ。ねえ〜？（同調圧力）

機能

どんな機能を作ったか大まかに説明します。詳しい使い方は、Youtube配信の概要欄を見てみてください！全てを説明するのはなんか申し訳ないので:sweat_smile:

1〜75のいずれかの席に入室することができます。空いている席が他にもあれば、好きな席に移動することもできます。ちなみにこの席の場所のCSSはseat1〜75のクラスで一個一個指定しています。何気に大変。何かいい方法あったのかな...教えてクレメンス
勉強疲れたな〜ってときは、休憩することができます。休憩するとアイコン右上の丸の色が変わります。
勉強中：緑色

休憩中：オレンジ色

個人的にお気に入りはこのトースター。複数のトースターが表示される時の動きをうまく設定できずに無限にエラー吐いてたなあ。懐かしい。こだわりポイントは下のプログレスバーで残り何秒間表示されるのかってことをわかりやすくした。下のバーはCSSで動きをつけてるんだけど、確かinline-sizeを変えることで実現した。ほんまよく思いついたで工藤。まあ、もっといい方法ありそうだけどな〜:innocent:
タイマー機能
勉強する人が、集中しやすいように25分-5分のタイマーを設定してある。タイマーの終了時に音を出したいって考えて調べたら、Audio()ってのがあって、簡単に実装できた。JavaScriptすげ〜〜〜
いいね機能
勉強する人同士で応援しあえるような環境を作りたかった。なんか頑張ってて偉いね、とか、来てくれてありがとうって伝えたい時にそれをチャットで打ち込むって勇気いるよなって思って、この機能をつくった。いいねされると、でかいハートが表示され、アイコン右上の縁の中にいいねされた回数が表示されるようになる。この機能でカフェにいるみんながお互いに応援し互いに高めあえるようになって欲しいな、と元浪人生は思いにけり。支え合いって大事。