未来エンジニア養成所Blog

月単価180万以上のプログラミング講師がプログラミングを皆に楽しんでもらうための情報をお届けします。

【Bubble/ノーコード】データベースに登録された画像を表示する

title


前回の記事で保存した画像データを表示する機能を作成します。


画像を表示するフィールドを作成する

画像を表示するフィールドを作成します。


「Repeating Group」エレメントを使います。

Repeating Groupエレメント



次のように配置します。

Repeating Group配置



コンテンツのタイプ(Type of content)は「画像」を選択します。

Type of content



「Data source」を選択します。

「Do a search for」を選択して、データベースのデータを検索するようにします。

Do a search for



データTypeは「画像」を選択します。

データType



リンクの設定

ユーザーがクリックしたら、別のページに移動できるようにします。


ページの移動には、「Link」エレメントを使用します。

Linkエレメント



Repeating Groupの中に配置します。

Linkエレメント配置



「Insert dynamic data」をクリックして設定します。

Insert dynamic data



動的データを使って、リンクエレメントに画像のタイトルを表示させるようにします。


「Current cell's 画像」を選択します。

画像のタイトルを表示



「画像」の「タイトル」を表示させるようにします。

タイトルを表示



これでデータベースに保存した「画像」「タイトル」がリンクに表示されるようになりました。



新しいページの作成

画面左上から新しいページを作ります。


「▼」をクリックします。

新しいページ



「Add a new Page」をクリックします。

Add a new Page



ページの名前はなんでもOKです。

「CREATE」をクリックで新しいページが作成されます。

CREATE



新しいページに移動したら、何もないところをクリックしましょう。

ページ全体のプロパティが開きます。

先ほどつけた「Picture」が反映されています。

ページ全体のプロパティ



コンテンツのタイプを「画像」として、このページは画像を表示されるページだと設定します。

コンテンツのタイプ



ページ名はなんでも良いですが、今回は「画像ページ」としておきます。

ページ名



ページに画像を表示させる

画像を表示させたいので「Image」エレメントを使います。

Imageエレメント



画面に大きめに設置します。

Imageエレメント



Imageエレメントに、何の画像を表示させるのかを設定します。

「Insert dynamic data」をクリックして設定します。

Insert dynamic data



「Current Page 画像」「's 写真」と選択し、写真を表示させる設定をします。

Current Page 画像


s 写真



続いて、写真のタイトルも表示されるようにします。


「Text」エレメントを使います。

Textエレメント



次のように配置します。

Textエレメント配置



あとは、写真を表示させるやり方と同じになります。

「Insert dynamic data」の設定で、「Current page 画像’s タイトル」にします。

Insert dynamic data



これで、写真のタイトルを表示させることができます。


テキストのフォントは好みで設定すればOKです。


これで新しいページ(Picture)の設定は終わりましたので、元のページに戻ります。



リンククリック時の設定

リンクをクリックしたら、先ほど作った「Pictureページ」に移動できるように設定します。


リンクエレメントをクリックしてプロパティーを表示します。

「Destination page」で、リンクをクリックした時に、どのページに飛ぶかを設定します。

先ほど作った「Pictureページ」に設定します。

リンクの設定



「Data to send」で送信するデータを選択します。

現在表示している画像データを送信したいので、「Current cell's 画像」を選択します。

Current cell's 画像



ユーザーがリンクをクリックした時に、新しいタブで開けるように「Open in a new tab」にチェックを入れます。

Open in a new tab



これで設定は完了しました。



プレビューで動作を確認してみましょう。



画像のタイトルを入力して、好きな画像をアップロードして、保存ボタンを押してみましょう。

画像をアップロード



右側にタイトルのリンクが出てきます。

このリンクをクリックしてみましょう。

リンクをクリック



新しいページに移動して、タイトルと写真が表示されました。

写真の表示


参考図書



LINE公式アカウント

仕事が辛くてたまらない人生が、仕事が楽しくてたまらない人生に変わります。
【登録いただいた人全員に、無料キャリア相談プレゼント中!】


LineOfficial

友だち追加