Google API 第33回

投稿者: | 2016年6月16日
0件のコメント

今回はこれだけ押さえておけば、
Google APIのJavaScriptを用いた実装が楽に行える方法を紹介します。

まずJavaScriptを用いた実装方法は3つあります。
1つ目はAPIキーを用いた実装方法、
2つ目はクライアントIDを用いた実装方法、
3つ目はGoogle Maps API関連の実装方法です。

JavaScriptを用いたGoogle APIの実装はこのいずれかの方法に対応しています。

ここではAPIキーを用いて実装を行う方法とクライアントIDを用いて実装を行う方法の紹介をします。
Google Maps API関連の実装方法は以前に紹介しているので省略します。
※詳しくは参考サイトのGoogle API 第5回～第10回を参照してください。

■APIキーを用いた実装方法
○対応しているGoogle API
Google Knowledge Graph Search API、Google Custom Search APIなど

○APIの有効とAPIキーの作成
APIを使用するにはGoogle Developers Consoleにアクセスして、
該当するAPIを有効にし、APIキーを作成する必要があります。
※APIキーが必要ない場合もあります。
手順は下記の通りです。

１．参考サイトのGoogle Developers Consoleにアクセスし
プロジェクトを作成します。

２．左メニューの[API Manager]から[概要]を選択し、
該当するAPIを検索し有効にします。

３．左メニューの[API Manager]から[認証情報]を選択し、
[新しい認証情報]のセレクトボックスから[APIキー]を選択します。

新しいキーの作成画面が表示されます。
キーにはサーバーキー、ブラウザキー、Androidキー、iOSキーの4つがあります。
アプリをどんな環境で実行するか把握した上でキーを選択します。
今回はJavaScriptを用いるのでブラウザキーを選択します。
google_api33-1

ブラウザAPIキーの作成画面が表示されます。
【名前】の欄にはアプリケーション名を設定、
【この HTTP リファラー（ウェブサイト）からのリクエストを受け入れる】の欄には
アプリからリクエストを行うためのリファラを設定します。
リファラを設定しない場合はどんなリファラからもリクエストを受け入れることになるので
必ず設定しましょう。
google_api33-2

設定値は下記の通りです。
新しいキーの作成：ブラウザキー
名前：任意のアプリケーション名（例：Google API KEY)
この HTTP リファラー（ウェブサイト）からのリクエストを受け入れる：任意のリファラ
(例：http://localhost)

設定が終わったら[作成]を選択し作成完了です。

APIキーの作成が完了したら、APIキーが表示されます。
google_api33-3

APIを有効にし、APIキーを作成したらAPIの実装を行います。
○Google APIの実装
例としてGoogle Knowledge Graph Search APIを用いて説明します。

まずJavaScriptのクライアントライブラリを読み込ませます。

    <script src="https://apis.google.com/js/client.js?onload=init">

クライアントライブラリが読み込まれた後、
gapi.client.setApiKey()とgapi.client.load()を用いて
API通信をするための準備とAPIのロードを行われるようにします。

gapi.client.setApiKey()の引数に取得したAPIキーを指定します。
gapi.client.load()の第1引数にはAPI名、第2引数にはAPIのバージョン、
第3引数にはAPIロード後に実行されるコールバック関数を指定します。

    var API_KEY = 'API_KEY';

    function init() {
        // APIキーの設定
        gapi.client.setApiKey(API_KEY);
        // APIロード
        gapi.client.load('kgsearch', 'v1', request);
    }

gapi.client.kgsearch.entities.searchを用いてリクエスト作成します。
※各APIにはgapi.client.[API名].[collection名].[method名]というリクストメソッドがあります。
このリクエストをexecuteで実行するとリクエスト結果が引数として取得できます。

function request() {
        // リクエスト作成
        var req = gapi.client.kgsearch.entities.search({'query':'ラーメン'});
        // リクエスト結果
        req.execute(function(res) {
            var items = res.itemListElement;
            for(i=0; i');
        });
   }

■クライアントIDを用いた実装方法
○対応しているGoogle API
Google Mail API、Google Calender API、Google Drive APIなど

○APIの有効とクライアントIDの作成
APIを使用するにはGoogle Developers Consoleにアクセスして、
該当するAPIを有効にし、クライアントIDを作成する必要があります。
手順は下記の通りです。

１．参考サイトのGoogle Developers Consoleにアクセスし
適当なプロジェクトを作成します。

２．左メニューの[API Manager]から[概要]を選択し、
該当するAPIを検索し有効にします。

３．左メニューの[API Manager]から[認証情報]を選択し、
[新しい認証情報]のセレクトボックスから[OAuthクライアントID]を選択します。

クライアントIDの作成画面が表示されます。
【アプリケーションの種類】にはウェブアプリケーション、Android、Chromeアプリ、iOS、PlayStation4、その他があります。
アプリをどんな環境で実行するか把握した上でアプリケーションの種類を選択します。
今回はJavaScriptを用いるのでウェブアプリケーションを選択します。
google_api33-4

ブラウザAPIキーの作成画面が表示されます。
【名前】の欄にはアプリケーション名を設定、
【承認済みの JavaScript 生成元】の欄にはアプリケーションのドメインを設定します。
【承認済みのリダイレクト URI】の欄にはGoogle認証された後にリダイレクトされるURIを設定します。
google_api33-5

設定値は下記の通り
アプリケーションの種類：ウェブ アプリケーション
名前：任意のアプリケーション名(例：Google CLIENT KEY)
承認済みの JavaScript 生成元：任意のドメイン(例：http://localhost)
承認済みのリダイレクト URI：任意のURI(例：http://localhost/callback)

設定が終わったら[作成]を選択し作成完了です。

クライアントIDの作成が完了したら、クライアントIDが表示されます。
google_api33-6

APIを有効にし、クライアントIDを作成したらAPIの実装を行います。
○Google APIの実装
例としてGoogle Mail APIを用いて説明します。

JavaScriptのクライアントライブラリを読み込ませます。

    <script src="https://apis.google.com/js/client.js?onload=init">

クライアントライブラリが読み込まれた後、認証チェックが行われるようにします。
認証チェックにはgapi.auth.authorizeを用います。
第1引数には取得したクライアントID、第2引数にはスコープ、
第3引数にはtrueまたはfalse、第4引数にはコールバック関数を指定します。

第2引数に指定するスコープには各APIに対応したスコープを指定します。
第3引数をtrueにすると未認証の場合、即時にエラーが返りコールバック関数が呼び出されます。

// クライアントID
var CLIENT_ID = 'CLIENT_ID';
// スコープ
var SCOPES = ['https://www.googleapis.com/auth/gmail.readonly'];
// 認証チェック
function checkAuth() {
    gapi.auth.authorize({
        client_id: CLIENT_ID,
        scope: SCOPES,
        immediate: true,
    },
    authResult
    );
}

コールバック関数は下記のように記述します。
認証されている場合はgapi.client.loadが実行されます。

function authResult(authResult) {
    var authorizeDiv = document.getElementById('authorize-div');
    if (authResult && !authResult.error) {
        // 認証ボタンを非表示
        authorizeDiv.style.display = 'none';
        // APIロード
        gapi.client.load('gmail', 'v1', request);
    }   
    else {
        // 認証ボタンを表示
        authorizeDiv.style.display = 'inline';
    }
}

認証されてない場合は認証ボタンを押させるようにします。

<div id="authorize-div" style="display: none">
    <button id="authorize-button" onclick="authClick(event)">認証</button>
</div>
function authClick(event) {
    // 認証
    gapi.auth.authorize({
        client_id: CLIENT_ID,
        scope: SCOPES,
        immediate: false,
    }, 
    result
    );
    return false;
}

gapi.client.gmail.users.threads.listを用いてリクエストを作成します。
このリクエストをexecuteで実行するとリクエスト結果が引数として取得できます。

function request() {
    // リクエスト作成
    var request = gapi.client.gmail.users.threads.list({'userId': 'me'});
    // リクエスト結果
    request.execute(function(res) {
        console.log(res);
    });
}

以上がJavaScriptを用いた実装方法です。

APIキーを使用するかクライアントIDを使用するかはAPI通信にユーザの個人情報が含まれないか否かによります。
API通信にユーザの個人情報が含まれない場合はAPIキーを使用、
API通信にユーザの個人情報が含まれる場合はクライアントIDを使用するようになっています。

ウェブサイトでAPIキーとクライアントIDの両方を使用してGoogle APIを実装しているのをたまに見かけます。基本的にAPIキーもしくはクライアントIDしか使わないので注意しましょう。

＜参考サイト＞
・Google API 第5回(Google Maps JavaScript API)
・Google API 第6回(Google Static Maps API)
・Google API 第7回(Google Street View Image API)
・Google API 第8回(Google Places API)
・Google API 第9回(Google Places API)
・Google API 第10回(Google Places API)

＜付録＞
・APIキーを用いた簡単なサンプル
※使用する際はAPI_KEYを自身で作成したAPIキーに置き換えてください。

<html>
    <head>
        <script>
        // APIキー
        var API_KEY = 'API_KEY';

        function init() {
            // APIキーの設定
            gapi.client.setApiKey(API_KEY);
            // APIロード
            gapi.client.load('kgsearch', 'v1', request);
        }

        function request() {
            
            var query = 'ラーメン';
            // リクエストの作成
            var req = gapi.client.kgsearch.entities.search({'query':query});
            // リクエストの結果
            req.execute(function(res) {
                console.log(res)
            });
        }
        </script>
        <script src="https://apis.google.com/js/client.js?onload=init"></script>
    </head>
    <body>
    </body>
</html>

・クライアントIDを用いた簡単なサンプル
※使用する際はCLIENT_IDを自身で作成したクライアントIDに置き換えてください。

<html>
    <head>
        <script type="text/javascript">
        // クライアントID
        var CLIENT_ID = 'CLIENT_ID';
        // スコープ
        var SCOPES = ['https://www.googleapis.com/auth/gmail.readonly'];
        // 認証チェック
        function checkAuth() {
            gapi.auth.authorize({
                client_id: CLIENT_ID,
                scope: SCOPES,
                immediate: true
            },
            authResult
            );
        }
        
        function authResult(authResult) {
            var authorizeDiv = document.getElementById('authorize-div');
            if (authResult && !authResult.error) {
                // 認証ボタンの非表示
                authorizeDiv.style.display = 'none';
                loadAPI();
            } else {
                // 認証ボタンの表示
                authorizeDiv.style.display = 'inline';
            }
        }
        // 認証
        function authClick(event) {
            gapi.auth.authorize({
                client_id: CLIENT_ID,
                scope: SCOPES,
                immediate: false
            },
            authResult
            );
            return false;
        }
        // APIロード
        function loadAPI() {
            gapi.client.load('gmail', 'v1', request);
        }
        
        function request() {
            // リクエストの作成
            var req = gapi.client.gmail.users.threads.list({'userId': 'me'});
            // リクエストの結果
            req.execute(function(res) {
                console.log(res);
            });
        }
        </script>
        <script src="https://apis.google.com/js/client.js?onload=checkAuth"></script>
    </head>
    <body>
        <div id="authorize-div" style="display: none">
            <button id="authorize-button" onclick="authClick(event)">認証</button>
        </div>
    </body>
</html>