ノーコードでWEBアプリ、ネイティブモバイルアプリ開発が出来るbubbleで作る、シングルページアプリケーションの作り方を解説します。
シングルページアプリケーションとは？
１枚のページ内で、表示/非表示を切り替えてデータを表示する方法です。
マイページなど、タブの切り替えでデータの表示を切り替えるフローを見たことがある方も多いと思いますが、既に読み込まれているデータを表示/非表示切り替えるだけなので、表示がスムーズというメリットがあります。
一方で、多くの情報をシングルページアプリケーションに詰め込んでしまうと、最初の読み込みが遅くなる点に注意が必要です。
bubbleでのシングルページアプリケーションの作り方
グループコンテナを使う
基本的に、グループコンテナを使います。このように、グループコンテナを並べて配置します。
表示設定
Layoutタブにある以下の３項目を設定します
- This element spacing between elements ー チェックを外し、デフォルトで要素を非表示にします。
- Collapse when hidden ー チェックを入れ、非表示の時に要素の高さを０にして、下にあるグループが上に移動するようにします。
- Animate the collapse operation ー チェックを入れてしまうと、瞬時に切り替わらなくなってしまうので、チェックを入れないように気を付けて下さい。
アクション設定
次に、ページが読み込まれたときにURLパラメータを追加するアクションを設定します。
ページが読み込まれたときに、パラメータを含めるように設定します。
ワークフローのアクション設定で
- Send more parameters to the pageにチェックを入れます
- Kyeの左に好きな値を入れます。bubbleの解説動画で「v」と入れていることが多かったので、同じように今回は「v」を入れてあります
- 右側の値に、パラメータとなる文字列を入れます。URLになるので、半角英数が良いです。入力する際に出てくるclickという項目はdeketeで消します。
表示条件となるコンディションを設定
最後に、表示条件となるコンディションを設定します。
ページが読み込まれたときに非表示にしているので、パラメーターの値が一致している場合、表示するという条件を設定します。
vのパラメーターが【form1】の場合、要素を表示するというコンディションを設定しています。
まず、Whenの条件部分に、【Get from page URL】をセットします。
もう１つ設定画面がついてくるので、Parameter nameに【v】を（こちらは、アクション設定のkeyで左側に設定したキーネームを入力します）入力し、Typeをtextにします。
続いて、【is】【form1】と入力をして、設定を完了します。
パラメータ【v】の値が【form1】の場合という条件が完成です。
最後に、Select a property to change when trueのドロップダウンから【This element is visible】を選択し、表示するという条件を付けくわえて完成です。
その他の切り替え方法
ボタンがクリックされたら表示するというアクションを追加する方法でも同じことが出来ます。
アクションのトグルを使う方法
toggle an elementアクションを使って、指定した要素に切り替えるというアクションを追加します。
アクションのshowを使う方法
Show an elementアクションを使って、指定した要素を表示させるアクションを追加します。
