【徹底解説】BubbleでSPAを実装する方法！初学者向け

「BubbleでSPAってどうやって実装するの？」
「ユーザー体験に良いアプリを作りたい！」

上記のようなBubble初学者の方向けの記事となっています。

本記事では、SPA風の登録フォームの作り方を一通り解説していきます。

このデザインの実装の仕方を知っているだけで、様々な場面で応用が効いてくるので、「知らなかった」という方はぜひ最後まで読んで習得してほしいです。

そもそもSPAとは？結論、コンテンツの切り替えです

SPAとは「Single Page Application」の略で、単一のページで複数のコンテンツの切り替えを行う設計構造のことを指します。

わかりやすい例を挙げると、Facebookのメッセンジャーです。
ある友人とのメッセージ画面で、別の友人とのメッセージ画面に飛ぶ時、ロードすることなくページを表示することができます。

SPAのメリットとしては、ロードすることなく快適にページ遷移できるので、ユーザー体験（UX）の向上に期待できます。

通常の実装であれば、JavaScript周りの高度なスキルが必要なので開発コストがかかってしまいますが、BubbleであればGUIで簡単に実装することができます。

それでは、具体的にBubbleでSPAを実装する方法を解説していきます。

Webサービスの登録時によくある、SPA風の登録フォームを実装していきます。

3つのグループを作成し、縦に隙間なく並べていきます。

グループの役割については下記の通りです。

グループ1とグループ2については、inputとボタンを配置して、グループ3で入力された値が表示されるようにします。

グループ1の「Collapse this…」にチェックを入れます。

これでこのグループが非表示になった時に、グループの高さ分が0になりグループ2が上に詰めて表示されます。

グループ2の「This element…」のチェックを外し、「Collapse this…」のチェックを入れます。

「This element…」のチェックを外すことで、ページロード時にこのグループを非表示にしてくれます。

これができたら、グループ3でも同様にチェックボックスを設定していきます。

◯補足
ボタン1は、グループ1内にあるボタンのことを指します。
Step2では「Transition SlideRightIn」というアニメーションを使っています。

先ほどのワークフローと同様なので、ここでは割愛します。

これまでは「次に進む系」の遷移だったので、上に重なっていくようなUXで良かったですが、今回は「元に戻る系」の遷移なので、アニメーションはやめておきました。

この辺りの細かいUXは、ぜひ自分で研究してカスタマイズしてみてください。