bubble NoCode

[bubble入門編] 初心者でも20分で出来る!サンプルアプリ

概要

やれること :bubbleで第一作目となるサンプルアプリをつくれる

読者対象  :bubbleでこれからアプリを作ってみたい方

必要時間  :20分程度

必要条件    :bubbleの登録完了していること → [bubble入門編] bubbleの登録方法

 

新規アプリの作成開始まで

登録したbubbleのhomeを表示すると↓の図の赤で囲った部分のNew appをクリックします。

https://bubble.io/home

 

 

 

 

 

 

 

 

 

 

 

下記のような初期設定画面表示されます。
赤枠に作成したいappの名前を入力します。
ここで決めた名前は最終的なサービスのURLになります。

https://【決めた名前】.bubbleapps.io/

他に設定欄がありますが、今回はそのままでOKです。赤枠のみ変更しましょう。

他で使わている名前はNGで↓のようなNG画面が出ます。

ちなみに使える文字は英数字とハイフンだけです。
(アンダーバーは使えないんですね。)

名前を入力してCreate a new app をクリックします。
これでアプリ作成が開始できます。

 

作成開始 - 基本画面表示まで

アプリ開始されると下記のような画面が現れます。
いろいろテンプレートが用意されているようですが、ひとまず白紙の状態から始めます。
Start with a blank pageを押しましょう。

すると編集ページが白紙になります。
次に、左のサイドバーが邪魔なのでClose the assistantを押して閉じてしまいましょう。

これでやっと編集できる画面になります。
↓が基本の編集画面です。

 

今回つくるアプリ

今回はボタンを押したら現在時刻を表示するアプリを作成します。
最初なのでシンプルで簡単なアプリになります。

具体的には↓のイメージです。
①最初は文字とボタンだけが配置
ボタンをクリックします。

②クリックすると下(赤枠)に現在時刻が表示されます。

今回は、これだけの機能です。
それでは作っていきましょう。

 

まずはタイトル文字の表示

ボタンの上部にある固定された文字(タイトル)を設定していきます。

デフォルトで出来てるはずですが、左のサイドバーのDesign(青になっている部分)を選択した状態にしてください。
それから、text(赤枠)をドラッグ&ドロップして中央の白いところにおいてあげて下さい。
下の画面の状態になったらOKです。(赤枠や赤矢印は表示されません。)

次に横に出てくる黒い設定画面の一番上の赤枠で囲った部分に表示させたい文字を入力します。
ここでは「ボタンを押すと動くアプリ」というタイトルでも入力しておきましょう。

 

これで文字の表示は完了です。

 

ボタンの配置方法

次にボタンを配置していきましょう。

ボタンも先ほどのtextと同じようにButton(赤枠)をドラッグ&ドロップして中央の白いところにおいてあげて下さい。
置いた場所を修正したい場合は、ドロップしたボタンを再度ドラッグ&ドロップで移動可能です。

 

それから、横に出てくる黒い設定画面の一番上の赤枠で囲った部分にボタン上に表示させたい文字を入力します。
ここでは適当に「ボタン1」という文字を入力しておきます。

これでボタンの配置も完了です。

ボタンを押して表示される文字の設定

ボタンを押すと表示される現在時刻の設定をここで行っていきます。

まず、タイトル文字と同様にtextからドラッグ&ドロップして中央の白いところにおいてあげて下さい。

 

次に設定画面の一番上の...edit me...をクリックし、右にでるInsert dynamic dataをクリックします。

いろいろと表示されますが、Current data/timeを選択しましょう。

次に同じ設定画面の下の方のThis element is visible...のチェックを外します。
これはこのページが読み込まれたときに文字を表示するかどうかの設定です。
今回はボタンを押したら現在時刻の文字を表示するので、最初から表示しないのでチェックを外します。

外すと↓のようなメッセージに切り替わりますが、ご安心ください。

 

これで現在時間の表示設定の完了です。

ワークフローの設定

次にワークフローの設定を行います。
ワークフローとは簡単にいうと処理です。

まず、左のアイコンのWalkflowを選択します。

次にclick here to add... をクリックします。
そしてElementAn element is clicked を選択します。
これは何かをクリックしたときの動作を作成する選択肢です。

黒い設定画面からElementを設定します。

elementにButton ボタン1を設定します。
これでボタン1を押せば動作が発生するようになります。

 

次に何のアクションを起こすか設定します。
下のClick here to add...Element ActionShowを選択します。
これで何かを表示する動作が発生します。

黒い設定画面のElementからText Current data/time を選択します。
これで表示させる対象をさっき設定した現在時刻となりました。

これで表示するアプリの完成です。
さっそく確認してみましょう!!

 

確認方法

確認方法は右上のPreviewをクリックします。

 

すると新しいページに作成したアプリが表示されます。

さっそくボタンを押してみると現在時刻が表示されます。

これにて初めてのアプリ作成は完成です。

 

まとめ

いかがでしたか初めてのアプリ作成は?
まだまだアプリと呼べるレベルではありませんが、
アプリ開発の大きな第一歩です。

今回学んだのは
・固定文字の表示方法
・ボタンを押したときのイベント発生方法
・イベントにより文字を表示させる方法

まだまだ初歩ですが、これからも学んでいきましょう。

 

-bubble, NoCode

© 2022 monz code Powered by AFFINGER5