おすすめ記事

おすすめ記事一覧

Bubbleのプラグインにおける要素・アクションのビルドを説明してみた!!

記事作成

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

今回は、Bubbleのプラグイン構築における要素(element)とアクション(動作)のビルドについて解説していきます。前半パートでは要素構築について、後半パートではアクション構築について順に説明を加えていきます。コードの知識も少し必要になる分野なので、Bubbleにより精通した上級者の方々は特に、是非参考にしてみてください。

要素構築

概要

要素を構築することは、Bubbleプラグインが提供する主な可能性の一つです。Javascriptを使用して、エンドユーザーのための新しいユーザーエクスペリエンスを作成することができますが、プラグインを扱うユーザーはビジュアルエディタを活用してアプリのページに要素を追加したり、動的データを表示したりすることができます。

要素を構築するには、要素がBubbleでどのように動作するか、要素に入力できるフィールドの異なるタイプなどに精通している必要があります。つまり、JavascriptとWeb開発の知識が必要になってきます。新しいプラグインを構築する際にガイダンスが必要な場合は、フォーラムで助けを求めることをお勧めします。ここで簡単な実装を見ていきましょう。

(注意: プラグインの異なる部分は、UIのどこに表示されるかによって文字数の制限が異なります。公開する前にプラグインをプレビューして、すべてが希望通りに見えることを確認してください。)

プラグインに要素を追加する

プラグインは任意の数の要素を提供することができます。新しい要素を追加するには ‘Add a new element button’ をクリックし、左パネルの関連する要素をクリックして要素間を移動します。

プラグインのテスト

要素はエディタとランモードでテストする必要があります。テストは編集モードで行われ、プロパティエディタがどのようにレンダリングされるかを確認するために行われ、コードをテストするときはほとんどがランモードで行われます。プラグインをテストするには、プラグインにアプリを追加して、テストボタンをクリックします。プラグインがテストアプリにまだインストールされていない場合、プラグインはそのアプリに追加されます。テストアプリを開いたままにしておくのは良い習慣です。「テストアプリに移動」ボタンをクリックすると、既存のタブが更新され、プラグインの最新バージョンが取得されます。

要素のビルド

一般的なプロパティの定義

要素を作成する際に最初に行う必要なこととしては、エディタでの要素の動作を制御するEdit Modeプロパティを定義することです。特に、名前、カテゴリ、アイコン、画像のプレースホルダを選択する必要があります(エディタで要素のコードを実行することは不可能なので、要素を表す画像が必要です)。

これが完了したら、要素に適用されるプロパティのピックを開始し、アプリで要素を使用する際にユーザーが記入しなければならないフィールドを定義します。最初に、シンプルなCSSオプションにバブル標準プロパティを使用するオプションがあります。外側の div に適用される背景プロパティ、寸法、ボーダーなどを選択することができます。これらのプロパティはオプションなので、これらに頼らずに要素を構築することが可能です(位置とサイズを除く:要素をリサイズ可能にしたい場合は、’Resizable’オプションを選択する必要があります)。

フィールドの定義

次のセクションでは、フィールドを定義します。フィールドは、ユーザーがプロパティエディタで入力するプロパティです。フィールドは、名前、キャプション、エディタタイプによって定義されます。

エディタタイプにはいくつかの選択肢があります。

静的テキスト、静的数値: ユーザーが何かを入力するシンプルな入力

チェックボックス: ランモードでtrue/falseを返すチェックボックス

Color: カラーピッカーを表示し、値はカラーストップのRGBAコードになります。

ドロップダウン: ユーザーにオプションのセットを提供したい場合に便利です。次の入力でカンマで区切って異なるオプションを入力する必要があります。

静的画像: ユーザーが画像をアップロードできるようにします。

動的な値: バブルコンポーザーを使用して動的な式を定義できるコントロールが表示されます。エディタでコントロールが期待するデータのタイプを定義する必要があります (テキスト、数字、住所など)。関連するボックスにチェックを入れると、データはリストになることもあります。

App Type: これは特定のケースで、要素で使用されるデータのタイプをユーザーに定義してもらう必要があります。例えば、マップ要素の場合、「マーカーのタイプ」というフィールドが必要になるでしょう。このようなフィールドを定義したら、そのタイプの中からフィールドを選択するようにユーザーに促すフィールドをいくつか定義することができます。たとえば、マップの場合、どのフィールドに実際に住所が含まれているかを定義する必要があります。フィールドのデータ型を知る必要があるので、例えば住所のみを表示するようにフィールドの型を制限することができます。

フィールドはオプションにすることができます(そのため、プロパティエディタでは欠落しているとマークされません)。このボックスをチェックすると、ユーザーがBubbleエディタでスタイルを定義したときに、そのフィールドが含まれます。通常、色やその他のスタイリングオプションはスタイルに含まれますが、データソースには含まれません。

状態の定義

ステートを使用すると、アプリケーションエディタ内の他の要素やアクションに対して、要素のデータを公開することができます。例えば、入力に値を持たせたり、マップに「選択されたマーカー」を持たせたりすることができます。コードは関連する値を持つ状態を保持しますが、公開したい状態を宣言する必要があります。それぞれの状態について、データ型を定義する必要があります。これにより、Bubbleがエディタで値を解釈できるようになります。

イベントとアクション

イベントとアクションにより、あなたの要素がワークフローをトリガーし、ユーザーのワークフローによって変更されます

イベントは、あなたの要素でトリガーすることができます。例えば、要素がクリックするなどしてワークフローをトリガーするためには、要素がトリガーできるさまざまなイベントを宣言する必要があります。その後、コードはイベントをトリガーする責任を負います。

最後に、要素に適用されるいくつかのアクションを持つことができます。たとえば、マップをリセットしてすべてのマーカーを非表示にするなどです。ここでも実際のアクションはJavascriptで定義されますが、アクション名とそれに適用される異なるフィールドを定義する必要があります。フィールドの定義は、要素のフィールドに似ています。

コード

これらの異なる情報が定義されたら、要素のコードに入ることができます。これはエディタの下部で行います。各関数について、コードエディタとコンテキストドキュメントが表示され、関数内でアクセスできるさまざまなオブジェクトが表示されます。特に、インスタンスオブジェクトは要素を表し、contextオブジェクトは現在のユーザーやファイルをアップロードする関数などのユーティリティにアクセスすることができます。

要素はいくつかの関数によって定義されます。initialize関数は、要素がページ上に表示されるとすぐに呼び出されます。これはインスタンスごとに一度だけ実行されます。update関数は、要素のプロパティの1つが変更されるとすぐに実行されます。この関数は何度も実行することができるので、コードは不必要な操作を避けるためにどのような変更があったかを追跡する必要があります。アクションは実行アクションで表現されます。データの読み込みと非同期と同期のコードについては、以下の詳細を参照してください。

関数をテストする際には、デバッガポイントを追加して、デバッガをオンにして(ウェブインスペクタを開いて)実行すると実行が停止するようにすることができます。これにより、カスタムコードをクリックバイクリックで実行できるようになります。

アクション構築

概要

アクションのビルドは要素のビルドと非常に似ています。プラグインに追加し、テストアプリを使って同様の方法でテストしていきます。

アクションの種類

クライアントサイドサーバーサイドの2種類のアクションを構築することができます。

1.クライアントサイドのアクションは、ページのインタラクションに便利です。例えば、アナリティクスにデータを送ったり、ライブラリを使ってクレジットカードをトークンに変換したりと、いろいろなことができます。

2.サーバーサイドのアクションは、外部サービスへのカスタムコール、マッチングアルゴリズムの実行、高度な計算などに使用できます。これらのアクションは、後続のアクションで使用できるデータを返すことができます。

アクションの定義

要素と同様に、異なるフィールドを定義し、その値をプロパティオブジェクトのコードで使用しなければなりません。

アクションの中核は、ワークフローがこのアクションにヒットしたときに実行される関数です。この関数は、プロパティとコンテキストオブジェクトと共に呼び出されます。異なるオブジェクトについては、エディタでコンテキストのドキュメントを見ることができます。

要素関数と同様に、データを取得するためにコードが複数回実行される可能性があることを考慮に入れる必要があることに注意してください

例えば、Facebook Pixelにデータを送信するアクションは次のようになります。

サーバーサイドのアクションでノードモジュールを使う

サーバーサイドアクションの機能は、ノードモジュールを使用することで拡張することができます。そのためには、”This action uses node modules “を選択し、以下に表示されるボックスにpackage.jsonを貼り付けます。モジュールは手でリストアップしても構いませんが、”dependencies “セクションのみを使用します。他の状況と同様に、関数内でモジュールを必要とします。

モジュールのリストが追加または更新されると、Bubbleはアクションを実行するために使用されるデプロイメントパッケージを構築する必要があります。このプロセスは数分かかるかもしれませんが、ボックスの下に表示されるリンクをクリックして開始することができます。

まとめ

今回の記事では、Bubbleのプラグイン構築において、要素とアクション両方のビルドについて解説していきました。上級レベルだけあって、すんなりと理解するには難しい部分があったと思いますが、BubbleではjavaScriptの技術と組み合わせ、コードを書いていくことで、より多様なことができるようになるのです。

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

臼井 崇

臼井 崇

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







関連記事

  1. topimage

    bubbleとAdalo徹底比較!Webサービスやネイティブアプリを簡単に作れるおすすめノーコードツ…

  2. 記事作成

    Bubble・言語とアプリ内コミュニケーション、SNSについて

  3. 記事作成

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

  4. 特集記事

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

  5. SaaSロゴ

    Yelo(Jungleworks)

  6. Adalo Resource・アプリ内課金のためのデジタル購入(スクリーンとコンポーネントセクション…

  7. 記事作成

    BubbleのDNSレコードの設定を徹底解説!!

  8. Adalo Resource・ワンタイムカードペイメントとサブスクペイメント(Stripe)(スクリ…

  9. 記事画像

    【2020年確定版】BtoB型のオンラインマーケットプレイス制作向けノーコードツールを紹介!

人気記事

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

おすすめ記事一覧

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