BODIK Utility（12）　BODIKエディタ　拡張機能「Web読み取り」

ISITでは、自治体様がオープンデータを公開する際の助けになるようなツール群（BODIK Utility）を開発し、公開しています。皆様のオープンデータ公開業務にお役立てください。

BODIKエディタ

オープンデータのCSVを編集することに着目したWebエディタです。別ブログでご紹介しました。

今回は、BODIKエディタの拡張機能「Web読み取り」の使い方をご紹介します。

「Web読み取り」は、BODIK Utilityの中のWeb関連の２つの機能をBODIKエディタに組み込んでいます。

• Webページから情報を抜き取る「Webスクレイピング」機能
• 外部のWebAPIを呼び出す機能

拡張機能「Web読み取り」

この拡張機能を使うと、次の２種類のWeb関連機能を使うことができます。

スクレイピング機能

• Webページからリソース（アンカー：<a>タグ）を抜き出す
• Webページからイメージ（イメージ：<img>タグ）を抜き出す
• Webページからテーブル（テーブル：<table>タグ）を抜き出す

WebAPI呼び出し機能

• BODIK API呼び出し
• 一般のWebAPI呼び出し
• JSON解析

拡張機能「Web読み取り」の使い方

BODIKエディタは、次のリンクからアクセスし、ご利用ください

URL：https://utility.bodik.jp/bodikeditor

リンクを開くと、次のような画面が表示されます。

画面の拡張機能にある「Web読み取り」ボタンをクリックすると、「JSON」列だけがある画面が表示されます。

スクレイピング機能

スクレイピング機能を使って、Webページから情報を抜き出します。

Webページからリソースを抜き出す

Webページで何らかのリソースファイルがリンクしているところがあります。そのリンクをクリックすると、リソースファイルが表示されたり、ダウンロードできます。

Webページを調べてみると、そこには「アンカータグ（<a>）」が使われており、アンカータグの「href」にリソースファイルのURLが記載されています。そのURLをたどることで、リソースファイルを参照する仕組みです。

この機能は、指定されたWebページからアンカータグを探し出し、見つかったアンカーのhrefに記載されているURLリンクを抜き出して一覧として返します。

操作手順

1. 「アクション」から「Webページ」を選択する。
2. 「Webページからリソースを抜き出す」を選択する。
   パラメータに解析するWebページのURLを入力し、「実行」ボタンを押す。
3. 「JSON」列に見つかったアンカータグの一覧が表示される。
4. 「JSONに定義されている列を作成する」を選択して「実行」ボタンを押す。
   ３つの列（resource_name, resource_url, resource_format）が作成され、情報が展開される。

各列には次の情報が表示される。

列名	説明
resource_name	アンカーに表示されている文字列
resource_url	hrefに記載されているURLリンク
resource_format	URLリンクの拡張子

単純にWebページの中からアンカータグを拾っているだけなので、不要な情報も含まれています。

Webページからイメージを抜き出す

Webページで何らかの画像ファイルがリンクしているところがあります。そこに画像が表示されています。

Webページを調べてみると、そこには「イメージタグ（<img>）」が使われており、イメージタグの「src」に画像ファイルのURLが記載されています。

この機能は、指定されたWebページからイメージタグを探し出し、見つかったイメージタグのsrcに記載されている画像ファイルのURLリンクを抜き出して一覧として返します。

操作手順

1. 「アクション」から「Webページ」を選択する。
2. 「Webページからイメージを抜き出す」を選択する。
   パラメータに解析するWebページのURLを入力し、「実行」ボタンを押す。
3. 「JSON」列に見つかったイメージタグの一覧が表示される。
4. 「JSONに定義されている列を作成する」を選択して「実行」ボタンを押す。
   ３つの列（resource_name, resource_url, resource_format）が作成され、情報が展開される。

各列には次の情報が表示される。

列名	説明
resource_name	「image」固定
resource_url	srcに記載されているURLリンク
resource_format	URLリンクの拡張子

単純にWebページの中からイメージタグを拾っているだけなので、不要な情報も含まれています。

Webページからテーブルを抜き出す

Webページで表形式の一覧が表示されているところがあります。

Webページを調べてみると、そこには「テーブルタグ（<table>）」が使われており、行と列を構成しています。

この機能は、指定されたWebページからテーブルタグを探し出し、見つかったテーブルタグの構造を分解して一覧として返します。

操作手順

1. 「アクション」から「Webページ」を選択する。
2. 「Webページからテーブルを抜き出す」を選択する。
   パラメータに解析するWebページのURLを入力します。
   ※テーブルタグのクラスを追加指定することもできます。
   「実行」ボタンを押す。
3. 「JSON」列に見つかったテーブルタグの一覧が表示される。
4. 「JSONに定義されている列を作成する」を選択して「実行」ボタンを押す。
   テーブルの構成によって、作成される列が変わります。

単純にWebページの中からテーブルタグを拾っているだけなので、不要な情報も含まれています。

Webページのソースを調べると、欲しいテーブルのクラスを特定できることがあります。クラスを特定できたときは、クラスを追加指定して不要な情報を除外してください。

WebAPI呼び出し

外部のWebAPIを呼び出し、その実行結果をJSON形式のデータとして受け取ります。

BODIK APIを呼び出す

BODIK APIを呼び出します。BODIK APIの実行結果を表形式で表示することができます。

操作手順

1. 「アクション」から「WebAPI」を選択する。
2. 「BODIK APIを呼び出す」を選択する。
3. パラメータにBODIK APIのURLを入力する。
   例えば、単純にAEDの一覧を検索する場合、次のURLを入力する。
   　https://wapi.bodik.jp/aed
4. 「実行」ボタンを押すと、JSON列に検索結果が展開される。
5. 「JSONに定義されている列を作成する」を選択し、「実行」する。
   JSONに記載されている各要素のデータが展開される。

BODIK APIの実行結果を表形式で表示することができる。

BODIK APIの場合、インターフェースがわかっているので、実行結果を解析する部分をツールに組み込むことができます。
BODIK API以外のWebAPIの場合、実行結果の解析が必要になります。

WebAPIを呼び出す

外部のWebAPIを呼び出し、結果を取得する。

操作手順

1. 「アクション」から「WebAPI」を選択する。
2. 「WebAPIを呼び出す」を選択する。
3. パラメータにAPIのURLを入力する。
   例えば、BODIK APIを使ってAEDの一覧を検索する場合、次のURLを入力する。
   　https://wapi.bodik.jp/aed
4. 「実行」ボタンを押すと、JSON列の先頭セルにWebAPIの実行結果が表示される。
   実行結果をセルのテキストデータとしてセットする。

WebAPIを呼び出した結果をJSON形式で取得し、セルデータとしてセットできた。

ここから先は呼び出すAPIに応じて実行結果を解析する必要がある。

WebAPI実行結果の解析例

例えば、BODIK APIの場合、実行結果は次のようなフォーマットのJSONで返ってくる。

{
  "metadata": {   },
  "resultsets": {
    "features": [
      {
          "type": "Feature",
          "properties": { １件目の辞書データ }
      },
      {
          "type": "Feature",
          "properties": { ２件目の辞書データ }
      },
      {
          "type": "Feature",
          "properties": { ３件目の辞書データ }
      },
　　　　　・・・・・・
    ]
  }
}

APIの実行結果として「properties」にある辞書データが欲しい。どうやればいいかというと・・・

（１）APIの実行結果から「resultsets」を取り出し、
（２）その中から「features」を取り出し、
（３）配列なので、要素をばらして
（４）その中から「properties」を取り出し、
（５）propertiesの内容を表示する

上記の手順をBODIKエディタのJSON関連機能、AG-Grid関連機能を使ってやればいい。

JSON関連機能
・辞書から値を取り出す
・配列から要素を取り出す
・JSONをオブジェクトに変換する
・オブジェクトをJSONに変換する
・文字列を配列JSONに変換する
・配列を行に展開する

AG-Grid関連機能
・JSONを行データにセットする
・行データをJSONに変換する
・JSONに定義されている列を作成する

BODIK APIの実行結果は、次の手順で解析することができる。

（０）まず、作業用の列が３つ必要になるので、予め作成しておく。

1. アクションの「列操作」で「列を追加する」を選択する。
   列名として「col1」を指定し、「実行」ボタンを押す。
   →「col1」列が追加される。
2. アクションの「列操作」で「列を追加する」を選択する。
   列名として「col2」を指定し、「実行」ボタンを押す。
   →「col2」列が追加される。
3. アクションの「列操作」で「列を追加する」を選択する。
   列名として「col3」を指定し、「実行」ボタンを押す。
   →「col3」列が追加される。

（１）APIの実行結果から「resultsets」を取り出す。

1. 「col1」を選択して、アクションの「辞書から値を取り出す」を選択する。
   辞書の在処として「JSON」列を指定
   取り出す辞書のキーとして「resultsets」を指定し、
   「実行」ボタンを押す。
   →「col1」に「resultsets」の内容が抜き出される。

（２）「resultsets」から「features」を取り出す。

1. 「col2」を選択して、アクションの「辞書から値を取り出す」を選択する。
   辞書の在処として「col1」列を指定
   取り出す辞書のキーとして「features」を指定し、
   「実行」ボタンを押す。
   →「col2」に「features」の内容（配列）が表示される。

（３）features（featureの配列）からfeatureを取り出し、行に展開する。

1. 「col2」を選択し、アクションの「配列を行に展開する」を実行する
   配列の要素数だけ行が追加され、features配列の中の辞書形式のデータ（feature）がcol2に展開される。

（４）「feature」から「properties」を取り出す。

1. 「col3」を選択し、アクションの「辞書から値を取り出す」を選択する。
   辞書の在処として「col2」列を指定
   取り出す辞書のキーとして「properties」を指定し、
   「実行」ボタンを押す。
   →「col3」に「properties」の内容が抜き出される。

（５）「properties」の内容を表示する。

1. 「col3」を選択し、アクションの「JSONを行データにセットする」を選択し、「実行」する。
   propertiesの辞書データがAG-Gridの各行の行データとしてセットされる。
2. 「col3」を選択し、アクションの「JSONに定義されている列を作成する」を選択し、「実行」する。
   propertiesの項目名の列が作成され、項目のデータが表示される。
3. 不要な列を非表示にする。
   「JSON」「col1」「col2」「col3」は不要なので、非表示にする。

WebAPIは実行結果をJSON形式のデータで返すことが多い。JSONの構造を理解し、いくつかの手順を踏むことで、WebAPIの実行結果を解析し、欲しい情報を取り出すことができます。

BODIKエディタのWebAPI機能は、サーバーからWebAPIを呼び出すので、CORS問題も回避できます。

WebAPIから情報を抜き出したいときは、ぜひ挑戦してみてください。

ひらの