f:id:tecchan365:20190515220226p:plain PowerApps で開発した、周辺のお店・病院等を検索してくれる「Nearby Places Seacher」の作成方法をご紹介します。

今回は、[検索] ボタンをクリックして、Google Maps API の情報をPowerAppsへ値を返す方法です。
こちらはMicrosoft Flowを利用します。

Microsoft Flow を追加

PowerApps の編集画面を開き、[アクション] → [Flows] → [新しいフローを追加] の順にクリックします。
f:id:tecchan365:20190515220925p:plain

すると、以下のような画面が表示されます。ここから画面下部の [新しいステップ] をクリックし、アクションが追加できます。 f:id:tecchan365:20190515221040p:plain

Microsoft Flow の作成

Flowの全体像

Flowの全体像は以下のようになっています。
f:id:tecchan365:20190515221208p:plain

Flow のアクション1つずつ説明していきます。

① PowerApps

こちらはFlow 作成時に自動で挿入されています。
編集する必要はございません。 f:id:tecchan365:20190515221323p:plain

② HTTP

こちらのアクションで Google Maps API を呼び出し、検索結果を取得します。
URIの中にある「HTTP_URI」というのは、PowerAppsでの引数を表します。
f:id:tecchan365:20190515222156p:plain

URIは以下の通りです。

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location={['HTTP_URI']},{['HTTP_URI_1']}&rankby=distance&keyword={['HTTP_URI_2']}&key={['HTTP_URI_3']}

③ 要求

こちらのアクションで、「② HTTP」で取得した値をPowerAppsに返します。　 f:id:tecchan365:20190515223006p:plain

「本文」には、「② HTTP」で取得した「本文」を選択します。 f:id:tecchan365:20190515223130g:plain

「JSONスキーマ」には、以下を入力します。

{
    "type": "object",
    "properties": {
        "html_attributions": {
            "type": "array"
        },
        "next_page_token": {
            "type": "string"
        },
        "results": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "geometry": {
                        "type": "object",
                        "properties": {
                            "location": {
                                "type": "object",
                                "properties": {
                                    "lat": {
                                        "type": "number"
                                    },
                                    "lng": {
                                        "type": "number"
                                    }
                                }
                            },
                            "viewport": {
                                "type": "object",
                                "properties": {
                                    "northeast": {
                                        "type": "object",
                                        "properties": {
                                            "lat": {
                                                "type": "number"
                                            },
                                            "lng": {
                                                "type": "number"
                                            }
                                        }
                                    },
                                    "southwest": {
                                        "type": "object",
                                        "properties": {
                                            "lat": {
                                                "type": "number"
                                            },
                                            "lng": {
                                                "type": "number"
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    },
                    "icon": {
                        "type": "string"
                    },
                    "id": {
                        "type": "string"
                    },
                    "name": {
                        "type": "string"
                    },
                    "opening_hours": {
                        "type": "object",
                        "properties": {
                            "open_now": {
                                "type": "boolean"
                            }
                        }
                    },
                    "photos": {
                        "type": "array",
                        "items": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "integer"
                                },
                                "html_attributions": {
                                    "type": "array",
                                    "items": {
                                        "type": "string"
                                    }
                                },
                                "photo_reference": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "integer"
                                }
                            },
                            "required": [
                                "height",
                                "html_attributions",
                                "photo_reference",
                                "width"
                            ]
                        }
                    },
                    "place_id": {
                        "type": "string"
                    },
                    "plus_code": {
                        "type": "object",
                        "properties": {
                            "compound_code": {
                                "type": "string"
                            },
                            "global_code": {
                                "type": "string"
                            }
                        }
                    },
                    "rating": {
                        "type": "number"
                    },
                    "reference": {
                        "type": "string"
                    },
                    "scope": {
                        "type": "string"
                    },
                    "types": {
                        "type": "array",
                        "items": {
                            "type": "string"
                        }
                    },
                    "user_ratings_total": {
                        "type": "integer"
                    },
                    "vicinity": {
                        "type": "string"
                    }
                },
                "required": [
                    "geometry",
                    "icon",
                    "id",
                    "name",
                    "opening_hours",
                    "place_id",
                    "plus_code",
                    "rating",
                    "reference",
                    "scope",
                    "types",
                    "user_ratings_total",
                    "vicinity"
                ]
            }
        },
        "status": {
            "type": "string"
        }
    }
}

JSONスキーマの作り方は、後日また記事にしたいと思います。

これでMicrosoft Flowの完成です。
次回は、こちらの情報をPowerAppsで表示する方法をご紹介します。