GASのWebアプリケーションでGoogleDriveのフォルダ一覧をSelectBoxで出力する

CTO室情報システム担当の吉澤です！

GoogleDriveを操作をする際に、SelectBoxの項目を動的にDrive内からとってくると視覚的に扱いやすいと思い、GASのWebアプリケーションを利用したツールを作成しました。

公式のHtmlServiceクラスのcreateHtmlOutput()を使うと表示できたので、メモとして残します。

developers.google.com

今回はこのマイフォルダの中にあるフォルダのリストをWebアプリケーション上のSelectBoxで選択できるようにします。

f:id:wakanayoshizawa:20200715233123p:plain

Webアプリケーションを開いた時はfunction doGet()を実行します。 createHtmlOutput()で全てのHTMLを上書きしてしまうため、 html内の特定のワードをreplaceしたものを引数として渡します。今回は<putFolderSelectBox>に生成したSelectBoxのHTMLを渡して表示します。

コード.gs

function doGet() {
  return HtmlService.createHtmlOutput(this.setSelectBox());
}

function setSelectBox(){
  var html = HtmlService.createHtmlOutputFromFile('index').getContent();
  var lists = this.ls();
  var select = '<select name="folderId">';
  for (list of lists){
    select += '<option value="' + list[0] + '">' + list[1] + '</option>';
  }
  select += '</select>';
  return html.replace('<putFolderSelectBox>', select);
}

function ls() {
  var currentFolder = DriveApp.getFolderById('フォルダID');
  var folders = currentFolder.getFolders();
  var files = [];
  while(folders.hasNext()) {
    var folder = folders.next();
    files.push([folder.getId(), folder.getName()]);
  }
  return files;
}

DriveApp.getFolderById();に入れるフォルダIDは、Driveもしくはフォルダにアクセスし、URLからコピペします。

f:id:wakanayoshizawa:20200715232021p:plain

getFolders()でフォルダのListが取れるので、hasNext()で回し、ファイルのIDと名前を取得し、 SelectBoxのHTMLのValueと選択肢に当てはめていきます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <putFolderSelectBox>
  </body>
</html>

HTML内のReplaceしたいところに<putFolderSelectBox>を入力します。

f:id:wakanayoshizawa:20200715232032p:plain

公開からWebアプリケーションとして導入を選択します。

このようにフォルダ一覧がSelectBoxとして表示されました。

f:id:wakanayoshizawa:20200715232052p:plain

f:id:wakanayoshizawa:20200715232102p:plain

Selectで選択したものを受け取る場合は、 Formで囲んで、action先はWebアプリケーションのURLに、コード.gs内でdoPost() を用意すると、引数で受け取ることができます。

GASはまだ慣れていないのですが、Driveの情報をHTMLで視覚的に表現ができるのは便利でいいですね👍