ノーコード bubble 解説_ワークフローの表示は選択肢によって書き換わる

1つ1つページを作るほどではないけれど、Bubbleを使って気付いた事を忘れないうちにこのページに貯めて行こうと思います。

 

リロード、再読み込みしてもダメだったのに1日経ったら出来ていた

アプリ制作。何度見直しても間違った所は見つからず再読み込みしても思った通りの表示にならないのでもう自分の力ではどうにもならないと落ち込んだままパソコンを落として寝る。朝起きてパソコンを立ち上げて見てみた(Preview)ら出来ていました。

パソコンあるあると言えばそうなのですが、一度落としたからでしょうか

 

 

編集画面でテキストが表示されなかったら

Textエレメントでテキストを配置して文字の大きさ(や間隔など)を変更すると十分なスペースがあるにも関わらず表示されなくなる事が結構あります。Previewで実際の表示を見るとちゃんと表示されるのでいいのですが、編集画面で表示されないのはちょっと気持ちが悪い。

これはフォントサイズを一度別の大きさに変えてもう一度戻すと表示されたりします。

あとはスペースを少し広げてみたりLine spacing 、Letter spacingをいじって戻したり

 

 

お手本と同じ選択項目が無い時はElements tree の位置を変えてみる

お手本と同じように作った(つもり)なのに同じ項目が選択肢の中に無い。

例えばDynamic imageに「Current Cells Message」を選びたいのですが見当たりません。Elements treeの構造を考えて作れればお手本通りにあるはずなのですが、それがまだ難しい勉強段階の時は、、

 

 

エレメントをマウスで少し動かしてみるとElements tree内の位置が変わって選択項目の中に「Current Cells Message」が現れたりします。

BubbleではこのElements tree内の位置(親子関係とも言います)が Workflow や Data source を設定する時など大きな意味を持ちます。欲しいメニューが項目の中に無い時はElement treeをもう一度よく見てみると間違いに気づくかもしれません。

 

それから選択項目は自分で作った物も出て来ます。お手本を部分的に真似しようとして「!?同じ物が無い」と思ったらそうゆう事です

ワークフローの数も同様で私も最初の頃、お手本には四角が3つあるのに自分のには点線の四角しか無い、、と焦りました

 

 

Elements treeの構造を崩さないでエレメントを移動させたい

例えばImage AをコピペしてImage Bを作りました。Image BをImage Aの右に綺麗に並べたいのですが、、

 

マウスで直接動かすと狭いスペースの中でやっている事もありElements treeの構造が崩れてしまう場合があります。

 

そんな時はImage A 、Image Bを両方選択>右クリック>Align vertical centers で整えたりXYに入力すると構造も崩れません。

あとはキーボードの左右上下の→でも◎

 

 

ワークフローの四角の中の文字は選択肢によって書き換わる

例えばお手本にしているアプリのワークフローが「When Group User is clicked」となっているとします。

 

説明には「Click here to add an action>  ElementでGroup Userを選択して〜」と言う感じに書いてあります。でも、Elementの選択項目の中にGroup Userが有りません。

初心者用に全部説明してくれる場合もあればそこまでは解説していない場合もあるのでまだ慣れていないとここで困ってしまうかもしれません。(この段階では一番上のAn element is clickedが正解です)

 

そんな時、ワークフローの四角の中の表示は選択項目によって書き換わると覚えていてください◎ An element is clickedのElement の選択項目の、、

 

Group Userを選ぶと四角の中が「An element」から「Group User」に書き換わって「When Group User is clicked」になります。

 

こうゆうパターンがあると知っていると解説が飛び飛びの場合でも自力でも進めるようになると思います