【Bubble】最新版！Visual Elementの使用方法総まとめ

こんにちは！

EPICs株式会社です！

今回は、Bubble開発において、視覚的な要素を配置するために使用する「Visual Element」の使用方法を総まとめにして説明します！

本記事は、Bubble開発を触ったことがない、これから始めて触るといった初級者の方向けとなっています。

本記事では以下のVisual Elementを解説しています。

動画解説バージョンはこちら！

Visual Elementとは？

Visual Elementとは、Bubble開発画面のサイドバーにある「Visual Element」カテゴリーに含まれるエレメント群のことを指します。
これらのエレメントを活用することで、ページ上にテキストや画像、動画などを配置して実際にアプリ上で確認することができるようになります！

※本記事では、プラグインを使用しない標準のVisual Elementのみを解説します。

各Visual Elementの概要

Text

実装イメージ

ページ上にテキストを表示するエレメントです。

上記の画像では、Textエレメントにノーコードゼミと入力し表示させています。
入力した文字やデータベースに登録したデータを表示することも可能です！

Button

実装イメージ

ワークフローを設定することで、配置したボタンを押したときに何かしらのアクションを起動させることができるエレメントです。

上記の画像では、メールアドレスとパスワードの右側にあるスペースにそれぞれ入力して「新規登録」のボタンを押すことで、入力された内容がデータベースに登録されます。

実際のワークフローを設定する画面はこちら↓

Icon

実装イメージ

ページにアイコンを追加できるエレメントです。
Bubbleでは多数のアイコンを使用することができます。また、ワークフローを組むことで、「このアイコンをクリックしたら別のページへ移動する」といったアクションの設定も可能です！

Link

実装イメージ

内部ページや外部ページへ遷移させるリンクを作成できます！
「Internal page」を設定すると、Bubble内で作っているいずれかのページに遷移させることが可能となり、「External URL」を設定すると、その指定した外部リンクページに飛ぶことができます。

上記のように、「External URL」を選択して「Destination URL」を弊社のHPURLに設定すると

→　

上記のように外部リンク先へ遷移させることが可能です！

Image

実装イメージ

ページに画像を表示するエレメントです。

Imageは、外部からエレメントに直接アップした画像やデータベースに登録されている画像を表示させることができます。
あくまで、アップされた画像を表示するエレメントとなるので、外部から画像データを引っ張ってきて表示させることはできません。

Shape

実装イメージ

アンダーラインや境界線などを作ることができるエレメントです。

文字と文字が縦に並んでいて見づらいときに、アンダーラインを引くといったことに利用できるエレメントです。

Alert

実装イメージ

何かアクションを起こしたときに、ユーザーにエラーなどのメッセージを通知できるエレメントです。

アクションを起こしたときに表示させるため、通常時は隠しておけます。
Position the alert at the top　にチェックを入れることで、アラート表示を最上部に固定することが可能です。

またボタンを押してアラートを表示させたいときは、ボタンのワークフローで、「Element Actions」を選択、下部にある「Alert」の「Show message」を選択することでボタンを押すとアラートが表示される仕様にできます。

Video

実装イメージ

動画を載せられるエレメントです。

デフォルトで選べるビデオの種類は、「YouTube」「Bimeo」のみとなっており、YouTubeとBimeoにアップした動画はリンクを引っ張ってきて載せることができます。

データベースに上げたビデオのデータは、このエレメントでは引っ張って来ることができないため注意が必要です。

プラグインに、データベースに上げた動画を引っ張ってくることが可能なものがあるため、データベースにある動画を表示させたい場合は、プラグインを利用します。

YouTube動画を表示させる例

エディターのVideo IDに、以下のようにhttps://youtu.be/以降のIDを入力することで、該当のYouTube動画を表示させることができます。

HTML

実装イメージ

HTMLコードを埋め込めるエレメントです。

このエレメントを利用することで、HTMLを書き込むことが可能になります。

Bubbleのデフォルトの機能のみだとデザインの実装が難しい場合になどに、HTMLを書き込んでデザインを表現するといった形で使用します。

使用する際は、無料のプラグインを入れる必要があります。

下記は、HTMLコードを使った3点リーダーの実装方法の解説記事です。
複数行に対応！Bubbleで長文の末尾を三点リーダーで省略する方法

Map

実装イメージ

Google Mapを表示させることができるエレメントです。

エディターにある「Number of markers」でピンを立てる本数の指定や、「Map type」でマップ種類を設定することが可能です。

このMapエレメントは使える機能が少ないため、開発を進めてもっと多くの機能を使いたいといった場合は、Google Mapの別のプラグインを使うことで機能を拡張することができます。

おまけ：Built on Bubble

Bubbleのロゴをページに表示できるエレメントです！

以上が、Bubble開発の基礎編となるVisual Elementの使用方法です。

実際に開発画面で使用していき、Bubble開発に慣れていきましょう！