WebAPIとは? 初心者でも使えるGoogle Map API の使い方

    • このページをはてなブックマークに追加

    公開日:2018年02月03日 最終更新日:2019年09月26日

    「Web API」を使うと、Webサイトを通じて様々なWebサービスを利用する事ができます。「Google」や「Amazon」、「Twiter」など様々な企業が自社の「Web API」を提供しています。本コラムでは、「Web API」を利用したことのない初心者向けに「Web APIとは何か?」を解説します。また、比較的簡単に利用可能な「Google Static Map API」の使い方を説明します。

    目次

    1. 「Web API」の基本

    1.1. API(アプリケーションプログラミングインターフェース)とは?

    「API」とは「Application Programming Interface」の略です。「API」は、アプリケーションプラグラムを作成する際に、OSや他のプログラムなどに対して情報や機能を呼び出すための仕様(ルール)の事です。
    「API」には、マイクロソフトが提供する「Windows API」やプログラミング言語の「C/C++」のライブラリや「Java API」などがあります。「Windows API」は文字通り、「Windows OS」上で動くアプリケーションを作成する時に利用する「API」です。C言語やC++などの「プログラミング言語」から、「Windows API」を使う事で、「Window(ウィンドウ)」の表示や「メニュー」の作成などを行います。

    ▲ページトップへ戻る

    1.2. 「Web API」とは何か?

    「外部のWebアプリケーション」の情報や機能を自身の「Webアプリケーション」から呼びだして利用する為の仕様や規約を「Web API」と呼びます。
    「Webアプリケーション」を作成するには、自身のサーバー上にHTTPやCSSなどの静的ドキュメントを配置したり、JavaScript、Javaなどで動的なページを作成したりしますが、「Web API」を使うと、自身のサーバー上にあるリソースに加えて、外部の「Webアプリケーション」が提供する情報やサービスを自身のサイトに組み込む事ができます。
    「Web API」はインターネット上に公開されており、「HTTP」ベースでアクセスします。

    ▲ページトップへ戻る

    2. 「Web API」のサービス例

    「Web API」で利用できるサービスや提供しているサイトは数多くあります。それぞれのサイトから取得できるデーターは様々ですが、情報のリクエストはHTTPベースの為、一般的にWebブラウザーを使ってWebサイトにアクセスする方法でデーターをリクエストします。リクエストにより帰ってくるデーターのフォーマットは、「XML」であったり「json」や「RSS」などで、取得したデーターをプログラムなどで処理して表示したり、特に何も処理する必要のないAPIもあります。本コラムでは、「Google」、「Amazon」、「楽天」の提供する「Web API」の一部をご紹介します。

    2.1. Google API

    「Google」が提供する「Web API」には、"Gmail"、"Google Calender"、"Google Drive"、"Google Map"としった個人向けのWebサービスのリソースにアクセスできる API があります。
    その他にも、「Google Cloud Platform」のリソースにアクセスできるAPIや、商用のプロダクトプラットフォーム「Google App」のリソースを取得できるAPIもあります。

    Google Maps API(日本語):https://developers.google.com/maps/web-services/
    Google Calendar API(英語):https://developers.google.com/google-apps/calendar/
    Gmail API(英語):https://developers.google.com/gmail/api/

    ●Google Maps API(日本語)

    ▲ページトップへ戻る

    2.2. Amazon Product Advertising API

    「Amazon Product Advertising API」はアフェリエイト広告用のAPIで、Amazonで販売されている商品情報を取得する事ができます。
    商品IDやキーワードなどで特定の商品をピックアップして「Webサイト」に商品紹介のページを作成する事で紹介料をもらえる事もあります。

    Product Advertising API(開発者ガイド):https://images-na.ssl-images-amazon.com/images/G/09/associates/paapi/dg/index.html

    ●Product Advertising API(開発者ガイド)

    ▲ページトップへ戻る

    2.3. 楽天ウェブサービス

    楽天が提供するAPIには「楽天市場系API」、「楽天ブックス系API」、「楽天トラベル系API」、「楽天ブックマーク系API」、「楽天レシピ系API」、「楽天Kobo系API」、「楽天GORA系API」など様々な「API」があります。
    例えば、「楽天市場系API」の商品検索では、"ジャンル検索"、"タグ検索"、"商品コード検索"なども自身のページに組み込む事ができ、「楽天トラベル系API」では、"施設基本情報"の取得や、"空室検索"、"地区コード"、"トラベルキーワード検索"などができます。

    楽天 Developers: https://webservice.rakuten.co.jp/document/

    ●楽天 Developers

    ▲ページトップへ戻る

    3. 「Google Maps API」 の使い方

    「Web API」が提供するWebサービスには、Webプログラミングの知識や各種データフォーマットに関する知識が必要なものから、比較的簡単に利用できるものまであります。本章では、「Google MAP」を自身の「Webサイト」に表示する事のできる「Google Static Map API」の使い方について解説します。「Google Static Map API」は複雑なコードを書く必要がなく、簡単に自身のWebページにGoogleのマップ画像を埋め込む事ができます。

     

    3.1. 「Google Static Map API」のサンプルコードを確認する

    「Google Static Map API」のサンプルコードを確認してみましょう。

    Google Maps API:https://developers.google.com/maps/web/

    「Google Maps API」のページから「Google Static Maps API」をクリックして下さい。

    ●Google Static Maps API

    「Google Static Maps API」は、HTTPSでリクエストされたURLを元にマップ画像を作成します。オーストラリアを3パターンで表示するサンプルコードがありますので、HTMLドキュメントを作成してコードを貼り付けてみましょう。

    ●Google Static Maps API サンプルコード

    以下の「googlemap_api.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●googlemap_api.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Google Static Map API</title>
    </head>
    <body>
    <h1>Google Static Map APIの使い方</h1>
    <p>
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Australia&size=640x400&style=element:labels|visibility:off&style=element:geometry.stroke|visibility:off&style=feature:landscape|element:geometry|saturation:-100&style=feature:water|saturation:-100|invert_lightness:true&key="> </p>
    </body>
    </html>

    「STYLED MAPS」のサンプルコードのURLをコピーして、「imgタグ」に指定して下さい。「googlemap_api.html」をブラウザーで表示すると、サンプルページと同じマップ画像が表示されます。

    ●googlemap_api.html

    ▲ページトップへ戻る

    3.2. 「Google Map」を埋め込むHTMLドキュメントを作成する

    「Google Static Maps デベロッパー ガイド」を参考に、「Google Static Maps API」のURLを作成する方法を見てみましょう。

    Google Static Maps デベロッパー ガイド:
    https://developers.google.com/maps/documentation/static-maps/intro

    「Google Static Maps API」の基本URLは以下の通りです。

    https://maps.googleapis.com/maps/api/staticmap?parameters

    基本URLの「parameters」に表示したい住所情報やスタイルなどのパラメーターを設定してURLを作成します。それでは一番シンプルな住所を指定しただけのURLを作成してみましょう。指定する住所は、 「東京都千代田区霞が関3-6-15」にします。

    「googlemap_api2.html」をPC上の任意の場所に保存し、ファイルの保存形式は「utf-8」にします。

    ●googlemap_api2.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Google Static Map API</title>
    </head>
    <body>
    <h1>Google Static Map APIの使い方</h1>
    <p>
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=東京都千代田区霞が関3-6-15&size=640x400">
    </p>
    </body>
    </html>

    住所の指定は位置パラメーターの「center」に指定します。、またブラウザーに表示する画像のサイズを指定するマップパラメータの「size」は必須パラメーターになりますので、住所の後にアンパサンド記号「&」をつけて「size=640x400」を指定して下さい。

    ●ブラウザーの表示

    ブラウザーには、指定した住所に該当するGoogleマップの画像が表示されます。

    ▲ページトップへ戻る

    3.3. 「Google Map」のズームレベルを設定する

    「Google Static Map API」では、パラメーターに色々な値を設定して、マップのスタイルをカスタマイズする事ができます。Googleのサンプルコードには複数のパラメーターがついて、白黒のマップが表示されていましたが、シンプルに画像の縮尺を指定する位置パラメーターの「zoom」を使って、マップ画像の「ズームレベル」を変更してみましょう。

    ●googlemap_api2.html

    <!DOCTYPE html>
    <html lang="ja">
    ・・・省略・・・
    <body>
    <h1>Google Static Map APIの使い方</h1>
    <p>
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=東京都千代田区霞が関3-6-15&size=640x400&zoom=16">
    </p>
    </body>
    </html>

    「googlemap_api2.html」のURLに「zoom=16」を追加します。ズームレベルは「0」が最も低いズームレベルになり、マップには全世界が表示されます。数字が大きくなるほどマップが拡大されます。数値の目安として「5」が"大陸"、「10」が"市"、「15」が"通り"、「20」が"建物"を表示するレベルになります。

    ●ブラウザーの表示

    3.2のURLよりも低いズームレベルで表示されます。

    ▲ページトップへ戻る

    最新案件情報をチェック!

    月額単価50万円〜100万円
    勤務地 東京都 渋谷区
    月額単価70万円〜
    勤務地 東京都 千代田区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【JavaScript(Node.js)】フルスタックエンジニア★スタートアップ向けモダンシステム開発

    月額単価 :50万円〜100万円

    主にスタートアップ企業のシステム開発を 受託開発している企業のフルスタック開発案件になります。 ...

    正社員

    【JavaScript】アプリケーションエンジニア|訪日旅行者向けプラットフォームサービスの開発

    ・訪日旅行者向けプラットフォームサービス「WAmazing」の 設計・開発・運用を行っていただきます。 ...

    WAmazing株式会社

    正社員

    【JavaScript/CSS/React】フロントエンドエンジニア|国内最大級 宅配ポータルサイトの開発

    ・自社サービス(出前館)サービスサイトおよび基幹システムのフロントエンド開発業務 UI/U設計、ツ...

    夢の街創造委員会株式会社

    フリーランス

    【Java or Python】システムエンジニア★タバコ関連商品販促サイト開発

    月額単価 :70万円〜

    タバコ関連商品の販促サイト開発をお任せします。 (フロントエンド・バックエンド共に対応できる方の ...