Firebase&JavaScriptでGoogleAPIを叩く

GoogleAPIの[ドキュメント](https://developers.google.com/tasks/v1/reference/tasks/list)にあるJavaScriptを”とりあえず動かす”ためのメモです。


[全く初めてのGoogle Tasks API リスト取得](https://qiita.com/kuniatsu/items/a85f62fae9aa21781e87#task_list)でcURLまで実施する方法を書いたので、さらにJSで動かすにはどうするかをこちらに書いていきます。
なので引き続き使うAPIはGoogleTASKです。

----

<img width="1214" alt="スクリーンショット 2019-08-18 17.41.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98758/a8c87029-f970-2905-2bd4-47b8da325076.png">

[前回記事](https://qiita.com/kuniatsu/items/a85f62fae9aa21781e87#task_list)で動かしたcURLと同列に書かれているJAVASCRIPTのコードですが、意外とサクッと動かせません。

書かれているコードはこちら


```html:index.html
<script src="https://apis.google.com/js/api.js"></script>
<script>
  /**
   * Sample JavaScript code for tasks.tasks.list
   * See instructions for running APIs Explorer code samples locally:
   * https://developers.google.com/explorer-help/guides/code_samples#javascript
   */

  function authenticate() {
    return gapi.auth2.getAuthInstance()
        .signIn({scope: "https://www.googleapis.com/auth/tasks.readonly"})
        .then(function() { console.log("Sign-in successful"); },
              function(err) { console.error("Error signing in", err); });
  }
  function loadClient() {
    gapi.client.setApiKey("YOUR_API_KEY");
    return gapi.client.load("https://content.googleapis.com/discovery/v1/apis/tasks/v1/rest")
        .then(function() { console.log("GAPI client loaded for API"); },
              function(err) { console.error("Error loading GAPI client for API", err); });
  }
  // Make sure the client is loaded and sign-in is complete before calling this method.
  function execute() {
    return gapi.client.tasks.tasks.list({
      "tasklist": "tasklistTASKLISTtasklist"
    })
        .then(function(response) {
                // Handle the results here (response.result has the parsed body).
                console.log("Response", response);
              },
              function(err) { console.error("Execute error", err); });
  }
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: "YOUR_CLIENT_ID"});
  });
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>
```

こちらに、前回調べた
・TASKList_Id
・YOUR_API_KEY
・YOUR_CLIENT_ID
を入力して実行してみたのですが、うまくいきませんでした。
まず、ローカルに作ったindex.htmlで実行したのですが、


```
Uncaught uO
Uncaught TypeError: Cannot read property 'signIn' of null
```

というエラーが出ます。
どうやらGoogleのAPIはローカルのファイルからでは使えないという問題と、
前回の設定では「APIを呼びだす場所」がその他になっていたので、その点も問題です。

そのあたりを直し、firebaseにhtmlファイルをアップロードしてAPIを動かしてみたいと思います。


# Firebase内にプロジェクトを作成する
[FirebaseConsole](https://console.firebase.google.com/u/0/?hl=ja)にアクセス
<img width="483" alt="firebase.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98758/77079e4a-c6fa-194c-b654-8381710a6b1b.png">
プロジェクトを追加を押下




このプロジェクトはGoogleAPIのプロジェクトと同様なので、あとでこちらのプロジェクトにAPIを有効にしていくことになります。


# FirebaseでDeployする

ローカルでhtmlを動かしてはGoogleAPIが動かないので、
Firebaseを使います。

ターミナルにFirebaseをインストールします。

```
$ firebase -V
7.2.2
```
作成時は7.2.2

```
$ firebase login 
```
ターミナルへのインストールができたら、Googleにログイン


```
$ firebase list
```
作成したプロジェクトのIDを調べる

```
$ firebase init --project={ID}
```
調べたIDでfirebaseのプロジェクトとフォルダを紐づける。

```
$ ls
firebase.json	public
```
firebase側の`firebase.json`と`public`フォルダが作成されているので、
publicフォルダ内にindex.htmlを作成し、ドキュメントのJSを貼り付ける。


```
$ firebase deploy
```
デプロイすると、URLが表示され、アクセスすることができるようになる。

<img width="899" alt="スクリーンショット 2019-08-18 18.42.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98758/b3ef2985-fd33-5f63-2153-674709c4af3c.png">

しかしこの時点では、まだAPIの有効化ができていないので、
APIは正常には動かない。
次にAPIの設定をやっていく。


# Google_TASK_APIを設定する。
[Google API Console](https://console.developers.google.com/?hl=ja)へアクセスする。
左上にある、「プロジェクトの選択」からfirebaseで作ったプロジェクトを選択し`APIとサービスの有効化`をクリックする。

<img width="647" alt="スクリーンショット 2019-08-28 10.46.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98758/118abfb0-d196-0eee-64bb-d069d120eeae.png">


次にAPIを選択する。ここではTASKAPIを使用する。

<img width="1017" alt="apI.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98758/ce2518d2-4b7e-859d-45c4-655b0c41f768.png">

`TasKs API`を有効にする。

次に認証情報

<img width="712" alt="スクリーンショット 2019-08-28 10.51.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98758/1b2eda2e-80d4-1be4-e249-8a0975c1262a.png">


その際にAPIを使用するアプリケーションをJavaScriptにし、リダイレクトURIを先ほどのfirebaseDeploy時にアクセスしたURLにしておきます。





# JavaScriptの設定を書き換える
サンプルのJSソースにIDやKEYを設定する必要がある。
・tasklist_Id
・API_KEY
・CLIENT_ID
[前回記事](https://qiita.com/kuniatsu/items/a85f62fae9aa21781e87)を参考にこの３つの値を取得し設定。
その後firebaseで再度Deployしアクセスすると完成です。

結果はlogに出るのでブラウザのDebToolsでConnsoleを見て自分の登録したTASKが取得できていれば完成です。