未来エンジニア養成所Blog

プログラミングを皆に楽しんでもらうための情報をお届けします。

【bubble/ノーコード】エレメントを確認してみよう Part1

title


前回はbubbleでアプリを作成するための編集ページを表示するところまで解説しました。

phoeducation.work


今回は編集ページでどのようなことができるのかを解説します。


まず、画面左側を見ると、下記のようにいくつかのタブが並んでいます。

tab


その中から、まずは「Design」を確認してみましょう。

design tab


ここは主にUI(ページのデザイン)を設定したり、パーツを設定したり、またはレスポンシブの設定を行ったりします。


この「Design」タブの中には「Visual elements」というのがあり、これが基本的なパーツになります。

Visual elements


この中から使用したいパーツを選択し、右側のデザイン枠でダブルクリック(もしくは必要なサイズにドラッグ)すると、パーツを配置することができます。


Text

画面に文字を表示したい時に使用するパーツです。

Text


Button

画面にボタンを表示したい時に使用するパーツです。

Button


Icon

画面にアイコンを表示したい時に使用するパーツです。

画面を閉じる時の×印や、ゴミ箱などのアイコンもあります。

Icon


Link

画面にリンクを表示したい時に使用するパーツです。

自分のアプリ内へのリンクだけではなく、外部ページへのURL等も設定することが可能です。

Link


Image

画面に画像を表示したい時に使用するパーツです。

Image


Shape

画面に四角を表示したい時に使用するパーツです。(使い道が把握できていませんが、、、)

Shape


Alert

画面に注意メッセージを表示させたい時に使用するパーツです。

Alert


Video

画面にYouTubeもしくはVimeoの動画を表示させたい時に使用するパーツです。

Video


HTML

画面にHTMLで記述することができるパーツです。

HTML


Map

画面に地図を表示させたい時に使用するパーツです。

これだけでGoogleMapを使えてしまうなんて、素晴らしいですね。

Map


Built on Bubble

画面にbubbleのバナーを表示したい時にしようするパーツです。

Built on Bubble


このように様々なパーツが用意されていますので、自分の必要なパーツをどんどん画面に並べていくだけでできてしまうのです。

素晴らしい!


参考図書



独学で挫折しそうになったら、オンラインプログラミングスクール
未来エンジニア養成所Logo