Google Picker API は、ウェブアプリでユーザーが Google ドライブ ファイルを選択またはアップロードできるようにする JavaScript API です。ユーザーはアプリにドライブデータへのアクセス権限を付与できるため、安全かつ承認済みの方法でファイルを操作できるようになります。
Google Picker は、ドライブに保存されている情報を表示する「ファイルを開く」ダイアログとして機能し、次の機能を備えています。
- Google ドライブの UI に似たデザイン。
- ドライブ ファイルのプレビューとサムネイル画像を示す複数のビュー。
- インライン モーダル ウィンドウ。ユーザーがメイン アプリケーションから離れることはありません。
Google Picker では、フォルダ間でファイルを整理、移動、コピーすることはできません。これを行うには、Google Drive API またはドライブ UI を使用します。
アプリケーションの要件
Google Picker を使用するアプリケーションは、既存のすべての利用規約に準拠している必要があります。最も重要なことは、リクエストでユーザーを正しく識別する必要があることです。
また、Google Cloud プロジェクトも必要です。環境を設定する
Google Picker API の使用を開始するには、環境を設定する必要があります。
API を有効にする
Google API を使用する前に、Google Cloud プロジェクトで API を有効にする必要があります。1 つの Google Cloud プロジェクトで 1 つ以上の API を有効にできます。
Google Cloud コンソールで、Google Picker API を有効にします。
API キーを作成する
API キーは、大文字、小文字、数字、アンダースコア、ハイフンを含む長い文字列です(例: AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe
)。この認証方法は、一般公開データに匿名でアクセスするために使用します。たとえば、「このリンクを知っているインターネット上の全員」という共有設定を使用して共有された Google Workspace のファイルなどです。詳細については、API キーを使用して認証するをご覧ください。
API キーを作成するには:
- Google Cloud コンソールで、メニュー > [API とサービス] > [認証情報] に移動します。
- [認証情報を作成] > [API キー] をクリックします。
- 新しい API キーが表示されます。
- [コピー] をクリックして、アプリのコードで使用する API キーをコピーします。API キーは、プロジェクトの認証情報の「API キー」セクションでも確認できます。
- [キーを制限] をクリックして詳細設定を更新し、API キーの使用を制限します。詳しくは、API キーの制限の適用をご覧ください。
ウェブ アプリケーションの認証情報を承認する
エンドユーザーを認証し、アプリ内でユーザーデータにアクセスするには、1 つ以上の OAuth 2.0 クライアント ID を作成する必要があります。クライアント ID は、Google の OAuth サーバーで個々のアプリを識別するために使用します。アプリが複数のプラットフォームで実行される場合は、プラットフォームごとに個別のクライアント ID を作成する必要があります。
- Google Cloud コンソールで、メニュー > [API とサービス] > [認証情報] に移動します。
- [認証情報を作成] > [OAuth クライアント ID] をクリックします。
- [アプリケーションの種類] > [ウェブ アプリケーション] をクリックします。
- [名前] フィールドに、認証情報の名前を入力します。この名前は Google Cloud コンソールにのみ表示されます。
- アプリに関連する承認済み URI を追加します。
- クライアントサイド アプリ(JavaScript) - [承認済みの JavaScript 生成元] で [URI を追加] をクリックします。次に、ブラウザ リクエストに使用する URI を入力します。アプリケーションが OAuth 2.0 サーバーに API リクエストを送信できるドメインを指定します。
- サーバーサイド アプリ(Java、Python など) - [承認済みのリダイレクト URI] で、[URI を追加] をクリックします。次に、OAuth 2.0 サーバーがレスポンスを送信できるエンドポイント URI を入力します。
- [作成] をクリックします。[OAuth クライアントの作成] 画面に、新しいクライアント ID とクライアント シークレットが表示されます。
クライアント ID をメモします。クライアント シークレットはウェブ アプリケーションには使用されません。
- [OK] をクリックします。新しく作成された認証情報が [OAuth 2.0 クライアント ID] に表示されます。
Picker
オブジェクトの作成時に、アプリケーションは、非公開のユーザーデータにアクセスするビューを含む OAuth 2.0 アクセス トークンを送信する必要があります。アクセス トークンをリクエストするには、OAuth 2.0 を使用した Google API へのアクセスをご覧ください。Google Picker を表示する
このガイドの残りの部分では、ウェブアプリから Google Picker を読み込んで表示する方法について説明します。完全なサンプルを表示するには、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 ライブラリを読み込みます。onPickerApiLoad()
コールバック関数は、Google Picker ライブラリが正常に読み込まれた後に呼び出されます。
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 インスタンスを作成するには、PickerBuilder
を使用して Picker
オブジェクトを作成する必要があります。PickerBuilder
は、View
、OAuth トークン、デベロッパー キー、成功時に呼び出すコールバック関数(pickerCallback
)を受け取ります。
Picker
オブジェクトは、一度に 1 つの View
をレンダリングします。ViewId
(google.picker.ViewId.*
)または型のインスタンス(google.picker.*View
)を使用して、少なくとも 1 つのビューを指定します。タイプごとにビューを指定すると、ビューのレンダリング方法をさらに制御できます。
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
オブジェクトを受け取ります。このオブジェクトには、ユーザーが Google Picker(google.picker.Response.ACTION
)を使用して実行する 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();有効なビュータイプの一覧については、
ViewId
をご覧ください。
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 を他の言語でレンダリングする
UI 言語を指定するには、setLocale(locale)
メソッドを使用して PickerBuilder
インスタンスにロケールを指定します。
次のコードサンプルは、ロケールをフランス語に設定する方法を示しています。
let picker = new google.picker.PickerBuilder() .addView(google.picker.ViewId.IMAGE_SEARCH) .setLocale('fr') .setDeveloperKey(developerKey) .setCallback(pickerCallback) .build();
現在サポートされている言語 / 地域は次のとおりです。
af am ar bg bn ca cs |
da de el en en-GB es es-419 |
et eu fa fi fil fr fr-CA |
gl gu hi hr hu id is |
it iw ja kn ko lt lv |
ml mr ms nl no pl pt-BR |
pt-PT ro ru sk sl sr sv |
sw ta te th tr uk ur |
vi zh-CN zh-HK zh-TW zu |