こんにちは!開発部の松崎です。
今回はbubble公式チュートリアルにある、ページ間でのデータ共有機能を作っていこうと思います。
完成物はこちらです。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/04504502a3dd32a3f78fd0f12588feb5.gif)
前回のチュートリアルは、bubbleチュートリアルやってみた: スライドショーを作ってみよう-4 をご覧ください。
見た目を作る
- まず左の「Input forms」から「Input」を選択し、右側の空白の好きな箇所をクリックしましょう。すると入力の枠が表示されます。
- Placeholderに「Picture Title…」と入力し、ここには写真のタイトルが入りますという説明書きを追加します。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/6f22685741a52e687533caed6a4c057c.png)
3. 左の「Picture Uploader」を選択し、右側の空白の好きな箇所をクリックしましょう。すると画像をアップロードするための要素が表示されます。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/9c505c3dd6d6449ff10e61d43db55875.png)
4. 左の「Button」を選択し、右側の空白の好きな箇所をクリック、右側に出ててくるメニューで「Save」と入力し、ボタンの文字が「Save」と表示されるようにしてみましょう。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/ee7e711cad9618c47903eb35b27834dd.png)
データを保存する
5.「Save」ボタンをダブルクリックしてメニューを表示し、「Start/Edit workflow」をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/5ec48830a24fcbf8305a27ef4f3b4eb2.png)
6.「Click here to add an action..」をクリックします。
7. メニューが出てくるのでその中から「Data(Things)」にカーソルをホバーします。
8. 「Create a new thing..」が出てくるのでクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/5605a5b53f1be0ef27f48413833a39a8.png)
9. 「Create new type」をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/39ea6ecb26269596629c14f765cfa89d.png)
10. 「New type」に「Photo」と入力します。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/7a7ac9a2ac895514b6a1ff0146de2723.png)
11. 「Set another field」をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/5d01ee532204c1fe53fefd882ef67f03.png)
12. 「Create a new field..」をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/fbf62a23083b1b79d6a6b239c7fdc6c4.png)
13. 「Field name」に「Title」、「Field type」に「text」を選択し、「CREATE」ボタンをクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/7b9321b020aabb8f50329004faabb31a.png)
14. 11,12,13と同じ手順で今度は「Field name」に「Picture」、「Field type」に「image」を選択し、「CREATE」ボタンをクリックします。
15. 「Title」が「Input Picture title…`s value」、「Picture」が「PictureUploader A`s value」になるように選択していきます。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/e0f13f4bba288b0148a79bc90011a99c.png)
16. 「Click here to add an action…」をクリック、メニューから「Element Actions」をホバーすると「Reset Inputs」が出てくるのでクリックします。これで「Save」ボタンを押した時に入力した写真のタイトルとアップロードした写真がリセットされます。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/b37ca16c22bb5cddd14f0dc05e249ce8.png)
保存したデータを表示できるようにする
17. 「Design」をクリックして最初のページに戻ります。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/2ca2a2a388af262c24307de8219cee90.png)
18. 左の「Repeating Group」を選択し、右側の空白の好きな箇所をクリックしましょう。出てきたメニューの「Type of content」から「Photo」を選択します。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/9999ae0b5861afd19cdaa3261e03c8be.png)
19. 左の「Link」を選択し、18で作った「Repeating Group」の赤で囲まれている部分をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/6019a1c48dcd09278533a88d09454795.png)
20. メニューが出てきますので「Insert dynamic data」をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/5f26d23fb2fcb8721a30858751569927.png)
21. 「Current cell’s Photo’s Title」となるように選択していきます。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/d4af5c8a2a39d74b46495d8a1dde8de4.png)
詳細ページを作成する
22. ページ左上の「Page」をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/a288db95470554aae381214076a3eb67.png)
23.「Add a new page..」をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/0bddd1924d9408cbd9fed69d4ef73fbe.png)
24. ページの名前を決めます。ここでは 「pic_detail」とし、「CREATE」ボタンを押して新しいページを作成します。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/37650a8fca5cc9507eb167b2b294e0cc.png)
25. 新しいページのどこでもいいのでダブルクリックするとメニューが出てくるので、「Page title」を「Picture」、「Type of Content」を「Photo」に設定します。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/ac5132bfb019609321f7c0ea58e6cff5.png)
26. 左の「Image」選択して右側の空白の好きな箇所をクリックします。メニューが出てくるので「Insert dynamic data」をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/0f011445721a25df05e66629ebd328b6.png)
27. 「Dynamic image」を「Current Page Photo’s Picture」にします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/89909423c4c6da7ebbd8779145583bca.png)
28. 左の「Text」選択して右側の空白の好きな箇所をクリックします。メニューが出てくるので「Insert dynamic data」をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/5fad28b737e2d5e4a60af5a60d62281f.png)
29. 「Appearance」の赤で囲った部分を「Current Page Photo’s Title」にします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/7961ec94fc3eb0a7b9b91e691e66c89c.png)
30. 画面左上の「Page」から「index」を選んでトップページに戻ります。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/971097a6290a16571fbce31e46d76bec.png)
詳細ページに遷移できるようにする
31. 赤で囲んだ箇所をダブルクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/18276b2934ac3d1f2701d52a9b99ab72.png)
32. 一番上の項目を「Current cell’s Photo’s Title」、「Destination Page」を「pic_detail」、「Data to Send」を「Current cell’s Photo」にし、「Open in a new tab」にチェックを入れます。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/a881c759cf45be730f8f9a6b2191a040.png)
プレビュー
33. 作業は以上で終了です。画面右上のプレビューを押してアプリを確認してみましょう。
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/20d75d592745b7ea7456e1e613561d03.png)
![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/04504502a3dd32a3f78fd0f12588feb5.gif)
これで完成です!お疲れ様でした!
感想
今回初めてノーコードのサービスを使ってみたのですが、データの作成から作成したデータを動的に表示するところまでをコードを書かずに作れたことに驚きました!アプリの作成画面もわかりやすくて便利ですね!まだまだ他にもノーコードのサービスはあるので色々触ってみたいと思います!
もし実際にアプリを作ってみたいと思った方は、ぜひ以下の記事もご覧ください。
Bubbleでサービス開発ー案決めアプリ①サービス企画と要件定義
Bubbleで開発-前略プロフィール再現①要件定義とデザイン