全国の図書館情報がわかるAPIを公開してくれているカーリルさん。とても便利な図書館APIですよね。そのリクエストとレスポンスについて、うまくJavaScriptで取得できないことがあり、そして解決しましたので共有します。結論としては、サンプルで例示れているXMLを取得するリクエストURIではなく、JSONをリクエストする、です。
カーリル図書館API
全国の図書館情報は公式にもオープンになっています。ただ、カーリルさんのAPIはとてもこなれていて使いやすくおすすめです。
全国7000以上の図書館に簡単アクセス！ カーリルの図書館APIを使ってみよう。
全国の図書館を対象としたリアルタイム蔵書検索を可能にするAPI群を開発者向けに提供します。
法人・個人を問わず無償で利用できます。
サンプルではXML取得のリクエストURI
わたしは図書館データベースを利用したく登録しました。緯度経度の位置情報から最寄りの図書館を抽出し、それらの図書館の位置情報と図書館名を取得したかったのです。
https://api.calil.jp/library?appkey={あなたのアプリキー}&geocode=136.7163027,35.390516&limit=10
カーリル図書館APIではこのようにサンプルが例示されています。しかし、これはXMLでレスポンスが返ってきます。
XMLを扱うときのエラー
Access to XMLHttpRequest at ‘https://api.calil.jp/library?appkey=xxxx&geocode=139.xxxx,35.yyyy&limit=3’ from origin ‘https://www.kagua.biz’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
CORSがダメだよーと弾かれてしまいます。CORS（Cross-Origin Resource Sharing）ポリシーに違反していることが原因で、異なるオリジン（ドメイン、ポート、プロトコル）からのリクエストがブラウザでブロックされていることを意味します。
PHPを間に入れて試したのですが、それでも、次のようなエラーも出ます。
VM1395:1 Uncaught SyntaxError: Unexpected token ‘<', ")
at displayLibraryData (station.html:58:25)
at xhr.onreadystatechange (station.html:96:13)
frame_ant.js:1 XHR が GET “https://xxxx/fetch_library_data.php” の読み込みを終了しました
・・・で、PHPでいったんリクエストしてそれをJavaScriptで、new XMLHttpRequest() するなどいろいろ試して実装はできたのですが、すっきりしません。
カーリルAPIでもJSONを返してくれる
公式に問い合わせたところ、JSONを返してくれるとのことでした。
https://api.calil.jp/library?appkey=xxx&geocode=139.xxx,35.yyy&limit=3&format=json&callback=no
これでJavaScriptで簡単にレスポンスをキャッチできて、処理ができました。ありがとうございました。
図書館でだけ聴ける音声サービス
というわけで出来ましたのが上記の「図書館で聴く」です。全国どこの図書館でも利用でき、その図書館の緯度経度から半径100m以内に入りますと、音声が聴けるようになります。再生可能になりましたら、図書館から離れても大丈夫です。
ただ、音声内でおすすめ書籍もトークしていますので、ぜひ図書館で借りたり、素敵な時間をすごしたり、せっかく行った図書館で幸せな時間をおすごしいただけますと幸いです。
東京の美しい図書館 | 立野井一恵 |本 | 通販 | Amazon
・ ・ ・ ・ ・
＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る
↓↓↓無料のニュースレターを配信中です
