Google Picker アップローダを作る 🌴 officeの杜

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

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

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

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

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

事前準備

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();　
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();　

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側のコード

オプション

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

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

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

実行結果

関連記事

コメント

最近の投稿

人気の投稿とページ

おすすめ