はじめに
Bubbleというノーコード/ローコードでアプリを作るサービスがあり、ちょっと言葉に癖があったりするので、チュートリアルをやってみる記録です。Bubble用語は、Bubbleのように網掛けします。
なるべく細かくキャプチャしていくので、見るだけでもBubbleってこうやるんだと感じていただければ。
これまでのチュートリアルをやってみた記事
-
Saving data
- 位置情報をDBへ登録して、地図にマーカーを表示
- データのInsert
- 地図
-
Building a sign-up system
- ユーザー登録とログイン、ログオフ
-
Saving and modifying data
- SNSっぽい、投稿といいね
-
Repeat Groupの利用 - データのInsert、Update
-
Building a slideshow
- スライドショー形式のアプリ
-
Pluginの利用
-
Sending data to pages ＜＜今回＞＞
-
Data（Things、DBのデータ）の共有
-
チュートリアルの記録
チュートリアルを選択
ログイン後のトップページ
＞左メニューのAcademy
＞Learn your way
＞By watching
＞Interactive lessons
＞Sending data to pages
今回のサブタイトルは、「Share data among pages」です。
別に改めて教わらなくても、これまでやってきたことを使えばできそう・・・というのが、やる前の気持ちですｗ
でもそう思ってやり始めると、得るものがあるのがこれまでだったので、やります。
複数ページとなると、本質的ではない作業量が増えそうだなぁ。
うーん、よくわからない。ユーザーごとのページを作るんじゃなくてテンプレページにユーザーの情報を載せるとしたら、普通そうでしょと思う。
前にも書いたけど、これから何を作るのかわからないというのは、いいのかよくないのか。。
とりあえずStart！
はい・・。
入力フォームを作成
写真のタイトル入力欄ですね。
プレイスホルダーに、写真のタイトルを入れてね的な。
画像アップローダーを設置
Picture UploaderというElementがあるんですね。これはちょっと便利。
保存用のボタンを設置
アップロードした後の、Submit的なボタン。
早っ！
フロントエンドはもう終わりで次は処理。
ちなみに画面は、現時点でこんな感じ。
保存ボタン押下時の処理を作成
"Add workflow"をクリックして、処理作成画面に入ります。
Labelを"保存"って日本語にしたら、ボタンの名前が"Button 保存"って日本語になっちゃったけど、問題ないようですね。チュートリアルの中も書き換わってるし。
Workflowの画面に移って、保存ボタンを押したときのイベント処理に。"action menu"から～
Data (Things) ＞ "Create a new thing..."を選択。ボタンを押したら、DBのテーブルに、新しいレコードをInsertするんですね。Type（テーブル）作成、filed（列）作成、そしてそこへ値設定、と続くのでしょう。
DataとThingsは同じもの＝一般的に言うDBのレコード、を指していると思っているのだけど、表記ゆれというか２つの単語があるってややこしいです。システム的にもカッコ書きだし。
"Photo"っていう名前のTypeを作成。
タイトルの型はtextとして、写真を格納する列の型が気になりますね。
ここまでは、これまでのチュートリアルで何度もやったこと。
"image"型でした！
そこへ、アップローダーのValueを設定すればおしまい。簡単！
あ、お行儀よく、リセットする処理ですね。（私はいつも忘れている）
処理も完成。
登録した写真をリスト表示
別ページに飛ぶのかと思ったら違って、このページ内に"Repeating Group"を作るようです。
大きく作ってねと言うけど、写真とタイトルだけだから適当にこんな感じで。アイコン形式にもできるのかな。
ここは前回もピンとこなかったけど、今回もこない。"Type of content"で"Photo"、"Data source"でももう一度"Do a search for"で"Photo"。
Linkを追加
グループの中に、Linkというものを追加。HTMLの<a>みたいなものかな。ダイアログのタイトルが、"Searching for photos"だから、なんか探すんでしょう。何を作ってるんだろう。
Linkの"Insert dynamic data"から
"Current cell's Photo" の、"'s Title"を選択。
あぁ、リピートグループの中に、タイトル名を設定してるんですね。その文字のリンクをクリックすると、これから作る別ページに飛ぶということか。
写真を見るための別ページを作成
画面全体の左上にある、"Page: index"と書いてあるところが実はプルダウンで、そこを開くと新しいページを作る
ちょっとわき道にそれてこの左上のところ、いろいろ出てるけど、今クリックするのは黄色の"Add a new page..."ですが、ついでに水色のところを説明します。
ここは、これまで作った、というか今の段階では最初からあるデザインページの一覧が並びます。あるのは"index"と、"reset_pw"と、"404"という３つのページがあることがわかります。２列にジグザグに表示されます。わかりづらい気もするけど、アプリを本格的に作るとページがものすごく多くなって探すのが大変なので、２列にして、見やすくしてるんですね。
話を戻して、新しいページを作ります。
新しいページ名を決めて、２段目の"Clone from"は、別のページをコピペして新しいページを作るときのコピー元です。今回は空なので、真っ白のサラなページが作られます。
"Type of content"で、"Photo"を選択します。
このページは、"Photo"テーブルの１レコードごとに表示されるものなので、このページを開くということは、その１レコードが確定していますよ、という宣言・定義のようなものです。
ここで指定することによって、このページ内では "Current pages's Photo's Title" とか、"Current pages's Photo's Photo"という書き方で、１レコードの特定の列の情報にアクセスできます。
ページタイトル、何に使うのかわからない。使われたときにすぐわかるように、日本語にしておいた。
写真を作成
"very big"というけど、そこそこの大きさに。
"Dynamic image"で、"Current pages' Photo"というのを選ぶことができます。これは、ページの設定で、"Type of content"で"Photo"を選んだからですね。
"Photo"テーブルの"Picture"列の値を使うという設定。
写真のタイトルを作成
テキストを、かなり大きく配置。
"Current pages's Photo's Title"を勝手に入れた！そこ大事な気がするけど！
それでフォントサイズね。
24pxにしておきました。
indexページに戻って、今作ったページへ飛ぶ処理を入れます。
Repeating groupのリンクから、写真ページへ飛ぶように設定
"Destination page"で、リンクをクリックしたときの行き先を、さっき作った"pic_detail"に設定。
indexページからpic_detailへ、どのデータ（DBの１レコード）を送るか、という設定。つまり送られた側（pic_detail）から見ると、表示すべきデータはどれか、という設定。
"Repeating group"で繰り返しているものの、１つのデータが、"Current cell's Photo"ですね。
完成！プレビュー！
っとその前に、"Repeating group"の行数が固定されているので、ここのチェックを外します。（チュートリアルに書いてない話）
プレビューで動作確認
何件か登録して、次の登録途中です。うーん。地味な画面。
リンクをクリックすると、別ウィンドウで（Chromeでは別タブで）"写真ですよ"というタイトルのページが出てきました。
ちなみにこのウィンドウを開いたまま、もう一度リンクをクリックすると、また新しい"写真ですよ"のウィンドウが開くスタイル。
ページのプロパティの、"Page title"は、このタイトルか。言われてみたらあたりまえな気がしました。
もう一度見返してみると、タイトルは"Insert dynamic data"が使えるので、"Current pages's Photo's Title"を使って、こんな風にもできました。
なお写真は、先日、川崎フロンターレの試合を見に、等々力陸上競技場へ行った時の写真です。競技場のある川崎市に川崎市 藤子・F・不二雄ミュージアムがある関係で、こういった像もあります。ボールになっているのはO次郎です。雨の中の試合、お疲れさまでした。
今回は以上です！
おわりに
今回は、レコード１件に対するページを作る方法でした。ページのプロパティの"Type of content" で"Photo"を選ぶことによって、"Photo"１レコード用のページであることが確定し、"Current pages's Photo's Title"とかが使えるよということが、一番のポイントでした。
使う場面はありそうですね。そしてチュートリアルがなくてこの実装をしたくなっていたら、たどり着くのは大変だったかもしれない。
Typeという単語はページのプロパティ以外でも出てくるから、そのときに今回のことを思い出すと、使い方がわかるかもしれない。
ではよきBubbleライフ＆川崎ライフを！