CodeZine(コードジン)

特集ページ一覧

より柔軟なデータ操作ができる「ActiveReportsJS」新バージョンV2Jのデータソース

「ActiveReportsJS」ではじめるフロントエンド帳票開発 第5回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

ヘッダ/クエリパラメータ指定でWebAPIから直接データを取得

 ActiveReportsJSのデータソースでは、以前からインターネット上のJSONファイルを設定できましたが、V2JではHTTPヘッダやクエリパラメータを設定できるようになったため、これらの設定が必要なWebAPIから直接データを取得できるようになりました。本記事では、天気を取得できるOpenWeatherMapのAPIを利用して、パラメータで指定した都市の天気を帳票に表示する図11のサンプルを説明します。

図11 WebAPIから天気予報を取得して表示するサンプル(p003-webapi)
図11 WebAPIから天気予報を取得して表示するサンプル(p003-webapi)

 なお、本記事ではHTTPヘッダの設定例を説明するため、楽天が運営しているWebAPIポータル「Rakuten RapidAPI」で公開されているOpenWeatherMapのAPIを利用します(OpenWeatherMapが直接公開しているAPIではHTTPヘッダを利用しないためです)。Rakuten RapidAPIでは、世界中の1万以上のWebAPIが公開されており、必要な機能を持つWebAPIを検索して利用できます。Rakuten RapidAPIの詳細な利用法は公式ページを参照してください。

[補足]データソースに指定するWebAPIはCORSへの対応が必要

 セキュリティを考慮した仕様上、Webページから実行できるWebAPIは、通常はWebページ自身のオリジン(ドメイン・プロトコル・ポート番号の組み合わせ)と同一オリジンのWebAPIに限られます。これは同一オリジンポリシーと呼ばれ、ActiveReportsJSのデータソースでWebAPIを実行するときも同様の制限を受けます。

 この制限を受けないためには、WebAPIがオリジン間リソース共有(CORS)と呼ばれる仕組みに対応している必要があります。今回利用するOpenWeatherMapのWebAPIはCORSに対応しているため、オリジンの異なるWebページからWebAPIを実行できます。

 今回使用する天気予報APIの基本仕様は表3の通りです。エンドポイントに対してHTTP GETメソッドでアクセスします。

表3 天気予報APIの基本仕様
No. 設定項目 設定値
1 HTTPメソッド GET
2 エンドポイント https://community-open-weather-map.p.rapidapi.com/forecast

 API実行時に指定するHTTPヘッダは表4の通りです。設定値はいずれもRakuten RapidAPIの画面から取得できます。

表4 天気予報APIで設定するHTTPヘッダ
No. HTTPヘッダ 意味
1 X-RapidAPI-Host ホスト名
2 X-RapidAPI-Key APIキー

 API実行時に指定するHTTPヘッダは表5の通りです。今回はunitsとlangは固定値を指定して、q(クエリ)をパラメータで変更できるようにします。

表5 天気予報APIで設定するクエリパラメータ
No. クエリパラメータ 意味
1 q 検索クエリ(都市名を指定)
2 units 単位(「metric」指定で温度がセ氏で表示される)
3 lang 言語(「ja」指定で日本語表示)

 このWebAPIの戻り値形式はリスト3の通りです(今回利用しない箇所を省略しています)。list配下に日時ごとの天気予報が、city配下に都市の情報が設定されます。

[リスト3]天気予報APIの戻り値
{
  "list": [
    {
      "dt": 1610344800, // 日時(UNIX秒、UTC)
      "main": {
        "temp": -4.72, // 温度
        "feels_like": -10.68, // 体感温度
      },
      "weather": [
        {
          "description": "小雪", // 天気
        }
      ],
      "wind": {
        "speed": 4.28 // 風速
      },
    }
  ],
  "city": {
    "name": "札幌市", // 都市名
    "timezone": 32400 // タイムゾーン(UTCとの差:秒)
  }
}

 それでは、天気予報APIを帳票に表示するよう設定していきます。最初に、表5のq(検索クエリ)を設定するパラメータを帳票デザインに追加します。ここでは図12の通りパラメータcityを設定して、都市を選択できるようにします。

図12 都市を選択するcityパラメータ(p003-webapi/p003-webapi.rdlx-json)
図12 都市を選択するcityパラメータ(p003-webapi/p003-webapi.rdlx-json)

 データソースは図13の通り設定します。データプロバイダとして「Remote JSON」を選択して、エンドポイント、HTTPヘッダ、クエリパラメータを表3~5の通り設定します。クエリパラメータのq(検索クエリ)は、図12で設定したcityパラメータを参照するようにします。

図13 天気予報APIを参照するデータソースの設定(p003-webapi/p003-webapi.rdlx-json)
図13 天気予報APIを参照するデータソースの設定(p003-webapi/p003-webapi.rdlx-json)

 データセットでは、HTTPメソッドとして「HTTP GET」を指定します。また、リスト3のJSONは最上位が(JSON配列ではなく)JSONオブジェクトになっているため、クエリに「$」とだけ設定して「検証」をクリックします。検証のため、パラメータで設定するcityを(英文字で)入力する必要があります。APIからデータが戻ってくればよいので、「Tokyo」などと入力して「保存して実行」をクリックします。

図14 データセット検証時のパラメータ設定(p003-webapi/p003-webapi.rdlx-json)
図14 データセット検証時のパラメータ設定(p003-webapi/p003-webapi.rdlx-json)

 APIからデータが取得されると図15の通り、リスト3に示したJSONデータに対応する3階層のデータセットが作成されます。

図15 天気予報APIのデータセット(p003-webapi/p003-webapi.rdlx-json)
図15 天気予報APIのデータセット(p003-webapi/p003-webapi.rdlx-json)

 このデータセットをもとに、帳票デザインにデータを配置すると、WebAPIの実行結果を帳票に表示できます(図16)。詳細はサンプルコードに含まれる帳票デザインを参照してください。

図16 天気予報APIの戻り値を表示する帳票デザイン(p003-webapi/p003-webapi.rdlx-json)
図16 天気予報APIの戻り値を表示する帳票デザイン(p003-webapi/p003-webapi.rdlx-json)

[補足]Tableセル内に配置されたList

 図16のTableのうち、天気に対応する列は、セル内にListが配置されています。帳票デザイナ左端のメニューバーからエクスプローラを表示して階層を表示すると、図17の通り、「天気」列のセルにListが配置されているのがわかります。これはリスト3や図15の通り、天気のデータ(weather)がリスト(list)の1階層下に定義されているためです。

図17 天気のセルに設定されているList(p003-webapi/p003-webapi.rdlx-json)
図17 天気のセルに設定されているList(p003-webapi/p003-webapi.rdlx-json)

まとめ

 本記事では、2020年12月にリリースされたActiveReportsJSの新バージョンV2Jで強化されたデータソース機能について説明しました。階層形式JSONや式による動的エンドポイント、HTTPヘッダ・クエリパラメータの指定といった機能強化により、WebAPIから直接データを取得するといったデータ処理がより柔軟に行えるようになりました。

 次回は、データソース機能と同じく、V2Jからの新機能となる、帳票デザインのレイヤー機能について紹介していきます。

参考資料

関連リンク



  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:「ActiveReportsJS」ではじめるフロントエンド帳票開発
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5