Google Picker は、Google ドライブに保存されている情報の「File Open」ダイアログです。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 キー制限を適用するをご覧ください。
ウェブ アプリケーションの認証情報を承認する
エンドユーザーとして認証し、アプリ内のユーザーデータにアクセスするには、1 つ以上の OAuth 2.0 クライアント ID を作成する必要があります。クライアント 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 を入力します。
- [CREATE] をクリックします。OAuth クライアント作成画面が表示され、新しいクライアント ID とクライアント シークレットが表示されます。
クライアント ID をメモします。クライアント シークレットはウェブ アプリケーションでは使用されません。
- [OK] をクリックします。新しく作成された認証情報は、[OAuth 2.0 クライアント ID] に表示されます。
- （省略可）JavaScript クイックスタートの前提条件として認証情報を作成する場合は、API キーを生成する必要もあります。
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: 'YOUR_CLIENT_ID',
scope: 'YOUR_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>
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('YOUR_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 インスタンスを作成するには、成功時に呼び出す View、oauthToken、developerKey、コールバック関数（pickerCallback）を指定する必要があります。
Picker オブジェクトは一度に 1 つの View をレンダリングします。少なくとも 1 つのビューを指定するには、ViewId（google.picker.ViewId.*）を使用するか、特定のタイプのインスタンス（google.picker.*View）を作成します。ビューのレンダリング方法をより詳細に制御するには、タイプ別にビューを指定します。
Google Picker に複数のビューが追加されている場合、ユーザーは左側のタブをクリックして、あるビューから別のビューに切り替えることができます。タブは、ViewGroup オブジェクトを使用して論理的にグループ化できます。
Picker コールバックを実装する
Picker コールバックは、ファイルの選択やキャンセルの押下など、Google Picker でのユーザー操作に応答できます。
// 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）が含まれます。ユーザーがアイテムを選択すると、google.picker.Response.DOCUMENTS 配列にもデータが入力されます。この例では、メインページに google.picker.Document.URL が表示されています。データ フィールドの詳細については、JSON リファレンスをご覧ください。
特定のファイル形式をフィルタする
特定のアイテムを除外する方法として、ViewGroup を使用します。次の例では、「Google Drive」サブビューにドキュメントとプレゼンテーションのみが表示されています。
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 の外観を変更する
PickerBuilder.enableFeature() 関数を使用して、Google Picker ウィンドウの外観を微調整します。たとえば、ビューが 1 つしかない場合は、ナビゲーション ペインを非表示にして、ユーザーがアイテムを表示するスペースを広げることができます。以下は、この機能を説明するスプレッドシート検索選択ツールの例です。
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();
現在サポートされているロケールは次のとおりです。
afamarbgbncacs |
dadeelenen-GBeses-419 |
eteufafifilfrfr-CA |
glguhihrhuidis |
itiwjaknkoltlv |
mlmrmsnlnoplpt-BR |
pt-PTroruskslsrsv |
swtatethtrukur |
vizh-CNzh-HKzh-TWzu |