【Bubble】おすすめ動画をシェアするタイムラインを作ってみた

こんにちは、Kanaと申します。

今回は、前回紹介した「video.js」を使用して実際にアプリを作ってみたいと思います。

「video.js」の紹介はこちら

どのようなものを作るか

YouTubeの動画をみんなにオススメできるようなものを作っていこうと考えています。誰がオススメした投稿なのかと、自分で考えたタイトルと説明を表示し、動画もページ上で動くようにしていきます。

今回、デザインについてはあまり考えていません。

１．ログイン・ログアウトできるようにする

これから作業工程を軽くですが書いていきます。

まず、ユーザーごとに投稿できるようにしたいので、サインアップ・ログイン・ログアウトをできるようにしました。

画面上の「サインアップ」というボタンを作成し、Workflowから新たに作成したsignupページに飛ぶようにします。

ここにメールアドレスとパスワードを入力することによってアカウントが作れます。このsignupページをクローンとして、ログインページも作成しました。（inputたちのサイズがめちゃくちゃなのは気にせずに...。）

ログインボタンを押すと、最初のindexページに飛ぶようにしています。

ログアウトボタンを押すとログアウトできるようにWorkflowから設定しました。

２．投稿ボタンの作成

画面上部に設置した「投稿する」ボタンを押すと、ポップアップが開きます。

ここに内容を打ち込んでもらうことで、タイムラインに投稿できます。

「アップする」というボタンを押すと、それぞれがデータに保存されるようになっています。

このように、tweetsというデータにひとまとまりで保存されます。ユーザーIDを使用することによって、ユーザーごとに識別できるようにもしてあります。

３．タイムライン

新しく投稿されたものがどんどん上に表示されるように設定しています。

RepeatingGroupを使用して、その上にテキストとvideo.jsを設置することにより、タイムライン風にしました。

video.jsの設定はこんな感じ。「OR Youtube URL」のところに入力するだけで動画を置けます。今回は、投稿で入力したURLをデータからひっぱってきて、この欄に反映させるようにしています。

他の欄も同じように、データからひっぱってくるようにしました。

まとめ

Bubble初心者で、データの扱いにかなり苦戦しました。とりあえず動くものができてよかったと思います。

今後の課題としては、

・デザインを整える

・実際使って不便に感じるところを改善していく

まだまだ知識が浅いですが、実際に作ってみることの大切さを感じました。

またBubbleを使用して、何か作ってみようと思います。