本記事をご覧いただき、誠にありがとうございます。
今回は、bubbleでSPAを実装する方法について解説いたします。
よりUXに配慮したページができ上がると思うのでぜひ参考にしてください！
＼ 年末までに限った無料特典 ／
貴社のシステム開発・アプリ開発を爆速で進めるための
【毎月先着２社限定】デモアプリ構築・無料依頼フォーム
【当社では、こんなデモアプリがすぐに作れます】
- 貴社で「まずつくってみたい」試作品アプリの構築を毎月先着２社限定で無料で承っております
- 社内の管理システムからtoB, toCのWebサービスまで幅広くご支援可能です
- ご興味のある方は下記のフォームよりお申し込みください
bubbleでSPAを実装する方法に関するFAQ
Q. 同一ページ内でエレメントの切り替えを行い、SOAのようなURLを階層構造にするにはどうしたらよいですか？
まず問題を2つに分けます。
- 同一ページでエレメントを切り替える
- URLを階層構造にする
1は様々な方法がありますが、簡単なものを紹介します。
作成例：
https://blogcontent202306.bubbleapps.io/version-test/index/page1?debug_mode=true
デザイン設定で注意すべきことは同一ページのエレメントはすべて縦or横並びに配置します。そこで最初のエレメントにあたるものに
- This element is visible on page load（このエレメントはページが更新された場合、表示される）
- Collapse when hidden（非表示の時、このエレメントの縦横が0pxになる）
にチェックを入れます。
それ以降のエレメントはすべて
- Collapse when hidden
のみチェックを入れます。
次にWorkflowを設定していきます。
1.
「Hide an element」を選択し、現在のエレメントを選択します。
2.
「Animate an element」で次に表示させたいエレメントを選択します。
3.
「Go to page …」を選択し、Destinationに現在表示させているページを選択し、Data to sendに階層的に見せたいURL部分を入力
これで完了です。
まとめ
本記事をご覧いただきありがとうございました。
ちょっと工夫するだけで簡単にSPAのようなGUIが完成してしまうのもbubbleの利点がすごくあらわれていますね！
以上、「bubbleでSPAのような画面遷移は実装できるのか？」についての解説でした。
メンバーを募集中！
当社ではお客様に向き合い、お客様の事業成功にコミットをできる仲間を募集しています。
正社員、インターンから副業まで、幅広く採用活動を進めております。プロジェクトマネージャーやシステムエンジニアとして当社のシステム開発業務に携わってみませんか？
当社と共に、業界トップを目指して挑戦したい方は未経験者から経験者まで広く募集しているので、ぜひエントリーをお待ちしています。
