【パブリッシャー】簡単レポート！ - JSON形式で返却されるデータ

最近 AEDの設置場所をデータベース化して一人でも多くの人を救おうと頑張っているサイトを見つけました。
このようなオープンデータAPIから戻ってくるJSON形式のデータを、シンブルなレポートとして簡単に加工できればいいのかなと思って、この記事を書いています。

[AEDオープンプラットフォーム](http://hatsunejournal.azurewebsites.net/w8/AEDOpendata/)様のサイトでエンドポイントのURLが紹介されていました。
いくつかある中で、今回はこのURLを使用してみることにします。
```
https://aed.azure-mobile.net/api/aedinfo/福井県/鯖江市/
```
認証などはなさそうなので、とりあえずブラウザのアドレスバーにこのURLを貼り付けてみます。
このような標準的なJSON形式でデータが戻ってきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/7cb3116b-a116-5438-2e65-90525f5332b3.png)
うん、これならSharperlightのクエリビルダで簡単に扱えそうです。

## レポート/クエリの作成 ##
では早速、Sharperlightでクエリーの作成開始。
[Sharperlight](https://sharperlight.jp/)のアプリケーションメニューから**パブリッシャー**を起動します。レポートとして表示してみたいので**パブリッシャー**を選びました。
`新規`ボタンで新しいレポートの作成を開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/6a08bd41-36ed-6045-7a04-9d1c8cb4153b.png)
レポートのダイアログが開いたら、**コード**、**グループ**および**タイトル**を記入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/b7000db4-8fa3-354a-5029-28327cebb2d9.png)

### クエリの作成 ###
次に`クエリを編集`ボタンでクエリの作成を開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/212a0b45-98a1-61ef-2b90-0f7d92cebd57.png)
**クエリビルダ**が起動するので、フィルター、出力アイテムを定義していきます。
#### フィルター ###
ここでは、レポートのタイプ（モード）、使用するコネクター（製品）、クエリ対象テーブル等を指定します。
今回は、APIのエンドポイントということで、通常のデータベースとは異なる設定を行います。
`モード`には、**詳細レポート**を選択します。
`製品`には、**システム**を選択します。
`テーブル`には、**Web ページのテーブル、CSV、JSON、XML またはOData**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8c428cda-87d5-52a8-cfc1-81740b3752f1.png)
テーブルを設定すると、選択値に関連するその他のフィルターが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1d5f2ab7-008d-23e0-2a65-81eb4b79fdc4.png)
`URLリンク`以外は今回使用する必要がなさそうです。
`URLリンク`に、先に取得したAPIエンドポイントのURLを貼り付けます。
#### 選択リスト ###
フィルターの`URLリンク`に**URL**が設定されると、Sharperlight Engineがすぐにそのエンドポイントにアクセスし、返されるデータのスキーマ情報を解析し、クエリビルダの選択領域にデータフィールドの一覧を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/51731ac2-0896-a965-b5f1-9610bbac3249.png)
#### 出力アイテム ###
データフィールドの一覧が準備されたら、あとはダブルクリックあるいはドラッグ&ドロップで表示させたいフィールドを出力領域に設定するだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8dde6747-ab8f-c99d-c2a1-2a26b2567b5b.png)
#### クエリの検証 ###
`プレビュー`ボタンでクエリを実行してみます。
データが戻ってきました。JSON形式のデータが見やすい形で表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/2392a7bc-78a4-96e2-9889-c602e56dbca9.png)
#### レポート/クエリの保存 ###
クエリの動作確認が済んだので、`OK`ボタンでクエリを保存します。
レポートのダイアログに戻るので、`OK`ボタンで今度はレポートを保存します。

## レポートの表示 ##
パブリッシャーで作成されたレポートは、Sharperlightサービスを介して社内ネットワークやインターネットに公開することができます。
今回は、単にローカルコンピュータ上で表示してみます。
Sharperlightサービスを起動します。
**パブリッシャー**のレポート一覧から先ほどのレポートを選択し、右クリックメニューから**レポートの表示**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/26e6b8c2-229c-5909-c729-d0673874d567.png)
このように普段使用しているブラウザにレポートが表示されます。
クエリビルダのフィルター群が、既定の設定ではこのようの表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/fde312b1-2d0d-e2a1-4463-c8ce4e19bf3b.png)
`送信`ボタンでクエリを実行し、データを表示してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0551faaf-9215-c4f0-a2e9-032546ef6bab.png)

## レポートの編集 - プロンプトを非表示にする ##
レポートを表示した際に全フィルターが表示されていますが、今回は必要がないので非表示にしてみたいと思います。
パブリッシャーから先ほどのレポート定義を開きます。
`オプション`タブに移動します。
プロンプト属性の有効オプションをオフにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/cf524c81-af1a-b8ec-7922-a0108ee8cf6c.png)
`OK`ボタンもしくは`適用`ボタンでレポートを保存します。
ブラウザに表示されているレポートを再表示(Reload)します。プロンプト領域が消えましたね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0dcc9b47-3b67-618c-6f0e-91679813d45e.png)

## レポートの編集 - URLリンクを動的にする ##
このままでは、URLリンクフィルターに設定したURLが、福井県の鯖江市に固定されているので、常に鯖江市の情報しか表示されません。
都道府県名と市町村名を渡して、URLリンクが動的に変更できるようにしてみます。
再度レポート定義を開いて、クエリの編集を行います。
クエリビルダのフィルター領域内の右クリックメニューから、テキストフィールドを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a35cec08-9bc6-6f99-7023-2230e5fa87dc.png)
追加するテキストフィールドの名前を**都道府県**とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/941f9e50-5ac0-8d74-3b8f-adb64e6ed405.png)
再度同じ手順で、新しいテキストフィールド**市町村**を追加します。
これらのテキストフィールドは、フィルター欄の最下部に追加されるので、このようにURLリンクフィールドの上部に移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/465258ce-f80e-030a-f5a2-ed7cea5df081.png)
**都道府県**フィルターを選択し、右クリックメニューから**オプション**を選択します。
`属性`タブの`挙動`属性の`1つの値のみ`オプションを**オン**にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/6ddf02a1-1c31-ad1a-1398-23b97faf1a14.png)
同じ設定を**市町村**フィルターに施します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4a8b76d0-1f23-d1e7-71b3-08af0148f454.png)
クエリビルダの`OK`ボタンで、この変更を保存します。
次に、先ほど追加した二つのテキストフィルターのみをレポート上に表示させたいので、一度`プロンプト有効オプション`を**オン**に戻します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/06b6da7d-33e1-e76c-21a5-93e651a7e80c.png)
再度クエリに戻り、先ほど追加した二つのテキストフィルター以外を全て非表示にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/3d8f4c51-7f09-7b49-ff26-e930209d5ee7.png)
**都道府県**、**市町村**フィルター以外は全て非表示になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ddcba3bb-7f67-6bf4-805e-2505eef5f5bf.png)
`OK`ボタンで、この変更を保存します。
レポートも`OK`ボタンもしくは`適用`ボタンで保存します。
ブラウザに表示されているレポートを再表示(Reload)します。新しく追加したフィルターのみ表示されました。
さて、このままではまだ完成ではありません。
この二つのフィルターに入力される値で、`URLリンク`フィルターのURLを更新する必要があります。
再度、クエリ定義を開きます。`URLリンク`フィルターのオプションを開きます。
属性タブの値オプションの参照ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f87f077a-399d-6270-0edb-1372fd383ab9.png)
URLの福井県の部分を、フィルター参照{@都道府県}に置き換えます。福井県をハイライトし、フィルター参照{@都道府県}をダブルクリックすることで置き換えを行えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/bcb593d0-7578-2b05-45ac-de82c65fdfbb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/66bb6fe8-aaea-166b-ae97-fbe92924bae8.png)
ダブルクォーテーションが付与されますが、外しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/9b0b3d8c-4b73-b1c8-1a2b-3537a09c8bf7.png)
鯖江市の部分も同じように{@市町村}に置き換えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/55cb4021-63d1-fe16-b5a9-e80c17b60824.png)
`OK`ボタンで変更を保存します。
クエリに戻ると、**都道府県**と**市町村**フィルターに既定値を記入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/879d15f8-48f8-5905-175e-73e0a039e7d0.png)
クエリを`OK`ボタンで保存し、レポートも`OK`ボタンもしくは`適用`ボタンで保存します。
ブラウザに表示されているレポートを再表示(Reload)します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/59b88d55-8953-0dec-de1f-0bb3b2a4c316.png)
これでクエリを変更することなく、フィルター値を入力するだけで各地のAEDの設置情報が確認できますね。
## レポートの編集 - フィルター入力の簡素化 ##
この状態では、**都道府県**と**市町村**フィルターに値を入力しなくていけません。
ドロップダウンリストから都道府県や市町村が選択できればいいですよね。
参照テーブルなどを準備して、ドロップダウンリストを表示し、選択された都道府県に対する市町村のみを表示するなんてこともできますが、ここでは単純にコンマ区切りの簡易データセットを使用してドロップダウンリストを作成してみます。
再度レポート定義を開いて、クエリの編集を行います。
**都道府県**フィルターのオプションを開きます。
`属性`タブのWebチャンネル属性、ドロップダウンリストの使用オプションをオンにします。そしてカスタムリストの欄にコンマ区切りのデータセットを記入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0f3583ac-bfc8-8f64-dff7-b6af7f647f83.png)
**市町村**フィルターも同じように設定します。
クエリを`OK`ボタンで保存し、レポートも`OK`ボタンもしくは`適用`ボタンで保存します。
ブラウザに表示されているレポートを再表示(Reload)します。
ドロップダウンリストが表示されましたね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/760f9a1e-cd6f-8a79-9a62-69b9035c97b0.png)
まあ、**都道府県**フィルターに**東京都**を選んで、**市町村**フィルターに**鯖江市**を選ぶとデータはもちろん帰ってきませんが、この記事ではここまでということで。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/b6a1eb4c-bfae-caa7-e168-ae64c6517437.png)
以上、この記事が何かお役に立てれば光栄です。