Bubbleのチュートリアル５：Sending data to pages

# はじめに
Bubbleというノーコード/ローコードでアプリを作るサービスがあり、ちょっと言葉に癖があったりするので、チュートリアルをやってみる記録です。Bubble用語は、`Bubble`のように網掛けします。
なるべく細かくキャプチャしていくので、見るだけでもBubbleってこうやるんだと感じていただければ。

https://bubble.io/

## これまでのチュートリアルをやってみた記事
1. [Saving data](https://qiita.com/yo16/items/d77a5cf8df18419b079e)
    - 位置情報をDBへ登録して、地図にマーカーを表示
    - データのInsert
    - 地図
2. [Building a sign-up system](https://qiita.com/yo16/items/1ac9467ad5bb5ed6ba52)
    - ユーザー登録とログイン、ログオフ
3. [Saving and modifying data](https://qiita.com/yo16/items/449b9e0b15ff76ec9584)
    - SNSっぽい、投稿といいね
    - `Repeat Group`の利用
    - データのInsert、Update
4. [Building a slideshow](https://qiita.com/yo16/items/c015c2097ae53055bca0)
    - スライドショー形式のアプリ
    - `Plugin`の利用
5. **Sending data to pages** ＜＜今回＞＞
    - `Data`（`Things`、DBのデータ）の共有

# チュートリアルの記録
## チュートリアルを選択
ログイン後のトップページ
＞左メニューのAcademy
＞Learn your way
＞By watching
＞Interactive lessons
＞**Sending data to pages**

今回のサブタイトルは、「**Share data among pages**」です。
別に改めて教わらなくても、これまでやってきたことを使えばできそう・・・というのが、やる前の気持ちですｗ
でもそう思ってやり始めると、得るものがあるのがこれまでだったので、やります。

複数ページとなると、本質的ではない作業量が増えそうだなぁ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/e2b124c6-6d23-0e50-4b8c-7c0828c8e25c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/21155c64-fb2e-6b7b-6c18-ba5d1165c863.png)
うーん、よくわからない。ユーザーごとのページを作るんじゃなくてテンプレページにユーザーの情報を載せるとしたら、普通そうでしょと思う。
前にも書いたけど、これから何を作るのかわからないというのは、いいのかよくないのか。。

とりあえずStart！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f38d5872-5141-966a-2574-ac9848cdd937.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/da668dae-76d3-1532-e3e1-d6c35f319ae2.png)
はい・・。

## 入力フォームを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/52de6d58-ab3d-eac9-eba4-4fe7f1d6206d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/02acdcce-bba4-dc4a-0a87-165b4ac3272a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/7ccd4323-c724-54fd-8cd2-e7209fd33449.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/6aee4f1a-f6c0-964d-f40f-9f82b5d8206b.png)
写真のタイトル入力欄ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/8fe2566b-bc7e-d366-0ee9-4050a125c6ff.png)
プレイスホルダーに、写真のタイトルを入れてね的な。

## 画像アップローダーを設置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/564577ff-554d-0670-93c5-0c35dea705f0.png)
`Picture Uploader`という`Element`があるんですね。これはちょっと便利。

## 保存用のボタンを設置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/70838c6b-a757-fe68-868b-cbfc62ba8f7d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/3af462ec-ebb4-4fe0-c178-c8293ac4ede4.png)
アップロードした後の、Submit的なボタン。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/bf120b3e-827b-3771-f711-ebc77e77a686.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/9985714d-00c8-a111-727a-87df37fa325b.png)
早っ！
フロントエンドはもう終わりで次は処理。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/5ff35abf-e7f9-08bd-22d0-f4414dabda69.png)
ちなみに画面は、現時点でこんな感じ。

## 保存ボタン押下時の処理を作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/38fd7833-95ab-fbbe-8a4b-2d56741f45e2.png)
"Add workflow"をクリックして、処理作成画面に入ります。

Labelを"保存"って日本語にしたら、ボタンの名前が"Button 保存"って日本語になっちゃったけど、問題ないようですね。チュートリアルの中も書き換わってるし。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/be5ddc2c-1ccf-017f-78fb-e9d29291e20a.png)
`Workflow`の画面に移って、保存ボタンを押したときのイベント処理に。"action menu"から～

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/33d5f2e7-e30a-19bc-44b5-385a2b2e315a.png)
`Data` (`Things`) ＞ "Create a new thing..."を選択。ボタンを押したら、DBのテーブルに、新しいレコードをInsertするんですね。`Type`（テーブル）作成、`filed`（列）作成、そしてそこへ値設定、と続くのでしょう。

`Data`と`Things`は同じもの＝一般的に言うDBのレコード、を指していると思っているのだけど、表記ゆれというか２つの単語があるってややこしいです。システム的にもカッコ書きだし。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f97d8a78-2a6d-e8ff-bdc9-da909e69fff9.png)
"Photo"っていう名前の`Type`を作成。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/8917a15d-6aab-c30c-916c-fec3029f2cfc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/a41f6614-998f-fd5b-015e-4a47c5de0a77.png)
タイトルの型はtextとして、写真を格納する列の型が気になりますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/e154aeef-7b64-fae6-7d86-2c79cf4e144b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/6af54a6a-95ca-c5eb-e34f-df66e2b18f61.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f40fc800-f23e-4fe5-6355-1f94c738fdc0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/5fde54b8-c9a4-6f77-6345-ad7b2b37424e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/eb0b2fe7-442c-5213-2702-7b279f030e45.png)
ここまでは、これまでのチュートリアルで何度もやったこと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f7f7a1fe-1c00-a99d-eb36-42abf6f94ecc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/cea09d8a-3131-3326-912d-6b0f0d8eee16.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f1130e49-f8ac-90da-300f-1bf5a8937156.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/7ae351b2-f1d8-6aee-19a8-d88da92ff21d.png)
"image"型でした！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/b6683d08-aae1-392b-7a38-39e9e4312ba9.png)
そこへ、アップローダーのValueを設定すればおしまい。簡単！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/4ce1e152-af4c-2a71-cdfb-764ad073414f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/9d854f1f-93ec-f853-4b43-0d576378844f.png)
あ、お行儀よく、リセットする処理ですね。（私はいつも忘れている）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/41919a9c-a717-91ca-4f19-8021c84a1e50.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/92f9b3dc-8497-952c-1226-d0db18e286b1.png)
処理も完成。

## 登録した写真をリスト表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/5ed6b3ab-939b-b7d4-2aea-8198feec9ef8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/81e8a470-49ea-c2bb-a5db-95829c776fbb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/bb36a969-3078-741f-b9ad-978a9c5d79dc.png)
別ページに飛ぶのかと思ったら違って、このページ内に"Repeating Group"を作るようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c9c71641-7e2f-db5d-155e-bb03c13e0c13.png)
大きく作ってねと言うけど、写真とタイトルだけだから適当にこんな感じで。アイコン形式にもできるのかな。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/28a8216d-dabc-593b-4a91-c86653828803.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/60a868ec-0461-b742-2430-7a0cfa15187b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/4f2f1c85-00e5-3250-fb81-9f4d047eb936.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/23c5c15d-6c9d-cd30-840d-3cafe9244ce4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/866c2422-c19e-b8fc-2da3-f95c5b00b7fb.png)
ここは前回もピンとこなかったけど、今回もこない。"Type of content"で"Photo"、"Data source"でももう一度"Do a search for"で"Photo"。

## `Link`を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/4c07a3fe-d35f-d815-3dbf-d6552de0b5dd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/ac0b1a5d-d1dc-5889-f4fd-fad41e855076.png)
グループの中に、`Link`というものを追加。HTMLの`<a>`みたいなものかな。ダイアログのタイトルが、"Searching for photos"だから、なんか探すんでしょう。何を作ってるんだろう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/1316377d-5f6e-1893-657c-cdb7d8a28a3d.png)
`Link`の"Insert dynamic data"から

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/d1b06ed1-a0e6-d697-102e-d63fdbc93679.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/d01098d8-9fe7-5f6b-5fad-7389fe62ec59.png)
"Current cell's Photo" の、"'s Title"を選択。
あぁ、リピートグループの中に、タイトル名を設定してるんですね。その文字のリンクをクリックすると、これから作る別ページに飛ぶということか。

## 写真を見るための別ページを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/8d1193e1-92b4-eb61-6c9d-cfc4c6930553.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/6f7f16eb-d273-d125-e781-53a764740fb0.png)
画面全体の左上にある、"Page: index"と書いてあるところが実はプルダウンで、そこを開くと新しいページを作る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/78538164-31b2-0a6b-eea2-fdca70ef7fbd.png)
ちょっとわき道にそれてこの左上のところ、いろいろ出てるけど、今クリックするのは黄色の"Add a new page..."ですが、ついでに水色のところを説明します。

ここは、これまで作った、というか今の段階では最初からあるデザインページの一覧が並びます。あるのは"index"と、"reset_pw"と、"404"という３つのページがあることがわかります。２列にジグザグに表示されます。わかりづらい気もするけど、アプリを本格的に作るとページがものすごく多くなって探すのが大変なので、２列にして、見やすくしてるんですね。

話を戻して、新しいページを作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/59f0e5a4-86f1-0091-a9d6-8b6b53419f34.png)
新しいページ名を決めて、２段目の"Clone from"は、別のページをコピペして新しいページを作るときのコピー元です。今回は空なので、真っ白のサラなページが作られます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/869d42c4-d3c9-5d1b-a253-e041368d3dea.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/05ea026b-c766-611e-8609-66755d6974dd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/25c5c0ae-7c6c-2fb5-3efc-ad5fd245372b.png)
"Type of content"で、"Photo"を選択します。
このページは、"Photo"テーブルの１レコードごとに表示されるものなので、このページを開くということは、その１レコードが確定していますよ、という宣言・定義のようなものです。

ここで指定することによって、このページ内では "Current pages's Photo's Title" とか、"Current pages's Photo's Photo"という書き方で、１レコードの特定の列の情報にアクセスできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/6acdad8c-bfb8-8b82-34f4-57300e800bc4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/eb848156-813b-b335-d74d-9f5d6e4fcb5f.png)
ページタイトル、何に使うのかわからない。使われたときにすぐわかるように、日本語にしておいた。

## 写真を作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/83c6481f-2bdf-f349-8408-e3413ed9dfcb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/d982db04-cee1-979e-5a65-ff4449ce4cb4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/e308fd15-9d6d-ff69-4311-2c2323655404.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c60a8519-cfce-84ce-b304-db03826a9ec6.png)
"very big"というけど、そこそこの大きさに。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c4eca94f-c21a-2330-4516-ed820a4665b8.png)
"Dynamic image"で、"Current pages' Photo"というのを選ぶことができます。これは、ページの設定で、"Type of content"で"Photo"を選んだからですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c2e1ddf6-69a6-dfb8-adc6-cde0779379e6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/30c1a43a-5c68-4c03-dcd1-16df82c137ca.png)
"Photo"テーブルの"Picture"列の値を使うという設定。

## 写真のタイトルを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/bb81cb6f-8372-9890-269e-da26879cc312.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f064fabf-66e4-8a17-5f0d-878c29c4542e.png)
テキストを、かなり大きく配置。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/b2c8197f-5baa-8576-0305-59273e658aac.png)
"Current pages's Photo's Title"を勝手に入れた！そこ大事な気がするけど！
それでフォントサイズね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/37f294d1-7d37-a5de-fcf2-98364b188349.png)
24pxにしておきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/633b7836-9180-6054-2ae4-00feb765ae41.png)
indexページに戻って、今作ったページへ飛ぶ処理を入れます。

## Repeating groupのリンクから、写真ページへ飛ぶように設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/caa66bce-66d5-8f14-7f67-d35a909553f8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f33c7290-26f9-c42c-a13d-03ce0ec56bab.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/b6d99dfd-a125-2d57-bcbf-e8e0dd4010ff.png)
"Destination page"で、リンクをクリックしたときの行き先を、さっき作った"pic_detail"に設定。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/9abeec69-caea-9dfe-3199-9b8185f73605.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/bb9945a9-d419-beca-1132-d7c0618a77ee.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/3aa87c54-44a8-73ac-823d-af6c12d3f47d.png)
indexページからpic_detailへ、どのデータ（DBの１レコード）を送るか、という設定。つまり送られた側（pic_detail）から見ると、表示すべきデータはどれか、という設定。
"Repeating group"で繰り返しているものの、１つのデータが、"Current cell's Photo"ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/752368c5-6105-f982-d51d-e20ad3fc41d8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/3a1597c2-f492-0dcd-bf57-bb17f60cc3b6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/7718b5d3-8ff9-ff5c-d424-85201d46b5c9.png)
完成！プレビュー！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f5d5113b-9407-6070-2d15-f80fe1eb5041.png)
っとその前に、"Repeating group"の行数が固定されているので、ここのチェックを外します。（チュートリアルに書いてない話）


## プレビューで動作確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/d867a6a5-1570-0bd7-4b8d-3cad8cf11ad0.png)
何件か登録して、次の登録途中です。うーん。地味な画面。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/a598d42a-7d86-415c-5321-fa0c9de6d3ad.png)
リンクをクリックすると、別ウィンドウで（Chromeでは別タブで）"写真ですよ"というタイトルのページが出てきました。
ちなみにこのウィンドウを開いたまま、もう一度リンクをクリックすると、また新しい"写真ですよ"のウィンドウが開くスタイル。
ページのプロパティの、"Page title"は、このタイトルか。言われてみたらあたりまえな気がしました。:sweat_smile:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/b9e72018-76c8-ba1f-aafd-b029aec6d1c9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/81c2e1ac-9c7e-5ee8-b483-c249221e8596.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/333a367b-d9de-dff8-5826-0c7414e65e06.png)
もう一度見返してみると、タイトルは"Insert dynamic data"が使えるので、"Current pages's Photo's Title"を使って、こんな風にもできました。

なお写真は、先日、[川崎フロンターレ](https://www.frontale.co.jp/)の試合を見に、等々力陸上競技場へ行った時の写真です。競技場のある川崎市に[川崎市 藤子・F・不二雄ミュージアム](https://fujiko-museum.com/)がある関係で、こういった像もあります。ボールになっているのはO次郎です。雨の中の試合、お疲れさまでした。

今回は以上です！

# おわりに
今回は、レコード１件に対するページを作る方法でした。**ページのプロパティの"Type of content"** で"Photo"を選ぶことによって、"Photo"１レコード用のページであることが確定し、"Current pages's Photo's Title"とかが使えるよということが、一番のポイントでした。

使う場面はありそうですね。そしてチュートリアルがなくてこの実装をしたくなっていたら、たどり着くのは大変だったかもしれない。

`Type`という単語はページのプロパティ以外でも出てくるから、そのときに今回のことを思い出すと、使い方がわかるかもしれない。

ではよきBubbleライフ＆川崎ライフを！

# Next
[Bubbleのチュートリアル６：Using conditions](https://qiita.com/yo16/items/57b9bef94122c59785db)