Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

YOLP Hacks:API群を組み合わせてオリジナルWebアプリケーションを作る

Yahoo! Open Local Platform Hacks 第5回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 Yahoo! Open Local Platform(略称:YOLP)Hacksの第5回です。前回までは、YOLP全体の概要と、個々のAPIを使ったサンプル実装を紹介してきました。今回は、YOLPが提供するAPI群を組み合わせてWebアプリケーションを作る方法を紹介したいと思います。

目次

作成するWebアプリケーション概要

完成イメージ

 今回作成するWebアプリケーションの完成イメージは、次のとおりです。

 東京23区のうち、選択された地点を中心とするショップ情報分布をヒートマップで表示します。

YOLPのヒートマップ

 YOLPのヒートマップは、YDF(YOLP Data Format)と呼ばれるデータフォーマットでマークアップされたポイントの集積度を視覚的に表現できる機能で、Yahoo! JAPANでも、2011年3月の東日本大震災において、被災地からのモバイルアクセスログを確認できる「ケータイ位置確認マップ」機能に使われた実績があります

 ケータイ位置確認マップでは、Yahoo! JAPANへのアクセス実績を位置データとしてヒートマップで表現しましたが、今回のWebアプリケーションでは自前でデータベースを持たずに、YOLPカセットギャラリーという拠点情報データストレージからYDFでデータを取得してヒートマップで表現することにします。

全体の概要

 全体の概要は、次のようになります。

 個々の機能を実現するのに利用するAPIは、以下のとおりです。

  • ベースとなるスクロール地図を表示(JavaScriptマップAPI)
  • 東京23区の位置情報取得(ジオコーダAPI)
  • YOLPギャラリーの店舗情報を検索してYDFで取得(ローカルサーチAPI)
  • YDFをヒートマップ表現でプロット(JavaScriptマップAPI)

 いくつかのAPIは、第1回のYOLPオーバービュー紹介でも触れていますが、これらを組み合わせて、最終的に1つのWebアプリケーションにまとめてみましょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:Yahoo! Open Local Platform Hacks
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5