おすすめ記事

おすすめ記事一覧

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

記事作成

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

今回はBubbleのプラグイン構築において、データの読み込みと、プラグインの公開(デプロイ)・バージョニングについて解説していきます。前半ではデータの読み込みについて、後半パートでは公開(デプロイ)・バージョニングについてになります。自分でもプラグイン構築をしていきたい上級者の方々は必見の記事になるのではないでしょうか。

データの読み込み

ObjectまたはList of Objectsのプロパティにアクセスすると、まだBubble WebサーバからユーザのWebブラウザに送信されていないデータを要求することができます。たとえば、my_listというリスト・プロパティがあり、callproperties.my_list.get(0, 99) を実行すると、リストの最初の100 エントリがサーバからフェッチされていないことがよくあります。

経験豊富なJavascriptプログラマーは、コールバック関数を使用して非同期にデータを読み込むことに慣れているでしょう。しかし、このアプローチを取るのではなく、裏で自動的にデータの読み込みを処理するようにしています。ほとんどの場合、たとえ裏で答えを取得するためにサーバーにリクエストをしなければならない場合でも、非同期ではなく、likeproperties.my_list.get(0, 99) を呼び出してすぐに返すようにコードを書くことができます。

以下では、裏でこれを実装する方法を簡単に説明します。実際に何が起こっているのかを理解していないと、予期しない結果が表示される可能性がある状況もあります。

あなたのコードがWebブラウザが持っていないデータを要求した場合、私たちは2つのことをします。

1.データをロードするためにウェブサーバへの非同期リクエストをすぐに開始します。

2.あなたが書いた関数の実行を終了させる特別なエラーをスローし、データの継続を待っていることをAPIに通知します。

データがロードされると、関数の実行を再開します。このとき、データを要求する行に到達すると、データが利用可能になり、関数の実行を継続することができます。

これによってもたらされる現実的な結果は以下の2つになります。

1.アクションの実行など、一度実行されると思っていた関数が、関数が要求するデータをインクリメンタルにロードするため、実際には複数回実行される可能性があります。同様に、ある要素のupdatefunctionは、その要素のプロパティが変更されたときだけでなく、リクエストしたデータの読み込みが終了したときや、その後に変更があったときにも再実行されます。

2.データロード関数を含むtry…catch構文は、私たちが投げる特別なエラーをキャッチし、このメカニズムが正しく動作しない原因となります。

これらの問題がコードのバグの原因にならないようにするために、3つのベストプラクティスをお勧めします。

まず、関数の外部の状態を変更する前に、常に関数の最初にデータをロードします。例えば、リストを取得してウェブブラウザで表示する要素を書いている場合、表示しようとしているリストの項目と、それらの項目のフィールドを DOM を修正する前にロードします。これをお勧めする理由は、まだデータの準備ができていない場合、すべてのデータが読み込まれるまでコードの変更が開始されないからです。逆に、最初の数個のリスト項目をロードして表示し、その後さらにいくつかの項目をロードするように関数を書いた場合、最初の数個の項目を誤って複数回表示してしまうことになるかもしれません。

次に、関数の中に非同期関数を追加しないようにしましょう。例えば、以下のようなコールバックの中でコードを実行しないようにしましょう。理由は依存関係の検出が壊れてしまうからです。

$(document).ready(function() {
  doSomething();
})

 

第三に、データを呼び出すコードをtry…catch構文でラップしないようにするか、ラップする必要がある場合は、特別なエラーを再度スローするようにしてください。これらのエラーはmessageプロパティをチェックすることで検出できます。つまり、’not ready’になることです。

例えば、以下のようになります。

try {
  var myData = properties.my_list.get(0, 99);
  doSomethingWith(myData);
} catch (err) {
  //Re-throw not-ready errors…
  if (err.message === ‘not ready’) {
  throw err;
}
  //And handle other errors…
  myErorrHandlingLogic(err);
}

公開とバージョニング

バージョンタブでは、プラグインのデプロイとアップデートのプッシュ、バグ修正、その他の改善を行うことができます。

ライセンス

プラグインはオープンソースライセンス(MIT)で公開することも、プライベートライセンスで公開することもできます。オープンソースライセンスはプラグインマーケットプレイスでプラグインを無料にし、他のユーザーはコードをコピーすることができます。プラグインがオープンソースとして公開されると、プライベートに戻すことはできないことに注意してください。

プラグインのバージョンが非公開に設定されている場合、いくつかのアプリにこのプラグインへのアクセスを許可することができます。ラグインのテストに使用するテストアプリケーションとは異なる概念であることに注意してください。これらのアプリは、本番環境でプラグインを使用できるようになります。

プライベートプラグインにアクセスできるアプリをクローンする場合、Bubbleはアプリの破損を防ぐために新しく作成されたアプリからプラグインを削除しません。元のアプリのコピーからプラグインを削除したい場合は、アプリの[プラグイン]タブでプラグインを削除する必要があります。

デプロイ

プラグインをデプロイするとき、または変更をプッシュするときに、変更タイプを定義し、デプロイのキャプションを定義することができます。デプロイするとバージョン番号が生成され、プラグインをインストールしたユーザーにアプリ内のプラグインをアップグレードするように促します。

まとめ

今回の記事では、Bubbleのプラグイン構築における細かい解説をしていきました。専門的な内容ではあるものの、javaScriptプログラマーであれば、自分でプラグインを構築し、それをデプロイすることもより簡単になるでしょう。

ここまでご覧頂き、ありがとうございました!

臼井 崇

臼井 崇

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







関連記事

  1. 特集記事

    【Webflow】機能や料金を徹底比較!おしゃれなWebデザイン作成ツール!

  2. 特集記事

    強力MAツール×ノーコード!Moosendをご紹介!

  3. 記事作成

    Bubble・Slack(スラック)&Box(ボックス)

  4. 特集記事

    あまり知られていない!強力NoCodeツール18選!

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

  6. Adalo Resource・空の状態を作る方法、検索バーの作成方法、ユーザーがフィルタリングできる…

  7. 記事作成

    Bubble・SEO(検索エンジン最適化)

  8. Adalo Resource・フォームとトグル(スクリーンとコンポーネントセクション)について

  9. 記事作成

    Bubbleのバルク操作・コメント・コラボレーションを紹介!!

人気記事

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

おすすめ記事一覧

  1. 勤怠管理
  2. タスク
  3. 記事画像
  4. 記事画像
  5. Bubble
PAGE TOP