LoginSignup
1
0

More than 1 year has passed since last update.

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

Posted at

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

AEDオープンプラットフォーム様のサイトでエンドポイントのURLが紹介されていました。
いくつかある中で、今回はこのURLを使用してみることにします。

https://aed.azure-mobile.net/api/aedinfo/福井県/鯖江市/

認証などはなさそうなので、とりあえずブラウザのアドレスバーにこのURLを貼り付けてみます。
このような標準的なJSON形式でデータが戻ってきました。
image.png
うん、これならSharperlightのクエリビルダで簡単に扱えそうです。

レポート/クエリの作成

では早速、Sharperlightでクエリーの作成開始。
Sharperlightのアプリケーションメニューからパブリッシャーを起動します。レポートとして表示してみたいのでパブリッシャーを選びました。
新規ボタンで新しいレポートの作成を開始します。
image.png
レポートのダイアログが開いたら、コードグループおよびタイトルを記入します。
image.png

クエリの作成

次にクエリを編集ボタンでクエリの作成を開始します。
image.png
クエリビルダが起動するので、フィルター、出力アイテムを定義していきます。

フィルター

ここでは、レポートのタイプ(モード)、使用するコネクター(製品)、クエリ対象テーブル等を指定します。
今回は、APIのエンドポイントということで、通常のデータベースとは異なる設定を行います。
モードには、詳細レポートを選択します。
製品には、システムを選択します。
テーブルには、Web ページのテーブル、CSV、JSON、XML またはODataを選択します。
image.png
テーブルを設定すると、選択値に関連するその他のフィルターが表示されます。
image.png
URLリンク以外は今回使用する必要がなさそうです。
URLリンクに、先に取得したAPIエンドポイントのURLを貼り付けます。

選択リスト

フィルターのURLリンクURLが設定されると、Sharperlight Engineがすぐにそのエンドポイントにアクセスし、返されるデータのスキーマ情報を解析し、クエリビルダの選択領域にデータフィールドの一覧を作成します。
image.png

出力アイテム

データフィールドの一覧が準備されたら、あとはダブルクリックあるいはドラッグ&ドロップで表示させたいフィールドを出力領域に設定するだけです。
image.png

クエリの検証

プレビューボタンでクエリを実行してみます。
データが戻ってきました。JSON形式のデータが見やすい形で表示されました。
image.png

レポート/クエリの保存

クエリの動作確認が済んだので、OKボタンでクエリを保存します。
レポートのダイアログに戻るので、OKボタンで今度はレポートを保存します。

レポートの表示

パブリッシャーで作成されたレポートは、Sharperlightサービスを介して社内ネットワークやインターネットに公開することができます。
今回は、単にローカルコンピュータ上で表示してみます。
Sharperlightサービスを起動します。
パブリッシャーのレポート一覧から先ほどのレポートを選択し、右クリックメニューからレポートの表示を選択します。
image.png
このように普段使用しているブラウザにレポートが表示されます。
クエリビルダのフィルター群が、既定の設定ではこのようの表示されます。
image.png
送信ボタンでクエリを実行し、データを表示してみます。
image.png

レポートの編集 - プロンプトを非表示にする

レポートを表示した際に全フィルターが表示されていますが、今回は必要がないので非表示にしてみたいと思います。
パブリッシャーから先ほどのレポート定義を開きます。
オプションタブに移動します。
プロンプト属性の有効オプションをオフにします。
image.png
OKボタンもしくは適用ボタンでレポートを保存します。
ブラウザに表示されているレポートを再表示(Reload)します。プロンプト領域が消えましたね。
image.png

レポートの編集 - URLリンクを動的にする

このままでは、URLリンクフィルターに設定したURLが、福井県の鯖江市に固定されているので、常に鯖江市の情報しか表示されません。
都道府県名と市町村名を渡して、URLリンクが動的に変更できるようにしてみます。
再度レポート定義を開いて、クエリの編集を行います。
クエリビルダのフィルター領域内の右クリックメニューから、テキストフィールドを追加します。
image.png
追加するテキストフィールドの名前を都道府県とします。
image.png
再度同じ手順で、新しいテキストフィールド市町村を追加します。
これらのテキストフィールドは、フィルター欄の最下部に追加されるので、このようにURLリンクフィールドの上部に移動します。
image.png
都道府県フィルターを選択し、右クリックメニューからオプションを選択します。
属性タブの挙動属性の1つの値のみオプションをオンにします。
image.png
同じ設定を市町村フィルターに施します。
image.png
クエリビルダのOKボタンで、この変更を保存します。
次に、先ほど追加した二つのテキストフィルターのみをレポート上に表示させたいので、一度プロンプト有効オプションオンに戻します。
image.png
再度クエリに戻り、先ほど追加した二つのテキストフィルター以外を全て非表示にします。
image.png
都道府県市町村フィルター以外は全て非表示になりました。
image.png
OKボタンで、この変更を保存します。
レポートもOKボタンもしくは適用ボタンで保存します。
ブラウザに表示されているレポートを再表示(Reload)します。新しく追加したフィルターのみ表示されました。
さて、このままではまだ完成ではありません。
この二つのフィルターに入力される値で、URLリンクフィルターのURLを更新する必要があります。
再度、クエリ定義を開きます。URLリンクフィルターのオプションを開きます。
属性タブの値オプションの参照ボタンをクリックします。
image.png
URLの福井県の部分を、フィルター参照{@都道府県}に置き換えます。福井県をハイライトし、フィルター参照{@都道府県}をダブルクリックすることで置き換えを行えます。
image.png
image.png
ダブルクォーテーションが付与されますが、外しておきます。
image.png
鯖江市の部分も同じように{@市町村}に置き換えます。
image.png
OKボタンで変更を保存します。
クエリに戻ると、都道府県市町村フィルターに既定値を記入します。
image.png
クエリをOKボタンで保存し、レポートもOKボタンもしくは適用ボタンで保存します。
ブラウザに表示されているレポートを再表示(Reload)します。
image.png
これでクエリを変更することなく、フィルター値を入力するだけで各地のAEDの設置情報が確認できますね。

レポートの編集 - フィルター入力の簡素化

この状態では、都道府県市町村フィルターに値を入力しなくていけません。
ドロップダウンリストから都道府県や市町村が選択できればいいですよね。
参照テーブルなどを準備して、ドロップダウンリストを表示し、選択された都道府県に対する市町村のみを表示するなんてこともできますが、ここでは単純にコンマ区切りの簡易データセットを使用してドロップダウンリストを作成してみます。
再度レポート定義を開いて、クエリの編集を行います。
都道府県フィルターのオプションを開きます。
属性タブのWebチャンネル属性、ドロップダウンリストの使用オプションをオンにします。そしてカスタムリストの欄にコンマ区切りのデータセットを記入します。
image.png
市町村フィルターも同じように設定します。
クエリをOKボタンで保存し、レポートもOKボタンもしくは適用ボタンで保存します。
ブラウザに表示されているレポートを再表示(Reload)します。
ドロップダウンリストが表示されましたね。
image.png
まあ、都道府県フィルターに東京都を選んで、市町村フィルターに鯖江市を選ぶとデータはもちろん帰ってきませんが、この記事ではここまでということで。
image.png
以上、この記事が何かお役に立てれば光栄です。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0