Google Picker API

Google Picker API は、ウェブアプリでユーザーが選択または Google ドライブ ファイルをアップロードできます。ユーザーは、アプリのアクセスを許可する権限をアプリに付与できます。 安全で承認された方法でファイルを操作できます。

Google Picker は「ファイルを開く」ドライブに保存されている情報のダイアログ 次の機能を備えています

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

Google 選択ツールでは、1 つのフォルダでファイルを整理、移動、コピーすることはできませんのでご注意ください。 必要があります。この操作を行うには、Google Drive API または ドライブ UI で管理できます。

アプリケーションの要件

Google Picker を使用するアプリケーションは、既存のすべての 利用規約。そして最も重要なこととして、 自分自身のリクエストに含めます。

環境の設定

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

API を有効にする

Google API を使用する前に、Google Cloud プロジェクトで有効にする必要があります。 1 つの Google Cloud プロジェクトで 1 つ以上の 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 キーの制限を適用するをご覧ください。

ウェブ アプリケーションの認証情報を承認する

エンドユーザーを認証してアプリでユーザーデータにアクセスするには、次のことを行う必要があります。 OAuth 2.0 クライアント ID を作成します。クライアント ID は Google の OAuth サーバーに送信します。アプリが複数のプラットフォームで動作する場合 プラットフォームごとに個別のクライアント ID を作成する必要があります。

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

   [認証情報] に移動

2. [認証情報を作成] > [OAuth クライアント ID] をクリックします。
3. [アプリケーションの種類] > [ウェブ アプリケーション] をクリックします。
4. [名前] フィールドに、認証情報の名前を入力します。この名前は Google Cloud コンソールにのみ表示されます。
5. アプリに関連する承認済み URI を追加します。 <ph type="x-smartling-placeholder">
   </ph>
   • クライアントサイド アプリ（JavaScript） - [承認済みの JavaScript 生成元] で [URI を追加] をクリックします。次に、ブラウザ リクエストに使用する URI を入力します。アプリケーションが OAuth 2.0 サーバーに API リクエストを送信できるドメインを識別します。
   • サーバーサイド アプリ（Java、Python など） - [承認済みのリダイレクト URI] で [URI を追加] をクリックします。次に、OAuth 2.0 サーバーがレスポンスを送信できるエンドポイント URI を入力します。
6. [作成] をクリックします。OAuth クライアントの作成画面が表示され、新しいクライアント ID とクライアント シークレットが表示されます。

   クライアント ID をメモします。クライアント シークレットはウェブ アプリケーションには使用されません。

7. [OK] をクリックします。新しく作成された認証情報が [OAuth 2.0 クライアント ID] に表示されます。

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() {
        // TODO(developer): 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 ライブラリを読み込みます。「 Google Picker ライブラリの後に onPickerApiLoad() コールバック関数が呼び出される 読み込むことができます

Google Picker を表示する

createPicker() 関数は、Google Picker API の読み込みが完了したことを確認します。 OAuth トークンが作成されたことを確認します。こちらの setAppId フィールドを使用して アプリがユーザーのファイルにアクセスできるようにする、ドライブのアプリ ID。この関数は、 Google Picker のインスタンスを作成して表示します。

    // Create and render a Google Picker object for selecting from Drive.
    function createPicker() {
      const showPicker = () => {
        // TODO(developer): Replace with your API key
        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: ''});
      }
    }
    

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

Picker オブジェクトは、一度に 1 つの View をレンダリングします。ビューを少なくとも 1 つ指定し、 ViewId（google.​picker.​ViewId.*）を使用するか、またはインスタンスの タイプ（google.​picker.​*View）。その他のビューをタイプ別に指定 ビューをどのようにレンダリングするかを 制御することもできます

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

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

Google Picker のコールバックは、Google Picker の 選択するか、[キャンセル] をクリックします。Response オブジェクトは、ユーザーの選択に関する情報を伝達します。

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

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

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

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

    let 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)
        .setCallback(pickerCallback)
        .build();
    

Google Picker の外観を調整する

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

次のコードサンプルは、この機能を使用したスプレッドシートの検索選択ツールの例です。

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

Google Picker を他の言語でレンダリングする

PickerBuilder にロケールを指定して UI 言語を指定する setLocale(locale)メソッドを使用します

次のコードサンプルは、ロケールをフランス語に設定する方法を示しています。

    let picker = new google.picker.PickerBuilder()
        .addView(google.picker.ViewId.IMAGE_SEARCH)
        .setLocale('fr')
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
    

現在サポートされている言語 / 地域は次のとおりです。