GoogleドライブAPI（gapi）の使い方

執筆日: 2020年6月~

はじめに

ブラウザ上でGoogleドライプAPI V3を使いたいと思い挑戦しはじめたのですが、
日本語での解説がほとんどなく、かなり苦戦しました。
とりあえず、公式ドキュメントを読めば基本的な使い方が理解できるところまで頑張ったので、そこまでの過程を記事にまとめました。
（GoogleAPIの様々なメソッドを実行できるところまでを実践しております。GoogleドライブAPIのメソッドを使用していく上でのクセや注意点などは、今後発見し次第追記いたします。）

筆者の英語力は、長文や難しい言い回しを理解できるほどではなく、
この記事の読者もそういったレベル感＆GoogleAPIの使い方がチンプンカンプンな人を想定しています。

また、この記事をよめば完璧にGoogleドライブAPIを使いこなせます！
という主旨ではなく「ググってもググっても意味がわからず、APIのメソッドの実行すらできずに先に進めない…オワタ…」という人が第一歩を進めるための参考情報となりますので、あらかじめご理解ください。

※執筆日から年月が経過した場合、最新版では使用方法が異なる可能性があるので注意してください。

準備

Chrome拡張機能導入

英語の資料を理解するために、Chrome拡張機能 Google翻訳 を導入しました。
テキストを選択して、翻訳ボタンを押すだけで、翻訳文を表示することができます。
これがなければ公式ドキュメントを頑張って読もうという気力すら出なかったと思います。
とっても助かりました。

プロジェクトの作成

まずはじめに、APIを使うための準備にとりかかります。
Google Cloud Platformにアクセスします。

API ライブラリへようこそという画面が表示されますが、
APIライブラリを操作する前に、APIを使う予定のプロジェクトごとに
「プロジェクト」というまとまりを作成する必要があるようです。

青いメニューバーにあるプロジェクトの選択をクリックし、
新しいプロジェクトからプロジェクトを作成します。
（場所は組織なしのままで大丈夫のようです。）
作成したらプロジェクトの選択から、今作成したプロジェクトを選択します。

APIの有効化

Google Cloud Platformは、今回の目的であるGoogleドライブAPI以外にも、数々のAPIを管理するプラットフォームのようなので、
使用したい機能を選んで有効化する必要があるようです。
青いメニューバーのプロダクトとリソースの検索で、
「Google Drive API」と検索してクリックします。
APIライブラリが表示されたら、
ページ上部の有効にするボタンをクリックします。
すると概要ページが表示されます。
トップにこの API を使用するには、認証情報が必要になる可能性があります。開始するには、[認証情報を作成] をクリックしてください。と表示されているので、認証情報を作成へ移動します。
（青いメニューバーの一番左のナビゲーションメニューをクリックし、APIとサービス→認証情報から移動できます。）

OAuth認証情報を作成

トップに必ず、アプリケーションに関する情報を使用して OAuth 同意画面を構成してください。と書いてあるので、
右の同意画面を構成をクリックします。
ユーザーにAPIを使わせる必要がなければ内部、
ユーザーにAPIを使わせる必要があれば外部を選択します。

次の画面の項目も、適宜入力します。
（これはおそらく、ユーザーがGoogleログインを行ったときに表示される
「この会社にデータを提供しますか？」的な画面に表示される内容について設定する部分だと思います。）

Google APIのスコープ

APIを使って読み書きできる情報の範囲を設定します。
GoogleドライブAPIのデータを取得する必要があるのでスコープを追加をクリックし、適宜選んで追加します。

認証済みドメイン

後々入力の必要がありそうですが、
開発中は鬱陶しいので未入力ですすめます。

青い保存ボタンを押して、保存します。

認証情報を作成する

左のサイドメニューから認証情報をクリックし、
APIにアクセスするための認証情報を作成します。

青いメニューバーの下の、+ 認証情報を作成をクリックし、
API キーとOAuth クライアント IDを作成します。

APIキー

APIキーの方は、
クリックすればとくに入力するものもなく作成できます。
作成時に表示されるAPIキーは、
あとで認証情報画面から確認できますので、無理に覚えなくて大丈夫です。
作成したAPIキーの名前をクリックすると、設定画面が表示されます。
APIにアクセスできるアプリケーションの設定や、
呼び出せるAPIの種類の設定ができますが、
開発中は鬱陶しいので設定せずにすすめます。

参考リンク: Google Maps API をローカル環境で使う際のAPIキーの利用制限について

OAuth クライアント ID

OAuth クライアント IDをクリックすると、
クライアントIDの作成画面に移動します。

1. アプリケーションの種類
APIを呼び出すアプリの種類を選びます。
今回はブラウザで実行する予定なのでウェブ アプリケーションを選びます。

2. 認証済みのJavaScript生成元
APIへのアクセスを許可するドメインを、ホワイトリスト形式で指定します。
自分は開発中はローカル環境を使うのでhttp://localhost:○○○○と入力しました。
（※80以外のポートを使用する場合は、ポート番号を指定する必要がありますと書いてあるので、正しいポート番号を記入してください）

3. 認証済みのリダイレクト URI
おそらく、Googleログインが成功したときにジャンプするページを指定するのかな？と思ってます。
よくわかりませんが、ここを入力しないとアクセストークン関連のエラーが出るようなので、認証済みのJavaScript生成元と同じドメインを入力しておきます。

以上の項目を入力したら、作成をクリックします。
クライアントIDも何度でも確認できますので、安心してください。

Browser Quickstartの再現