Bubbleの重要な原則とマルチページアプリについて解説!!

記事作成

皆さん、ごきげんよう!!

今回の記事では、Bubbleにおける重要な原則の概念や、その一つであるマルチページアプリケーションの概要を解説していきたいと思います。Bubbleでより複雑なアプリケーションを構築していく際に、大切な考え方になるので、ここでしっかりとおさえていきましょう。

重要な原則

Bubbleアプリは、要素数、ページ数、ワークフローなどの点で複雑で大規模なものになる可能性があります。Bubbleには、複雑さを管理するために使用できるいくつかの機能があり、アプリが成長していくにつれて、またユーザーのニーズに合わせて進化していくにつれて、アプリを管理しやすくします。

アプリを構築するには、一般的に2つの主なオプションがあります。一つ目は多くの異なるページを使用する方法(マルチページアプリケーション)で、二つ目はページ数を制限してそれらのページを多機能にする方法(シングルページアプリケーション)のいずれかです。そして、特定の状況下でページがどのように見えるか、何をしているのかを示すために表示/非表示のグループを使用するのです。シングルページアプリケーションを構築する場合、条件とカスタムステートは、どの要素をいつ表示するかを制御するのに非常に便利です。パフォーマンス面では、どちらのオプションも異なるトレードオフの関係にあります。例えば、前者ではページロードは速くなりますが、ページの変更は頻繁に行われます。

アプリケーションの構築は正確な科学ではなく、むしろ芸術です。多くの状況では、複数のオプションがアプリの実行可能な方向性となります。アプリを構築する際には、経験と個人的な好みが鍵となります。アプリの構成は、他のユーザーを非常に参考にすることができるので、Bubbleのフォーラムページで助けを求めることを強くお勧めします。最終的には、Bubbleの一般的なルールとは、自分にとって意味のあるものを構築することなのです。

マルチページアプリケーション

概要

アプリケーションは必要な数だけページを持つことができます。ある1つのページは一般的に、サインアップページ、アバウトページ、ホームページなどのように、1つの目的のために役立ちます。

新しいページの追加

アプリケーションメニューから新しいページを作成することができます。ページは空白で開始することも、別のページのクローンにすることもできます。ページを複製すると、ワークフローを含むページ全体がコピーされ、新しいページの基礎として使用されます。

記事説明

ページ間の移動

アプリのページ間でユーザーをナビゲートするには、2つの方法があります。リンク要素を使用するか、またはワークフローでナビゲーションが発生する場合は、ページへ移動アクションを使用することができます。ブラウザのネイティブリンク要素に依存するため、(ページを変更するワークフローをトリガーするボタンを使用するのではなく)リンクを優先すべきでしょう。ページの変更はより速くなり、ユーザーはリンクを右クリックして新しいタブでページを開くことができます。一方、ブラウザのポップアップに対する保護機能がタブの作成をブロックするため、ページ変更アクションは別のタブを開くことができません。

ページが変更されると、ワークフローは終了することに注意してください。したがって、変更ページのアクションはワークフローの最後のアクションであるべきであり、課題チェッカはそうでない状況を検出します。変更ページアクションに条件を使用している場合、課題チェッカはこれを問題としてフラグを立てませんが、そのようなアクション(条件付きの変更ページアクション)が実行された場合、次のアクションを実行する必要がないことを確認する必要があります。

宛先ページがコンテンツのタイプを持っている場合、リンクまたはアクションレベルで、そのページに送信するものを定義する必要があります。

ナビゲーションに関するよくある質問

明示的にリロードしたり、新しいURLを “Go to… “することなく、ページのパラメータやパスを変更することは可能ですか?

これはシングルページのアプリケーションで特によくあるリクエストです。 実際にそのページに “行く “ことなくページのURLを変更するネイティブな方法はありませんが、バブルエコシステム内のいくつかのサードパーティのプラグインがこの機能を提供しています。

アンカーリンクを実装することは可能ですか?

はい。設定 > 一般 > 一般的な外観でHTML IDを要素に追加する機能を有効にすることができます。要素に id を追加すると、最後に “#[要素の id] を付けて、そのページの URL に移動するリンクをそのページに追加することができます。

また、同様の動作を行うことができるワークフローアクション「Scroll to」の使用も検討してみてください。

まとめ

今回は、Bubbleのページに関する重要な原則を解説していきました。その中でも、より多くのページを持たせるマルチページアプリケーションの基礎が少しは理解出来たかと思います。Bubbleでアプリを構築していく過程で、より複雑なページやワークフロー、要素を散りばめていく事になりますが、そのような時は、他の方々のやり方を真似していくとこが一つの選択肢にあることで、効率良く作業ができるのではないでしょうか。

ここまでご覧になってくださり、ありがとうございました!!

臼井 崇

臼井 崇

テコンドー学生チャンピオン|2010年(H22年)に野村證券入社 ⇒ 5年半ザ・野菜を経験 |2015年10月からみずほFGにて金融商品のリスク管理業務に従事|2020年7月からファウンダーズに|金融からIT 、大手からベンチャーとそれぞれの観点からお役に立ちそうな情報を発信します!
日本に限らず海外のSaaSの紹介や、SaaS特集記事を取り上げていきます!
ご相談・お問い合わせは下記ボタンよりお願いします。







関連記事

  1. SaaSロゴ

    Landbot

  2. 記事作成

    Bubbleアプリに独自ドメイン名を使用する方法を解説してみた!!

  3. Adalo Resource・画面とコンポーネントベーシック

  4. Adalo Resource・とりあえず始めてみる

  5. 記事作成

    Bubbleのアカウント管理・プラン・請求について解説!!

  6. 記事作成

    Bubble・データを保存する&データタブ

  7. 記事画像

    発注者も必見!ノーコードツールで開発を行うメリット13個

  8. 記事作成

    Bubbleのデータ読み込みとプラグインの公開・バージョニングを解説!

  9. SaaSロゴ

    Panther(Jungleworks)

人気記事

  1. topimage
  2. 記事画像
  3. top_image
  4. 特集記事

おすすめ記事一覧

  1. 飲食店 会計
  2. 記事画像
  3. Bubble
  4. 記事画像
  5. 記事画像
PAGE TOP