Google Picker API
このサンプルでは、Google ドライブのファイルを選択するための Picker API の使い方を紹介します。
ここで扱うサンプル ソースコードは こちら(github.com) からダウンロードできます。
アプリサンプル Picker を表示する
Google ドライブからのファイル選択
ファイルの選択ダイアログ
Webページに、Google API の JavaScript ファイルをロードします。
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
ボタンをクリックしたら API の初期化を行います。
※ 2回目 以降のクリック時は初期化は行いません。
function showPicker() {
// 初期化が完了していれば、Picker生成
if (pickerApiLoaded && oauthToken) {
createPicker();
return;
}
// Auth未初期化の場合は初期化
if ( !oauthToken ) {
gapi.load('auth', {'callback': onAuthApiLoad});
}
// Picker API 未ロードの場合はロード
if ( !pickerApiLoaded ) {
gapi.load('picker', {'callback': onPickerApiLoad});
}
}
Auth の初期化
function onAuthApiLoad() {
// Auth初期化
window.gapi.auth.authorize( {
'client_id': clientId,
'scope': scope,
'immediate': false
}, function(authResult) {
if (authResult && !authResult.error) {
// 取得したアクセストークンを保持
oauthToken = authResult.access_token;
// 初期化が完了したら、Picker 生成
createPicker();
}
});
}
Picker の初期化
function onPickerApiLoad() {
// Picker APIがロードされたらフラグを立てる
pickerApiLoaded = true;
// ロードが完了したら、Picker 生成
createPicker();
}
2つの API が 初期化されたら Picker を表示します。
function createPicker() {
// 初期化が完了していればPicker生成
if (pickerApiLoaded && oauthToken) {
let picker = new google.picker.PickerBuilder().
addView(google.picker.ViewId.DOCS).
setOAuthToken(oauthToken).
setDeveloperKey(developerKey).
setCallback(pickerCallback).
build();
// Picker表示
picker.setVisible(true);
}
}
ファイルの選択
Picker で選択されたファイルを、 Callback 関数で受け取ります。
function pickerCallback(data) {
let url = 'nothing';
document.getElementById('picker_result').innerHTML = '';
if (data.action == 'picked' ) {
let doc = data.docs[0];
if ( doc ) {
// ...
}
}
}