Google Picker API – Google Workspace API Demo

このサンプルでは、Google ドライブのファイルを選択するための Picker API の使い方を紹介します。
ここで扱うサンプルソースコードはこちら（github.com）からダウンロードできます。

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 ) {
                // ...
            }
       }
}