前回は、GPSを使ったアプリの作り方を説明しましたが、スマートフォンから緯度や経度が取得できるなら、その情報は地図に表示したいですよね。現在地や登録しておいた位置情報がアプリの地図に表示できるようになると便利です。

Office 365のPower Appsにはマイクロソフトが提供する地図サービス「Bing maps」に接続するコネクタやコントロールをするための関数が用意されています。今回は、これらを活用した簡単な地図アプリの仕組みを紹介します。

(1)Bing mapsを利用する準備

Bing mapsをPower Appsで使用するには、Bing maps Dev CenterでBing mapsアカウントを作成し、キーを取得する必要があります。検索サイトで「Bing maps Dev Center」で検索をするか、下記リンクからアクセスをして下さい。

https://www.bingmapsportal.com/

Bing maps Dev Center が開いたらSign in をクリックして、マイクロソフトアカウントでサインインをします。サインイン後にセキュリティコードを求められる場合があります。その際はセキュリティコードが受け取れる携帯の電話番号を入力し、ショートメールで送信されたセキュリティコードを入力します。

続いて、Bing maps アカウントを作成します。新しいBing mapsアカウントを作成するかという質問にyesのリンクがありますので、ここをクリックします。Create accountの入力フォームが表示されますので、アカウント名、メールアドレスを入力して、利用規約への同意にチェックをします。Createボタンを押すとアカウントが作成されます。

My account よりMy Keysを表示します。表示されたキーをコピーして、Power Apps を開き、接続メニューよりBing Mapsを選択。API Keyの入力を求められますので、コピーをしたキーをセットして作成ボタンを押します。これでコネクタの準備は完了です。

(2)Bing mapsをアプリに接続する

追加したBing mapsコネクタをアプリに接続します。データソースにBing mapsが表示されていますので、クリックをしてアプリ内に追加します。

(3)Power Apps に地図を表示する

Bing mapsを表示するための画像をスクリーンに設置します。挿入よりメディアを選択して画像をクリックします。最初はサンプル画像が設定されていますので、これをBing mapsに置き換えます。

画像のプロパティImageにBing mapsの設定をします。Bing mapsを呼び出すにはBingMaps.GetMapを使用します。最初に画像の種類を選択します。当コラムではRoadを指定していますが、そのほかにも「航空写真：aerial」なども指定出来ます。ズームのレベルは1～21まで指定出来ます。プッシュピンについては137種類ものアイコンスタイルが用意されていますので任意で変更をしてください。アイコンスタイルの一覧は、MicrosoftのWebサイトに公開されています。

(4)作業チェックアプリにBing mapsを埋め込む

前回作成した作業チェックアプリにBing mapsを埋め込みます。レイアウトを少し変更し、左にBing maps、右に場所を入力するフォームとチェックボタンを配置しています。Bing mapsにセットする緯度、経度はLocation関数で取得したGPSデータをテキスト型でセットします。チェックボタンを押すと、作業者名、現在日時、フォームに入力された場所、GPSから取得した緯度、経度がExcelシートに登録されます。

登録された内容は下のギャラリーに作業履歴として表示されるように設定しています。ギャラリーのBing mapsにセットする緯度や経度はExcelシートに登録された各データから取得しています。Bing mapsに加え、作業者名や作業日時、作業場所をラベルとして張り付ければアプリの完成です。

今回はPower AppsでのBing mapsの使い方を紹介しました。実際に試してみるとわずかな時間で地図表示ができるようになると思います。地図が有効活用できる場面は多いので、ぜひチャレンジしてみて下さい。

著者プロフィール

三島正裕


1978年島根県生まれ。ディーアイエスソリューション株式会社所属。クラウドサービスを中心としたシステム提案やアプリケーション開発をする傍ら現在はマイクロソフト製品の活用事例「Office 365徹底活用コラム」を自社サイトで執筆中。