この記事は、bubbleでInstagram風のアプリを実際に作りながら、bubbleでどんなことができるかが勉強できます。
bubbleをとにかく実践的に操作してみたい!どんなことができるか知りたいという方には最適です。
bubbleをまだ全くさわったことがないよ。という方は、まずはこちらの記事で勉強することをおすすめします。
![](https://hironk-blog.net/wp-content/uploads/2020/09/undraw_pride_y0te-320x180.png)
などが学べます。
それでは、早速はじめていきましょう!
bubbleでInstagram風アプリを作ろう!
プレビューで都度都度、動作を確認しながら進める事をおすすめします。また、スタイル(デザイン)は最低限なので、お好きなようにアレンジしてください!
完成イメージはこんな感じです。
まずは、ワークスペースを作ってきます。
![bubble ワークスペース](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-14-063904.png)
indexページのどこかで、ダブルクリックをして、プロパティーをひらきます。
「Make this element fixed-width(このエレメントを固定幅にする)」にチェック。
Width:376 Height:689とします。
データベースを作成
データベースを作っていきます。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-12-055522.png)
「New type」で、「投稿」と「コメント」を新しいtypeを作成します。
次に、それぞれの「type」に「field」を追加していきます。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-12-055721.png)
【Userタイプ】
・パスワード/number
・プロフィール画像/image
・名前/text
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-12-055844.png)
【コメントタイプ】
・コメントリスト/text
・「This field is a list」にチェック
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-12-055940.png)
【投稿タイプ】
・投稿画像/image
・「This field is a list」にチェック
これで、データベースの準備はOKです。
ヘッダーを作成
次にヘッダーを作成していきます。
![bubble ヘッダー作成](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-070719.png)
「Reusable elements(再利用可能なエレメント)」を作ります。
「⊕ New reusable~~」を選択。
![bubble ヘッダー作成](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-070848.png)
「Instagram-header」とします。
![bubble ヘッダー作成](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-071027.png)
Width:375、Height:70にします。
![bubble ヘッダー作成](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-071804.png)
「Iconエレメント」を配置します。
・「Home」アイコン(Homeに戻るアイコン)
・「Camera」アイコン(投稿アイコン)
・「Signup/Login」アイコン(サインイン/ログインアイコン)
一番左には、「Imageエレメント」を配置し、現在ログインしているユーザーのプロフィール画像を表示します。
![bubble ヘッダー作成](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-071920.png)
名前を「Image ユーザー画像」とします。
「Insert dynamic data(動的データ)」をクリック。
![bubble ヘッダー作成](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-071952.png)
「Current User(現在ログインしているユーザー)」「プロフィール画像」を選択。
![bubble スタイル変更](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-081855.png)
スタイルを少し変更しました。こちらはお好みで。
ユーザー登録フォームを作成
続いて、ユーザー登録関係のフォームを作成します。
・サインイン/ログインのフォーム
・ユーザープロフィール登録のフォーム
この2つを作成していきます。
サインイン/ログインフォームを作成
サインイン/ログインフォームを作ります。
![bubble サインイン ログインフォーム](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-080532.png)
デフォルトである、Reusable elementsの「Signup/Login Popup」を使います。
![bubble Signup/Login Popupを配置](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-080859.png)
配置します。
次に、このPopupを表示させるワークフローを作ります。
![bubble Signup/Login Popup表示のワークフロー](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-080628.png)
アイコン名を「サインイン」にします。
ワークフローをクリック。
![bubble Signup/Login Popup表示のワークフロー](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-080737.png)
エレメントを表示させたいので、「Element Actions」「Show(表示)」を選択。
![bubble Signup/Login Popup表示のワークフロー](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-080927.png)
「Signup/Login Popup A」を選択。
これで、「サインイン」がクリックされたら、「Signup/Login Popup A」が表示されるワークフローができました。
プロフィール登録フォームを作成
次に、プロフィール登録フォームになります。
ログインユーザーのプロフィール画像をクリックしたら、登録フォームが表示されるようにします。
![bubble プロフィール登録フォーム](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-084535.png)
「Imageユーザー画像」のワークフローをクリック。
![bubble プロフィール登録フォーム](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-084630.png)
「Element Actions」「Show(表示)」を選択。
![bubble プロフィール登録フォーム](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-084708.png)
「Popupプロフィール登録」を選択。
これで、「Imageユーザー画像」をクリックしたら、プロフィール登録フォームが表示されるワークフローができました。
![bubble プロフィール登録フォーム](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-083303.png)
「Popupエレメント」を配置し、名前は「プロフィール登録」とします。
入力フォームは、下記のような内容になっています。
・「プロフィール登録」は、「textエレメント」を使用。
・「名前」は、「Inputエレメント」を使用。
・「画像アップロード」は、「Picture Uploaderエレメント」を使用。
・「登録」は、「Buttonエレメント」を使用。
![bubble プロフィール登録フォーム](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-085302.png)
次に、「登録ボタン」のワークフローを作っていきます。
![bubble プロフィール登録フォーム](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-085331.png)
「登録ボタン」がクリックされたら、データーベースに登録を更新したいので、「Data」「Make changes to thing~」を選択。
![bubble プロフィール登録フォーム](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-085402.png)
「Thing to change(変更するもの)」は、「Current User(現在のユーザー)」を選択。
次にフィールドの設定をしていきます。
変更を加えるフィールドは、「名前」でそこに何の情報を更新するかは、先ほど作成した「Input名前」に入力された「値」になります。
なので、「名前」=「Input名前」「Value(値)」を選択
同じように、「プロフィール画像」=「Picture UploaderエレメントA」「Value」を選択。
これで、「登録ボタン」をクリックしたら、入力されたプロフィールの情報が、データベースに登録されるワークフローができました。
投稿機能を作成
続いて投稿機能を作成します。
![bubble 投稿フォーム](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-142451.png)
「Popupエレメント」を配置します。
その中に、以下のようにエレメントを配置していきます。
・「投稿フォーム」は、「Textエレメント」を使用。
・「画像のアップロード」は「Picture Uploaderエレメント」を使用。名前を「投稿」に変更。
・「投稿ボタン」は、「Buttonエレメント」を使用。
次に、「投稿するボタン」がクリックされたら、アップロードした画像がデーターベースに保存される、ワークフローを作ります。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-143500.png)
ボタンのワークフローに移動し、「Data」「Create a new thing」を選択。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-143802.png)
タイプは「投稿」、保存するフィールドは「投稿画像」を選択。
「Picture Uploader投稿」に「アップロードされた投稿画像」の「値」をデータベースに「追加」されるようにします。
「投稿画像」「add(追加)」「Picture Uploader投稿」「Value(値)」を選択。
次に、今作成した投稿フォーム(Popup)を、カメラアイコンがクリックされた時に表示されるように、ワークフローを作っていきます。
![bubble カメラアイコンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-144744.png)
「カメラアイコン」のワークフローに移動します。
「Element Actions」「Show(表示)」を選択。
![bubble カメラアイコンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-144814.png)
「Popup投稿フォーム」を選択。
これで、カメラアイコンがクリックされたら、投稿フォームが表示されるようになりました。
投稿画像を表示させる
続いて、投稿された画像が表示されるようにます。
![bubble ヘッダーの設置](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-154638.png)
「indexページ」に戻り、「Instagram-header」を設置します。
![bubble Repeatinng Groupの設置](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-14-072951.png)
「Repeating Groupエレメント」を設置します。
プロパティーで上記のように設定します。
投稿者の名前とプロフィール画像の表示
まずは、投稿者の名前とプロフィール画像を表示させます。
![bubble 投稿者情報](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-160013.png)
「Imageエレメント」を配置します。
「Insert dynamic data(動的データ)」をクリック。
![bubble 投稿者情報](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-160042.png)
「Current cell’s 投稿」「Creator(作成者)」「プロフィール画像」を選択。
これで、現在セルにある投稿の作成者のプロフィール画像を表示させると設定できました。
同じように、投稿者名も設定します。
![bubble 投稿者情報](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-160146.png)
「Current cell’s投稿」「Creator」「名前」を選択。
投稿画像を表示
次に、投稿された画像を表示させます。
![bubble 投稿画像の表示](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-161304.png)
「Imageエレメント」を配置し、名前は「投稿画像」とします。
「Insert dynamic data(動的データ)」をクリック。
![bubble 投稿画像の表示](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-161345.png)
「Current cell’s投稿」「投稿画像」を選択。
これで投稿画像が表示されるようになりました。
投稿したユーザーにコメントを送る
続いて、投稿したユーザーにコメントが送れるようにします。
新しくページを作成して、実現していきます。
![bubble 新しいページを作成](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-162020.png)
新しいページを作成します。
![bubble 新しいページを作成](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-162218.png)
ページ名は、「comment」とします。
「Clone from(コピーするページ)」に「index」を選択。
![bubble 新しいページを作成](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-162547.png)
何もないところで、ダブルクリックをし、「Type of content」を「投稿」にします。
![bubble ユーザー情報の表示](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-162736.png)
「Imageエレメント」を設置します。
「Insert dynamic data(動的データ)」をクリック。
![bubble ユーザー情報の表示](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-162946.png)
「Current cell’s投稿」「Creator」「プロフィール画像」を選択。
これで、投稿者のプロフィール画像が表示されます。
名前も同じです。
![bubble ユーザー情報の表示](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-163043.png)
「Current cell’s投稿」「Creator」「名前」を選択。
![bubble コメント表示](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-163944.png)
コメントを表示させるため、「Repeatinng Groupエレメント」を配置します。
タイプはコメント、「Data source(情報源)」は、「コメント」で設定します。
![bubble コメント表示](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-164521.png)
コメント者のプロフィール画像を表示させます。
「Imageエレメント」を配置。
「Current cell’sコメント」「Creator」「プロフィール画像」を選択。
![bubble コメント表示](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-164613.png)
コメント者の名前を表示させます。
「Current cell’sコメント」「Creator」「名前」を選択。
![bubble コメント表示](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-165041.png)
「Textエレメント」を設置。
「Insert dynamic data(動的データ)」をクリック
「Current cell’sコメント」「コメントリスト」を選択。
これで、データベースの「コメントリスト」にある、コメントが表示されます。
![bubble コメント入力フォーム](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-165741.png)
コメントの入力フォームを作ります。
「Inputエレメント」を配置します。
となりに「Buttonエレメント」を配置し、ワークフローを作ります。
![bubble コメント入力のワークフロー](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-165957.png)
入力されたコメントをデータベースの「コメントリスト」に保存したいので、「Data」「Create a new thing」を選択。
![bubble コメント入力のワークフロー](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-170031.png)
タイプは「コメント」。
「コメントリスト」「Add」「Inputコメント入力フォーム」「Value」を選択。
これで、「Inputコメント入力フォーム」に入力された「値」をデータベースの「コメント」に保存するワークフローができました。
indexページに戻って、コメントアイコンをクリックしたら、今作成した「commentページ」に移動するワークフローを作成します。
![bubble ページ移動](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-170810.png)
「Iconエレメント」を設置し、これをクリックされたら、commentページに移動するワークフローを作成します。
![bubble ページ移動](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-170838.png)
ページの移動なので、「Navigation」「Go to page」を選択。
![bubble ページ移動](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-13-170944.png)
行先は、「comment」ページ。
「Data to send(送信するデータ)」は、投稿の情報を送信したいので、「Current cell’s投稿」を選択。
これで、コメントの設定は完了です!
最後に、「HOMEアイコン」がクリックされたら、「indexページ」に戻るようにします。
![](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-14-071052.png)
「Instagram-header」に移動します。
![bubble HOMEに戻る](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-14-071153.png)
「HOMEアイコン」のワークフローを作ります。
![bubble HOMEに戻る](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-14-071223.png)
「Navigation」「Go to page」を選択。
![bubble HOMEに戻る](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-14-071419.png)
移動先は、「indexページ」を選択。
これで設定は全て完成しました。
プレビューで動作を確認してみましょう!