アニメ情報APIをJavaScriptから使用する #JavaScript

Google Cloud Endpointsでアニメ情報APIで作成したAPIをTypeScriptで呼び出す。
Google Cloud Endpointsで作成したAPIはGoogleが用意しているライブラリ(GAPI)を使って簡単に利用することができる。
詳細は「Using Endpoints in a JavaScript Client」。
TypeScriptから利用するためにGAPIの型定義ファイルをダウンロードする。
Visual Studioの場合はNuGetで検索すれば出てくる。

加えてアニメ情報API用の型定義ファイルを作成する。(gapi.animeinfo.d.ts)

gapi.animeinfo.d.ts

declare namespace gapi.client {
    export function load(name: string, version: string, callback: () => any, root: string): void
    namespace animeInfo {
        namespace get {
            export function anime(): HttpRequest<Response<AnimeInfo>>
            export function anime(request: GetAnimeInfoRequest): HttpRequest<Response<AnimeInfo>>
        }

        export interface Response<T> {
            items: Array<T>
            nextPageToken: string
        }
        export interface AnimeInfo {
            id?: string
            title?: string
            shortTitles?: Array<string>
            publicUrl?: string
            sequel?: string
            sex?: string
            twitterAccount?: string
            twitterHashTags?: Array<string>
            periodId?: string
        }
        export interface Period {
            id?: string
            year?: string
            season?: string
        }
        export interface GetAnimeInfoRequest {
            period?: Period
            limit?: number
            cursor?: string
        }
    }
}

API呼び出し用の関数を用意する。(AnimeInfoGapi.ts)

AnimeInfoGapi.ts

namespace utils.AnimeInfoGapi {
    import Response = gapi.client.animeInfo.Response
    import AnimeInfo = gapi.client.animeInfo.AnimeInfo
    import Period = gapi.client.animeInfo.Period
    const ROOT = 'https://animeinfoserver.appspot.com/_ah/api'

    export function loadGapi(callback: () => void) {
        gapi.client.load('animeInfo', 'v1', callback, ROOT)
    }

    export function getAnime(callback: (resp: Response<AnimeInfo>) => void, period: Period = null) {
        gapi.client.animeInfo.get.anime({ period: period }).execute(callback)
    }
}

HTMLではhttps://apis.google.com/js/client.js?onload=initをロードし、initを定義する。定義したinit関数がロード終了後呼ばれる。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>Anime Info Client</title>
</head>
<body>
    <script src="AnimeInfoGapi.js"></script>
    <script src="app.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=init"></script>
</body>
</html>

init関数では最初にgapi.client.loadを呼び出し、その後定義したアニメ情報APIを呼び出す。

app.ts

declare var init: Function
namespace app {
    export function init() {
        utils.AnimeInfoGapi.loadGapi(() => {
            utils.AnimeInfoGapi.getAnime((resp) => {
                var animeInfos = resp.items
            })
        })
    }
}
init = app.init