【NoCode】Bubbleのチュートリアルを初心者向けに解説！ ⑤ ページ間のデータの受け渡し方法を学ぶ

皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。

今回は、NoCodeツールBubbleのチュートリアル Lesson 5 を初心者向けに解説していきます！

    この記事で学ぶこと
・画像のアップロード方法
・リンクによるページ遷移の方法
・新規ページにデータを送信して表示する方法

チュートリアルの概要につきましては、次の記事で解説しましたので、まずはこちらをご覧ください。

1. 実装するサンプル

タイトル及び画像をデータベースに保存し、リンクとして一覧表示したタイトルをクリックすると、新規ページにて、クリックされたタイトルの画像が表示されるサンプルを実装していきます。

今回学習する、ページ間のデータの受け渡しは、Webアプリ開発において非常に重要なので、気合を入れて頑張っていきましょう！

2. 入力フォーム及び画像アップローダー作成

「Input」を配置し、「Placeholder」を「Picture title」に変更します。

後ほど、データベースとの紐づけに使用するため、「Input Title」という名前が設定されていることを確認しておきます。

「Picture Uploader」をドラッグアンドドロップして配置します。
ここに画像ファイルをアップロードすることができるようになります。

プレビューが表示されるので、少し大きめに配置してください。

後ほど、データベースとの紐づけに使用するため、「Input Picture」という名前が設定されていることを確認しておきます。

「Button」を配置し、「Save」に変更します。

次章で「Workflow」を作成するため「Start/Edit workflow」をクリックします。

3. タイトル及び画像をデータベースに保存

新規データをデータベースに保存する方法については、第1回目のチュートリアルで学習しました。復習のために以下に実装の流れをまとめます。

・「Type」を作成する
・「Field」を作成し、データ型を設定する
・「Field」と入力フォームの値を紐づける

「Type」及び「Field」につきましては、次の記事で詳しく解説しましたので、まずはこちらをご覧ください。

今回のチュートリアルでは、「Photo」という「Type」を作成し、「Title」「Picture」という、2種の「Field」を作成していきます。

上記の流れに沿って、まず最初に「Type」を作成していきます。

「Click here to add an action」をクリックし、「Data（Things）」から「Create a new thing」を選択します。

「Type」のドロップダウンリストから「Create a new type」を選択し、「New type」に「Photo」と入力します。

続いて「Field」を作成していきます。「Set another field」をクリックし、「Create a new field」を選択します。

「Field name」に「Title」と入力し、「Field type」に「text」を選択した後に「CREATE」ボタンをクリックします。

「Title」= 「Input Title's value」となるように順に選択します。

「Input Title」は入力フォーム作成時に確認した名前で、「's value」は「値」という意味です。

これにより、「Title」と入力フォームの値の紐づけが完了しました。

上記と同じ手順で、もう1つ「Field」を作成していきます。

「Field name」に「Picture」と入力し、「Field type」に「image」を選択した後に「CREATE」ボタンをクリックします。

保存するデータは画像ファイルなので、「image」をデータ型に設定している点に注意してください。

「Picture」= 「Input Picture's value」となるように順に選択します。

「Input Picture」は画像アップローダー作成時に確認した名前で、「's value」は「値」という意味です。

これにより、「Picture」と画像アップローダーの値の紐づけが完了しました。

これまでの実装で、「Photo」という「Type」を作成し、「Title」及び「Picture」という、2種の「Field」を作成することで、フォームに入力された画像タイトル及びアップロードされた画像ファイルを保存することができるようになりました。

保存終了後に、入力フォームの値をクリアするために、さらに「Workflow」を追加します。

「Click here to add an action」をクリックし、「Element Actions」から 「Reset inputs」を選択します。

4. 保存したタイトルをリンクとして一覧表示

「Repeating Group」を入力フォームの右横に配置します。

点線で区切られたブロックの1つずつを「Cell」と呼びます。
この「Repeating Group」を設定することによって、データベースに保存したデータを、「Cell」1つずつに順番に表示していくことが可能になります。

「Type of content」に「Photo」を選択します。

「Data source」の「Do a search for」を選択し、新しく出現したポップアップの「Type」に「Photo」を選択します。

これらの設定により、それぞれの「Cell」ごとに「Photo」のデータを順番に読み込んでいくことが可能になりました。

「Link」を「Repeating Group」の1番上の「Cell」にドラッグアンドドロップして配置します。その他の「Cell」にも自動的に「Link」が配置されます。

「Insert dynamic data」をクリックし、「Current cell's Photo's Title」となるように、順に選択します。

これにより、それぞれの「Cell」ごとに読み込まれている「Photo」の「Title」のデータを表示できるようになりました。

5. 画像表示用ページ作成

左上の「Page: index」をクリックし、「Add a new page」を選択します。

「Page name」に「pic_detail（写真の詳細）」と入力し、「CREATE」ボタンをクリックします。

ページ上をダブルクリックし、「Type of content」に「Photo」を選択します。

「Page title」に「Picture」と入力します。

「Image」をページいっぱいにドラッグアンドドロップして配置し、「Dynamic image」の「Insert dynamic data」をクリックし、「Current Page Photo's Picture」となるように順に選択します。

これにより、「index」ページから送信された「Photo」の「Picture」のデータを表示することができるようになりました。

「Image」の上部に「Text」を配置し、「Insert dynamic data」をクリックし、「Current Page Photo's Title」となるように順に選択します。

これにより、「index」ページから送信された「Photo」の「Title」のデータを表示することができるようになりました。

プロパティの下部で、文字の大きさや色などを変更できるので、自分の好みにカスタマイズしてみてください。

6. ページ遷移及びデータの送信

左上の「Page: pic_detail」をクリックし、「index」を選択します。

先程作成した「Link」をダブルクリックし、プロパティを開きます。

「Destination page」に「pic_detail（画像表示用に作成したページ）」を選択します。

これにより、「Link」をクリックすると、「pic_detail」ページに遷移することができるようになりました。

「Data to send」に「Current cell's Photo」となるように順に選択します。

これにより、「Link」をクリックした「Cell」で読み込まれている「Photo」のデータを「pic_detail」ページに送信することができるようになりました。

「Open in a new tab」にチェックを入れることで、「pic_detail」ページを新しいタブで開くことができるようになります。

以上で、今回の実装は完了です。「Preview」ボタンをクリックし、テストを行ってください。

7. まとめ

最後に、今回のチュートリアルの流れをまとめます。

①  入力フォーム及び画像アップローダーを配置する
②  保存ボタンを配置し、「Workflow」を作成する
③「Photo」という「Type」を作成する
④「Title」及び「Picture」2種の「Field」を作成する
⑤「Title」に入力フォームの値を紐づける
⑥「Picture」に画像アップローダーの値を紐づける
⑦「Repeating Group」に「Photo」を紐づける
⑧  画像表示用ページを作成する
⑨  リンクから、画像表示用ページへデータを送信する

今回のチュートリアルで、ページ間のデータの受け渡し方法を学びました。

これにより、SNSなどでよく見られる、「ユーザー詳細画面」や「投稿詳細画面」などの実装も可能になります。

引き続きBubbleの理解を深めていきましょう！
次のチュートリアルはこちらです！