【パブリッシャー】Googleマップにデータを表示してみる（応用：京都編）

GoogleマップAPIを利用したレポート作成についてはこれらの記事
* [Googleマップにデータを表示してみる](https://qiita.com/Miki_Yokohata/items/d781a68c729974c9ddb6)
* [Googleマップにデータを表示してみる（拡張）](https://qiita.com/Miki_Yokohata/items/09b9cffd9ad2dad88465)
 
で簡単にみてきました。その時はカスタムデータを手作りで作成しました。
またこの記事
* [Googleマップにデータを表示してみる（応用）](https://qiita.com/Miki_Yokohata/items/db7efa7fd7a134094feb)

では札幌市が提供しているデータを利用し応用例として投稿しました。

今回は、京都市が提供しているデータを利用した応用例をもう一例として投稿したいと思います。
京都市のオープンデータポータルサイトでは、数多くのデータが提供されています。その中で**京都市認定レンタサイクル店一覧**といったデータを利用してみます。
### データのダウンロード ###
京都市オープンデータポータルサイトへは、[ここ](https://data.city.kyoto.lg.jp/)からアクセスします。
ページが表示されたら**観光・産業**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/211acf71-3ba0-df3b-bde6-6729d400f0c2.png)
データセットの一覧が表示されるので、このデータセットを選びます。この記事を書いた時点では、3ページ目にあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/86287a7c-fab2-a614-8020-c3e88c48013f.png)
タイトルをクリックして次のページに進みます。このようなページが表示されるので、一番最新のデータをダウンロードしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a3a8c66a-c8ca-46a2-d312-914d9df3dc79.png)
このExcelワークブックがダウンロードされました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/54e23a60-5640-f468-0c73-7bf4afea1dfe.png)
### レポートの作成 ###
では、このダウンロードしたファイルをデータソースとしたクエリを含むレポートの作成に入ります。
[Sharperlight](https://sharperlight.jp/)アプリケーションメニューから**パブリッシャー**を起動します。
`新規`ボタンで新しいレポートの作成を開始します。
#### 一般属性 ####
コード、グループおよびタイトルを記述します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e302936f-43d0-8f32-2475-3bb6775e5fbe.png)
#### クエリ - フィルター ####
`クエリーを編集`ボタンでクエリビルダを起動します。
ダウンロードしたxlsファイルをデータソースとして使用するので、`製品`には**システム**、`テーブル`には**Excelワークブック**を選択します。
`ファイル名またはURLリンク`フィルターでは、先ほどダウンロードしたxlsファイルを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c4bd7868-4e4f-00aa-5d8a-7d5263f3735d.png)
ここでワンポイント、`セル位置を開始します`フィルターでセル参照**A3**を指定します。その理由は、このシートのデータセットの開始位置がセル**A3**になっているからで、指定しないと正しい解析ができず、正確な選択フィールド一覧の作成ができなくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8ae8a137-26ad-8a68-e6de-2382bf7903ef.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/fe72b6be-addc-dec9-11c7-7bf51c8bcd2f.png)
:bow_tone1:日本語訳`セル位置を開始します`って変ですね。日本語辞書の翻訳を修正しておきますね。すいません。
#### クエリ - 選択領域 ####
フィルター領域でファイルを選択すると、Sharperlightエンジンがxlsファイルを解析し、選択可能なフィールドを`選択`領域に展開表示してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/b8d55321-f37b-0146-81a0-59a49deb7a2a.png)
#### クエリ - 出力領域 ####
では、Google Map API用のデータセットを作成していきます。
次の5つの要素 **Type**, **Position**, **Title**, **Label**, **Content**を準備していきます。
**Type**は、拡張表現のTextタイプで`"Marker"`とします。名前はもちろん**Type**とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/787135fe-35c6-cfe4-46e2-04b6b07ba1b6.png)
**Position**については、このような
```
"{lat: 123456.123, lng: 123456.123}"
```
文字列を準備する必要があるので、これも拡張表現で作成します。緯度と経度フィールドを出力領域に設定し非表示とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/3c699040-76bb-9083-304e-65fa870a3744.png)
そして新たに拡張表現を追加して、以下のような構文を作成します。
拡張表現から非表示にしている緯度と経度フィールドを参照しています。名前はもちろん**Position**です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/56f8cfd9-550f-5db4-9bd6-e38266f74059.png)
**Title**、つまりツールチップには、住所フィールドの値を設定します。そして**Label**には、店舗名フィールドの値を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/dbccf9b0-288f-7a64-dfb2-793f3c0cf490.png)
最後に**Content**です。これにはウェブサイトフィールドの値、つまりURLアドレスを使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e136677f-3694-7197-0eee-30adb38d7533.png)
全部で5つの出力フィールド、完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f4981088-50ad-7c58-dea4-443ae5a379c5.png)
`プレビュー`ボタンでクエリ結果を確認してみましょうか。よさそうですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a4de88fc-3159-20a1-a02e-6a5c2e5ee56f.png)
`OK`ボタンでクエリ保存して、`適用`ボタンで一旦レポートを保存します。
#### グラフ属性 ####
グラフタブに移動します。グラフの種類を**Layer Map Road**とし、ここではGoogle Mapに関する属性のみ設定します。その他は初期値のままで。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1f7cf554-c7cb-0bc8-ab28-300a90482e16.png)
また、プロンプトは必要ないので、チェックを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/72964009-c655-f2e5-b1a2-73f120e5b9c7.png)
#### オプション属性 ####
オプションタブに移動して既定の出力形式を**Chart**に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8517c00d-84c1-dda5-fff8-b92654a018a4.png)
`適用`ボタンでレポートを保存します。
### レポートの検証 ###
`ビュー`ボタンでレポートをブラウザで表示します。Sharperlightサービスの起動をお忘れなく。
座標情報を元にマーカーがマップ上に表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e0505408-5741-3c74-75c6-9ec18d51aea3.png)
マーカーをクリックすると拡張表現で作成した**Content**、つまりURLアドレスのページがポップアップで表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0f7fa541-79f9-1c80-a3be-99432e36134a.png)
### おまけ ###
データセットにColour属性を追加します。`クエリを編集`からクエリ開いて、新しい拡張表現を追加、もちろん名前は**Colour**。そして構文には、京藤（きょうふじ）色のカラーコードを文字列として設定。このようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/371ce94d-f346-9daf-debb-c743ee60553a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/bde3fedd-71e3-de81-95a8-0cd7aa8bebbd.png)
結果は、このようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/2d8b9134-4add-8111-c0de-bdfbffdbe3a0.png)

座標情報をもつデータを利用したレポートやWebページを作成する例をここ数回ご紹介してきました。
尚、これらの記事で作成したオープンデータを利用したレポートは、<INS>**投稿者のPC上のみ**</INS>で動作しています。
Sharperlightサービスは、作成したWebレポートを外部へ公開するためのHttpsプロトコルもサポートしています。
このようなオープンデータを利用したレポートを外部へ公開するにあたっては、十分考慮してください。

では、失礼します。