おすすめ記事

おすすめ記事一覧

Bubble・OneSignalでウェブに通知をつける、AirTable(エアテーブル)

ノーコードでWebアプリ作成 ~Bubble編~|濱口 まさみつ|note

みなさんごきげんよう。寒い日が続きますが、いかがお過ごしでしょうか。たくさん食べて免疫つけていきましょう。さて今日の記事でノーコードツールbubbleでの、OneSignalでウェブに通知とAirtableについて解説していきます。それでは張り切ってLet’s Go!

OneSignalウェブ通知

Web およびその他の通知を介した顧客エンゲージメントのマーケットリーダーである OneSignal とのパートナーシップで構築された新しいプラグインを紹介します。OneSignalのWeb通知を使用して、マーケティング・ブラスト、パーソナライズされたメッセージ、またはその他のカスタム通知をユーザーのコンピュータに直接送信することができます。 この機能をbubbleアプリに追加するには、OneSignalプラグインをインストールし、OneSignalのアカウントを作成してください。 

OneSignalでのウェブ通知を始める

1, OneSignalのダッシュボードで新しいアプリをセットアップします。Web Pushプラットフォームを選択し、以下に示すように、統合として「WordpressプラグインまたはWebサイトビルダー」の下にある「bubble」を選択します。

「その他のサイトの設定」で、bubbleアプリのドメインを入力し、「私のサイトは完全にHTTPSではありません」オプションを選択します。下図のようにアプリのラベルを入力します。この同じラベルを bubble プラグインタブの「Http os.tc」フィールドに入力します。

3, 「許可プロンプトの設定」で「プロンプトの追加」をクリックし、以下のように通知プロンプトを設定します。

OneSignalのダッシュボードでは、通知を送信する許可をユーザーに求めるための複数のオプションが用意されていますが、bubbleプラグインでこれを行うための最良の方法は、 スライドプロンプトを選択し、自動プロンプトをオフにする ことです。プラグインは、あなたがしたいときにいつでもユーザーをプロンプトすることができるワークフローアクションを提供しています。このアクションはまた、bubbleユーザーが通知を受け入れると、自動的にbubbleユーザーの固有のIDをOneSignalに送信します。これにより、bubbleデータベース内のユーザーに直接通知を送信することができます。

4, OneSignal ダッシュボードの「Settings」>「Keys & IDs」でApp IDとAPI Keyを取得し、「Bubble plugins」タブに入力します。問題が発生している場合は、「App ID(ヘッダー)」フィールドにもApp IDを入力してみてください。

5, オプション: Safariユーザーにも通知を有効にしたい場合は、OneSignalダッシュボードの「設定」>「プラットフォーム」に移動し、「Apple Safari」をクリックします。サイト情報を入力して保存し、再度Apple Safariをクリックします。すると、新しいWeb IDが表示されます。このIDをコピーして、Bubble pluginsタブのSafari Web IDフィールドに貼り付けます。

OneSignal Bubbleプラグインを使用すると、ワークフローアクションとしてOneSignalの様々な機能にアクセスすることができます。

・OneSignal デバイス(OneSignal のドキュメントでは「プレーヤ」と呼ばれている)にタグを設定したり削除したりすることで、ターゲットを絞ったメッセージを適切な人に送信しているかどうかを確認するのに役立ちます。

 bubbleデータベース内のユーザまたはユーザのリストに直接通知を送信します。 ユーザーに通知を有効にするよう促すと、ユーザーが同意すると、OneSignalはそのユーザーのUser ThingのユニークなIDを送信するので、bubbleデータベースで検索を実行するのと同じように、ターゲットを絞ったウェブプッシュを簡単に送信できます。

・設定したタグで参照される OneSignal セグメントおよびフィルタ・グループにカスタム通知を送信します。

・カスタムの OneSignal テンプレートをbubbleユーザー、セグメント、またはタグ・フィルタに送信します。テンプレートは、OneSignal ダッシュボードでデザインできる通知です。このツールは、送信前に送信するメッセージを視覚化したり、通知を(OneSignal に)保存して再利用したりするのに便利です。テンプレートをユーザーに送信するには、テンプレート ID にアクセスする必要があります。テンプレート ID は、OneSignal ダッシュボードの [メッセージ] > [テンプレート] に移動して見つけることができます。テンプレートを希望通りにフォーマットしたら、希望するテンプレートの「オプション」ドロップダウンで「表示/編集」をクリックします。

IDは、以下のようにURLからコピーすることができます。

気をつけるべき一般的な問題点

通知がどれも通らない:「はじめに」のステップ2で指定した HTTPS設定が正しく設定されていること を確認してください。この設定をしないと、bubbleアプリからの通知は届きません。

自分のbubbleユーザーに対して直接的に通知を送ることができない:「スタートアップ」のステップ 3 で指定されているように、 OneSignal ダッシュボードで自動プロンプトがオフになっていること、および「通知プロンプトを表示」ワークフローアクションを使用して、ユーザーに通知を送信する許可を求めていること を確認してください。このアクションは、bubleユーザーを自動的にOneSignal に登録します。OneSignal プラグインを使用すると、ユーザーとの関わりが合理化され、個人的でダイレクトになります。エディタのプラグインタブに公式の OneSIgnal プラグインをインストールして、Web 通知のパワーをアプリケーションに簡単に統合しましょう。

以上ここまでがOneSignalでのWeb通知に関する説明でした。Bubbleより以前にも同じように別のソフトを操作したことがある方は、ご存知だったかもしれませんね。ここからはAirtable(エアテーブル)に関しての説明です。

Airtable(エアテーブル)

Airtableプラグインは、Airtableからbubbleにデータを引っ張ったり、bubbleワークフローからAirtableレコードを更新したりするために使用できます。このプラグインの理想的な使用例は、bubbleアプリケーションをAirtableデータで補完すること、またはその逆です。 Airtableを唯一のデータベースとして使用することはお勧めしません。 なぜなら、bubbleデータベースを使用した方が一般的にパフォーマンスが向上するからです。

Airtableをbubbleに接続する

1, エディタの「プラグイン」タブにAirtableプラグインをインストールします。「別のアカウントを追加」をクリックして、アカウントラベルとAPIキーを記入します。

アカウントラベルは、お好みのラベルにすることができます。APIキーを確認するには、Airtableアカウントにログインし、https://airtable.com/account に移動します。APIは下の写真の赤く囲った部分です。

2, テーブルの追加を開始しましょう。「別のテーブルを追加」をクリックして、まずベースを選択し、ドロップダウンからテーブルを選択してテーブル情報を設定します。また、オプションでビューを指定することもできます。これは、データが Airtable から返される順序に影響します。例えば、テーブルのグリッドビューに表示されるのと同じ順番でレコードを見たい場合は、テーブルを保存する際に指定してください。

 テーブルを保存すると、ポップアップが表示され、スキーマを確認したり、必要な変更を加えたり、リンクされたレコードが参照するテーブルを指定したりできます。 これで完成です! これで、bubbleでAirtableデータを使用する準備が整いました。Airtable プラグインのいずれかの面で問題がある場合は、サポートチケットを提出する前に、下記のよくある質問集を確認してください。

よくある質問集

Q1, スキーマ・ポップアップのフィールド・ドロップダウンの特殊なフィールド・タイプは何ですか?

A1, 初期化ポップアップのフィールドタイプのドロップダウンには、Airtable独自の4つの特殊なデータタイプがあります。 Attachment、Collaborator、Barcode、Link to Record(s)です。 これは、Airtableのカラムをbubbleタイプにマッピングしやすくするためです。実際には、Attachmentフィールドは、画像やファイルのリストのように使用することができます。Barcodeはテキストのように使うことができます。CollaboratorとLink はAirtableにネイティブなので、テーブルをデータとして使用したり、レコードを作成/変更したりする場合は、これらのフィールドをAirtableから直接引き出す必要があります。

Q2, なぜすべてのフィールドにフィルタリングできないのですか?

A2, フィルタリングの仕組みはAirtableに送るリクエストの中で行っているので、bubbleは現在のAPIを使ってできる限りのことは行っています。

Q3, なぜすべてのフィールドを作成または変更できないのですか?

A3, Airtableのフィールドの中には、RollupやCountsなどの他のフィールドによって生成されるものがあります。そのため、これらのフィールドはAPIコールで変更したり作成したりすることはできません。

Q4, Airtableアクションや外部APIからデータを検索しても、すべてのテーブルが表示されないのはなぜですか?

A4,  パーミッションが適切に設定されていること を確認してください。テーブルを作成と修正のアクションで使用するには、テーブルに作成と修正のパーミッションを与えなければなりません。削除アクションも同様です。

Q5, 添付ファイル、リンクされたレコード、コラボレーター、バーコードなど、Airtableの特殊なフィールドを作成または修正するにはどうすればよいですか?

A5, bubbleでファイルや画像を使用してAirtableのAttachmentフィールドを作成または修正したり、テキストを使用してバーコードを作成または修正したりすることができます。リンクされたレコードやコラボレーターの場合は、Airtableから直接引っ張ってくる必要があります。例えば、コラボレーターフィールドを持つ新しいレコードを作成したい場合、そのコラボレーターを既に別のレコードに持っていて、そこから引っ張ってくる必要があります。

Q6, Airtableに送信できるフィールドの種類は?

 現在、Airtableに送信できるのはテキストと数字のみです。 日付フィールドのような他のすべてのタイプは、まだサポートされていないため、エラーが発生します。

まとめ

いかがだったでしょうか。今回はOneSignalでのWeb通知とAirtableについてご紹介しました。特にAirtableに関しての疑問は、最後のよくある質問集をご参考にしていただければ幸いです。ではまた別の記事でお会いしましょう。See You!

 

 

 

 

 

 

 

 

Katsu

Katsu

高校まで日本で育ち、大学からアメリカ・ニューヨークへ。マスメディア、ジャーナリズム、インターネットメディア戦略を専門に修学。コロナ禍でオンライン主体になりつつある世の中で、記事が何かの手助けになれば幸いです。







関連記事

  1. 記事作成

    BubbleのSlugと再利用可能な要素について解明してみた!!

  2. 記事作成

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

  3. SaaSロゴ

    Webflow(CMS)

  4. 記事作成

    Bubble・オプションセット、エレメントカスタムステート

  5. SaaSロゴ

    Tiger(Jungleworks)

  6. 記事作成

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

  7. 記事作成

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

  8. Adalo Resource・スケジュールされたプッシュ通知の送信方法、スペシャルリンク [メール・…

  9. 記事作成

    Bubbleのプラグイン基礎を徹底解説!!

人気記事

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

おすすめ記事一覧

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