背景抜き remove.bg のAPIとPower Platform連携

## はじめに
　背景画像を一瞬で綺麗に抜いてくれる [remove.bg](https://www.remove.bg/ja/)で提供されるAPIに、Power Autotameで接続、Power Appsでアプリ化することをやってみました。また、背景を抜いた後のデータをOne Drive for Businessに保存し、Power BIで表示しました。

### 動作イメージ
　こちらの動画をご覧ください。 [remove.bg APIとPower Apps、Power Automate連携 - YouTube](https://youtu.be/xBuxiULZSA8)

<a href="https://youtu.be/xBuxiULZSA8" >![IMG_6556.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/2dc072a6-bc36-4088-0846-b1e7f3cb4ab9.png)</a>


### 本APIに関するページ
　[こちら](https://www.remove.bg/ja/api)が、APIのドキュメントやサンプル等あります。いろんな言語の説明等ありますが、Power AutomateやPower Appsはありませんでしたw 利用料金等はremove.bgの説明をご参照願います。
　取得した画像のサイズや、人物等の判定の仕方等細かな設定ができます。

### API Key
　会員ログイン後、[同APIのページ](https://www.remove.bg/ja/api)からAPI Keyを控えておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/cee7a9cd-96cb-4818-b641-f1449e68c61a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/f927ba12-3554-e400-1631-c5b6c69f1ae8.png)

### Power Appsの要点

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/ba57b7a5-da98-38dc-d3fa-6ea8b916b0c1.png)

画像のURLを入れてボタンを押すと、Power Automateを呼び出し、API呼び出し取得した画像データをBase64で取得。それを表示しています。
ビフォーが左、アフターが右です。

[抜く]ボタンの設定は以下です。Power AutomateにURLを渡し、戻り値を変数に入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/b75dae68-732c-e964-e0e8-ccee4ddce009.png)

```
UpdateContext({locResponse:画像抜き.Run(TextInput1.Text)})
```

左の画像表示は以下です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/0ee4a9ba-4a0f-3f40-18b5-dea694af5ca7.png)


```
Concatenate("data:image/png;base64,", locResponse.newimage)
```

Power Automateの呼び出しについて、
- 引数を変更したとき
- Power Automate側でOneDrive保存を追加したとき
など呼び出しのエラーが出やすくなり、解決になやみました。結果は再接続等でうまくいきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/e81a7921-0e5a-4f47-9c28-8c6b887c84b4.png)


### Power Automateの要点

フローの全体像はこのようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/9ff12ac4-9f5a-4ec2-78f8-ae84aed683cb.png)

HTTPコネクターは以下です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/b8b1af43-88ea-e063-55bf-db7300840d64.png)

Methodは「POST」（Putと間違えて設定し時間を要した...）

URIはこちら、

```
https://api.remove.bg/v1.0/removebg
```
ヘッダーは X-API-Keyに各自のAPIキー、accept:にimage/*、Content-Typeをapplication/jsonにします。

本文(Body)のJSONのサンプルは以下です。必要に応じて書き換えてください。

```
{
  "image_url": "@{variables('orgURL')}",
  "image_file_b64": "",
  "size": "full",
  "type": "auto",
  "type_level": 1,
  "format": "auto",
  "crop": true
}
```

取得したデータからbase64の部分であるbody('HTTP')?['$content']を変数に入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/2e665949-8195-fc90-8bf1-8ed672eb2941.png)
それをPower Appsに応答で返します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/2bcb7c33-19cb-c22f-3e79-0a4dc77e4842.png)

ファイルの保管は、One Driveにファイル名を現在時刻にして、png形式で保管しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/282a4891-a67a-156f-8439-14df071c53dd.png)

base64のテキストデータをBinaryに変換します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/ee98d091-08ce-c40b-5b6b-64b2dd9b70ab.png)

## Power BIの要点

　One Driveにたまった画像は、同じM365内の組織で閲覧する、という前提であればPower BIで画像付きで表示できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/2ebb3dc9-a854-956a-42a3-2eeb294b112b.png)

接続はSharePointフォルダーから行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/6dbc676d-4456-5d25-9a10-09a53f3d8d23.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/03a90bfc-b14e-4c67-673e-6bdffe56b8fa.png)

この部分は、OneDriveのURLから「_layouts/」の前までの部分ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/e6acfc86-55a4-7de0-b763-85239f117d16.png)

Power Queryのフィルターで画像を保存しているサブフォルダー名を含む形でフィルターします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/9d43feff-eb55-4f59-c219-e1135dc3c77e.png)

画像のURLの列を作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/f658ed9b-f551-54c5-7780-4aa808318eb5.png)

画像URLはデータカテゴリで画像のURLを指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/46551e5a-ea71-7f62-5159-82ed3f5a2ec9.png)

Power BI Desktopでは、画像部分が表示できませんが、Power BI Serviceに発行した後、表示できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/0bc6e2fd-c4ba-06db-329e-6805c2c5c247.png)


## おわりに
　APIを呼び出すアプリは初めてでしたが、やってみると面白いですね！