bubble（チョット）やってみた#05〜Lesson5「ページへのデータの送信」
今回は人気（グローバルでは）のローコードツールbubbleにチャレンジする6回め（０からカウントしているので）です。前回はコネクタを使って簡単に開発する方法を学びましたが、今回は「ページへのデータの送信」です。データを他のページに送りこむみたいな事をやるそうです。bubbleのチュートリアルは完成形が最初わからないのが玉に瑕ですね。
Lessonsページからスタート
さっそくLessonsのページに移動します。
Academyのページから「Learn your way」で先に進み、「By watching」の２つ目にある「Interactive lessons · a few mins each」リンクをクリックします。
「Sending data to pages」の右のボタンを押してレッスンに入ります。
開発者コンソールが表示されて、ガイダンスに従って進んでいきます。今回は説明が長いですね。
説明文を日本語訳するとこんな感じです。
ざっくり読むと、メインの画面からポップアップみたいな感じで詳細が表示される画面が開く・・・みたいな感じみたいです。
もういっこ進むと作るもののイメージがはっきりします。
写真を登録している画面を作り、登録結果の写真をクリックしたらポップアップウィンドウでタイトルと写真が開くというものを作るそうです。
写真を登録するページを作る
まずは呼び出し元になる写真を登録アプリの画面を作ります。
まずはフォームに写真のタイトル欄を設置します。
左の要素メニューから「input」を選択して画面にドラッグし、右に現れるポロパティウィンドウのPlaceholder欄に項目の名前「Picture’s Title」（写真のタイトルを入力してほしい的な内容）を入力します。
次に写真をアップロードする欄を配置します。
要素メニューを下にスクロールして「Picture Uploader」（写真をアップロードする）要素を選択して画面中央にドラッグします。
アップロード用の領域が配置されます。
最後に保存ボタンを配置します。
再び要素メニューを上の方に戻して「button」を選択し、「Picture Uploader」のアイコンの下に配置します。プロパティウィンドウの一番上の項目に「save」と登録します。
「save」ボタンのワークフロー登録
次は配置した「save」ボタンのワークフロー（アクション）を登録します。プロパティウィンドウ（黒い画面）の「Start/Edit workflow」ボタンをクリックします。
Workfrowビューに切り替わります。
下にある「Click here to add an action」をクリックします。
表示されるメニューより「Data(Things)」「Create a new things」（新規登録）を選びます。
右側に表示されるプロパティウィンドゥのTitle欄に表示されるプルダウンメニューから「Create a new type」を選択し、表示されるガイドnew typeの右に「Photo」と入力します。
次に下に表示されるボタン「Set another field」をクリックします。
入力項目が表示されるのでクリックし「Create a new field」を選択するとフィールドの定義画面が表示されます。
field nameに「Title」を入力、field typeに「text」を選択して「create」ボタンで登録します。
次に入力される値を定義します。
Clickするとプルダウンが表示されるのでインプット元であるタイトル欄の値をセットするように設定します。
選択として画面に配置した要素「Input Title」「Input picture」「Button save」が表示されるのでタイトルである「Input Title」を選択し「's Value」（その値）を選択します。
次に写真のイメージファイルをBubbleデータベースに登録します。
Titleフィールドと同じように下に表示されるボタン「Set another field」をクリックし、クリック後「Create a new field」を選択するとフィールドの定義画面が表示されます。
Field name に「Photo」と入力し、Field typeを「image」を選択します。
名前「Photo」でイメージファイルのタイプの項目がデータベースに定義されます。
次はTitleと同様に「input Photo」の値をこの「Photo」フィールドにセットするように設定します。
データベースの登録が設定されたら、次は登録完了後に入力値をクリアする処理を追加します。
「Create a new photo」の右にある「Click here add an action」をクリックします。
表紙されるメニューから「Element actions」「Reset inputs」を選択します。
bubbleでは画面の入力項目をいっぺんにクリアするアクションが予め用意されています。
ここまでで写真を登録をする処理は完成です。
次は登録した写真タイトルを表示する機能を作ります。
写真タイトル一覧の表示機能を設定
再びDesignモードに切り替えます。
ここから登録済み写真のタイトルの表示項目を設定します。
まずは要素メニューから「Container」を選択します。一覧表など複数の項目をまとめて設定する領域が「コンテナ」になります。
今回は要素メニューの「Container」から「Repeating Group」を選択して配置します。
登録した数だけタイトル項目を繰り返し表示する項目を配置します。
表のようなイメージが配置されます。
右に表示されるプロパティウィンドウの設定をします。
Type of connect欄に「photo」を選択して、Data source欄に「Do a Search for」で出てくるポップアップウィンドウのTypeに「Photo」を選択します。
次に表の中にポップアップウィンドウを開くリンクを配置します。
左の要素メニューから「Link」を選択し表の一番上の欄に配置します。
表の中に「Link」を配置したらプロパティを設定します。
表示されるプルダウンから「Current Cell's Photo」「's title」（データのタイトル欄）を選択します。
ここまでで呼び出し元のページである写真を登録して一覧を表示する画面が完成です。
次はリンクをクリックしたら表示されるポップアップ的な画面を設定していきます。
ポップアップ画面の設定
BubbleのDesign画面の左上にある「Page index」をクリックします。
複数画面を１つのプロジェクト内で管理するプルダウン画面が表示されるので「Add a new page」（新規画面の作成）を選択します。
新しい画面の登録画面が表示されます。
Page nameに「Pic Detail」を入力し「CREATE」ボタンで登録します。
新規画面のDesign画面が表示されます。画面の中央（なにもないところ）をクリックして「pic_datail」ページのプロパティを設定します。
Type of content欄のプルダウンから「Photo」を選択し、PageTitle欄に「Picture」と入力します。
次に画面の配置を行います。画面中央に左の要素メニューから「image」を配置します。
プロパティウィンドウのDynamic imageの欄に「Current page photo」「’s picture」（当該データの写真項目）を選択します。
次に写真の上にタイトルを表示するように設定します。
左の要素メニューから「text」を選択して画面上に配置します。
右に表示されるプロパティウィンドウのフォントの設定を「24」に変更します。
これでポップアップページの設定は終了です
次にリンクの動作を設定するので元のページに戻ります。
リンクの動作を設定
リンクの動作を設定するために元のページに戻ります。画面左上の「page pic_detail」をクリックしてプルダウンから「index」（元のページ）を指定して元の画面のDesign画面に戻ります。
リンクの動作を設定するので表の中にあるリンク項目をクリックしてプロパティウィンドウを開きます。
表示されるプロパティウィンドウのDestination pageの欄で新しく作ったページ「pic_detail」を選択します。
次にData to send（送るデータ）欄の内容をセットします。
「Current cell's photo」（指定されている写真のデータ・・・・つまりリンクの場所の写真データ）を選択します。
次に「Open a new tab」（新しいタブとして開く）にチェックしたら処理の設定は完了です
ここまでで今回のアプリ作成は終わりです。
次にPreviewでテストをしてみます。
Previewでテスト
画面右上の「Preview」をクリックしてテストモードに移ります。
作ったアプリが表示されます。（デザインセンスがないのはご容赦ください）
まずはここに写真をどんどん登録していきます。
操作的にはタイトルを入力して、写真をローカルから選んでアップしていく単純な操作です。
リンクに写真タイトルが表示されたら今回のテーマである別ページを表示するためにリンクをクリックします。
Clomeの別タブに指定したリンクの写真とタイトルが表示されました。
これで無事５つ目のレッスンが完了です。
つぎは「Using conditions」（使用条件〜条件を使用してアプリの機能を絞り込む）です。ちょっと怖そうなタイトルですが、実用的なテーマです。
今回は５つめのレッスン「Building a slideshow」を選択します。
この記事が気に入ったらサポートをしてみませんか？