Integromat + Bubble(Backend Workflows) を使った簡単バッチ処理をしよう！
こんにちは！ノーコードライフいかがお過ごしでしょうか？
今回は Integromat でスケジュールを組んで Bubble の Backend Workflows を使うことを行いたいと思います。
Backend Workflowsはこちらの記事でも使用しているので、こちらも参考ください。
注意！！）「Backend Workflows」は以前「API Workflows」と呼ばれていました。
Integromatに関しては、こちらをご覧ください。 blog.nocodelab.jp
作成するアプリは、毎日午前9時に天気予報のデータを取得し、Dataに登録するアプリを作成します。
取得する天気の場所は、札幌、仙台、東京、名古屋、大阪、福岡の6都市にします。
サンプルアプリはこちらです。
https://nocodelab-sample-apiworkflow.bubbleapps.io/
前準備
Bubbleの準備として、以下を行いましょう。
- 新規アプリの作成
- API Connector プラグインをインストール
- UNIX Converterプラグインをインストール（※任意）
※UNIX ConverterはUNIX時間を通常の時刻に変換してくれるのに今回使用しました。表示しない場合は不要です。
また、その他の前準備として、以下を行ってください。
- Integromat（https://www.integromat.com/）アカウント作成
- OpenWeatherMap（https://openweathermap.org/）アカウント作成し、APIKeyの取得
天気のデータを取得するのに、ここではOpenWeatherMapのAPIを使用するので、アカウント作成し、APIKeyの取得が必要になります。
有料プランもありますが、無料プランで大丈夫です！
BubbleでBackend Workflowを設定しよう
では、早速作成していきましょう！
API Connectorの設定をしよう
まずは、天気のデータを取得するためにAPI ConnectorプラグインでAPIの設定を行いましょう。
プラグインのタブより、API Connectorを選択します。
API Connectorはこちらの記事でも説明していますので、参考にしてください。
「API Name」は「OpenWeatherMap」で追加します。
作成したAPIの中でcallを追加し、以下のように設定しましょう。
注意するポイントは「Use as」を「Action」にしていることです。
今回はWorkflow内で検索したいので、Use asを「Action」にしています。
これで、Plugin Actionの中で呼べるようになります。
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型
また、Mytable のデータに Integromat のアカウントのEmailで１行データを登録しておいてください。
Backend Workflowを設定しよう
次に Backend Workflow を設定しましょう。
Backend Workflows は Bubble で使用する、という設定が必要になります。
SettingのAPIタブより以下のように設定してください。
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」が現れているはずです。これを選択しましょう。
Workflowを追加しましょう。「General」から「New API endpoint」を選択し、endpoint を作成します。
「Endpoint name」は「GetWeatherData」にしています。 ※全部小文字になるんですねー
このWorkflowでは、
- 天気のデータを取得
- 1の取得したデータをDataに保存
- 過去のデータを削除
を行います。
1.天気のデータを取得
APIConnetorの設定を行うと、Pluginのメニューに設定したAPI Connectorが表示されるので、それを選択しましょう。
ここでは、「OpenWeatherMap-GetCurrentWeather」です。
APIConnetorの「Use as」を「Action」に設定すると、このようにActionで使用できます。
2.取得した天気のデータをDataに保存
Weather Dataに新規登録します。内容は、step1の結果を登録しましょう。
3.過去のデータを削除
毎日データが蓄積されるので、ここでは最新データ以外削除することにします。
過去データは１件ずつになると思いますが、念のため 「Delete a list of things」で削除しています。
以上でBubbleのAPIが作成できました！
Integromatの設定をしよう
次に Integromat にて、作成したAPIを呼んでみましょう！
早速シナリオを作成しましょう。
Integromat ではBubbleに接続するモジュールが用意されていますので、それを使用します。
さらに「Run a workflow」を選択します。
コネクションを設定しなければならないので、「Add」ボタンよりコネクションを設定します。
API Token は、「Backend Workflowを設定しよう」で作成した API Token の Private key を入力します。
「API Workflow Name」には、作成した endpoint の名前を入力します。 ここでは、「getweatherdata」です。
さらに、毎日午前9時に実行されるよう指定しておきましょう。
SCHEDULING を OFF から ON に変更すれば Ingetgromat は終了です。
Integromat では自動更新ではないので、忘れずに保存しましょう！
また、「Run once」ボタンをクリックすると、スケジュールに関係なく実行できるので、接続のテストしたいときはクリックしてください。
画面を作成しよう
あとは、Bubble で天気情報を表示するだけです！
サンプルで作成した画面について説明します。
シンプルな画面ですね。
使用している主なエレメントは以下のとおりです。
- text：「Weather」
- text：取得した天気データの時刻
- Repeationg Group：取得した天気データの一覧（Weather DataのCurrentWeatherListを指定）
- text：都市名（CurrentWeatherListのname）
- text：温度（CurrentWeatherListのmain temp）
- image：天気アイコン（CurrentWeatherListのweatherのicon）
- Converter：UNIX Converterのエレメント（非表示のためどこでも）
分かりにくい部分を補足説明していきます。
天気の時刻について
取得した天気の時刻は、CurrentWeatherListのdtというパラメータが持っています。
これは各都市全て同じなので、リストの中から一つ取得すれば大丈夫です。
※ちなみにOpenWeatherMapのCurrentWeatherは１時間毎に更新されるようです。
ただ、dtはUNIX時刻になっています。しかも秒単位！
これを現在時刻の形に変更するために、UNIX Converterというプラグインを使用します。
プラグインにUNIX時刻を現在時刻に変換してくれるアクションが用意されているので、まずはそのアクションを呼びましょう。
Workflowから「Do when condition is true」から作成します。
条件はRepeationg Group is loadingにしています。
Actionは、「Element Actions」の「Timestamp to UTC a converter」を選択します。 Timestampにdtを選択します。ただし、単位はミリ秒なので、1000をかける必要があることに注意してください。
表示はConvertエレメントのTimestamp to UTCで表示できます。
上図では、さらに、フォーマットも行うようにしています。
天気アイコンについて
OpenWeatherMapから取得できる天気アイコンのデータは画像ではなく、単純にアイコンのIDのみになっています。
アイコンの画像はOpenWeatherMapのサイトから取得するようにしていますので、こちらも紹介しておきます。
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だけではなく、他のノーコードツールを利用するとさらにできることは幅が広がりますね！
ぜひ色々試してみてください！！
ここまで読んでいただきありがとうございました！
