#obniz のブロックプログラムで作った仕組みを外部からの Webhook をトリガーにして動かす（アプリのインストールを利用）

以前、 @wicket さんから「obniz のブロックプログラムの環境で作ったプログラムを、サーバーレスイベントを利用することで、外部から実行させられる」という話を聞いたことがありました。

そしてずいぶん時間が経過した現在、「サーバーレスイベントがレガシーという扱いになった今でも、同じことをやる仕組みがあるかな？」と思って公式ドキュメントを読んでいたら、それっぽいものを見つけました。
　●クラウド実行でWebhook連携 - obniz Docs
　　https://obniz.com/ja/doc/guides/browser-app/evt-webhook
![クラウド実行でWebhook連携.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/09118ae1-ef78-556f-0a0b-f1dd9bfe4468.jpeg)

この内容について、メンションをとばしつつツイートしてたら、これで OK という返信をいただけました。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ブラウザアプリの設定で、このチェックボックスをONにする感じで。 <a href="https://t.co/5PxTFDxw9v">pic.twitter.com/5PxTFDxw9v</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1385598805337382915?ref_src=twsrc%5Etfw">April 23, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">レガシーじゃない方法はそれです！</p>&mdash; kido (@9wick) <a href="https://twitter.com/9wick/status/1385745283842142214?ref_src=twsrc%5Etfw">April 23, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そこで、あらためて上記の仕組みを実際に試してみて、その内容を記事にしてみます。

なお、今回の記事の中で利用したデバイスは、obniz のボードではなく obnizOS を入れた M5StickC となっています。

## obniz のアプリを使う
### obniz のアプリの概要
記事の冒頭で書いていた「アプリ」という仕組みについて、公式ドキュメントで触れられている部分は、以下などがあります。

●アプリ - obniz Docs
　https://obniz.com/ja/doc/reference/cloud/app/
![obnizのアプリ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/bcfe4a86-d6c1-1b12-f5b0-963d914cdab9.jpeg)
大まかに言うと「自分で作った obniz を制御するプログラムをクラウド上に置き、それを自分や他人の obniz で使えるようにするもの」となるようです。
obniz の開発者コンソールから直接プログラムを書いて、その場で実行する仕組みがありますが、これをさらに広く使えるようにしたり、手動以外の実行方法（自動での定期実行など）も付け加えられたりするもの、と理解しました。

上記のページには 2種類のアプリの話が書かれており、サーバーを自前で用意する「ホステッドアプリ」と、obniz が用意したサーバーを使う「ブラウザアプリ」という名前のものが挙がっています。
今回の目的を実現するのに利用するのは「ブラウザアプリ」のほうで、さらにその中の「[Webhook連携の仕組み](https://obniz.com/ja/doc/guides/browser-app/evt-webhook)」を用います。

### アプリの新規作成
それでは、実際に Webhook連携ができるアプリを作っていきます。

まずは、obniz の開発者コンソールの画面でアプリ開発の画面へ移動して、アプリの新規作成を行います。開発者コンソールの左のメニューに「アプリ開発」という部分があるので、それを選んでから、右側の画面で「新規作成」ボタンを押します。
![アプリ開発の画面のトップ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4558c34c-8696-46f2-baca-9ec8deba5641.jpeg)

次の画面の上部で「ブラウザアプリ（ブロックプログラム）」を選択して、画面の下のほうへ進みます。
![アプリのテンプレートの選択1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/deedd0a4-7784-373d-4512-0572a5f90ba7.jpeg)

テンプレートの選択を行うのですが、今回は M5StickC を利用して進めるので、M5StickC用の選択肢から選びます。空のプロジェクト（Empty）でも良かったのですが、サンプルの中身を見てみたくて「天気予報の表示」を選んでみました。どんなプログラムがセットされたのかは、後の手順の中に出てくるので、そちらで紹介します。
![天気表示のサンプル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/27077857-d68f-3cf1-902b-2d69150ce99f.jpeg)
なお、最終的に使うブロックプログラムは、テンプレートのサンプルのブロックがほとんど残ってないようなものになるので、空のプロジェクト（Empty）を選んで作っても、問題ないです（手間はほとんど変わらないです）。

上記のテンプレートを選んだ後、以下の画像のような画面がポップアップで出てきます。ここでは、アプリの名前を決めるのですが、分かりやすい名前などを何かつけてください。
アプリ名の入力後は、「アプリを作成」と書かれたボタンを押します。
![アプリの名前を決める.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9570c650-8e4f-b8cc-3f33-c4706b8e4b6e.jpeg)

### アプリの設定
その後、アプリの設定画面が表示されます。その中にある「Webhookで実行」と書かれた部分にチェックを入れます。
![アプリの設定画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/24a32ea4-0f7a-784c-c747-35506d0a6f06.jpeg)
その設定ができたら画面の下へ移動して、「設定を更新」と書かれたボタンを押します。
![44bniz_-_Developer_s_consoleのコピー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/98382f12-6faf-148c-5b36-bc3239ef073c.jpeg)

設定関連で 1つ補足をしておくと、アプリは公開するかどうかを選べるようですが、今回の場合は「デフォルト設定のまま＝非公開」としています。

### ブロックプログラムの開発画面を呼び出す
設定変更が完了したら、アプリ設定画面の上部にある「プログラムを編集」と書かれたボタンを押します。
![プログラムの編集.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a58c4aba-bc3d-7f26-7dd6-3573337f2fc8.jpeg)

テンプレートの選択で「天気予報の表示」を選んでいたので、以下のプログラムが表示された状態になると思います。プログラムのサンプルが確認できたところで、ここから大幅に内容を書きかえていきます。
![天気予報.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ac4af27a-5397-3e19-9911-072eebe2161a.jpeg)

今回の流れで言うと余談になりますが、テンプレートの選択画面で他のものを選んだ場合にどうなるか、それらも例として掲載しておきます。

以下は「ボタンでWebhook」を選んだ場合です。
![ボタンでWebhook.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/30ab4f56-b7a2-d9b1-5fc5-37aeaa6218bf.jpeg)
そして以下が「温度・湿度計」を選んでいた場合になります。
![温度・湿度.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/10851962-c4da-6a0a-248f-ad2f82bf4839.jpeg)

### プログラムを作ってインストールする
それでは、今回のお試し用のプログラムを作っていきます。

サンプルとはメインの内容が全く違ってますが、こんな作りにしました。動作としては「Webhook をトリガーにして、ディスプレイへの文字表示と LED の点灯を 2秒間行う」というものです。
ディスプレイに表示する文字列を「ボタンが押されたよ」という内容にしているのは、将来的に、別デバイス・アプリでボタンを押したら、このプログラムが動く M5StickC が反応する、という内容を試そうと思ったためで、もちろん別の内容にしてしまって問題ないです。
![自作のプログラム.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/52be013b-531c-a779-7505-3fba66fc606b.jpeg)

プログラムについて少し補足ですが、「[アプリのページのブラウザアプリという項目[https://obniz.com/ja/doc/reference/cloud/app/#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%A2%E3%83%97%E3%83%AA]」を見てみると、obniz の ID の指定は以下のようにする必要があるようです。
![アプリにおけるIDの指定.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4472aff5-3b4e-d1b5-ad10-e9f0c3fc42e7.jpeg)
上記のように指定しておくことで、このアプリが特定の obniz にインストールされた場合、その obniz の ID と紐付くように設定が行われるようです。

上記で作ったブロックプログラムを保存したら、次にデバイスへのインストールを行います。
開発者コンソールのアプリ開発の画面へ移動してください。以下の画像の「Webhook連携のテスト」という名前のアプリが、今回作ったものです。その行の右のほうに「インストール」というリンクがあるので、これをクリックします。
![アプリの一覧.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4b4d89d7-16ad-8ee9-93cb-3ffdfbfdcf29.jpeg)

その後の画面では、自分が登録している obniz のリストが表示されるので、その中でインストール先となるデバイスを選びます。自分の場合、今回は obnizOS を入れた M5StickC になるので、その行のチェックボックスにチェックを入れて、画面右のほうの「インストール」ボタンを押します。
![インストールの実行.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e6e931df-4143-f1a9-2796-04c7789af3e6.jpeg)

### Webhook の URL の確認
今度は、プログラムを呼び出すためのエンドポイント（指定する URL）を確認していきます。

そのために、まずは開発者コンソールの画面で、デバイスの一覧を表示させます。
画面左のメニューの「デバイス」を選べば OK です。そうすると、デバイス一覧の中でアプリの列に、今回作ったアプリの名前が書かれたところがあります（※ obnizOS を入れた M5StickC です）。
![デバイス一覧.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/099b00e2-c553-1a50-9b1c-ea9e1a0a20b7.jpeg)
そして、以下の画像の赤矢印で示したボタンを押し、その操作で表示されるメニューの中から「Webhook URLの確認」を選びます。
![Webhook URLの確認のためのメニュー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cb8be7f8-2d0a-f8ec-ee30-8790871678a8.jpeg)

その後に表示された画面の下のほうを見ていくと、Webhook で指定する URL が書かれているので、これをメモしておきましょう。
![URLが表示される画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6227fcdc-83e2-128a-844f-34743d975a47.jpeg)

### Webhook でプログラムを動かす
それではいよいよ動作確認です。

GET の場合は、ブラウザを開いて上記で確認した Webhook用の URL を呼び出すだけで OK です。
実際に実行してみると、ブラウ上の表示では以下のようなレスポンスが返ってきました。また、この時に、M5SickC のほうがどうなったかというと、LED の点灯と画面への文字表示が行われて、2秒後に両方消えました。
![GE.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cf0d8b31-31d0-ca6f-f1f4-d64c509bb923.jpeg)
外部からの Webhook でブロックプログラムが動作した時の写真を、以下に掲載しておきます。
![EzzHK2IUYAE9wSA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a5631bea-96d3-9b05-3c38-536a9927ffd0.jpeg)

それと、POST も利用できるようなので、cURL を使ってそれも試してみます。
ヘッダ等は何も指定せず、URL のみを指定するような形で試しました（具体的には `curl -X POST https://obniz.com/obniz/【ID などが含まれる固有の文字列の部分】` という内容です）。その結果、ブラウザ上で試した時と同様のレスポンス・動作が確認できました。
![cURLで呼び出す.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2d5abd43-7be4-7c9f-8b92-4a12096ad015.jpeg)

これを利用すれば、IFTTT から呼び出してみたり、他で開発したプログラムからの HTTPリクエストでこの Webhook用の URL を指定してみたりなど、いろいろな連携が行えそうです。

## おわりに（＋注意事項）
今回、「obniz のブロックプログラムで作った仕組みを、外部からの Webhook をトリガーにして動かす」というのをやって、意図通りの動作をさせることができました。

なお、最後に 1つ注意すべき点があり、無料枠で利用されている場合は 1日当たりに実行できる回数の上限があるようです。1日で 150回となっているので、ざっくり計算すると 10分に 1回実行するペースだと大丈夫、という回数です。
無料版で利用されていて今回のような内容をわりと高頻度に実行されようとしている場合は、ご注意ください。
　●クラウド料金体系 | obniz
　　https://obniz.com/ja/pricing
![クラウド料金体系.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c116f475-2a8e-f44d-4c8e-2511a1facb9a.jpeg)