WebAPIで受け取れるJSON形式の利用方法

WebAPI

昨日は札幌は大雪で、雪かきを２度もして腰が痛いマネー報道です(^-^;
さっぽろ雪まつり期間中のドカ雪で、飛行機もだいぶ欠航した様で影響を受けた方も多かったようですね。
札幌の大雪も満喫していって下さい<(_ _)>

さて、そんな大雪の中ですが、間借りオフィスでWebサイト開発に励んでおります。
今回作っているWebサイトは、これまで作ってきたWebサイトよりも手の込んだ物を作ろうと思いまして、初めてWebAPIに挑戦しています(^-^)/

WebAPI（ウェブエーピーアイ）とは・・・

Web APIとは、コンピュータプログラムの提供する機能を外部の別のプログラムから呼び出して利用するための手順・規約（API：Application Programming Interface）の類型の一つで、HTTPなどWebの技術を用いて構築されたもののこと。

Webサイトに外部のサイトの提供する機能や情報を組み込んだり、アプリケーションソフトからWeb上で公開されている機能や情報を利用する際などに用いられる。

Web APIで機能を公開しているサーバに対して、インターネットなどの通信ネットワークを通じて依頼内容をHTTPリクエストの形で送信すると、処理結果がHTTPレスポンスの形で送られてくる。送受信されるデータの形式はAPIによって様々だが、Webでよく用いられるXMLやHTML、JSON、各種の画像ファイル形式などが用いられることが多い。

Web API（ウェブAPI）とは - IT用語辞典 e-Words

というわけでWeb上で提供される各種サービスのAPIになります。
色んな会社や個人が提供するサービスやデータ等を、特定のURLを叩く事で色んな形式でデータを返してくれる物になります。

これまでもクライアントアプリ（Windowsアプリ）でWebAPIを叩いた事はあったのですが、Webサイト上のプログラムからWebAPIを叩いて直接Web上で利用するのは初めてになります。

今回利用するWebAPI

そして今回のWebサイトに組み込みたいのはTwitterのツイートを検索した結果と、GoogleMapの表示になります。
TwitterのWebAPIについては昨年夏頃に調べていました。

で、ようやく組み込むのが翌年の2月と言う(^-^;
半年も経っていますね。
まぁ、良いのですが(-_-;

で、今回使うのは「Twitter API 1.1」と「Google Maps JavaScript API V3」になります。

Twitter API 1.1の中でもツイートの検索に関しては下記サイトが公式（英語）になります。

API reference index — Twitter Developers

まぁもちろん英語なんて読めないので、日本語のページで色々と調べてなんとか実装しました(^o^;

続いてはGoogle Maps JavaScript API V3の公式サイト（英語）が下記。

Google Maps JavaScript API V3 Reference  |  Google Developers

こちらも同様に色んな日本語サイトに助けてもらいながら実装。
なんとか１週間程度で組み込む事が出来たので良かったです(^-^)v

JSON形式

で、今回TwitterとGoogleMapのWebAPIを使ったのですが、どちらもJSON形式でデータが返ってきます。
これまで使った事のある形式はXML形式だったので、JSON形式でのデータ受け取りは初めてでした。

JSONとは・・・

JavaScript Object Notation
JSON（ジェイソン、JavaScript Object Notation）は軽量なデータ記述言語の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONはJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されている。

JavaScript Object Notation - Wikipedia

との事で、JavaScriptのオブジェクト表記法の１つの様です。
JSONはジェイソンと呼ぶんですね。

実際に受け取れるJSONデータは下記の様な形式になっています。

{"name": "John Smith", "age": 33}

中括弧｛｝とコロン：、カンマ，で区切られたデータになっているんですね。
階層も持たせる事が出来、配列っぽいデータも格納できます。
XMLの表記を変えたものと考えても良いのかもしれません。

ただJSON形式は受け取った事がなかったのでイマイチ使い方が分かりません。
調べた感じではPHPでは「json_decode関数」を使えば良いようです。

<?php
    json_decode($json_data, true);
?>

第二引数を「true」にする事で、返ってくるオブジェクトを連想配列形式にする事が出来るようです。
なので、これで受け取った内容を名前で指定しながら受け取れば良いのかな？

GoogleMapsAPIのジオコーディングを利用した場合の、JSON形式の返ってきた値が下図の様な感じになります。

受け取る部分のコード抜粋です。

<?php
    $json = json_decode($json_map, true);

    $status = $json['status'];
    if ($status == 'OK') {
        $lat = $json['results']['0']['geometry']['location']['lat'];
        $lng = $json['results']['0']['geometry']['location']['lng'];
    }
?>

かなり適当な指定になっていますが、こんな取り方で良いんでしょうか(^o^;？
緯度、経度を取得しています。
まぁ、取れてるから良いのかな。

JSONはどこで使うのが正義？

ただこれらのWebAPIの結果であるJSON形式を受け取って使う場面なんですけど、普通に表示で使いたいだけならJavaScriptで全部呼ぶのが「正解」なんでしょうかね？
JavaScriptならHTML表示してから後から描画できるんでしょうから、取得にタイムラグの出るWebAPIを使う場合にはJavaScriptから呼んで、応答を受けてJavaScriptで描画させてが良いのかなぁ？

まだそこまで技術がないので、今回はPHPでWebAPIを呼んで戻ってきたJSON形式をサーバー側のPHPに処理させて使ってみたんですが、やはり描画が待たされてしまいますし、PHPでWebAPIを呼ぶのは「間違い」なんでしょうかね？
うーん、この辺はまだ使い始めなので分からないなぁ(-_-;
どなたか詳しい方、教えて下さい<(_ _)>

ただ、以前からWebAPIの結果がJSON形式で戻ってくるもので欲しかったデータがあったので、これで受け取れる様になるのでデータ取得には使ってみようかな、と。
表示だと速度が求められますが、表示しないでアプリ代わりに裏でデータをガンガン取ってくるだけとかならPHPでWebAPI叩いて処理させてで良いような気がします。
Windowsでクライアントアプリとか作ると画面周りの処理とかも書かなければいけないので面倒ですが、単体のPHPファイルでアプリ代わりに引数で動作内容を切り替えられる様にしておけば色々と出来るし、それでいてメイン処理周りだけプログラムを書けば良いだけなので、サラッと書けて良いかな、と(^-^)v

この辺のWebAPIを有効活用するアイデアなんかも是非詳しい方にアドバイス頂けると幸いです<(_ _)>

いずれにしてもWebAPIとJSON形式が使える様になったお陰で、出来る事の幅がグンと広がるので、今後が楽しみです(*^_^*)v