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

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

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

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

事前準備

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

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

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

ソースコード

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

HTML側のコード

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

GAS側のコード

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

オプション

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

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

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

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

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

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

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

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

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

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

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

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

実行結果

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

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

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

共有してみる: