Youtube上に誰でも利用できる勉強カフェを開設した話
こんにちは、趣味でプログラミングに勤しむ大学生です。
今回の記事では僕が作成したYoutube上のカフェ、「バーチャル勉強喫茶 Virtual Study Cafe」について語らせてください！
少しでもいいなと思ったらいいねよろしくお願いします〜
1. つくったもの
まず、Youtube上のカフェってなんやねん。。。説明しろや( *｀ω´)
ひー、すんません！！とりあえず「一見は百聞にしかず」、まずは下の動画を見てください。下記動画は、Youtubeの配信画面です。
配信画面にカフェが映ってますね。このカフェにチャットを打ち込むことでアクションを起こすことができます！
例えば、カフェに入店したり、コーヒーを注文したり、勉強科目を設定したり、休憩したりなど様々なことができます。基本的には、勉強など何か集中して作業したい人に向けたサービスです。作業用BGMの進化版みたいなイメージですね。「カフェに入店→勉強などの作業→カフェから退出」というのがこのサービスの利用の流れです。
気になった人は、24時間配信しているので是非見に来てください〜
2. 使用技術
利用したものは以下の通り。もし記事が好評だったら具体的なコードの解説もしようかな...知らんけど
フロントエンド
HTML
CSS
JavaScript(vue)
Canva（画面デザイン）
バックエンド / Bot
Python
Youtube Data API
Google Sheets API
CloudFireStore
3. 紹介
デザイン
カフェらしいおしゃれでかわいいデザインにしようと頑張った。筆者にはこれが限界です…笑 オシャレナニそれオイシイノ...? byおしゃれとは無縁な大学生
こういうデザインを今までしたことなかったからすごく大変でした...
デザインには、Canvaを使用しました！ネコちゃんがかーいい☺️
BGM
カフェにいるような気分を味わえるオサレなBGMがかかっています。勉強が進むは進む。いい曲だから死ぬまでに一回は聞いとかないとねえ。ねえ〜？（同調圧力）
機能
どんな機能を作ったか大まかに説明します。詳しい使い方は、Youtube配信の概要欄を見てみてください！
1〜75のいずれかの席に入室することができます。空いている席が他にもあれば、好きな席に移動することもできます。ちなみにこの席の場所のCSSはseat1〜75のクラスで一個一個指定しています。何気に大変。何かいい方法あったのかな〜
勉強疲れたな〜ってときは、休憩することができます。休憩するとアイコン右上の丸の色が変わります。
個人的にお気に入りはこのトースター。複数のトースターが表示される時の動きをうまく設定できずに無限にエラー吐いてたなあ。懐かしい。こだわりポイントは下のプログレスバーで残り何秒間表示されるのかってことをわかりやすくした。下のバーはCSSで動きをつけてるんだけど、確かinline-sizeを変えることで実現した。ほんまよく思いついたで工藤。まあ、もっといい方法ありそうだけどな〜😇
タイマー機能
勉強する人が、集中しやすいように25分-5分のタイマーを設定してある。タイマーの終了時に音を出したいって考えて調べたら、Audio()ってのがあって、簡単に実装できた。JavaScriptすげ〜〜〜
いいね機能
勉強する人同士で応援しあえるような環境を作りたかったので実装。いいねされると、でかいハートが表示され、アイコン右上の縁の中にいいねされた回数が表示されるようになる。この機能でカフェにいるみんながお互いに応援し互いに高めあえるようになって欲しいな、と元浪人生は思いにけり。支え合いって大事。
注文機能
コンセプトとして勉強するカフェなので、やっぱり商品がほしいと思っ
た。現在提供している商品は、コーヒー、カフェオレ、ドーナッツ（皿なしw）、クリームパン（なぜw）。みんなもぜってー注文してくれよな！
などなど。
我ながら全て独学でよくできたと思うぜ😎
今後の課題
なんといってもマーケティング！
つくったら終わり、じゃなくてやっぱり多くの人に知って使ってほしいという欲望がでてきてしまう。どうやって多くの人に周知しようかな〜って考えてます。75席じゃ足りない、増やさなきゃ！となりたい。。。
有識者コメントで教えてクレメンスザウルス🦖
Youtubeチャンネル↓↓↓
https://www.youtube.com/channel/UCVzUJG1KudbgjAbC_eaNiQg
2022.05.24現在
チャンネル登録者：32人
同時接続数：ほとんど0〜3人
総利用者数：58人
なぜじゃ。。。
こっから成長してくれると嬉しいな。そんな期待を込めながらこの記事を書いていやす。読んでくれてありがとね。
終わりに
コメント、いいねなど色々してくれるとほんとに嬉しいです！たのんます！
あとは、チャンネル登録もよr。。ぶふぉっ_:(´ཀ`」 ∠):
この記事が気に入ったらサポートをしてみませんか？