【NoCode】bubbleのチュートリアル解説⑤新規ページを作ってデータベースに保存された画像を表示させてみよう
bubbleの登録はこちらから。登録するとチュートリアルが選べるようになります。今回は「Sending data to pages」というチュートリアルをやってみます。
★目的：データベースに保存された画像を表示させる。
まず目的地を確認しましょう。タイトルを入力して画像をアップロードしてからSaveボタンを押すと、右のリストにリンク付きのタイトルが表示されるようにします。
次にリンクの遷移先のページを作って例えばseaをクリックすると保存された画像が別ページで表示されるようにします。これが目的地です。
★このチュートリアルで学べるbubbleの新しい機能：
①「Picture Uploader」で画像をアップロードする方法
②別ページを作る方法
③「Link」を使って別ページに遷移する方法
④ページ間でデータをやり取りする方法
新しい機能が多いこと、ページ間の遷移を扱うことから難易度は少々高めです。
１．「Picture Uploader」を使いつつ見た目を作る
前回までの知識を用いていい感じの見た目を作ります。InputとButtonはおなじみですが、今回はさらに「Picture Uploader」という画像をアップロードするための機能を使います。それぞれElement Paletteから選んで画面の任意の場所に配置します。僕は下記のようにデザインしました
２．データベースを作成する
ここでもまずは目的地をイメージしましょう。下記のようなPhotoデータベースを作成することを目指します。
データ型がtextのTitleとデータ型がimageのPictureという項目を作成します。それぞれ文字列と画像を保存するための箱だと思って貰えれば問題ありません。水色の部分はイメージしやすくするために僕が勝手に作ったデータ例です。例えば1番目のデータはTitleにFlowerという文字列を保存し、flower.jpgという画像を保存しています。余談ですが、エンジニアの世界では、このように縦列と横列で表すことのできるExcelっぽいデータベースのことをRelational Database（RDB）と呼んだりします。
では目的地が確認できたところで実装していきましょう。
まずSave ButtonのStart/Edit workflowからクリックした時にアップロードされた画像を保存するという機能を実装していきます。
「Click here to add an action」からData(Things)のCreate a new thingを選択します。
Create a new PhotoのTypeに「Photo」を入力します。これで「Photo」データベースを作成できます。
次にデータベースにどのようなデータを保存するかについて定義していきます。
Set another fieldからデータベースのField name（項目名）を「Title」にしてField type（データ型）を「text」にします。
同様に再度Set another fieldをクリックしてField nameを「Picture」に、Field typeをimageに設定します。
これでPhotoデータベースは完成です。もう一度データベースのイメージを確認しておきましょう。
ちなみにデータ型についてはこちらを参照。
もう一度Photoデータベースの設定画面に戻って、どこのデータを参照するかについて設定します。Titleには「Input Title」からPictureは「Input Picture」からvalue（値）を受け取ります。冒頭で設定したInputとPicture Uploaderが該当します。
最後にClick here to add an actionのElement ActionsからReset inputsを選んでSave Buttonがクリックされた時にTitleとPictureの各入力値をクリアするようにします。これは毎度おなじみの作業ですね。
３．Linkを作成する
Designワークスペースに戻って、ContainersのRepeating Groupを選択します。Repeating Groupは保存されたデータをリスト表示したい時に使用します。
Data sourceに先程作成したPhotoデータベース(Type)を選びます。「Do a search for Photo」と入力すればData source欄に「Search for Photos」と反映され、先程作成したPhotoデータベースからデータを持ってこれるようになります。
次にElement Paletteの「Link」をクリックしてRepeating Group内に配置します。表示はCurrent cell's Photo's Titleに設定します。これで保存した画像のTitleがRepeating Group内に表示されるとともに、クリックするとリンク先に飛べるようになりました。リンク先のページはこれから作っていきます。
４．リンク先のページを作成する
画面の左上にあるPage:indexからAdd a new pageをクリックします。
Page nameは何でも良いですが、チュートリアルに従って「pic_detail」と入力するとpic_detailページが作成されます。
pic_detailページの何もないところをクリックして設定画面を呼び出します。Page titleにPicture、Type of contentにPhotoを設定します。Page titleの部分はブラウザで開いた時にページタブに表示されるメッセージになります。
Element Paletteから「Image」を選び、pic_detailページに表示させます。
テキストをImageの任意の場所に配置して文字を大きく表示させるためにフォントサイズを24にします。
再び左上のPage選択からIndexページに戻ってLink(Current cell's Photo's Title)からポップアップウィンドウを呼び出してLink destination（リンク先のページ）を「pic_detail」、Data to send（データの送り先）に「Current cell's Photo」をそれぞれ設定します。これでLinkをクリックするとpic_detailページに遷移するとともに、セル内に保持されたデータがpic_detailページにも送付され、遷移先でデータが参照できるようになりました。これで完成です。
Previewで動作を確認してみてください。
↓↓↓次のチュートリアルはこちら↓↓↓
この記事が気に入ったらサポートをしてみませんか？