Google Drive APIのサンプルを確認してみる

    <script type="text/javascript">
      // Client ID and API key from the Developer Console
      var CLIENT_ID = '<YOUR_CLIENT_ID>';　　　　// ここに作成したクライアントIDを設定
      var API_KEY = '<YOUR_API_KEY>';           // ここに作成したAPIキーを設定

      // Array of API discovery doc URLs for APIs used by the quickstart
      // ① RESTAPIのdocs
      var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];  

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      // ②スコープの設定（読み取り専用）
      var SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';   

      var authorizeButton = document.getElementById('authorize_button');
      var signoutButton = document.getElementById('signout_button');

      /**
       *  On load, called to load the auth2 library and API client library.
       */
      function handleClientLoad() {
        gapi.load('client:auth2', initClient);  // ③googleapiのスクリプトで証明書をロード
      }

      /**
       *  Initializes the API client library and sets up sign-in state
       *  listeners.
       */
      function initClient() {   // ④初期化処理
        gapi.client.init({
          apiKey: API_KEY,
          clientId: CLIENT_ID,
          discoveryDocs: DISCOVERY_DOCS,
          scope: SCOPES
        }).then(function () { // コールバック関数
          // Listen for sign-in state changes.
          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          // Handle the initial sign-in state.
          // 省略
        }, function(error) { // エラー処理
          // 省略
        });
      }

      /**
       * Print files.
       */
      function listFiles() { // ⑤Googleドライブのファイルリストを取得
        gapi.client.drive.files.list({
          'pageSize': 10,
          'fields': "nextPageToken, files(id, name)"
        }).then(function(response) {
          appendPre('Files:');
          var files = response.result.files;
          if (files && files.length > 0) {
            for (var i = 0; i < files.length; i++) {
              var file = files[i];
              appendPre(file.name + ' (' + file.id + ')');
            }
          } else {
            appendPre('No files found.');
          }
        });
      }

    </script>
　　
　　// ⑥google api用のscript
    <script async defer src="https://apis.google.com/js/api.js"
      onload="this.onload=function(){};handleClientLoad()"
      onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>