おすすめ記事

おすすめ記事一覧

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!

 

 

 

 

 

 

 

 

岡澤克信

岡澤克信

自動車評論家
主に自動車業界のDXというテーマで自動車業界で使用され
ているウェブサービスを紹介







関連記事

  1. 記事作成

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

  2. SaaSロゴ

    Tiger(Jungleworks)

  3. 記事作成

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

  4. SaaSロゴ

    Webflow(CMS)

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

  6. Adalo Resource・コンポーネントの可視性の変更とマーケットプレイスコンポーネント(スクリ…

  7. 記事作成

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

  8. 記事作成

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

  9. Adalo Resource・Googleを使ってサインイン(スクリーンとコンポーネントセクション)…

人気記事

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

おすすめ記事一覧

  1. 記事画像
  2. 記事画像
  3. Productivity
  4. maidoh concept picture
  5. タスク
PAGE TOP