SE の雑記

SQL Server の情報をメインに Microsoft 製品の勉強内容を日々投稿

PowerApps と BingMap の連携で見る API をコールするコネクタの利用方法

leave a comment

PowerApps では、様々なコネクタが用意されており、コネクタ経由でアクセスできるサービスであれば、Flow を介さずとも利用が可能になっています。
(といっても、Flow より呼び出し時の柔軟性がないケースもありますが…。)

本投稿では、BingMap の利用を例として、API をコールするコネクタの利用を見てみようかと。
image

コネクタについては Flow の方が豊富に用意されており、PowerApps ではその一部が直接利用できるような形となっているのが現状かと。

コネクタのドキュメントについては Connectors で公開されており、PowerApps から利用する場合も、基本的にはこのドキュメントがリファレンスとなります。
(PowerApps 用のコネクタの概要 からもドキュメントを確認できますが、詳細になると Flow 側のドキュメントにリンクされます)

 

Flow を使用した場合、

  • 処理がワークフローで定義でき、柔軟に処理を構成できる
  • 外部 API を利用 / 複雑な処理を PowerApps の外部に出せるため、処理の変更時に PowerApps の変更が不要
    (例外もありますが)
  • コネクタが持つすべての機能を利用できる

というような特徴があります。
ただし、Flow という外部のコールとなりますので、処理の成功可否の判断については、Flow 側と組み合わせて確認する必要があります。

PowerApps で直接コネクタを利用した場合は、

  • PowerApps 側で API をコールしているので失敗したときの切り分けがしやすいケースがある
  • ロジックが、PowerApps 側で完結するため、変更する際には PowerApps の発行が必要となるが構成としてはシンプルに作成できる

というような特徴があるのではないでしょうか。
Twitter やメール送信といった内容についても、PowerApps でもコネクタが用意されていますので、Flow を使わなくても PowerApps だけで処理を完結することができるようにもなっています。

ただし、PowerApps からコネクタを利用した場合、一部のプロパティの設定ができない / データ渡しが想定した動作にできないというようなケースも見受けられますので、「提供されているコネクタのすべての機能を活用できる」というレベルにはなっていないこともありますので、そのような場合は、PowerApps 側にコネクタがあったとしても、Flow を使用する必要があるということも考えられます。

Bing Map も PowerApps と Flow の両方で提供されているコネクタなのですが、シンプルに使うのであれば、PowerApps だけでも完結させることができますので、今回は、これを例にしてみようかと。

開発時に Bing Map を使用するのであれば、https://www.bingmapsportal.com/ にサインインして、API キーを取得すると、すぐに使えるようになります。
Key の項目に API キーが表示されますので、
 image

それを PowerApps の接続の Bing Maps に設定すれば、PowerApps から Bing Maps を呼び出すことができます。

image

PowerApps のデータソースとして、追加した Bing Maps の接続を追加すれば、作成した API キーによって、Bing Maps を利用することができます。

image

PowerApps からは、

  • GetLocationByAddress
  • GetLocationByPoint
  • GetMap
  • GetRoute

というようなメソッドを呼び出すことができるようになっています。
詳細については Bing Maps (Preview) から確認できるのですが、今回は「緯度」「経度」を元にして、画像を生成する「GetMap」を使用してみようと思います。

今回は、ボタンをクリックしたタイミングで Bing Maps を呼び出しますので、ボタンを配置しアクションとして、「BingMaps.GetMap(」まで入力してみます。

そうすると次のような入力補完が表示され、これが、PowerApp で利用することができるコネクタのパラメーターとなっています。

image

Get static map が詳細になるのですが、最初に指定する「imagerySet」は、地図の種類になり、詳細についてはコネクタではなく、Bing Maps の REST のドキュメント の方に詳細に書かれています。
コネクタは、API をラップしているものになりますので、詳細については、API 側のドキュメントを見る必要のあるケースもあることを意識しておく必要があるかと。

こんな感じで、設定値と項目の意味を確認しながら作業を進めていきます。

今回は次のような設定にしました。

BingMaps.GetMap(
    "Road",
    17,
    Location.Latitude,
    Location.Longitude
)

PowerApps はデバイスのロケーション情報を使用することでき、緯度 / 経度の情報は、デバイスの情報を渡すことができますので、今回は「Loation.Latitude」「Location.Longitude」という形で、デバイスの情報を渡しています。

これで、BingMaps の API を使用して画像データの生成が可能となります。

上記のままでは値がどこにも格納されませんので、今回は変数に入れてみましょう。

これで、BingImage という変数に Bing Maps から取得した画像データが格納されます。

UpdateContext(
    {
        BingImage: BingMaps.GetMap(
            "Road",
            17,
            Location.Latitude,
            Location.Longitude
        )
    }
)

Image のコントロールの Image にこの変数名を設定すると、緯度 / 経度の情報を元にして、Bing Maps から取得した画像データを表示できます。

image

コネクタの関数によっては、引数に次のが追うのようなものを指定するようなオプションが表示されます。

image

今回は、経度 (Longitude) の後に、カンマを入力すると表示されるのですが、このような表示になった場合は「レコード」の形式でオプションを指定することが可能な項目となっています。

レコードは「{Val1:"AAAAA", Val2:100}」というような、「項目:値」のペアになったものですね。

Bing Maps の場合はプッシュピン (場所を表すピンのアイコン) 等については、レコード形式で指定する必要があり、書式については REST API のドキュメントに記載されています。

format がうまく指定できなかったのですが、mapSize と pushpin については指定ができ、次のような設定で利用できます。

PushPin については、ピン止めする場所や、ピン止めの形を文字列連結したものを使用する必要がありますので「Concatenate」を使用して文字列連結した結果を指定しています。

UpdateContext(
    {
        BingImage: BingMaps.GetMap(
            "Road",
            17,
            Location.Latitude,
            Location.Longitude,
            {
                mapSize: "100, 200",
                pushpin: Concatenate(
                    Text(Location.Latitude),
                    ",",
                    Text(Location.Longitude),
                    ";1"
                )
            }
        )
    }
)

これで、デバイスの位置がピン止めされた画像データが生成できます。

image

自分の位置を Twitter でつぶやいても仕方がない気がしますが、PowerApps に Twitter のコネクタを追加して、何かしらのアクションに次のような数式を設定することで、Bing Maps で生成された画像をつぶやくということもできます。

(よくあるイマココの仕組みですね)

Twitter.Tweet(BingImage, {tweetText:"イマココ"})

はじめて利用する際には、コネクタのレコードの指定部分で戸惑うかも知れませんが、基本的な操作方法を覚えておくと、PowerApps 単体でいろいろとできるのではないでしょうか。

Written by masayuki.ozawa

8月 25th, 2018 at 4:49 pm

Posted in PowerApps

Tagged with

Leave a Reply

*