bubble(NoCode)

【bubble】勉強に最適!「Instagram風」アプリを作ってみよう / NoCode

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

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

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

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

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

などが学べます。

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

 

bubbleでInstagram風アプリを作ろう!

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

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

 

まずは、ワークスペースを作ってきます。

bubble ワークスペース

indexページのどこかで、ダブルクリックをして、プロパティーをひらきます。

「Make this element fixed-width(このエレメントを固定幅にする)」にチェック。

Width:376 Height:689とします。

 

データベースを作成

データベースを作っていきます。

bubble データベース

「New type」で、「投稿」と「コメント」を新しいtypeを作成します。

次に、それぞれの「type」に「field」を追加していきます。

bubble データベース

【Userタイプ】
・パスワード/number
・プロフィール画像/image
・名前/text

bubble データベース

【コメントタイプ】
・コメントリスト/text
・「This field is a list」にチェック

bubble データベース

【投稿タイプ】
・投稿画像/image
・「This field is a list」にチェック

これで、データベースの準備はOKです。

 

ヘッダーを作成

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

bubble ヘッダー作成

「Reusable elements(再利用可能なエレメント)」を作ります。

「⊕ New reusable~~」を選択。

bubble ヘッダー作成

「Instagram-header」とします。

bubble ヘッダー作成

Width:375、Height:70にします。

bubble ヘッダー作成

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

・「Home」アイコン(Homeに戻るアイコン)

・「Camera」アイコン(投稿アイコン)

・「Signup/Login」アイコン(サインイン/ログインアイコン)

一番左には、「Imageエレメント」を配置し、現在ログインしているユーザーのプロフィール画像を表示します。

bubble ヘッダー作成

名前を「Image ユーザー画像」とします。

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

bubble ヘッダー作成

「Current User(現在ログインしているユーザー)」「プロフィール画像」を選択。

bubble スタイル変更

スタイルを少し変更しました。こちらはお好みで。

 

ユーザー登録フォームを作成

続いて、ユーザー登録関係のフォームを作成します。

・サインイン/ログインのフォーム

・ユーザープロフィール登録のフォーム

この2つを作成していきます。

サインイン/ログインフォームを作成

サインイン/ログインフォームを作ります。

bubble サインイン ログインフォーム

デフォルトである、Reusable elementsの「Signup/Login Popup」を使います。

bubble Signup/Login Popupを配置

配置します。

次に、このPopupを表示させるワークフローを作ります。

bubble Signup/Login Popup表示のワークフロー

アイコン名を「サインイン」にします。

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

bubble Signup/Login Popup表示のワークフロー

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

bubble Signup/Login Popup表示のワークフロー

「Signup/Login Popup A」を選択。

これで、「サインイン」がクリックされたら、「Signup/Login Popup A」が表示されるワークフローができました。

プロフィール登録フォームを作成

次に、プロフィール登録フォームになります。

ログインユーザーのプロフィール画像をクリックしたら、登録フォームが表示されるようにします。

bubble プロフィール登録フォーム

「Imageユーザー画像」のワークフローをクリック。

bubble プロフィール登録フォーム

「Element Actions」「Show(表示)」を選択。

bubble プロフィール登録フォーム

「Popupプロフィール登録」を選択。

これで、「Imageユーザー画像」をクリックしたら、プロフィール登録フォームが表示されるワークフローができました。

bubble プロフィール登録フォーム

「Popupエレメント」を配置し、名前は「プロフィール登録」とします。

入力フォームは、下記のような内容になっています。

・「プロフィール登録」は、「textエレメント」を使用。

・「名前」は、「Inputエレメント」を使用。

・「画像アップロード」は、「Picture Uploaderエレメント」を使用。

・「登録」は、「Buttonエレメント」を使用。

bubble プロフィール登録フォーム

次に、「登録ボタン」のワークフローを作っていきます。

bubble プロフィール登録フォーム

「登録ボタン」がクリックされたら、データーベースに登録を更新したいので、「Data」「Make changes to thing~」を選択。

bubble プロフィール登録フォーム

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

次にフィールドの設定をしていきます。

変更を加えるフィールドは、「名前」でそこに何の情報を更新するかは、先ほど作成した「Input名前」に入力された「値」になります。

なので、「名前」=「Input名前」「Value(値)」を選択

同じように、「プロフィール画像」=「Picture UploaderエレメントA」「Value」を選択。

これで、「登録ボタン」をクリックしたら、入力されたプロフィールの情報が、データベースに登録されるワークフローができました。

 

投稿機能を作成

続いて投稿機能を作成します。

bubble 投稿フォーム

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

その中に、以下のようにエレメントを配置していきます。

・「投稿フォーム」は、「Textエレメント」を使用。

・「画像のアップロード」は「Picture Uploaderエレメント」を使用。名前を「投稿」に変更。

・「投稿ボタン」は、「Buttonエレメント」を使用。

次に、「投稿するボタン」がクリックされたら、アップロードした画像がデーターベースに保存される、ワークフローを作ります。

bubble Buttonのワークフロー

ボタンのワークフローに移動し、「Data」「Create a new thing」を選択。

bubble Buttonのワークフロー

タイプは「投稿」、保存するフィールドは「投稿画像」を選択。

「Picture Uploader投稿」に「アップロードされた投稿画像」の「値」をデータベースに「追加」されるようにします。

「投稿画像」「add(追加)」「Picture Uploader投稿」「Value(値)」を選択。

次に、今作成した投稿フォーム(Popup)を、カメラアイコンがクリックされた時に表示されるように、ワークフローを作っていきます。

bubble カメラアイコンのワークフロー

「カメラアイコン」のワークフローに移動します。

「Element Actions」「Show(表示)」を選択。

bubble カメラアイコンのワークフロー

「Popup投稿フォーム」を選択。

これで、カメラアイコンがクリックされたら、投稿フォームが表示されるようになりました。

 

投稿画像を表示させる

続いて、投稿された画像が表示されるようにます。

bubble ヘッダーの設置

「indexページ」に戻り、「Instagram-header」を設置します。

bubble Repeatinng Groupの設置

「Repeating Groupエレメント」を設置します。

プロパティーで上記のように設定します。

投稿者の名前とプロフィール画像の表示

まずは、投稿者の名前とプロフィール画像を表示させます。

bubble 投稿者情報

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

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

bubble 投稿者情報

「Current cell’s 投稿」「Creator(作成者)」「プロフィール画像」を選択。

これで、現在セルにある投稿の作成者のプロフィール画像を表示させると設定できました。

同じように、投稿者名も設定します。

bubble 投稿者情報

「Current cell’s投稿」「Creator」「名前」を選択。

投稿画像を表示

次に、投稿された画像を表示させます。

bubble 投稿画像の表示

「Imageエレメント」を配置し、名前は「投稿画像」とします。

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

bubble 投稿画像の表示

「Current cell’s投稿」「投稿画像」を選択。

これで投稿画像が表示されるようになりました。

 

投稿したユーザーにコメントを送る

続いて、投稿したユーザーにコメントが送れるようにします。

新しくページを作成して、実現していきます。

bubble 新しいページを作成

新しいページを作成します。

bubble 新しいページを作成

ページ名は、「comment」とします。

「Clone from(コピーするページ)」に「index」を選択。

bubble 新しいページを作成

何もないところで、ダブルクリックをし、「Type of content」を「投稿」にします。

bubble ユーザー情報の表示

「Imageエレメント」を設置します。

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

bubble ユーザー情報の表示

「Current cell’s投稿」「Creator」「プロフィール画像」を選択。

これで、投稿者のプロフィール画像が表示されます。

名前も同じです。

bubble ユーザー情報の表示

「Current cell’s投稿」「Creator」「名前」を選択。

bubble コメント表示

コメントを表示させるため、「Repeatinng Groupエレメント」を配置します。

タイプはコメント、「Data source(情報源)」は、「コメント」で設定します。

bubble コメント表示

コメント者のプロフィール画像を表示させます。

「Imageエレメント」を配置。

「Current cell’sコメント」「Creator」「プロフィール画像」を選択。

bubble コメント表示

コメント者の名前を表示させます。

「Current cell’sコメント」「Creator」「名前」を選択。

bubble コメント表示

「Textエレメント」を設置。

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

「Current cell’sコメント」「コメントリスト」を選択。

これで、データベースの「コメントリスト」にある、コメントが表示されます。

bubble コメント入力フォーム

コメントの入力フォームを作ります。

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

となりに「Buttonエレメント」を配置し、ワークフローを作ります。

bubble コメント入力のワークフロー

入力されたコメントをデータベースの「コメントリスト」に保存したいので、「Data」「Create a new thing」を選択。

bubble コメント入力のワークフロー

タイプは「コメント」。

「コメントリスト」「Add」「Inputコメント入力フォーム」「Value」を選択。

これで、「Inputコメント入力フォーム」に入力された「値」をデータベースの「コメント」に保存するワークフローができました。

indexページに戻って、コメントアイコンをクリックしたら、今作成した「commentページ」に移動するワークフローを作成します。

bubble ページ移動

「Iconエレメント」を設置し、これをクリックされたら、commentページに移動するワークフローを作成します。

bubble ページ移動

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

bubble ページ移動

行先は、「comment」ページ。

「Data to send(送信するデータ)」は、投稿の情報を送信したいので、「Current cell’s投稿」を選択。

これで、コメントの設定は完了です!

最後に、「HOMEアイコン」がクリックされたら、「indexページ」に戻るようにします。

「Instagram-header」に移動します。

bubble HOMEに戻る

「HOMEアイコン」のワークフローを作ります。

bubble HOMEに戻る

「Navigation」「Go to page」を選択。

bubble HOMEに戻る

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

これで設定は全て完成しました。

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