Google APIs Client Library for JavaScript のサンプルに関する説明ページ
(https://cloud.google.com/storage/docs/json_api/v1/json-api-javascript-samples) を和訳しました。
...が、和訳するほどの難しい英語じゃなかった。原文を読んでも十分理解できると思います。
JavaScript Sample
このページでは、Google APIs Client Library for JavaScript を使って、Google Gound Storage JSON APIへリクエストを発行する方法をお見せします。とりわけ、GitHubに置いてあるサンプルコード storage-getting-started-javascript について説明しています。関連する動画 Google Cloud Storage - Getting started with the JavaScirpt Sample Application もご覧ください。
このドキュメントは、次のような読者を想定しています：GCSのコンセプトについて理解していること、および、Getting Starged: Using the Developers Consoleに書いてある操作についてわかっていること。
1.ClientIDの作成
clientIDは誰がリクエストしたのかを特定します。複数のアプリケーションに対して、それぞれclientIDを作成し利用することができます。
webアプリケーション用にclientIDを生成するときには、"javascript origin"の項目に、http://localhost:8000 を追加するのを忘れないようにしましょう。これは、サンプルコードをローカルでテストするときに必要です。
webアプリケーション用にclientIDを作成するには
1.Google Developers Console（開発コンソール）を開く
2.clientIDを紐付けたいプロジェクトを開く。
3.サイドバーの"APIと認証"配下の"認証情報"を開く。
4."新しいクライアントIDを作成"ボタンをクリック。
5.開いた画面で、"webアプリケーション"を選択する。（訳注：そして「同意画面を作成」ボタンをクリックし、同意画面の設定を行う。）
6."承認済みの JAVASCRIPT 生成元"の欄を入力。（訳注：http://localhost:8000 など）
7."承認済みのリダイレクト URI"の欄を入力。（訳注：6を入力すると自動的に"oauth2callback"が付与されたアドレスが自動入力される。これはこのままで良い）
8."クライアントIDを生成"ボタンをクリック。
結果、次のような感じになります。
9.入力内容を変更したくなったら、"設定を編集"ボタンで出来ます。
2.APIキーの作成
APIキーは、Google Cloud StorageのようなGoogleサービスへの認証を行います。APIキーを利用することにより、GCSと特定のプロジェクトとの接続にあたって、トラフィックをモニターしたり、クオータを適用したり、課金をしたりすることができるようになります。接続においてはユーザのアクションは必要ありません。また、アカウント情報へのアクセスを必要としません。よって、認証としては使用できません。
APIキーを生成するには
1.開発コンソールを開く。
2.APIキーを紐付けたいプロジェクトを開く。
3.サイドバーの"APIと認証"配下の"認証情報"を開く。
4.ページの下の方の"公開 API へのアクセス"のところにある"新しいキーを作成"ボタンをクリック。
5.開いた画面で、"ブラウザーキー"を選択する。
6."ブラウザキーの作成と許可対象リファラーの設定"の欄で、リクエストを受け入れるウェブサイトのアドレスを入力する。（訳注：この例では何も入力していないと思われる）
7.生成ボタンをクリック。
結果、次のような感じになります。
8.入力内容を変更したくなったら、"許可対象リファラーを編集"ボタンで出来ます。
3.プロジェクトメンバーのグループIDの取得
サンプルでは、バケットへの一般的な操作を例示していますが、それは、パーミッションの設定を父君でおり、プロジェクトメンバーによるリクエストが必要となります。そのために、サンプルコードでは、プロジェクトメンバーのIDを使用します。
1.開発コンソールを開く。
2.プロジェクトを選択。
3.サイドバーの"ストレージ"-"Cloud Storage"配下の"プロジェクトダッシュボード"を選択。（訳注：ここで別タブで"Google APIs Console"の画面が開きます）
4.サイドバーより"Google Cloud Storage"を選択し（訳注：自動で画面が開いた時にすでに選択されています）、メンバーIDを確認します。（訳注：Google Cloud Storage IDs という欄に表示されています）
5.たとえば、"Owners""Editors""Team"などがメンバーIDとして使用できます。
4.webページを作成する
このサンプルは、１つのHTMLページからなっており、このページがGoogle APIs Client Library for JavaScriptを利用しています。下記に提示するサンプルコードに、次の変更を加える必要があります。
-
PROJECTに実際のプロジェクトIDをセット -
clientIDに、先ほど作成したクライアントIDをセット（訳注：手順１で作成したもの） -
apiKeyに、先ほど作成したAPIキーをセット（訳注：手順２で作成したもの） -
GROUPに、先ほど確認したプロジェクトメンバーIDをセット（訳注：手順３で確認したもの）
（訳注：実際のコードは原文を見てください）
（訳注：サンプルコードを実際に動かそうと思ったら、もう少し変更が必要でした。末尾参照）
5.サンプルの実行
サンプルをローカル http://localhost:8000 でホストしてください。このアドレスは、クライアントIDを作成したときに、javascript生成元として指定しているはずです。
もしPythonがインストールされている環境ならば、次のコマンドでテストできます。
$ python -m SimpleHTTPServer
和訳はこれで終わりです。
サンプルコードへの修正
以下、実際にサンプルコードを動かそうとしたときにハマったことを記載しておきます。
1. PROJECT
index.html の28行目。ここにセットする値は、プロジェクトIDであって、プロジェクト名やプロジェクト番号ではないことに注意。
2. BUCKET
index.html の69行目、元のソースコードはこうなっていましたが
var BUCKET = 'code-sample-bucket-' + Date.now();
Date.now()の部分は不要。こうする。
var BUCKET = '実際のバケット名'; // + Date.now();
3. GROUP-ID
index.html の83〜84行目。GROUP-IDには書式があり、"group-"というプレフィックスが必要。なので、
var GROUP =
'group-0000000000000000000000000000000000000000000000000000000000000000';
これは、"group-"の部分を残して、ゼロの羅列の部分を実際の値に置換する。
以上