#いま火星が熱い！
2021年2月19日未明に、NASAの火星探査ローバー「パーセベランス」が火星に着陸しました。
火星から送られてくる息をのむほど美麗で、しかし生のない世界の写真に惹かれます。
「火星の風の音」にも感動を覚えましたし、プロジェクトに携わった方々のコメントに涙しました。
さらに、映画「オデッセイ」を鑑賞し、原作の「火星の人」も読破してしまいました。
・・・要するに、火星にハマってます（笑
######そして、NASAからは上記以外にも、火星に行った気分になれる小粋なプレゼンをまで用意してくれました。
####Mars Perseverance Photo Booth
「Welcome to Mars! We can't take you to Mars (yet!) but we can bring the Red Planet to you.」
とか気が利いてますね。
また、ちょうどおうじゃさんといっしょコミュニティで、@ishiayayaさんから、
######「removebg」という、高精度で写真の背景を切り抜いてくれるWebサービス
を教えてもらえました。
このremovebg、APIも提供してくれています。
さらに、別の背景も設定可能です。
これはもうセルフ「Mars Perseverance Photo Booth」を作るしかない。
ということで火星で記念写真が撮れるツールを作ってみました。
#準備
removebgを利用するには、ユーザー登録しAPI Keyを取得する必要があります。
画面右上の「ログイン/登録する」よりユーザー登録し、
画面上部の「ツール＆API」より
「API Docs」を選択し
「Get API Key」をクリックし
API Keyを表示して、コピーしておいてください。
#注意
今回はPower AutomateにてHTTPコネクタを利用します。これはプレミアムコネクタとなるため別途Automateの有償ライセンスが必要です。
お試しいただく際は、無償、無期限の個人向けプランをお勧めします。
PowerApps Community Plan
#全体の流れ
Power Appsにて画面を作成し、AutomateでAPIコネクタを作成していきます。
#Power Appsの作成
テキストインプットを２つと、画像コントロールを３つ、ボタンを配置してください。
位置や名前は任意で大丈夫です。
（イメージ右上のラベルコントロールは不要です）
画像コントロール1の[Image]プロパティに、テキストインプット1の[Text]プロパティを設定します。
画像コントロール2とテキストインプット2にも同様に設定してください。
#Power Automateの作成
続いて、画面左上の[アクション]メニューより、[Power Automate]を選択。
現れたペインで[新しいフローの作成]を選択
表示したPower Automate画面で「＋作成」
[インスタント クラウド フロー]を選択し
任意のフロー名を入力し、[Power Apps]を選択、[作成]ボタンを押下します。
新しいアクションをクリックし、"HTTP"で検索。[HTTP]を選択し、
さらに[HTTP]を選択。
下記の値を設定してください。
■方法
POST
■URL
https://api.remove.bg/v1.0/removebg
■ヘッダー
| Key | Value |
|---|---|
| accept | application/json |
| X-API-Key | [上記の準備で取得したremovebgのAPI Key] |
| Content-Type | application/x-www-form-urlencoded |
■本文
al&image_url=@{triggerBody()['HTTP_本文']}&bg_image_url=@{triggerBody()['HTTP_本文_1']}
######本文部分は下記のように設定ください。
Power Apps からの引数設定その１
Power Apps からの引数設定その２
こうなります。
#####APIからのレスポンスは下記の構造をもつJSONオブジェクトとなります。
AutomateでのJSONへのアクセスは、
####HIROさんの「JSONと仲良くなるために (4)」がとても参考になると思います。
レスポンスJSONから、"result_b64"の値を取得します。
「種類」を"文字列"で変数を初期化を追加
値には、動的なコンテンツの追加で、「式」を選択し
?['data']?['result_b64']
を入力後、
「動的なコンテンツ」に切り替え、カーソルを先頭に移動し、本文を選択
OKをクリック
最後に「Power Apps または Flow に応答する」を選択し、テキストとして、上記変数を設定します。
保存して、Power Appsの画面に戻りましょう。
#再びPower Appsの作成
画面左上の[アクション]メニューより、[Power Automate]を選択し、
今作ったフローを選択します。
上部の関数バーに、フローの呼び出し数式が表示されるので切り取りし、
ボタンの[OnSelect]プロパティに貼り付けます。
前後に、Set関数とテキストインプット1および2の[Text]プロパティを設定します。
こんな感じになると思います。
Set( return_Flow, Call_removebgAPI_from_Apps.Run(TextInput1.Text,TextInput2.Text))
※フロー名やコレクション名などは、ご自身で命名された値を入力ください。
最後に、（未設定の）画像コントロール3の[Image]プロパティに、下記値を設定して完了です。
Concatenate("data:image/png;base64,", return_Flow.return)
#いざ！火星に行こう！
テキストインプット1に、One Drive などに保存した、ご自身の写真のURL
テキストインプット2に、Nasaのギャラリーより取得した火星地表のの写真のURL
を入力し、ボタンを押下します
######本来の背景抜き機能を利用する場合は、テキストインプット2に何も入力せずにボタンを押してください。
太々しいぬこが
無事、火星に着陸できました！
合成後の画像ファイルを取得するには、
画像コントロール3の[Image]プロパティに設定した値を、ラベルコントロール等にも表示し、『Base64から画像変換』するWebサービスでデコードしてください。
#まとめ
今回、このremovebgというツールを教えてくださった石川陽一さん（@ishiayaya）に感謝いたします。