ウェブアプリの概要

Google Picker API は、ウェブアプリで Google ドライブ ファイルを選択したりアップロードしたりできるようにする JavaScript API です。ユーザーは、アプリに Google ドライブのデータへのアクセス権を付与できます。これにより、ファイルと安全かつ承認された方法でやり取りできます。

Google Picker は、ドライブに保存されている情報の「ファイルを開く」ダイアログとして機能し、次のような機能があります。

• Google ドライブの UI と同様のデザインと操作性。
• ドライブ ファイルのプレビューとサムネイル画像を表示する複数のビュー。
• インラインのモーダル ウィンドウ。ユーザーがメインアプリから離れることはありません。

なお、Google Picker では、ユーザーがファイルをフォルダ間で整理、移動、コピーすることはできません。ファイルを管理するには、 Google Drive API またはドライブの UI を使用する必要があります。

前提条件

Google Picker を使用するアプリは、既存のすべての利用規約を遵守する必要があります。最も重要なのは、リクエストで自分自身を正しく識別することです。

Google Cloud プロジェクトも必要です。

環境の設定

Google Picker API の使用を開始するには、環境を設定する必要があります。

API を有効にする

• Google Cloud コンソールで、Google Picker API を有効にします。

  API の有効化

API キーを作成する

API キーは、大文字、小文字、数字、アンダースコア、ハイフンを含む長い文字列です（例: AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe）。この認証方法は、一般公開されているデータに匿名でアクセスするために使用されます。たとえば、「リンクを知っているインターネット上のすべてのユーザー」の共有設定を使用して共有された Google Workspace ファイルなどです。詳細については、API キーを管理するをご覧ください。

API キーを作成するには:

1. Google Cloud コンソールで、メニュー menu > [API とサービス] > [認証情報] に移動します。

   [認証情報] に移動

2. [認証情報を作成] > [API キー] をクリックします。
3. 新しい API キーが表示されます。
   • [コピー] content_copy をクリックして、アプリのコードで使用する API キーをコピーします。API キーは、プロジェクトの認証情報の [API キー] セクションでも確認できます。
   • 不正使用を防ぐため、API キーを使用できる場所と対象の API を制限することをおすすめします。詳細については、API 制限を追加するをご覧ください。

ウェブアプリの認証情報を承認する

重要: Picker オブジェクトを作成するときに、アプリは非公開のユーザーデータにアクセスするビューとともに OAuth 2.0 アクセス トークンを送信する必要があります。アクセス トークンをリクエストするには、OAuth 2.0 を使用して Google API にアクセスするをご覧ください。

Google ピッカーを管理する

このガイドの残りの部分では、ウェブアプリから Google Picker を読み込んで表示する方法と、コールバックを実装する方法について説明します。完全な例については、ウェブアプリのコードサンプルをご覧ください。

Google Picker ライブラリを読み込む

Google Picker ライブラリを読み込むには、ライブラリ名と、読み込みが成功した後に呼び出すコールバック関数を指定して gapi.load を呼び出します。

    <script>       let tokenClient;       let accessToken = null;       let pickerInited = false;       let gisInited = false;        // Use the API Loader script to load google.picker.       function onApiLoad() {         gapi.load('picker', onPickerApiLoad);       }        function onPickerApiLoad() {         pickerInited = true;       }        function gisLoaded() {         // Replace with your client ID and required scopes.         tokenClient = google.accounts.oauth2.initTokenClient({           client_id: 'CLIENT_ID',           scope: 'SCOPES',           callback: '', // defined later         });         gisInited = true;     }     </script>     <!-- Load the Google API Loader script. -->     <script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script>     <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script> 

次のように置き換えます。

• CLIENT_ID: ウェブアプリのクライアント ID。
• SCOPES: 必要なアクセスレベルに応じて、Google API にアクセスするためにリクエストする必要がある 1 つ以上の OAuth 2.0 スコープ。詳細については、Google API の OAuth 2.0 スコープをご覧ください。

google.accounts.oauth2 JavaScript ライブラリを使用すると、ユーザーの同意を求めるプロンプトを表示し、ユーザーデータを操作するためのアクセス トークンを取得できます。initTokenClient メソッドは、ウェブアプリのクライアント ID を使用して新しいトークン クライアントを初期化します。詳細については、トークンモデルの使用をご覧ください。

onApiLoad 関数は、Google Picker ライブラリを読み込みます。onPickerApiLoad コールバック関数は、Google Picker ライブラリが正常に読み込まれた後に呼び出されます。

注: TypeScript を使用している場合は、@types/google.picker をインストールして window.google.picker を使用できます。これらの型の問題を報告する場合は、サポート チケットを開いてください。

Google ピッカーを表示する

createPicker 関数は、Google Picker API の読み込みが完了し、OAuth 2.0 トークンが作成されたことを確認します。PickerBuilder.setAppId メソッドを使用して、Cloud プロジェクト番号でドライブアプリ ID を設定し、アプリがユーザーのファイルにアクセスできるようにします。この関数は、Google Picker のインスタンスを作成して表示します。

    // Create and render a Google Picker object for selecting from Drive.     function createPicker() {       const showPicker = () => {         // Replace with your API key and App ID.         const picker = new google.picker.PickerBuilder()             .addView(google.picker.ViewId.DOCS)             .setOAuthToken(accessToken)             .setDeveloperKey('API_KEY')             .setCallback(pickerCallback)             .setAppId('APP_ID')             .build();         picker.setVisible(true);       }        // Request an access token.       tokenClient.callback = async (response) => {         if (response.error !== undefined) {           throw (response);         }         accessToken = response.access_token;         showPicker();       };        if (accessToken === null) {         // Prompt the user to select a Google Account and ask for consent to share their data         // when establishing a new session.         tokenClient.requestAccessToken({prompt: 'consent'});       } else {         // Skip display of account chooser and consent dialog for an existing session.         tokenClient.requestAccessToken({prompt: ''});       }     } 

次のように置き換えます。

• API_KEY: API キー。
• APP_ID: Cloud プロジェクト番号。

Google Picker インスタンスを作成するには、PickerBuilder を使用して Picker オブジェクトを作成する必要があります。PickerBuilder は、View、OAuth 2.0 トークン、デベロッパー キー、成功時に呼び出すコールバック関数（pickerCallback）を受け取ります。

Picker オブジェクトは、一度に 1 つの View をレンダリングします。ViewId（google.picker.ViewId.*）を使用するか、DocsView のインスタンスを作成してビューのレンダリング方法をさらに制御することで、少なくとも 1 つのビューを指定します。

Google Picker に複数のビューが追加されている場合、ユーザーは左側のタブをクリックしてビューを切り替えることができます。タブは ViewGroup オブジェクトで論理的にグループ化できます。

有効なビューの一覧については、Google Picker のリファレンスの ViewId をご覧ください。これらのビューのいずれかのトークンを取得するには、https://www.googleapis.com/auth/drive.file スコープを使用します。

Google Picker のコールバックを実装する

Google Picker のコールバックを使用すると、ユーザーがファイルを選択したり、[キャンセル] を押したりするなど、Google Picker でのユーザー操作に対応できます。ResponseObject インターフェースは、ユーザーの選択に関する情報を伝えます。

    // A callback implementation.     function pickerCallback(data) {       let url = 'nothing';       if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {         const doc = data[google.picker.Response.DOCUMENTS][0];         url = doc[google.picker.Document.URL];       }       const message = `You picked: ${url}`;       document.getElementById('result').textContent = message;     } 

コールバックは JSON エンコードされたデータ オブジェクトを受け取ります。このオブジェクトには、ユーザーが Google Picker（google.picker.Response.ACTION）で行った Action が含まれます。ユーザーがアイテムを選択すると、google.picker.Response.DOCUMENTS 配列も入力されます。この例では、google.picker.Document.URL がメインページに表示されます。データ フィールドの詳細については、ResponseObject インターフェースをご覧ください。

特定のファイル形式をフィルタする

ViewGroup を使用して、特定のアイテムをフィルタします。次のコードサンプルは、「ドライブ」サブビューにドキュメントとプレゼンテーションのみを表示する方法を示しています。

    const picker = new google.picker.PickerBuilder()         .addViewGroup(           new google.picker.ViewGroup(google.picker.ViewId.DOCS)               .addView(google.picker.ViewId.DOCUMENTS)               .addView(google.picker.ViewId.PRESENTATIONS))         .setOAuthToken(oauthToken)         .setDeveloperKey(developerKey)         .setAppId(cloudProjectNumber)         .setCallback(pickerCallback)         .build(); 

有効なビュータイプのリストについては、ViewId をご覧ください。

Google ピッカーの外観を調整する

Feature オブジェクトを使用すると、さまざまなビューの機能をオンまたはオフにできます。Google Picker ウィンドウの外観を微調整するには、PickerBuilder.enableFeature メソッドまたは PickerBuilder.disableFeature メソッドを使用します。たとえば、ビューが 1 つしかない場合は、ナビゲーション パネル（Feature.NAV_HIDDEN）を非表示にして、ユーザーがアイテムを確認できるスペースを広げることができます。

次のコードサンプルは、この機能を使用するスプレッドシートの検索ピッカーの例を示しています。

    const picker = new google.picker.PickerBuilder()         .addView(google.picker.ViewId.SPREADSHEETS)         .enableFeature(google.picker.Feature.NAV_HIDDEN)         .setDeveloperKey(developerKey)         .setCallback(pickerCallback)         .build();