質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.91%

google map APIはレスポンスにjsonやxml形式が使われているのか?

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,124

score 51

apiの流れがいまいち分かりません。

apiを使うとxmlやjson形式でレスポンスが返ってきてそれをスクリプトコードで解読すると聞いたのですが、
下記のapiコードはどこにjson形式など使われているのでしょうか?

map6_1.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Google Maps API サンプル</title>
  </head>
  <body>
    <p>瑞穂運動場です。</p>

    <div id="map" style="width:620px; height:400px"></div>

    <script type="text/javascript">
    function initMap() {
      var opts = {
        zoom: 15,
        center: new google.maps.LatLng(35.1239654, 136.9417741)
      };
      var map = new google.maps.Map(document.getElementById("map"), opts);
    }
    </script>

    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
    </script>
  </body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

JSON

サーバから受け取っているデータはJSON(技法的にはJSONP)ではないでしょうか。

イメージ説明

配列初期化子

厳密には、ViewportInfoService.GetViewportInfo はJavaScriptコードとして受け取っていて、["地図データ ©2019 Google",[...]] は配列初期化子として扱われています。

Googleサーバ側ではJavaScriptコード生成時にJSONにシリアライズする事で実装していると思われますが、クライアント側から見れば、JSONではありません
「JavaScriptコード」を返し、受け取ったJavaScriptコードを直接実行するのがJSONPの特徴です。

HTTPレスポンス

HTTP通信は文字列でデータ交換を行うものなので、JavaScriptからそれらを扱うにはJavaScriptのデータに変換可能な書式でなければなりません。

  • JSON.parse (JSONのパーサ)
  • DOMParser (HTMLのパーサ)
  • document.implementation.createDocument (XMLのパーサ)

のように予め、JavaScriptが標準でパーサを用意している書式は扱いやすいといえます。
書式が決まっていれば、これらでなくてもOKですが、例えば、

  • サーバからCSV書式を返すよ
  • JavaScript標準APIにCSVパーサはないから、自分で頑張って書いてね

というドキュメントはあまりに不親切なので、

  • サーバからCSV書式を返すよ
  • CSVパーサは標準にないから、こちらで用意した google.CSV.parse を使ってね

という仕様になると思われますが、Googleが自社でパーサを書くより、予め用意されているパーサを使う方がコストが安く、安全です。

Re: Ms.yy さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/31 15:46

    なるほとです。
    ということは、このmap6_1.htmlの中のグーグルマップURL(api)のリクエストで帰ってきたレスポンスがJSON形式でそれをmap6_1.htmlで表示させているという認識でしょうか?

    キャンセル

  • 2019/09/01 00:59

    親記事に追記しました。
    少なくとも、ViewportInfoService.GetViewportInfo は「JavaScriptコード」を受け取って処理を実行していると思います。
    map6_1.html では、他にも多くのHTTPリクエストが行われており、その全てを調査していないので、この技法で全てかどうかは分かりません。

    キャンセル

  • 2019/09/01 17:38

    ViewportInfoService.GetViewportInfoはJSで受け取ってるならなんとなく流れが掴めた気がします。

    親記事もありがとうございます。
    難しい単語などあったので改めて確認させて頂きます。

    キャンセル

+2

apiを使うとxmlやjson形式でレスポンスが返ってきてそれをスクリプトコードで解読すると聞いたのですが、

そうでないタイプのAPIも存在します。Google Maps APIは、「JavaScriptオブジェクトが用意してあって、それを呼び出す」タイプのAPIです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/31 14:40

    なるほどです。
    つまり、json形式など解読するタイプと使わないタイプが存在するのですね

    キャンセル

  • 2019/08/31 14:43

    APIの定義は、ごくおおざっぱに言えば「プログラムから呼び出して使えるように用意されたもの」ですので、実装のされ方も千差万別です。

    キャンセル

  • 2019/08/31 14:44

    そういわれると難しいですね・・・💦

    キャンセル

+1

xmlやjsonというのはあくまで返却するデータの形式の種類にすぎません。
Google Map APIの場合は提供されているgoogle.maps.Mapクラスを利用しています。
第一引数の要素に結果を当てはめてる感じですね。

あとはhttps://maps.googleapis.com/maps/api/jsの処理内容を追ってみればどういうデータをやり取りしているか分かるかもしれません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/31 14:43

    難しいですね💦
    googlemapの場合は予めファイル作成=>作成したファイルへリクエスト=>ファイルに指定されているgooglemapURL(API)から情報を持ってくる=>表示画面へレスポンスということですか?

    キャンセル

  • 2019/08/31 14:54

    えっとその「作成したファイル」は何を想定されていますか?
    GoogleMap自体はオブジェクトが返ってきて何かしら操作があれば都度通信を行い、描画しています。
    オブジェクト自体がレスポンスと言ってもいいかもしれません。
    リクエストは第2引数に渡されたoption
    レスポンスが第1引数にあてはめられてるような作りと思います。

    キャンセル

  • 2019/08/31 15:43

    作成したファイルは上記のmap6_1.htmlです。
    他にも.phpファイルのことを想定してます

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る