キャスレーコンサルティング 技術ブログ

公開APIを利用してサイトを作ってみよう ~初級編~

Posted on 11月 08, 2017

こんにちは!
キャスレーコンサルティングSI(システム・インテグレーション)部の栗田です。

最近巷では、公開APIを使用したwebサービスが流行っておりますね!
しかし、自分でwebサービスを始めたいと思っても、お店の情報などを一から収集していくのは、ほぼ不可能ですよね…。
そんな時こそ、公開APIです!

【公開APIとは】

様々なサイトが情報を公開しており、
こちらからAPIを利用してリクエストを投げることで、そのサイトの情報を取得が出来ます。
(ちなみに、グルメサイトから行政機関まで、様々なAPIを公開しています。)

それでは、簡単なものを作成して、外部APIの仕組みを理解していきましょう!

公開APIを使ってみよう

Foursquareの公開APIを利用し、スポット情報を取得してみたいと思います。
※Foursquareでのユーザー登録とアプリ登録が、完了している前提とさせて頂きます。
(ここで言うアプリとは、自分のサイトのことで、まだ公開していない場合はlocalhostでも問題ありません。)

まずは、API実行の際に使用する認証コードを、確認しましょう!

1. サイトにログインして、「開発者」をクリックします。

001

2. 「Create Account」をクリックします。

002

3. 「このアプリについての詳細…」をクリックします。

003

4. 以降、表示されているCLIENT_ID、CLIENT_SECRETを使用します。

004

次に、ブラウザから公開APIを、実行してみましょう!

下記のexploreいうAPIで、スポット情報(venueと呼ばれています)を取得できますので、
以下のURLをブラウザで実行してみます。

https://api.foursquare.com/v2/venues/explore?client_id=<先ほど確認したCLIENT_ID>&client_secret=<先ほど確認したCLIENT_SECRET>&v=20171101&ll=35.642363,139.713453&radius=500&limit=50&offset=1

恵比寿ガーデンプレイスの半径500mにあるスポット情報が、JSON形式で送られてきましたね!

005

それでは、次に簡単なコードを書いてみたいと思います。

コードからの公開API実行

test.php

<?php
	//緯度経度の取得
	$lat = $_GET["lat"];
	$lon = $_GET["lon"];

	//パラメータ
	$pr = array(
		'client_id' => "", //<先ほど確認したCLIENT_ID>
		'client_secret' => "", //<先ほど確認したCLIENT_SECRET>
		"offset" => 1,
		'limit' => 50,
		'v' => '20171101',
		'll' => $lat . "," . $lon,
		'radius' => '1000',
	) ;

	//リクエストURL
	$request_url = 'https://api.foursquare.com/v2/venues/explore?'.http_build_query($pr);

	//cURLでリクエスト
	$curl = curl_init() ;
	curl_setopt($curl, CURLOPT_URL, $request_url) ;
	curl_setopt($curl, CURLOPT_HEADER, 1) ;
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false) ;
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, true) ;
	curl_setopt($curl, CURLOPT_TIMEOUT, 5) ;
	$res1 = curl_exec($curl) ;
	$res2 = curl_getinfo($curl) ;
	curl_close($curl) ;

	//データ部取得(JSON)
	$json = substr($res1, $res2['header_size']);
	//JSONをオブジェクト型に変換
	$obj = json_decode( $json );
	//スポット情報
	$venue = $obj->response->groups[0]->items[0]->venue;

	exit($venue);
?>

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
		<script src="core/plugin/jquery/jquery-1.8.3.min.js"></script>
		<script src="core/plugin/jquery/jquery.mousewheel.min.js"></script>

		<!-- ここでtest.phpを実行 -->
	    <script type="text/javascript">
			function test(){
				$.ajax("test.php?lat=35.642363&lon=139.713453", {
				    success: function(e){
						$("body").html(e);
					},
					error: function(e){
						alert("エラーです!!");
					}
				});
	        }
	    </script>
	</head>

	<body onload="test();" style="background: black">
	</body>
</html>

index.htmlを起動すると、恵比寿ガーデンプレイス周辺のスポットが表示されます。

006

地図上に、スポットを表示するといったwebサービスが、あっという間に出来てしまいますね!

但し、公開APIにはアクセス回数の制限がありますので、うまくキャッシュする仕組みを考えることが重要です。
例えば、緯度経度をキャッシュ化する場合は、メッシュコード化してキャッシュするなどの工夫が必要となります。

例として、緯度経度をキャッシュする仕組みも説明したいと思いますので、是非参考にして頂ければと思います。

地図全体を1km四方で刻み、指定した緯度経度がどの枠にいるかを返す関数(getMeshLon、getMeshLat)です。
この値をキーにデータを保存すれば、1km刻みの情報を公開APIを頼らずに保持できます。
(公開APIで取得したデータは、数日であれば保持出来る等の規約があります。)

/*****************************************************************
 * @name getMeshLon
 * @description	経度を1Km単位で区切ったメッシュコード
 *
 * @param {number} lon          経度(Deg)
 *
 * @return {number} メッシュコード
 *****************************************************************/
function getMeshLon
{
    var ms = this.convDegToMillisec(lon) % 1296000000;
    ms = ms < 0 ? 1296000000 + ms : ms;
    return Math.floor(ms / 45000);
}

/*****************************************************************
 * @name getMeshLat
 * @description	緯度を1Km単位で区切ったメッシュコード
 *
 * @param {number} lat          緯度(Deg)
 *
 * @return {number} メッシュコード
 *****************************************************************/
function getMeshLat(lat)
{
    var ms = this.convDegToMillisec(lat) + 306000000;
    return Math.floor(ms / 30000);
},

/*****************************************************************
 * @name convDegToMillisec
 * @description	緯度・経度(Deg)⇒ミリ秒変換
 *
 * @param {number} deg          緯度・経度(Deg)
 *
 * @return {number} ミリ秒
 *****************************************************************/
function convDegToMillisec(deg)
{
    //DMS変換
    var d = Math.floor(deg);
    var min = (deg - d)*60;
    var m = Math.floor(min);
    var sec = (min - m) * 60;
    var s = Math.round(sec);
    if (s == 60) {
        m++;
	s = 0;
    }
    if (m == 60) {
	d++;
	m = 0;
    }
    //ミリ秒変換
    return (d * 3600 + m * 60 + s) * 1000;
}

公開APIとキャッシュの方法を、上手く組み合わせて、サイト構築をして頂ければと思います!

最後に

公開APIには様々なものがあり、とても夢が膨らみますね!
ログイン認証には、twitterやfacebookの公開APIを使用するなど、是非マッシュアップしたサイトを作って頂きたいです!

次回は、ログイン認証や全文検索などの記事を載せることが出来ればと思います。

以上となります。
最後まで読んで頂き、大変感謝です!!


採用情報

  • Profile
    キャスレーコンサルティングの技術ブログです。
    当社エンジニアが技術面でのTips、技術系イベント等についてご紹介いたします。
  • CSV社長ブログ
  • チーム・キャスレーブログ