Google Picker は、Google ドライブに保存されている情報を表示する「ファイルを開く」ダイアログです。Google Picker には次の機能があります。
- Google ドライブ UI と類似のデザイン
- ドライブ ファイルのプレビューとサムネイルが表示されているビュー。
- インライン モーダル。ユーザーがメイン アプリを離れることはありません。
Google Picker API は、ウェブアプリでユーザーがドライブ ファイルを開いたりアップロードしたりするために使用できる JavaScript API です。
アプリケーションの要件
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 キーの制限を適用するをご覧ください。
ウェブ アプリケーションの認証情報を承認する
エンドユーザーとして認証し、アプリ内でユーザーデータにアクセスするには、OAuth 2.0 クライアント ID を 1 つ以上作成する必要があります。クライアント ID は、Google の OAuth サーバーで 1 つのアプリを識別するために使用されます。アプリを複数のプラットフォームで実行する場合は、プラットフォームごとに個別のクライアント 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 トークンが作成されることを確認します。この関数は、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)
.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 をレンダリングします。少なくとも 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 オブジェクトを受け取ります。このオブジェクトには、ユーザーが 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 をレンダリングする
setLocale(locale) メソッドを使用して PickerBuilder インスタンスにロケールを指定し、UI 言語を指定します。
次のコードサンプルは、言語 / 地域をフランス語に設定する方法を示しています。
let picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.IMAGE_SEARCH)
.setLocale('fr')
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
現在サポートされているロケールは次のとおりです。
afamarbgbncacs |
dadeelenen-GBeses-419 |
eteufafifilfrfr-CA |
glguhihrhuidis |
itiwjaknkoltlv |
mlmrmsnlnoplpt-BR |
pt-PTroruskslsrsv |
swtatethtrukur |
vizh-CNzh-HKzh-TWzu |