ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Integromat + Bubble(Backend Workflows) を使った簡単バッチ処理をしよう!

f:id:korokoro-vc:20200310171332p:plain

Integromat + Bubble(Backend Workflows) を使った簡単バッチ処理をしよう!

こんにちは!ノーコードライフいかがお過ごしでしょうか?

今回は Integromat でスケジュールを組んで Bubble の Backend Workflows を使うことを行いたいと思います。

Backend Workflowsはこちらの記事でも使用しているので、こちらも参考ください。

注意!!)「Backend Workflows」は以前「API Workflows」と呼ばれていました。

blog.nocodelab.jp

Integromatに関しては、こちらをご覧ください。 blog.nocodelab.jp

作成するアプリは、毎日午前9時に天気予報のデータを取得し、Dataに登録するアプリを作成します。
取得する天気の場所は、札幌、仙台、東京、名古屋、大阪、福岡の6都市にします。

サンプルアプリはこちらです。

https://nocodelab-sample-apiworkflow.bubbleapps.io/

前準備

Bubbleの準備として、以下を行いましょう。

  • 新規アプリの作成
  • API Connector プラグインをインストール
  • UNIX Converterプラグインをインストール(※任意)

※UNIX ConverterはUNIX時間を通常の時刻に変換してくれるのに今回使用しました。表示しない場合は不要です。

また、その他の前準備として、以下を行ってください。

天気のデータを取得するのに、ここではOpenWeatherMapのAPIを使用するので、アカウント作成し、APIKeyの取得が必要になります。
有料プランもありますが、無料プランで大丈夫です!

BubbleでBackend Workflowを設定しよう

では、早速作成していきましょう!

API Connectorの設定をしよう

まずは、天気のデータを取得するためにAPI ConnectorプラグインでAPIの設定を行いましょう。

プラグインのタブより、API Connectorを選択します。

API Connectorはこちらの記事でも説明していますので、参考にしてください。

blog.nocodelab.jp

「API Name」は「OpenWeatherMap」で追加します。

作成したAPIの中でcallを追加し、以下のように設定しましょう。

注意するポイントは「Use as」を「Action」にしていることです。
今回はWorkflow内で検索したいので、Use asを「Action」にしています。
これで、Plugin Actionの中で呼べるようになります。

f:id:korokoro-vc:20200309162713j:plain

OpenWeatherMapにはいくつかのAPIがありますが、今回は「Current weather data」APIを使用します。 以下、簡単に説明しておきます。

  • URL:http://api.openweathermap.org/data/2.5/group
  • パラメータ
    • appid:OpenWeaterhMapで取得したAPI Keyを設定してください。
    • id :取得先したい都市のidを「,」でつなげます。
    id 都市名
    2128295 札幌市
    2111149 仙台市
    1850147 東京
    1856057 名古屋市
    1853909 大阪市
    1863967 福岡市
    • lang:ja 日本語で取得(ただし対応は一部のみでした)
    • units:metric 温度の単位を摂氏で取得

次にレスポンスの指定をしましょう。
レスポンスは、「Initialize call」のボタンで設定します。
※一度設定すると「Modify call types」にボタン名は変更されます。

ここでもしエラーがでたら設定ミスがありますので、よく確認してください。

とりあえず全てのデータを取得しておいて大丈夫ですが、たくさんあるので、必要なデータ以外は「Ignore field」にしておいても良いでしょう。

各データが何を指しているかは、興味ある方は各自調べてみてください。

今回必要な項目は以下の項目です。

  • list (list)
  • weather (list)
  • weather (list)内のdescription、icon
  • main temp → numberに設定
  • dt → numberに設定
  • id
  • name

main tempとdtのみ、デフォルトの型ではなく、numberに変換してください。

これでAPI Connectorの設定はできました。

Dataを設定しよう

今回は二つのDataを作成します。

  • Mytable(IntegromatからBubbleを呼ぶために必要なData)
    • email:text
  • Weather (天気データを保存するためのData)
    • CurrentWeatherList:GetCurrentWeather listのList型

f:id:korokoro-vc:20200309171446j:plain

また、MytableのデータにIntegromatのアカウントのEmailで1行データを登録しておいてください。

Backend Workflowを設定しよう

次にBackend Workflowを設定しましょう。
Backend WorkflowsはBubbleで使用する、という設定が必要になります。
SettingのAPIタブより以下のように設定してください。

f:id:korokoro-vc:20200309171056j:plain

MytableはIntegromatで必要なため、「This app exposes a Data API」にもチェックを入れ、「Mytable」のみチェックしましょう。

さらに、「Generate a new API token」ボタンをクリックし、生成しましょう。 生成された「Private key」を後ほどIntegromatの設定で使用します。

これでBackend Workflowが作成できるようになりました。

Backend Workflowを作成しよう

では、Backend Workflowを作成しましょう。

画面左上のメニューを表示します。 すると、一番下に「Backend workflows」が現れているはずです。これを選択しましょう。

f:id:korokoro-vc:20200309195922j:plain

Workflowを追加しましょう。「General」から「New API endpoint」を選択し、endpointを作成します。

f:id:korokoro-vc:20200309200630j:plain

「Endpoint name」は「GetWeatherData」にしています。 ※全部小文字になるんですねー

このWorkflowでは、

  1. 天気のデータを取得
  2. 1の取得したデータをDataに保存
  3. 過去のデータを削除

を行います。

1.天気のデータを取得

f:id:korokoro-vc:20200309201509j:plain

APIConnetorの設定を行うと、Pluginのメニューに設定したAPI Connectorが表示されるので、それを選択しましょう。

ここでは、「OpenWeatherMap-GetCurrentWeather」です。

APIConnetorの「Use as」を「Action」に設定すると、このようにActionで使用できます。

2.取得した天気のデータをDataに保存

f:id:korokoro-vc:20200309202107j:plain

Weather Dataに新規登録します。内容は、step1の結果を登録しましょう。

3.過去のデータを削除

f:id:korokoro-vc:20200309202648j:plain

毎日データが蓄積されるので、ここでは最新データ以外削除することにします。
過去データは1件ずつになると思いますが、念のため 「Delete a list of things」で削除しています。

以上でBubbleのAPIが作成できました!

Integromatの設定をしよう

次にIntegromatにて、作成したAPIを呼んでみましょう!

早速シナリオを作成しましょう。
IntegromatではBubbleに接続するモジュールが用意されていますので、それを使用します。

f:id:korokoro-vc:20200309213126j:plain

さらに「Run a workflow」を選択します。

f:id:korokoro-vc:20200310154640j:plain

コネクションを設定しなければならないので、「Add」ボタンよりコネクションを設定します。

f:id:korokoro-vc:20200309213204j:plain

API Tokenは、「Backend Workflowを設定しよう」で作成したAPI TokenのPrivate keyを入力します。

f:id:korokoro-vc:20200309213629j:plain

「API Workflow Name」には、作成したendpointの名前を入力します。 ここでは、「getweatherdata」です。

さらに、毎日午前9時に実行されるよう指定しておきましょう。

f:id:korokoro-vc:20200309214152j:plain

SCHEDULINGをOFFからONに変更すればIngetgromatは終了です。

Integromatでは自動更新ではないので、忘れずに保存しましょう!

また、「Run once」ボタンをクリックすると、スケジュールに関係なく実行できるので、接続のテストしたいときはクリックしてください。

画面を作成しよう

あとは、Bubbleで天気情報を表示するだけです!

サンプルで作成した画面について説明します。

f:id:korokoro-vc:20200310094730j:plain

シンプルな画面ですね。

使用している主なエレメントは以下のとおりです。

  • text:「Weather」
  • text:取得した天気データの時刻
  • Repeationg Group:取得した天気データの一覧(Weather DataのCurrentWeatherListを指定)
    1. text:都市名(CurrentWeatherListのname)
    2. text:温度(CurrentWeatherListのmain temp)
    3. image:天気アイコン(CurrentWeatherListのweatherのicon)
  • Converter:UNIX Converterのエレメント(非表示のためどこでも)

分かりにくい部分を補足説明していきます。

天気の時刻について

取得した天気の時刻は、CurrentWeatherListのdtというパラメータが持っています。 これは各都市全て同じなので、リストの中から一つ取得すれば大丈夫です。
※ちなみにOpenWeatherMapのCurrentWeatherは1時間毎に更新されるようです。

ただ、dtはUNIX時刻になっています。しかも秒単位!
これを現在時刻の形に変更するために、UNIX Converterというプラグインを使用します。
プラグインにUNIX時刻を現在時刻に変換してくれるアクションが用意されているので、まずはそのアクションを呼びましょう。

f:id:korokoro-vc:20200310101223j:plain

Workflowから「Do when condition is true」から作成します。

条件はRepeationg Group is loadingにしています。

Actionは、「Element Actions」の「Timestamp to UTC a converter」を選択します。 Timestampにdtを選択します。ただし、単位はミリ秒なので、1000をかける必要があることに注意してください。

f:id:korokoro-vc:20200310102259j:plain

表示はConvertエレメントのTimestamp to UTCで表示できます。
上図では、さらに、フォーマットも行うようにしています。

天気アイコンについて

OpenWeatherMapから取得できる天気アイコンのデータは画像ではなく、単純にアイコンのIDのみになっています。

アイコンの画像はOpenWeatherMapのサイトから取得するようにしていますので、こちらも紹介しておきます。

f:id:korokoro-vc:20200310104242j:plain

http://openweathermap.org/img/w/【取得したアイコン】.png

上記のURLから取得できるようになります。

ちなみにアイコンは、CurrentWeatherListのweather(これもlist形式です)から取得します。weatherはlistですが、今回は必ず一つしかないので、first itemからiconを取得すれば問題ないです。

また、Tooltip textにはdescriptionを表示するようにしています。

これで全てできました! 実際に試してみましょう!!

まとめ

Integromat+Bubbleを行うと、バッチ処理が簡単にできるようになります。
例えば、2週間前のデータは削除する、というような処理が簡単に対応できますね!

ちなみにBubbleにもスケジューラ機能があり、Backend Workflowsを実行させることができます。

ただし、こちらは有料プランのみ。

利用方法としては、ユーザが作成したリマインダーを1週間前に送る等、アプリを立ち上げて何かしらのActionでスケジューラを起動することになるので、今回のようなデータありきの場合はどちらにしても向かないのかなと思います。

Bubbleだけではなく、他のノーコードツールを利用するとさらにできることは幅が広がりますね!

ぜひ色々試してみてください!!

ここまで読んでいただきありがとうございました!