Bubbleで背景画像を入れ替える方法を解説

2023年8月13日

masahide

エストニアにKoronCoron OÜ設立｜親子向けノーコード教育事業展開、Webアプリケーション受託、デザイン修正などを展開朝活コミュニティの運営もしているので、興味のある方はTwitterのDMにて承ります。

1 前提条件
2 この章で学べること
3 機能実装方法
4 まとめ

前提条件

Bubbleに登録している（FreeプランでOK）
Bubbleの触り方がわかる
APIについての基礎理解がある

この章で学べること

API connectorの設定方法
RemoveBG APIキーの活用方法
画像背景の切り抜きと入れ替え方法

Bubbleで背景画像の入れ替えもできた。
✅API：Remove BG
✅プラグイン：API Connector pic.twitter.com/UOSCXvYMwn

— じょん-KoronCoron OÜ CEO (@john01tgmck) August 13, 2023

機能実装方法

背景削除する際に手軽にブラウザ上で使うことができるRemoveBGはAPIが公開されています。

このAPIを使用して、Bubble上で背景削除を行う方法を解説します。

Remove BGの公式サイト：https://www.remove.bg/ja

RemoveBG APIキーの取得

まずは公式サイトに移動して、サインアップから会員登録をします。

利用規約にチェックを入れてサインアップします。

2つ目のチェックボックスは通知を受け取るかどうかなので、任意です。

アカウント情報に移動します。

API KeysからNew API Keysをクリックします。

ご自身のわかりやすいKeyの名前をつけて、Create API Keyをクリックします。

作成されたAPIキーをコピーしておきましょう。

API Connectorの設定

Bubble側に移動し、APIConnectorをインストールします。

Add Another APIをクリックします。

API NameをRemove_BGとします。

Name APICallにあるexpandをクリックして、API Callの詳細設定をしていきます。

Bodyの中身

エンドポイント：https://api.remove.bg/v1.0/removebg
X-API-Key：4eJP1gaKBhQ7vSF2Ux96HbSP
Content-Type：application/json

Body (Json object)の中身はこちらをコピペしてください。<>で囲まれている部分は動的に変更できる箇所になります。

Bodyの中身

{
"image_url": "<image_URL>",
"size": "<size>",
"type": "<type>",
"type_level": "<type_level>",
"format": "<format>",
"roi": "0% 0% 100% 100%",
"crop": <crop>,
"crop_margin": "<crop_margin>",
"scale": "original",
"position": "original",
"channels": "rgba",
"add_shadow": false,
"semitransparency": false,
"bg_color": <bg_color>,
"bg_image_url": <bg_image_url>
}

Body parametersの詳細

Privateのチェックが外れているところは、API CallしたときにWorkFlowから制御できる部分になります。

設定方法詳細の細かな説明はこちらのReferenceに掲載されているので、参考にしてみてください。

https://www.remove.bg/api#api-reference

image_URL：https://www.remove.bg/example-hd.jpg

size：preview

type：auto

type_level：1

format：auto

crop：false

crop_margin：0px 0px 0px 0px

bg_color："00000000"

bg_image_url：空白