クラウドBOTでブラウザ操作をWebAPI化する話

C-RISEの村井です。
なんとなくアドベントカレンダーを見てたらWebAPIの枠があったので抑えてしまいましたが、実はこれがQiitaで初の投稿になります。
しかも、結局当日の22日に書いてるので公開が遅くなって申し訳ないです。
では早速ですが、WebAPI関連なら何でも良いという事でしたので、
# クラウドBOTでブラウザ操作をWebAPI化する話
について書いてみたいと思います。
その前に簡単に[クラウドBOT](https://www.c-bot.pro/)の簡単なご紹介から。

[クラウドBOT](https://www.c-bot.pro/)は株式会社C-RISEで提供しているクラウド型RPAです。
クラウドネイティブで、ノーコードで、無料から利用する事ができます。
簡単に特徴を上げると

* クラウド上で起動する仮想ブラウザ(ヘッドレスブラウザ)を**自動操作するBOT**が作れる
* **操作を自動的に記録**してシナリオ化する為、NoCodeでBOT作成可能
* **Webブラウザのみ**で利用可能(スマホやタブレットのWebブラウザにも対応)
* 作成したBOTには自動的に**入出力が定義**される
* 作成したBOTは**REST API**として実行可能

こんな感じですが、以前noteで会社紹介を兼ねてクラウドBOTについて記事を書いた事があるので、興味がある方は是非読んでみて下さい。
note記事: [クラウドBOTが目指す世界](https://note.com/crise_murai/n/n42a30031d633)
あと、良ければ[紹介動画](https://www.youtube.com/watch?v=dNHUzMrU4xo&feature=youtu.be)なんかも見てみて下さい。

## Webブラウザの操作を自動化するクラウド型RPA
では、本題に入っていきたいと思います。
Webブラウザの自動操作技術自体は結構以前から知られており、最近ではヘッドレスブラウザ+Selenium+Pythonで自動操作プログラムを書いてスクレイピングや自動テスト等に活用されてる方も多いと思います。
さらに、上記の特徴であげた「操作を記録してシナリオを作成する」方法は、Selenium IDEや他のRPA製品でも提供されている機能になります。
では、クラウドBOTは何が違うかというとサービス自体の設計思想が**自動操作で業務を自動化**する事より、**API未提供のWeb機能をAPI化して連携する**という事に着目して開発されたサービスであるという事です。
上記特徴の入出力定義とREST API化の部分をもう少し詳し掘り下げると下記のような特徴があります。

+ 仮想ブラウザ上での操作を記録する際に**操作手順**と**データ**を自動的に識別し分離
+ ブラウザ上で入力された**データ**はBOTの**入力値**(引数)としてBOTに自動定義される
+ ブラウザ画面上から取得した**データ**はBOTの**出力値**(返り値)としてBOTに自動定義される
+ 作成されたBOTは、REST APIとして**同期/非同期**で呼び出す事ができる
+ BOT及び仮想ブラウザはサーバレスで動作する為、**スケール可能**

## 変化の激しいWeb画面を自動操作により機能連携するという事
各サービサーが提供する公式APIを呼び出して連携するのに比べ、Web画面を自動操作して連携するのは不安定な手法として邪道扱いされる場合もあります。
このような不安定な仕組みをあえてサービス化する意義ですが、

+ 公式APIが提供されていない場合、連携を諦めるか、自動操作しか方法が無い
+ Web UIの変化により自動操作が崩壊しやすいのであれば、崩壊時の改修コストをNocodeで最小化する
+ 自動操作をAPI化する事で、連携呼び出し側の依存を限定的にする事ができる
+ 公式APIで連携が可能になった際に、APIのI/Fだけ修正する事でスムーズに移行可能

という事が言えます。

## 実際にBOTを作ってみる
では、実際にAPIのイメージを確認する為、[この動画](https://www.youtube.com/watch?v=xF9bRgzJauQ)に沿って簡単なBOTを作成してみましょう。
BOT作成エディタを立ち上げると以下のような画面が表示されます。
Webブラウザ内に仮想ブラウザが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/a4b62637-aa39-2127-bb23-034f03b08af1.png)

URL欄にGoogleのURLを入力するとトップページが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/6f874545-b30c-866a-2bb3-423dbe5d5363.png)

記録を開始しようと吹き出しが出ているので赤いボタンを押して操作記録を開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/8b30a82c-731c-8d28-2c2c-c384a0cdb442.png)

GoogleのURLにアクセスする所から記録が始まりました。
検索キーワードの入力欄を選択してメニューから「入力する」を選択します。
(ダブルクリックをすると、メニューを介さずすぐに入力欄が開く事ができます)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/03ec06ed-06a6-2b09-ac2d-7fb0ad7e4ad1.png)

「クラウドBOT」と入力すると、入力後のサジェストが表示されます。
次に「Google検索」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/677281b3-facf-8118-7afd-96093ecb0a93.png)

検索結果画面が表示されましたので、その中の検索結果件数を選択しコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/2d675592-74ad-c2f4-5b9f-2110296be424.png)

コピーする時にデータ名称も入力できます。
今回は、「検索結果件数」と「最上位サイト名」というデータ名称をつけました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/35282269-0814-df69-2a4a-5679f918219d.png)

サイドメニューの保存アイコンを押すとBOTに名称をつけて保存する事ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/5575dbd7-2a74-dfa9-8faa-9bfc0e91a523.png)

この時に、BOTには入力値である検索キーワード「値2」と、出力値である検索結果「検索結果件数」「最上位サイト名」が既に定義されています。
値2では分かりにくいので入力データ名を「検索キーワード」に変更してみました
この入出力がそのままREST APIの引数と返り値になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/cdbd3a53-f656-c317-b8aa-076ee0e03e08.png)

ちなみに余談ですが、説明動画やこの記事で作成しているGoogle検索のようなBOTは実用としては推奨できません。
理由はGoogleの画面(HTML構成)が高頻度で揺れる為です。
見栄えは変わってなくても内部のHTML構造が頻繁に変化します。
ここではあくまでBOT機能を理解して頂く為に、見慣れているであろう画面を例としてBOT作成しているという事をご理解下さい。

## BOTをAPIとして公開してみる
開発者向けメニューから、先程作成したBOTの「公開」ボタンをクリックし
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/8a866336-ccd4-9b63-2099-ba3d63b03885.png)

エンドポイントを生成する為のBOT IDを入力し公開します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/50bba8b5-8897-5e59-6d9a-5c18db9d873b.png)

APIが公開され各APIのエンドポイントも確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/5ba9c7f1-f557-ca53-b4a0-0eebb87f8737.png)

## テストツールからAPIを実行してみる
画面下部には公開したAPIのテストツールも提供しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63595/c91fc5cc-5ccf-cdc2-fe0c-b363f9677ecd.png)

公開したAPIのパラメータはこんな感じです。
```json
{
    "timeout": 30000,
    "callback_endpoint": null,
    "callback_tries": 1,
    "input": {
        "検索キーワード": "クラウドBOT"
    }
}
```
レスポンスはこんな感じです。
```json
{
    "code": 201,
    "job_id": "be40848c-4437-11eb-99e1-0637d9ab8f38",
    "bot_id": "google_search",
    "bot_name": "Googleキーワード検索",
    "status": 0,
    "start_time": "2020-12-22T09:26:17Z",
    "elapsed_time": 5,
    "output": {
        "検索結果件数": "約 10,300,000 件 （0.49 秒）",
        "最上位サイト名": "クラウドBOT"
    },
    "callback": false
}
```

以上のように簡単にWeb操作をBOT化し、BOTをAPIとして実行する事ができました。
ここまでBOT作成から、API公開、API実行まで全て**ノーコード**で実現しています。
ちなみに、クラウドBOTの[APIリファレンス](https://docs.c-bot.pro/2020/06/25/api-reference/)はこちらで公開しています。

## ノーコードでAPI化する意義とは
APIの作成や公開までノーコードで実現したとして、そのAPIを呼び出す為には通常コーディングが必要になります。
結局コーディングが必要だとすると、Web操作のAPI化だけをノーコードにする意義とは何なのでしょうか。
一般的に、Webアプリケーションやデスクトップアプリ、スマホアプリ等のアプリ開発者が、外部Webサービスと連携する為にWebブラウザの自動操作機能を開発する場合、Selenium+Chromium+Python等で操作手順をトレースするようにコーディングして、さらにスケールも考慮してインフラ設計やサーバレス化といった対応が必要となります。
この自動操作系の処理をノーコードで簡単に作成して、REST APIで呼び出すだけとなると、確実に生産性は高まると考えています。

さらには、APIの呼び出し自体もノーコードで利用されるシーンが増えてくると考えています。
その一つがiPaaS(integration Platform as a Service)です。
有名な所では[IFTTT](https://ifttt.com/)や[Zapier](https://zapier.com/)のような様々なクラウドサービスのAPIをつなぎ合わせてサービス間連携を可能にするサービスです。
iPaaSではトリガーやアクション、コネクタといったノーコードの連携機能を提供しており、非エンジニアでも簡単にAPIを呼び出す事ができます。
クラウドBOTは、上記の[IFTTT](https://ifttt.com/)、[Zapier](https://zapier.com/)に正式に対応しており、作成したBOTはすぐにトリガーやアクションとして利用する事ができます。
さらに、ちょうど[本日リリース](https://prtimes.jp/main/html/rd/p/000000013.000049789.html)したばかりですが、[Microsoft Power Automateのコネクタ](https://japan.flow.microsoft.com/ja-jp/connectors/shared_cloudbot/cloud-bot/)としても正式に認定され公開されました。

クラウドBOTが、様々なiPaaSと連携する事で、API提供サービスとAPI未提供サービス間の連携を**ノーコード**で**非エンジニア**でも構築できるようになると考えています。

クラウドBOTは、これからも各iPaaSとの連携を強化していく予定ですが、クラウドBOT自体もiPaaS機能を提供していく予定です（色々あって遅れてますが……）。
最後はAPIのお話から少し外れてノーコードの話になりましたが、WebAPIの作り方も使い方もコーディングだけではなく、様々な形があるという事をお伝えしたいと思って本記事を書いてみました。

# 最後に
１２月２２日のアドベントカレンダーを当日の朝に書き初めて、合間を見ながら書いてて、ようやく夜に書き終わるという形となってしまいました。
それでも、つたない文章ですが書きたい事が書けて良かったです。
本記事を見てご興味を持たれた方は、是非[クラウドBOT](https://www.c-bot.pro/)の無料プランからでも触ってみて下さい。
ご精読ありがとうございました。