Google Picker アップローダを作る

Google Apps Scriptでアプリケーションを作る際に、ユーザからファイルをアップロードしてもらって、そのファイルを元に処理を行う（例えば、経理システムの吐き出したCSVファイルを取り込んで、データを整形するなど）ことがままあります。

そんな時、ユーザにいちいち「Google Driveにアップロードして」「そのファイルのIDを取得して」なんて作業は生産的とは言えません。また、そのファイルもユーザのドライブに各々アップロードしたものとなると、一元管理も難しくなります。そこで利用するのが、Google Picker APIで、これをアプリに組み込むと、アップローダにすることが可能です。

図：こんな感じのアップローダが作れる

難易度：

リンク

1 使用するファイル・参考資料等
2 事前準備
3 ソースコード
4 実行結果
- 4.1 関連記事

使用するファイル・参考資料等

事前準備

Picker APIはGoogle Apps Scriptの為に用意されているライブラリではありませんが、JavaScriptからは利用できます。使う為にはデベロッパーキー（APIキー）が必要となるので、事前準備が必要です。事前準備の手順は以下の通りです。

スプレッドシートのメニューより、「ツール」⇒「スクリプトエディタ」を開きます。
メニューより「リソース」⇒「Googleの拡張サービス」を開きます。
ダイアログの下のほうにある「Google Cloud Platform API ダッシュボード」をクリック
Google Cloud Platformが開かれるので、「APIとサービスの有効化」をクリック
「Picker API」を検索しクリックします。
有効化をクリックします。
引き続き、「認証情報を作成」をクリックします。
認証情報ウィザードが開かれます。使用するAPIでは、Picker APIを選択します。
「必要な認証情報」をクリックすると、APIキーが手に入ります。これで準備完了。コピーしておきましょう。
スクリプトエディタに戻り、OKを押して終了します。

図：Picker APIは活用範囲が広いです。

ソースコード

コピーしておいたAPIキーはソースコード内に記述が必要です。また、アップロード先のフォルダのIDも事前に取得しておき、ソースコード内に記述が必要です。

HTML側のコード

<link href="https://ssl.gstatic.com/docs/script/css/add-ons.css" rel="stylesheet" />
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>

<script type="text/javascript">
  var DEVELOPER_KEY = 'ここにAPIキーを記述する';
  var DIALOG_DIMENSIONS = {width: 750, height: 450};
  var pickerApiLoaded = false;
  var origin = google.script.host.origin;
  var parent = "ここにアップロード先フォルダのIDを記述する";
 
  //Google Picker API呼び出し
  gapi.load('picker', {'callback': function() {
    pickerApiLoaded = true;
  }});
 
  //ドラッグエリアを表示する
 　google.script.run.withSuccessHandler(createPicker).withFailureHandler(showError).getOAuthToken();
 
  //Picker Dialogを表示する
  function createPicker(token) {
    if (pickerApiLoaded && token) {
      var uploadView  = new google.picker.DocsUploadView().setParent(parent);;
            
      var picker = new google.picker.PickerBuilder()
            .addView(uploadView)
            .hideTitleBar()
            .setOAuthToken(token)
            .setOrigin(origin)
            .setLocale("ja")
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
            .setDeveloperKey(DEVELOPER_KEY)
            .setCallback(pickerCallback)
            .setSize(DIALOG_DIMENSIONS.width - 10,
                     DIALOG_DIMENSIONS.height -10)
            .build();
      picker.setVisible(true);
    } else {
      showError('Pickerをロード出来ませんでした。');
    }
  }
 
  //Callbackデータを受け取る
  function pickerCallback(data) {
    if (data.action == google.picker.Action.PICKED) {
      var length = data.docs.length;
      var urlbase;
      
      for(var i = 0;i<length;i++){
        var fileId = data.docs[i].id;
        var url = data.docs[i].url;
        var title = data.docs[i].name;
        
        //アップロード完了メッセージ 
        urlbase = "https://drive.google.com/file/d/" + fileId + "/view?usp=sharing"
        document.getElementById('result').innerHTML +=
            '<b>アップロードしたファイル:</b><br />ファイル名: <a href="' + urlbase + '" target="_blank">' + title + '</a><br />ID: ' + fileId + '<br>';
      }
    } else if (data.action == google.picker.Action.CANCEL) {
      google.script.run.messager("アップロードはキャンセルされました。");
    }
  }
 
  //エラー表示用
  function showError(message) {
    document.getElementById('result').innerHTML = 'Error: ' + message;
  }
</script>

<div id = "result"></div>

var DEVELOPER_KEY = 'ここにAPIキーを記述する';

var DIALOG_DIMENSIONS = {width: 750, height: 450};

var pickerApiLoaded = false;

var origin = google.script.host.origin;

var parent = "ここにアップロード先フォルダのIDを記述する";

//Google Picker API呼び出し

gapi.load('picker', {'callback': function() {

pickerApiLoaded = true;

}});

//ドラッグエリアを表示する

　google.script.run.withSuccessHandler(createPicker).withFailureHandler(showError).getOAuthToken();

//Picker Dialogを表示する

function createPicker(token) {

if (pickerApiLoaded && token) {

var uploadView = new google.picker.DocsUploadView().setParent(parent);;

var picker = new google.picker.PickerBuilder()

.addView(uploadView)

.hideTitleBar()

.setOAuthToken(token)

.setOrigin(origin)

.setLocale("ja")

.enableFeature(google.picker.Feature.NAV_HIDDEN)

.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)

.setDeveloperKey(DEVELOPER_KEY)

.setCallback(pickerCallback)

.setSize(DIALOG_DIMENSIONS.width - 10,

DIALOG_DIMENSIONS.height -10)

.build();

picker.setVisible(true);

} else {

showError('Pickerをロード出来ませんでした。');

}

//Callbackデータを受け取る

function pickerCallback(data) {

if (data.action == google.picker.Action.PICKED) {

var length = data.docs.length;

var urlbase;

for(var i = 0;i<length;i++){

var fileId = data.docs[i].id;

var url = data.docs[i].url;

var title = data.docs[i].name;

//アップロード完了メッセージ

urlbase = "https://drive.google.com/file/d/" + fileId + "/view?usp=sharing"

document.getElementById('result').innerHTML +=

'<b>アップロードしたファイル:</b><br />ファイル名: <a href="' + urlbase + '" target="_blank">' + title + '</a><br />ID: ' + fileId + '<br>';

}

} else if (data.action == google.picker.Action.CANCEL) {

google.script.run.messager("アップロードはキャンセルされました。");

}

//エラー表示用

function showError(message) {

document.getElementById('result').innerHTML = 'Error: ' + message;

}

</script>

今回はアップローダであるため、ファイル選択用のViewではなく、google.picker.DocsUploadViewを指定し、アップロード専用のViewとしてロードします。
アップロードしたファイルをループで回して、ファイル名とIDを結果として表示させています。
キャンセルした場合には、メッセージを表示してダイアログを閉じるようにしています。

GAS側のコード

function onOpen(e) {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('▼あぷろだ')
      .addItem('アップローダ', 'fileman')
      .addToUi();
}

function fileman() {
  var html = HtmlService.createHtmlOutputFromFile('Picker.html')
      .setWidth(750).setHeight(480);
  SpreadsheetApp.getUi().showModalDialog(html, 'ファイルアップローダ');
}

//Access Tokenを取得する
function getOAuthToken() {
  DriveApp.getRootFolder();　
  //DriveApp.addFile("test");
  return ScriptApp.getOAuthToken();
}

//エラーメッセージの表示
function messager(msg){
  var ui = SpreadsheetApp.getUi();
  ui.alert(msg);
}

function onOpen(e) {

var ui = SpreadsheetApp.getUi();

ui.createMenu('▼あぷろだ')

.addItem('アップローダ', 'fileman')

.addToUi();

}

function fileman() {

var html = HtmlService.createHtmlOutputFromFile('Picker.html')

.setWidth(750).setHeight(480);

SpreadsheetApp.getUi().showModalDialog(html, 'ファイルアップローダ');

}

//Access Tokenを取得する

function getOAuthToken() {

DriveApp.getRootFolder();　

//DriveApp.addFile("test");

return ScriptApp.getOAuthToken();

}

//エラーメッセージの表示

function messager(msg){

var ui = SpreadsheetApp.getUi();

ui.alert(msg);

}

今回、GAS側はほとんど仕事はありません。ダイアログを表示する部分だけが重要な部分です。

オプション

このアップローダはいろいろなオプションがDeveloper Guideを見ると用意されています。其の中で今回アップローダで有用なオプションがあります。

アップロードするファイル形式を制限

今回のスクリプトでは、アップロードするファイル形式は特に制限していません。しかし、画像のみに制限したいなどといった要望が出てくると思います。その場合、uploadviewに対して以下のコードに変更すると制限が可能です。この場合、ファイル形式のMIMETYPEが必要になります。今回はjpeg画像に限定してみましょう。

jpeg画像のMIMETYPEはimage/jpgとなります。

//Picker Dialogを表示する
  function createPicker(token) {
    //画像に限定する
    var mimeman = "image/jpg";
    if (pickerApiLoaded && token) {
      var uploadView  = new google.picker.DocsUploadView().setParent(parent).setMimeTypes(mimeman);
     
      var picker = new google.picker.PickerBuilder()
            .addView(uploadView)
            .hideTitleBar()
            .setOAuthToken(token)
            .setOrigin(origin)
            .setLocale("ja")
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
            .setDeveloperKey(DEVELOPER_KEY)
            .setCallback(pickerCallback)
            .setSize(DIALOG_DIMENSIONS.width - 10,
                     DIALOG_DIMENSIONS.height -10)
            .build();
      picker.setVisible(true);
    } else {
      showError('Pickerをロード出来ませんでした。');
    }
  }

//Picker Dialogを表示する

function createPicker(token) {

//画像に限定する

var mimeman = "image/jpg";

if (pickerApiLoaded && token) {

var uploadView = new google.picker.DocsUploadView().setParent(parent).setMimeTypes(mimeman);

var picker = new google.picker.PickerBuilder()

.addView(uploadView)

.hideTitleBar()

.setOAuthToken(token)

.setOrigin(origin)

.setLocale("ja")

.enableFeature(google.picker.Feature.NAV_HIDDEN)

.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)

.setDeveloperKey(DEVELOPER_KEY)

.setCallback(pickerCallback)

.setSize(DIALOG_DIMENSIONS.width - 10,

DIALOG_DIMENSIONS.height -10)

.build();

picker.setVisible(true);

} else {

showError('Pickerをロード出来ませんでした。');

}

uploadViewのPickerに対して、setMimeTypes(mimeman)として、MIMETYPE制限を加えています。

ファイルは複数アップロードさせないようにする

今回のアップローダは複数ファイルを一気にアップロードできるようになっています。しかし、プログラム作成上これでは都合が悪い場合もあります。其の場合には、以下のコードをコメントアウトもしくは削除することで、単一アップロードとなり、ファイルを選択時にすぐにアップロードが開始されるようにもなります。

enableFeature(google.picker.Feature.MULTISELECT_ENABLED);　をコメントアウト

アップロードするフォルダを選択する

今回のアップローダはアップロード先フォルダは固定にしてあります。しかし、一方でアップロード先フォルダが選択できたほうが良いケースもあるでしょう。其の場合には以下のようなコードに変更し、setParentオプションを外すとアップロード時にフォルダを選択することが可能になります。

  //Picker Dialogを表示する
  function createPicker(token) {
    //画像に限定する
    if (pickerApiLoaded && token) {
      var uploadView  = new google.picker.DocsUploadView().setIncludeFolders(true);

      var picker = new google.picker.PickerBuilder()
            .addView(uploadView)
            .hideTitleBar()
            .setOAuthToken(token)
            .setOrigin(origin)
            .setLocale("ja")
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
            .setDeveloperKey(DEVELOPER_KEY)
            .setCallback(pickerCallback)
            .setSize(DIALOG_DIMENSIONS.width - 10,
                     DIALOG_DIMENSIONS.height -10)
            .build();
      picker.setVisible(true);
    } else {
      showError('Pickerをロード出来ませんでした。');
    }
  }

//Picker Dialogを表示する

function createPicker(token) {

//画像に限定する

if (pickerApiLoaded && token) {

var uploadView = new google.picker.DocsUploadView().setIncludeFolders(true);

var picker = new google.picker.PickerBuilder()

.addView(uploadView)

.hideTitleBar()

.setOAuthToken(token)

.setOrigin(origin)

.setLocale("ja")

.enableFeature(google.picker.Feature.NAV_HIDDEN)

.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)

.setDeveloperKey(DEVELOPER_KEY)

.setCallback(pickerCallback)

.setSize(DIALOG_DIMENSIONS.width - 10,

DIALOG_DIMENSIONS.height -10)

.build();

picker.setVisible(true);

} else {

showError('Pickerをロード出来ませんでした。');

}

setIncludeFoldersをTrueとしてuploadViewにオプションを追加するだけ。

図：左上にフォルダ選択ボタンが出現する。

実行結果

スプレッドシートのメニューより「あぷろだ」⇒「アップロード」で実行できます。以下の手順でファイルがアップロードされている事を確認しましょう。

実行するとダイアログが表示されます。
ファイルを選ぶか？掴んでダイアログにドラッグアンドドロップする
アップロードボタンを押すと指定したフォルダにファイルがアップロードされます。
指定したフォルダを開いてみて、無事にアップロードされているか確認。

図：アップロード中画面。

共有してみる：

投稿タグ: google apps script, Picker API, アップローダ

MENU

Google Picker アップローダを作る

使用するファイル・参考資料等

事前準備

ソースコード

HTML側のコード

GAS側のコード

オプション

アップロードするファイル形式を制限

ファイルは複数アップロードさせないようにする

アップロードするフォルダを選択する

実行結果

関連記事

コメント

コメントを残すコメントをキャンセル

検索

最近の投稿

表示数

G Suite関連リンク

目次

スポンサーリンク

MENU

Google Picker アップローダを作る

使用するファイル・参考資料等

事前準備

ソースコード

HTML側のコード

GAS側のコード

オプション

アップロードするファイル形式を制限

ファイルは複数アップロードさせないようにする

アップロードするフォルダを選択する

実行結果

関連記事

コメント

コメントを残す コメントをキャンセル

検索

最近の投稿

表示数

G Suite関連リンク

目次

スポンサーリンク

コメントを残すコメントをキャンセル