Parabola と Bubble の Data API を使って Google Sheets から Bubble にデータをインポートする方法

こんにちは！ノーコード ラボの岡崎です。

今回は久しぶりに iPaaS の話です。
データ処理に強い iPaaS である Parabola と Bubble の Data API の使い方、Google Sheets から Bubble にデータをインポートする方法についてお話しします。

Parabola とは？

Parabola | Automate your manual, repetitive data tasks

Parabola は zapier / Integromat / IFTTT / MS Power Automate などと同様の iPaaS と呼ばれる種類に属するサービスの一種です。
Integromat のようなポップでわかりやすいワークフローを作り、様々なデータ処理をすることができます。

Parabola が他の iPaaS のサービスと違うのは、データ処理に特化している点です。
多くの iPaaS 系サービスはトリガーがあって、アクションを起こすという形ですが、Parabola はテーブルを丸ごと読み込むというところから始まります。そして、そのテーブルを加工・操作して様々なところにデータを出力することができるものになります。

私は自分自身は結構な Integromat 派だと思っているのですが、データ操作・加工については、Integromat ではなく、Parabola を使うようにしています。簡単で処理も早いと思います。

Bubble の Data API とは？

Bubble の外部から Bubble のデータベースを操作するために用意してある API です。

テーブル（type）までは予め準備しておく必要がありますが、API 経由で外部から 行を追加、更新、削除することができます。

無料プランでも利用できます。

Parabola のサインアップ方法

2020/08/06 追記

Parabola が招待プログラムを始めたようです。

Parabola | Automate your manual, repetitive data tasks

こちらのリンクから Parabola にアクセスしていただくとノーコード ラボ側に $5 のクレジットが、招待された側は $20 のクレジットが入るようです。よろしければ使ってみてください。

Signup をクリックすると次のような画面が表示されます。

名前、Email Address、Password を入力し、reCAPTCHA のチェックを入れたら、「Create my account」をクリックします。

そうするとメールが送付されますので、メールをチェックしましょう。かわいいメールが届いています。

Verify my email address をクリックします。Parabola のデザイン画面が表示されたら完了です。

Google Sheets からデータを抜き出して Bubble にインポートする方法

今回は Google Sheets からデータを抜き出して少し加工した後、Bubble の Data API 経由で Bubble の DB にデータをインポートするところまでを行いたいと思います。

Parabola で Google Sheets からデータを抜き出す

まずは Skip onboarding をクリックし、白紙の状態にします。

右の Explore steps の中から「Import data from other apps」をクリックし、「Google Sheets Import」をドラッグ＆ドロップでエディターに配置します。

エディター内の Google Sheets をダブルクリックします。

「Authorize」をクリックして Parabola で読み込ませたいファイルのアカウントを選択します。

問題なければ「許可」ボタンを押して Parabola の画面に戻ります。

今回は「都道府県コード」にある都道府県コードの情報をインポートしたいと思いますので、「都道府県コード」のファイルを選択します。

なお、今回の「都道府県コード」のファイルはこちらです。
都道府県コード - Google スプレッドシート

Google Sheets から Parabola へのデータの読み込みが成功するとこちらの画面が表示されます。右上の「×」ボタンで閉じてください。

データを加工する

今回は Parabola の使い方を説明するためにデータの加工も行っておりますが、データの加工の必要がなければ、ここは飛ばしても大丈夫です。

ここでは、都道府県名の最後の文字を使って「都道府県」というカラムを追加します。

右の Explore steps の中から「Clean and format data」を選択し、「Text Extract」をドラッグ＆ドロップでエディターに配置します。

キャンパスの方の Text Extract をダブルクリックします。

Column に「都道府県名」、New Column Name に「都道府県」、Operation に「Find all text after...」、Matching Text or Offset に「Offset from end of text」、Offset Lengthに「1」を設定し、「Show Updated Results」をクリックします。

これで都道府県のデータが取れました。右上の「×」ボタンで閉じてください。

Bubble の Database を設定する

続いて、Bubble 側でデータの受け皿となる Database の設定を行います。

今回は都道府県のテーブル（type）を作ろうと思いますので、以下のように設定します。

Type name: Prefecture

• ID: number　→　「コード」が入ります
• Name: text　→　「都道府県名」が入ります
• Pref: text　→　「都道府県」が入ります

Bubble の Data API を設定する

次は Data API の設定を行います。

Settings - API を開き、「This app exposes a Data API」にチェックを入れます。

そうすると、このようなセキュリティ警告が表示されます。 アクセス権が適切に設定されていないという警告なのですが、後ほど設定しますので、今はスルーします。

もう一度 API タブに戻り、先ほど作った「Prefecture」にチェックを入れます。

続いて API Token の設定を行います。 「Generate a new API token」 をクリックします。 API Token Label に「Parabola」と入力します。

ここまでで Data API の設定は終わりです。

Bubble のデータベースの Privacy を設定する

やりたいことは、トークンを持ってきた人だけに API を使って DB にアクセスさせたいのですが、そこまでの細かい設定ができないので、ログインされたユーザーに API アクセスの権限を設定するようにします。

具体的には Prefecture type に対して、Logged in users というロールを作って、Current User is logged in という条件を付けます。 このロールに対して、Modify via API、Delete via API、Create via API の３つの権限を持たせるように設定します。 なお、Delete は特に危ないので、利用する予定がなければ余計な権限は与えない方がよろしいかと思います。

これで Bubble 側の設定は終わりです。

Parabola で Bubble Export を利用して Bubble にデータをインポートする

最後に Parabola から データをエクスポートし、Bubble の Data API 経由でデータをインポートします。
自分でカスタマイズしたい場合には、マニュアルの Data API の項目を参考にしてください。

Reference | Bubble

Parabola のエディターを開き、右の Explore steps の中から「export data from other apps」をクリックし、「Bubble Export」をドラッグ＆ドロップでエディターに配置します。

Bubble Export を配置すると、色々と警告が表示されますが、この後設定していきますので、邪魔ですので警告は消してしまいます。
また、Text Extract から出ている矢印（→）を Bubble Export まで繋げます。

そうしたら、Bubble Export をダブルクリックして設定を行います。

今回はデータを Bubble に Data API 経由でインポートしたいので、次のように設定します。

ここは重要なので一つ一つ説明します。

Type

HTTP のリクエストメソッドです。
GET / POST / PATCH / PUT / DELETE が使えます。

今回は行を追加したいので「POST」を利用します。

API Endpoint URL

Data API の Endpoint の URL です。
Bubble の API の設定に root URL の記述があります。これをコピーしてください。

この URL に /(data type name) を追加すると、その data type にアクセスできるようになります。
今回は prefecture という type なので、/prefecture を追加します。

なお、この URL は全て小文字でないといけないそうです。
今回は次のように設定しました。
「https://parabola-test00.bubbleapps.io/version-test/api/1.1/obj/prefecture」

Body

ここに実際のデータのフォーマットを記載します。
書き方は次のようになります。

{
    "Bubble 側の field名": "{Parabola 側の列名}",
    "Bubble 側の field名": "{Parabola 側の列名}",
    "Bubble 側の field名": "{Parabola 側の列名}"
}

今回は prefecture は ID、Name、Pref の ３つの field があり、それらが Parabola 側の コード、都道府県名、都道府県に対応しておりますので、次のように設定しました。

{
    "ID": "{コード}",
    "Name": "{都道府県名}",
    "Pref": "{都道府県}"
}

Bearer Token

ここには Bubble の API Token の Private key をそのままコピぺしてください。

設定が終わったら、「Show Updated Results」をクリックします。 問題なければ、右上の「×」ボタンで閉じてください。

これで設定は全て完了です！

Publish & Run

右上の「Publish」ボタンを押して公開しましょう。

そして、左側にある「Run Now」を押して実行しましょう！

もう一度聞かれますので、「Run Now」を押しましょう。 実行されますので、しばらく待ちましょう。 問題なければ、Run History のところに 「Succeeded」 と表示されます。

念の為、Bubble の方でもきちんとデータが入っていることを確認しましょう。

データがきちんと入っていれば、これで全て完了です。

終わりに

Parabola を使った Google Sheets から Bubble へのデータのインポート手順をご説明させていただきましたが、いかがでしたでしょうか？

Integromat でも同じようなことができるのですが、データの操作・加工に特化している分、Parabola の方が簡単で応用も効くかなと思います。

何回も run をすると費用がかかりますが、データのインポートくらいなら何回も実行することはないと思いますので、大抵の場合は無料の範囲内で使えると思います。 もし興味を持った方いらっしゃいましたら、是非試してみてください。

それでは！