【そのまま使える】Google Apps Scriptでスプレッドシートにカスタムメニューを追加する Vol.3 〜 Google Pickerでアップローダーを作る 〜

こんにちは！KCompany代表のケータです！

昨日「【そのまま使える】スプレッドシートにカスタムメニューを追加する Vol.2」の記事を公開しました。本日は、さらにそれをバージョンアップさせたバージョンです！

今回追加したのはGoogle Pickerを用いてGoogle Drive内のファイルを選択できるというものです。GASでユーザー側でファイルを指定する際などに使えそうですね。

なお、今回のサンプルだと、「アップローダー」という表示はしているものの選択したファイルの情報を表示するのみである点にご注意ください。

Google Apps Scriptでスプレッドシートにカスタムメニューを追加するスクリプトの動作イメージ

以下のように「ファイルオープンダイアログ」のメニューを追加しました。
クリックすると、ポップアップ画面が表示され、GoogleDrive内のファイルを選択することができるようになります。

Google Apps Scriptでスプレッドシートにカスタムメニューを追加する事前準備

Google Pickerを使うにはGCP(Google Cloud Platform)でPiker APIを有効にしてAPI Keyを取得する必要があります。私は大まかに以下のような手順で設定しました。

1. GCPのコンソール画面を開く
2. 新しいプロジェクトを作成する
3. Pikcer APIを有効にする
4. 認証情報を作成する画面からAPI Keyを作成する
5. API Keyをコードに反映する

公式ドキュメントの1-8の手順に沿ってやれば問題ないと思います。

注意点

上記公式ドキュメントには落とし穴が一点あり、掲載されているソースコードのままだと動作しません。どうも最近Google側の仕様が変わった関係なのか自作したgetOrigin()関数を用いてURLを整形する必要があるようです。

修正前

    function createPicker(token) {
     if (pickerApiLoaded && token) {
       var picker = new google.picker.PickerBuilder()
           // Instruct Picker to display only spreadsheets in Drive. For other
           // views, see https://developers.google.com/picker/docs/#otherviews
           .addView(google.picker.ViewId.SPREADSHEETS)
           // Hide the navigation panel so that Picker fills more of the dialog.
           .enableFeature(google.picker.Feature.NAV_HIDDEN)
           // Hide the title bar since an Apps Script dialog already has a title.
           .hideTitleBar()
           .setOAuthToken(token)
           .setDeveloperKey(DEVELOPER_KEY)
           .setCallback(pickerCallback)
           .setOrigin(google.script.host.origin)
           // Instruct Picker to fill the dialog, minus 2 pixels for the border.
           .setSize(DIALOG_DIMENSIONS.width - 2,
               DIALOG_DIMENSIONS.height - 2)
           .build();
       picker.setVisible(true);
     } else {
       showError('Unable to load the file picker.');
     }
   }

修正後

    function createPicker(token) {
     // Logger.log("createPicker")
     if (pickerApiLoaded && token) {
       // Logger.log("pickerApiLoaded && token")
       var picker = new google.picker.PickerBuilder()
           // Instruct Picker to display only spreadsheets in Drive. For other
           // views, see https://developers.google.com/picker/docs/#otherviews
           .addView(google.picker.ViewId.SPREADSHEETS)
           // Hide the navigation panel so that Picker fills more of the dialog.
           .enableFeature(google.picker.Feature.NAV_HIDDEN)
           // Hide the title bar since an Apps Script dialog already has a title.
           .hideTitleBar()
           .setOAuthToken(token)
           .setDeveloperKey(DEVELOPER_KEY)
           .setCallback(pickerCallback)
           .setOrigin(getOrigin(google.script.host.origin))
           // Instruct Picker to fill the dialog, minus 2 pixels for the border.
           .setSize(DIALOG_DIMENSIONS.width - 2,
               DIALOG_DIMENSIONS.height - 2)
           .build();
       picker.setVisible(true);
     } else {
       // Logger.log("!pickerApiLoaded && token")
       showError('ファイルピッカーを読み込みできませんでした');
     }
   }

   function getOrigin() {
     var url = google.script.host.origin;
     return url.substr(url.length - 1) === "/" ? url.substr(0, url.length - 1) : url;
   }

Google Apps Scriptでスプレッドシートにカスタムメニューを追加するスクリプトを実際に使うには

ここまで読んでくださって、実際に使ってみたい！という方がいらっしゃいましたら、以下からぜひご利用いただければ幸いです。閲覧用のファイルを用意してますので、そちらをコピーし、ご自身の環境にてご利用いただくイメージになります。

Google Apps Scriptでスプレッドシートにカスタムメニューを追加するスクリプトへのアクセス

こちらからアクセスをお願いします。

アクセス後にご自身の環境でご利用頂くには、以下の記事を参考に設定をお願いいたします。

・Google Apps Script(GAS)の設定を有効にしてアプリケーションを使う方法
・GAS利用時にonOpenなどのSimple Triggersを有効にする方法

参考

公式サイトの以下のページを参考にしました。

・File-open dialogs
・The Google Picker API
・Google Picker API Invalid origin value error
・Google Picker アップローダを作る
・Google Pickerを使ってWebサイトのUXを向上させよう

【お仕事のご依頼について】

こちらの記事に記載した内容以外にも、Google Apps Script開発やGoogle Workspaceを活用したデジタル化推進のお仕事を行っています。【GAS】そのまま使えるシリーズのカスタマイズのご相談ももちろん大丈夫です。
ちょっとしたお困りごとでも、こちらのサイトのお問い合わせフォームからご連絡いただければ、折り返しご連絡いたします。