今回の記事では、Bubbleにおける重要な原則の概念や、その一つであるマルチページアプリケーションの概要を解説していきたいと思います。Bubbleでより複雑なアプリケーションを構築していく際に、大切な考え方になるので、ここでしっかりとおさえていきましょう。
重要な原則
Bubbleアプリは、要素数、ページ数、ワークフローなどの点で複雑で大規模なものになる可能性があります。Bubbleには、複雑さを管理するために使用できるいくつかの機能があり、アプリが成長していくにつれて、またユーザーのニーズに合わせて進化していくにつれて、アプリを管理しやすくします。
アプリを構築するには、一般的に2つの主なオプションがあります。一つ目は多くの異なるページを使用する方法(マルチページアプリケーション)で、二つ目はページ数を制限してそれらのページを多機能にする方法(シングルページアプリケーション)です。
そして、特定の状況下でページがどのように見えるか、何をしているのかを示すために表示/非表示のグループを使用します。シングルページアプリケーションを構築する場合、条件とカスタムステートは、どの要素をいつ表示するかを制御するのに非常に便利です。パフォーマンス面では、どちらのオプションも異なるトレードオフの関係にあります。例えば、前者ではページロードは速くなりますが、ページの変更は頻繁に行われます。
アプリケーションの構築は正確な科学ではなく、むしろ芸術です。多くの状況では、複数のオプションがアプリの実行可能な方向性となります。アプリを構築する際には、経験と個人的な好みが鍵となります。アプリの構成は、他のユーザーを非常に参考にすることができるので、Bubbleのフォーラムページで助けを求めることを強くお勧めします。最終的には、Bubbleの一般的なルールとは、自分にとって意味のあるものを構築することです。
マルチページアプリケーション
概要
アプリケーションは必要な数だけページを持つことができます。ある1つのページは一般的に、サインアップページ、アバウトページ、ホームページなどのように、1つの目的のために役立ちます。
新しいページの追加
アプリケーションメニューから新しいページを作成することができます。ページは空白で開始することも、別のページのクローンにすることもできます。ページを複製すると、ワークフローを含むページ全体がコピーされ、新しいページの基礎として使用されます。
ページ間の移動
アプリのページ間でユーザーをナビゲートするには、2つの方法があります。リンク要素を使用するか、またはワークフローでナビゲーションが発生する場合は、ページへ移動アクションを使用することができます。
ブラウザのネイティブリンク要素に依存するため、(ページを変更するワークフローをトリガーするボタンを使用するのではなく)リンクを優先すべきでしょう。ページの変更はより速くなり、ユーザーはリンクを右クリックして新しいタブでページを開くことができます。一方、ブラウザのポップアップに対する保護機能がタブの作成をブロックするため、ページ変更アクションは別のタブを開くことができません。
ページが変更されると、ワークフローは終了することに注意してください。したがって、変更ページのアクションはワークフローの最後のアクションであるべきであり、課題チェッカはそうでない状況を検出します。変更ページアクションに条件を使用している場合、課題チェッカはこれを問題としてフラグを立てませんが、そのようなアクション(条件付きの変更ページアクション)が実行された場合、次のアクションを実行する必要がないことを確認する必要があります。
宛先ページがコンテンツのタイプを持っている場合、リンクまたはアクションレベルで、そのページに送信するものを定義する必要があります。
ナビゲーションに関するよくある質問
Q.明示的にリロードしたり、新しいURLを「Go to…」することなく、ページのパラメータやパスを変更することは可能ですか？
これはシングルページのアプリケーションで特によくあるリクエストです。 実際にそのページに “行く “ことなくページのURLを変更するネイティブな方法はありませんが、バブルエコシステム内のいくつかのサードパーティのプラグインがこの機能を提供しています。
Q.アンカーリンクを実装することは可能ですか？
はい。「設定 > 一般 > 一般的な外観」でHTML IDを要素に追加する機能を有効にすることができます。要素にidを追加すると、最後に要素のidを付けて、そのページのURLに移動するリンクをそのページに追加することができます。
また、同様の動作を行うことができるワークフローアクション「Scroll to」の使用も検討してみてください。
まとめ
今回は、Bubbleのページに関する重要な原則を解説していきました。その中でも、より多くのページを持たせるマルチページアプリケーションの基礎が少しは理解出来たかと思います。Bubbleでアプリを構築していく過程で、より複雑なページやワークフロー、要素を散りばめていく事になりますが、そのような時は、他の方々のやり方を真似していくとこが一つの選択肢にあることで、効率良く作業ができるのではないでしょうか。
最後までご覧いただき、ありがとうございました！！
