指定したキーワードと緯度経度で検索する方法

国交DPFアドベントカレンダー2023　9日目の記事となります。

こんにちは～すっかり世間はクリスマスシーズンですね！

なんかさみしい気持ちになる外は寒すぎるので連日おうちに引きこもってDPFを触っている日々ですｗ

と、いうことで今日は国交DPFに掲載されているAPIのサンプルコードを試しに使ってみました！！(唐突)

APIドキュメントって知ってる？

昨日までの記事（API紹介①&
API紹介②）はご覧頂けましたでしょうか。

これを読んで、
API触ってみたい！！でもどうせやるなら本格的に環境構築から始めたい！！あとなんかちょっと凝った感じのクエリたたいてみたい！！
という願望を抱いてしまいました。形から入るとやっぱやる気出ますよね！(笑)

実はそんな願望が叶っちゃうんです！！！

そう、国交DPFならね。
ということで国交DPFトップページの下にある「開発者向け情報」にアクセスしてみましょう。

こんなページが出てくると思います。そこから、「APIドキュメント」をクリック。

このページでは、APIドキュメントはもちろん、サンプルプログラムなどのお助け情報が沢山のっているんです！初心者にもやさし～い！

ということで、APIをたたくための環境構築＆サンプルプログラムを触ってみよう大会の始まりです！

環境構築＆サンプルプログラムを触ってみよう大会～第１部：環境構築～

APIドキュメンテーションのトップページから「APIサンプル」ページでは、サンプルプログラムだけでなく、実行環境の構築方法についても載っています！

なるほど、これは「Node.js」の実行環境で試せるんですね？
(ちなみにNode.jsとは、JavaScriptを使ってサーバーサイドでアプリケーションを開発するためのプラットフォームです。JavaScriptはwebブラウザ上で扱うプログラム言語なのですが、Node.jsをつかうとサーバー側でも実行ができるようになります！)

ここから「実行環境の準備」にアクセスしてみましょう。

...めっちゃ丁寧に書かれてる!!

と、いうことでここに書いてある手順にしたがって環境構築をしてみました！

1.Node.jsをダウンロードし、インストールしてください。

リンクからインストーラをダウンロードしてインストール完了！

2.コマンドライン以下のコマンドを実行しNode.jsが正しくインストールされているかを確認してください。

node --version

コマンドプロンプトを開いてポチポチしたらバージョン情報が出てきましたね！OKそうです！

3,フォルダを作成しダウンロードしたサンプルソースコードのファイルをコピーしてください。ここではprojectというフォルダを作成したと仮定します。

ダウンロードしたサンプルソースコード、、あった！！「サンプルプログラム」ページからダウンロードできますね！

これを解凍してとりあえず任意のフォルダに置いて、、っと。

5,コマンドラインで作成したprojectフォルダに移動し以下のコマンドでaxiosライブラリをプロジェクト内にインストールしてください。

npm i axios

できた！

6,API のキーを取得し、各サンプルソースコードにあるAPI_KEYの値を取得したキーに置き換えてください。

まずはAPIのキーを取得しましょう。
DPFのページ下部の人マーク、「アカウント」ページより「アカウントの管理」にアクセス。

「アプリケーションの新規登録」よりAPIキーを発行しましょう。

発行した「app_〇〇」のボタンを押すと、取得したAPIキーが出てくるので、これをソースコードにコピーします。

7,各サンプルをnode ファイル名で実行できます。

これで実行できるんですね！やったー！

node ファイル名で実行っと、、、としたいところですが、折角ならプログラムの中身を見ていきたい！ということで、環境構築＆サンプルプログラムを触ってみよう大会（今更ですが名前イケてないな）第２部、プログラムを触ってみようにいきたいと思います！

環境構築＆サンプルプログラムを触ってみよう大会～第２部：プログラムを触ってみよう～

国交DPFのサンプルプログラムのページには３つのサンプルプログラムが用意されています。先ほど、環境構築でサンプルプログラムをダウンロードする際に出てきた↓のページです。リンクはこちら！

今日はこの中で

指定したキーワードと緯度経度の付近で最初にヒットした 5 件のデータ名（タイトル）の検索を行います。

のプログラムを見ていきたいと思います。
国交DPFのページ上でも「この範囲で検索」ができますよね。それがAPIでもできちゃうんです！

プログラムの全貌が↓です。英語が多くて難しそうですね。
一つ一つ見ていきましょう！

import axios from 'axios';
// エンドポイントとAPIキーを定義しておく
const END_POINT = 'https://www.mlit-data.jp/api/v1/';
const API_KEY = 'please use your own key';

// 指定したキーワードと緯度経度の付近で最初にヒットした5件のデータ名（タイトル）の検索を行う。
// keyword = 検索キーワード
// lat = 十進数での緯度
// lon = 十進数での経度
// range = 度単位で検索する範囲を指定する。
async function GetData(keyword, lat, lon, range) {
  //GraphQLクエリー内容を作成
  const top = lat + range;
  const bottom = lat - range;
  const left = lon - range;
  const right = lon + range;
  const GraphQLQuery = `  
    query {
      search(
        term:"${keyword}", 
        first:0, 
        size: 5,
        locationFilter: {
          rectangle: {
            topLeft: {
              lat: ${top},
              lon: ${left}
            },
            bottomRight: {
              lat: ${bottom},
              lon: ${right}
            }
          }
        }
      ) {
        totalNumber
        searchResults {
          title
        }
      }
    }`;

  // HTTPクエリー内容を作成
  const request = {
    url: END_POINT,
    method: 'post',
    headers: {
      'Content-type': 'application/json',
      apikey: API_KEY
    },
    data: { query: GraphQLQuery }
  };

  // APIを呼び出して結果を準備する。
  const result = [];
  await axios(request)
    .then((response) => {
      response.data.data.search.searchResults.forEach((data) => {
        result.push(data);
      });
    })
    .catch((error) => {
      console.error(error.message);
      if (error.response) console.debug('Error data:', error.response.data);
    });

  return result;
}

// 検索の関数を呼び出して、結果をコンソールに出力する。
const sampleresult = await GetData(
  '公園',
  35.68087491742086,
  139.767285405523,
  0.01
);
console.log(sampleresult);

①エンドポイントとAPIキーの定義

END_POINTはデータを取得するためのAPIのエンドポイント（ざっくり言うとAPIのリクエスト先）を指定しています。

API_KEYは認証のためのAPIキーです。先ほども第1部：環境構築で述べた通り、有効なAPIキーを使用する必要があります。

const END_POINT = 'https://www.mlit-data.jp/api/v1/';
const API_KEY = 'please use your own key';

②データ取得関数'GetData'

データを取得するためには３つの手順を踏む必要があります。

まずは「GraphQL」というクエリの言語を作成し、サーバーに送信するためのデータ取得を行うための下準備を行います。

つぎに、この「GraphQL」クエリをＡＰＩに送信するために必要なHTTPリクエストを作成します。

最後に、作成したHTTPリクエストを「axios」と呼ばれるJavaScriptでHTTPリクエストを行うためのライブラリで送信し、APIからのレスポンスを受け取っています。

↓のプログラムでは「GraphQL」を作成しています。

async function GetData(keyword, lat, lon, range) {
  //GraphQLクエリー内容を作成
  const top = lat + range;
  const bottom = lat - range;
  const left = lon - range;
  const right = lon + range;
  const GraphQLQuery = `  
    query {
      search(
        term:"${keyword}", 
        first:0, 
        size: 5,
        locationFilter: {
          rectangle: {
            topLeft: {
              lat: ${top},
              lon: ${left}
            },
            bottomRight: {
              lat: ${bottom},
              lon: ${right}
            }
          }
        }
      ) {
        totalNumber
        searchResults {
          title
        }
      }
    }`;

'GraphQLQuery'変数にGraphQLのクエリーが文字列として格納されています。

クエリー内では、searchフィールドに対して検索条件や結果の形式を指定しています。このクエリーは、指定されたキーワードと緯度経度の範囲内で検索を行い、最大5件の結果を取得するものです。

次に↓のプログラムで「GraphQL」クエリをＡＰＩに送信するために必要なHTTPリクエストを作成しています。

 // HTTPクエリー内容を作成
  const request = {
    url: END_POINT,
    method: "post",
    headers: {
      "Content-type": "application/json",
      apikey: API_KEY,
    },
    data: { query: GraphQLQuery },
  };

'request'変数にはHTTPクエリーのパラメータがオブジェクトとして格納されています。それぞれのオブジェクトの意味はこんな感じ。

'url'：APIのエンドポイントが指定

'method'：HTTPメソッドとして'POST'が指定

'headers'：リクエストヘッダーが指定。'Content-type'は'application/json'、'apikey'は指定されたAPIキーを指す。

'data'：GraphQLのクエリーが含まれるオブジェクトが指定

最後に作成したHTTPリクエストを「axios」と呼ばれるJavaScriptでHTTPリクエストを行うためのライブラリで送信し、APIからのレスポンスを受け取っています。

 // APIを呼び出して結果を準備する。
  const result = [];
  await axios(request)
    .then((response) => {
      response.data.data.search.searchResults.forEach((data) => {
        result.push(data);
      });
    })
    .catch((error) => {
      console.error(error.message);
      if (error.response) console.debug("Error data:", error.response.data);
    });

  return result;
}

'then'のブロックでは、APIからのレスポンスを処理し、検索結果から必要なデータを取得してresult配列に追加しています。

'catch'ブロックでは、エラーが発生した場合にエラーメッセージをコンソールに表示しています。

何となく流れがイメージできましたでしょうか？

処理としてはこれがすべてなんですが、何か忘れているような・・・？

・・・あ！

キーワードと緯度経度どこで指定するねん！！！

ご安心ください。忘れたわけではないんです。

③検索の関数呼び出しと結果表示

ここでは②で指定したGetData関数を実際に呼び出しています。

今回はキーワードを「公園」、緯度経度を東京駅が所在する「35.68087491742086」「139.767285405523」として指定しました。

そして、その緯度経度（つまり中心点）からどれくらいの範囲で検索をするか？を示す範囲を「0.01」と指定しました。（これは中心点から東西南北にそれぞれ 0.01の範囲を指定している、という意味です）

const sampleresult = await GetData(
  '公園',
  35.68087491742086,
  139.767285405523,
  0.01
);
console.log(sampleresult);

実際に結果を表示

お～！ちゃんと東京駅付近の「公園」に関連する情報が出てきた～！

実際に環境構築して結果が出てくると気持ちが良いですよね！！

さいごに

いかがでしたでしょうか。
本日は国交DPFのAPIを使って環境構築＆サンプルプログラムを試してみました！

国交DPFのAPIドキュメントにはまだまだサンプルプログラムがあり、明日以降もご紹介しちゃいますのでお楽しみに～！では！