bubble(NoCode)

【bubble】勉強に最適!「Netflix風」アプリを作成/ NoCode

はてなちゃん
はてなちゃん
NoCodeツールのbubbleはどんなことができるの?
ひろ
ひろ
Netflixみたいなアプリも作れますよ
はてなちゃん
はてなちゃん
えー!すごい
ひろ
ひろ
簡単なんで一緒に作ってみましょう!

この記事は、bubbleでNetflix風のアプリを実際に作りながら、bubbleでどんなことができるかが勉強できます。

bubbleをとにかく実践的に操作してみたい!どんなことができるか知りたいという方には最適です。

bubbleをまだ全くさわったことがないよ。という方は、まずはこちらの記事で勉強することをおすすめします。

【bubble】の勉強に最適!基本の使い方はこれでOK!(ノーコード)この記事では、bubbleとは?から、一通りの使い方について解説しています。 これからbubbleを勉強したい、使ってみたいという...
・bubbleとは?
・エレメントって?
・ワークフローって?
・データベースって?

などが学べます。

それでは、早速はじめていきましょう!

【bubble】でNetflix風アプリを作ってみよう!

プレビューで都度都度、動作を確認しながら進める事をおすすめします。また、スタイル(デザイン)は最低限なので、お好きなようにアレンジしてください!

完成イメージはこんな感じです。

人物写真を使いますのが、適当な写真素材がない場合は、下記の写真ACで無料でダウンロードできますのでお使いください。

無料写真素材なら【写真AC】

私も写真ACでいくつかダウンロードしてみました。

サンプル画像

また動画素材は、こちらのサイトから頂きました。

短い動画で使いやすいと思います。

それでは、始めていきましょう!

 

必要なページを作成

まずは、必要なページを作成していきます。

新しく作成するページは、以下の2つです。(+indexを使用)

・portal

・preview

新しいページを作成

「Add a new page」で新しいページを作成します。新しいページを作成

2つできたら、ページの準備は完了です。

 

データベースの作成

データベースの作成をします。

必要な「type」は2つです。

bubble データベース

1つ目のタイプは、「User」。(デフォルトであります)

fieldは、上記を新たに作成します。

2つとも、「This field is a list」にチェックを入れてリストにします。

bubble データベース

2つ目のタイプは、「コンテンツ」。

fieldは、上記を新たに作成します。

「カテゴリー」は、「This field is a list」にチェックを入れてリストにします。

これでデータベースの準備ができました。

 

ヘッダーを作成

ヘッダーの作成をしていきます。

bubble ヘッダーの作成

ヘッダーは、「Reusable elements(再利用可能なエレメント)」で作成します。

「Reusable elements」の「Add a new reusablel element(新しい再利用可能なエレメントを追加)」をクリックし、「header-Netflix」を新たに作成します。

bubble ヘッダーの作成

ヘッダーの大きさは、「indexページ」に合わせます。

Width:1080 Height:70

bubble ヘッダーの作成

ヘッダーの中に、「Iconエレメント」でアイコンを設置します。

各アイコンをクリックすると、先ほど作成したページ移動したり、サインアップのPopUPを表示したりする設定を後ほどします。

・「Homeアイコン」は、「indexページ」に移動。

・「アップロードアイコン」は、「portal」に移動。

・「サインアップアイコン」は、「サインアップのPopUP」を表示。

次に、「HOMEアイコン」と「アップロードアイコン」がクリックされたら、該当のページに移動するようにワークフローを作ります。

bubble ページ移動のワークフロー

「Homeアイコン」がクリックされたら、「indexページ」に移動するワークフローを作成します。

bubble ページ移動のワークフロー

ページの移動なので、「Navigation」「Go to page」を選択。

bubble ページ移動のワークフロー

移動先は、「index」を選択。

同様に、「アップロードアイコン」のワークフローも作成しましょう。

・・・・

できましたか?

次に、サインアップフォームの作成をします。

bubble サインアップフォームの作成

「Reusable elements」の「Signup/Login Popupエレメント」を設置します。

次に、今設置した「Signup/Login Popupエレメント」を「サインアップアイコン」をクリックしたら、表示するワークフローを作成します。

bubble サインアップフォームの作成

ワークフローをクリック。

bubble サインアップフォームの作成

エレメントを表示させたいので、「Element Actions」「Show(表示)」を選択。

bubble サインアップフォームの作成

表示させたいエレメントは、「Signup/Login Popup」を選択。

これで、「サインアップアイコン」をクリックしたら、「Signup/Login Popup」が表示されて、ユーザーがサインアップできるようになりました。

これでヘッダーは完成です。

bubble ヘッダーの作成

 

Portalページの作成

続いて、動画をアップロードしたりする「Portalページ」を作成します。

bubble portalページの作成

項目に合わせて、エレメントを配置していきます。

・「管理画面」は、「Textエレメント」を使用。

・「コンテンツタイトル」は、「Inputエレメント」を使用。

・「コンテンツの説明」は、「Multiline Inputエレメント」を使用。

・「コンテンツアップロード」は、「File Uploaderエレメント」を使用。

・「サムネイルアップロード」は、「Picture Uploaderエレメント」を使用。

・「テレビ番組」は、「Checkboxエレメント」を使用。

・「映画」は、「Checkboxエレメント」を使用。

・「カテゴリー」は、「Dropdownエレメント」を使用。(アクションとコメディーを「Choicesに入力」)

・「ライブラリーに追加」は、「Buttonエレメント」を使用。

次に「ライブラリーに追加ボタン」のワークフローを作成します。

bubble ボタンのワークフロー

ワークフローをクリック。

bubble ボタンのワークフロー

入力された情報をデータベースに保存していくので、「Date 」「Create a new thing(新しいデータを追加する)」を選択。

bubble ボタンのワークフロー

Typeは、「コンテンツ」を選択。

データベースの各fieldと入力フォームに入力された各項目をひもづけていきます。

・「タイトル」「Inputコンテンツタイトル」「Value(値)」を選択。

これで、「Inputコンテンツタイトル」に入力された「値」は、データベースの「タイトル(field)」に保存されるという設定ができました。

あとの項目も同様です。

これで、各データベースのfieldと、先ほど作成した入力フォームの項目がひもづけられました。

「ライブラリーに追加」がクリックされたら、データベースにその情報が保存されるワークフローができました。

 

コンテンツ一覧を表示させるページの作成

コンテンツ一覧を表示させるページを作成します。

「indexページ(HOME)」で作成します。

bubble コンテンツ一覧ページ作成

・「Netflix-header」を設置

・「アクション」「コメディー」「My List」を「Textエレメント」を使用し配置。

・それぞれの見出しの下に「Repeating Groupエレメント」を配置。
※Rows(列):1 Columns(行):3

・「Repeating Groupエレメント」内に、「Imageエレメント」を配置。

これから設定をしていきますが、「アクション」「コメディー」と「My List」は少し設定方法が違うので分けて設定していきます。

「アクション」「コメディー」のRepeating Groupから設定していきます。

bubble コンテンツ一覧ページ作成

「Repeating Group」のプロパティーを開き、typeは「コンテンツ」を選択。

「Data source(情報源)」は、「Do a search for」「コンテンツ」を選択。

条件を追加します。「カテゴリー」「contains(含む)」「アクション」を選択。

これで、

データベースの「コンテンツ」に保存されている情報を取り出してくるという設定をし、さらに取り出してくる条件として、「カテゴリー」に「アクション」を「含む」情報のみ取り出して

という設定ができました。つまり、カテゴリーがアクションのコンテンツのみ、この「Repeating Group」には表示されます。

「コメディー」は、「Add a new constraint(新しい条件を追加する)」の上記の「アクション」の部分を「コメディー」にするだけです。

次に、「Imageエレメント」のプロパティーを開き設定していきます。

bubble コンテンツ一覧ページ作成

「Dynamic image」の「Insert dynamic data(動的データ)」をクリック。

「Current cell’s コンテンツ(現在のセル)」「サムネイル画像」を選択。

これで、現在のセルにあるコンテンツのサムネイル画像を表示させるという設定ができました。

「コメディー」も同様です。

次に、「My List」の設定をしていきます。

bubble コンテンツ一覧ページ作成

「Repeating Group」のプロパティーを開き設定します。

「Data source(情報源)」は、「Do a search for」「User」を選択。

「Add a new constraint(新しい条件を追加)」に「User」「=」「Current User(現在ログインしているユーザー)」を選択。

bubble コンテンツ一覧ページ作成

次に、「Imageエレメント」の設定をしていきます。

「Dynamic image」の「Insert dynamic data(動的データ)」をクリック。

「Current User(現在のセル)」「My Listサムネイル」を選択。

これで、「My List」に保存されているコンテンツのサムネイル画像が表示されるように設定できました。

次に、表記されているコンテンツをユーザーがクリックした時に、プレビュー画面に移動するワークフローを作成します。

bubble ページ移動のワークフロー

「Imageエレメント」のワークフローをクリック。

bubble ページ移動のワークフロー

ページの移動なので、「Navigation」「Go to page」を選択。

bubble ページ移動のワークフロー

移動先は、「preview」を選択。

「Data to send(送信するデータ)」は、「Current cell’s コンテンツ」を選択し、情報を「previewページ」に送信します。

これで、ユーザーがサムネイル画像をクリックしたら、「previewページ」に移動するワークフローができました。

 

プレンビューページの作成

続いて、プレビューページを作成します。

ユーザーが選択したコンテンツの詳細や再生、My Listに保存などできるようにします。

「previewページ」に移動します。

bubble previewページの作成

previewページのどこかで、ダブルクリックをしてプロパティーを開き、タイプを「コンテンツ」にします。

bubble previewページの作成

項目に合わせて、エレメントを配置していきます。

ますは、「Netflix-header」を配置。

①:「Textエレメント」を使用。

②:「Textエレメント」を使用。

③:「Imageエレメント」を使用。

④:「Textエレメント」を使用。

⑤:「Buttonエレメント」を使用。

⑥:「Buttonエレメント」を使用。

それぞれ設定していきます。

①:「Textエレメント」

bubble previewページの作成

「Insert dynamic data(動的データ)」をクリック。

「Current Page コンテンツ」「タイトル」を選択。

これで、このページにあるコンテンツのタイトルを表示する設定ができました。

このために、先ほど「previewページ」への移動の際に「Current cell’s コンテンツ」のデータを一緒に送信しました。

②:「Multiline Inputエレメント」

bubble previewページの作成

「Insert dynamic data(動的データ)」をクリック。

「Current Page コンテンツ」「説明」を選択。

③:「Imageエレメント

bubble previewページの作成

「Insert dynamic data(動的データ)」をクリック。

「Current Page コンテンツ」「サムネイル画像」を選択。

④:「Textエレメント」

bubble previewページの作成

「Insert dynamic data(動的データ)」をクリック。

「Current Page コンテンツ」「カテゴリー」を選択。

⑤:「Buttonエレメント」(Playボタン)

ユーザーが「Playボタン」をクリックしたら、動画が再生されるようにします。

bubble 動画再生

「PopUPエレメント」を配置します。

その「PopUPエレメント」内に、「Videoエレメント」を配置します。

「Insert dynamic data(動的データ)」をクリック。

「Current Page コンテンツ」「コンテンツファイル」を選択。

これで、現在のページにある、「コンテンツファイル」の動画が再生できるように設定できました。

⑥:「Buttonエレメント」(+My List)

最後に、「+My Listボタン」がクリックされたら、My List登録されるように設定してきます。

bubble ボタンのワークフロー

ワークフローをクリック。

bubble ボタンのワークフロー

「Data」「Make changes to thing~(データベースに変化を加える)」を選択。

bubble ボタンのワークフロー

「Thing to change(変更するもの)」は、「Current User(現在のユーザー)」を選択。

・「My List(field)」「add(追加)」「Current Page コンテンツ」を選択。

・「My List サムネイル(field)」「add(追加)」「Current Page コンテンツ」「サムネイル画像」を選択。

このページのコンテンツを「My List」「My List サムネイル」に追加するワークフローができました。

これで全ての設定が完了しました!

プレビューで動作を確認してみましょう!