Google Picker アップローダを作る
Google Apps Scriptでアプリケーションを作る際に、ユーザからファイルをアップロードしてもらって、そのファイルを元に処理を行う(例えば、経理システムの吐き出したCSVファイルを取り込んで、データを整形するなど)ことがままあります。
そんな時、ユーザにいちいち「Google Driveにアップロードして」「そのファイルのIDを取得して」なんて作業は生産的とは言えません。また、そのファイルもユーザのドライブに各々アップロードしたものとなると、一元管理も難しくなります。そこで利用するのが、Google Picker APIで、これをアプリに組み込むと、アップローダにすることが可能です。
図:こんな感じのアップローダが作れる
目次
使用するファイル・参考資料等
事前準備
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側のコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<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> |
- 今回はアップローダであるため、ファイル選択用のViewではなく、google.picker.DocsUploadViewを指定し、アップロード専用のViewとしてロードします。
- アップロードしたファイルをループで回して、ファイル名とIDを結果として表示させています。
- キャンセルした場合には、メッセージを表示してダイアログを閉じるようにしています。
GAS側のコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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側はほとんど仕事はありません。ダイアログを表示する部分だけが重要な部分です。
- ダミーで「//DriveApp.addFile(“test”);」を入れて、一度権限実行しないと、Driveへの書き込み権限がスコープに入ってくれないので、必ず書き込みをする場合は含めておきましょう(でないと、readonlyになってしまう)
オプション
このアップローダはいろいろなオプションがDeveloper Guideを見ると用意されています。其の中で今回アップローダで有用なオプションがあります。
アップロードするファイル形式を制限
今回のスクリプトでは、アップロードするファイル形式は特に制限していません。しかし、画像のみに制限したいなどといった要望が出てくると思います。その場合、uploadviewに対して以下のコードに変更すると制限が可能です。この場合、ファイル形式のMIMETYPEが必要になります。今回はjpeg画像に限定してみましょう。
jpeg画像のMIMETYPEはimage/jpgとなります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
//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オプションを外すとアップロード時にフォルダを選択することが可能になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//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 Picker アップローダを作る” に対して1件のコメントがあります。