GAS でファイルリストを自動生成

2020年3月29日 18:50

【この記事は Qiita から note に移行しました】

きっかけ

学校で導入している iPad のアプリガイドラインをいくつか作って配布しているんですが, これまでは配布ページにわざわざ HTML でタイトルとバージョンと URL を手入力で掲載していました. しかしある時, なんとかこれを自動できないかとふと思ったわけです.

GAS でできるで

- ガイドライン (PDF) を Google ドライブの特定のフォルダにアップロードしておく
- スクリプトの Web アプリ公開 URL にアクセスした時にそのフォルダ内のファイルの「名前」「説明 (ここにバージョン情報を記載)」「表示 URL」を取得して表示

ほなやってみよう (GAS 側)

1. HTML を出力
UI となる HTML を表示します. HTML Service を使うので、このように.

function doGet() {
  return HtmlService.createOutputFromFile("index")
                    .setTitle("マニュアルダウンロード")
                    .addMetaTag("viewport","width=device-width");
}

2. ファイル一覧を取得
DriveApp クラスを使ってファイル一覧を取得します. 特定のフォルダ直下にファイルを配置しているので, フォルダ ID はハードコーディングとなります.

function getList() {
  // フォルダ内のファイルを一括取得
  var files = DriveApp.getFolderById("<フォルダID>").getFiles();
  // 配列を宣言
  var contents = [];
  // ここから、配列に「名前」「説明」「URL」を入れていく
  while(files.hasNext()) {
    //一括取得したファイルの中から順に一つ取り出す
    var file = files.next();
    //「名前」「説明」「URL」をそれぞれ格納
    contents.push({
      name: file.getName(),
      version: file.getDescription(),
      url: file.getUrl()
    });
  }
  //得られた配列を返す
  return contents;
}

Folder.getFiles() や FileIterator.hasNext()、FileIterator.next()に関しては GAS入門 - DriveAppクラスリファレンスをご覧ください。

というわけで、このスクリプトで

[
  {
    name: "ファイル A のファイル名",
    version: "ファイル A のバージョン",
    url: "ファイル A の URL"
  }, {
    name: "ファイル B のファイル名",
    version: "ファイル B のバージョン",
    url: "ファイル B の URL"
  }, {
    name: "ファイル C のファイル名",
    ...
  }
]

みたいな配列が return されます.

UI の方

こんな HTML を書いてみます.

<!DOCTYPE HTML>
<html>
<head>
  <style>
    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      font-family: san-serif;
    }

    .list {
      border-bottom: 0.5px solid #999999;
    }
    .fileNameArea {
      font-size: 20px;
      color: #555555;
    }
    .fileDescArea {
      font-size: 15px;
      color: #666666;
    }
    a {
      text-decoration: none;
      color: #0033ff;
    }
    .urlArea {
      font-size: 15px;
      color: #0033ff;
    }
  </style>

  <script>
    // return される配列を引数として関数を実行
    const createList = items => {
      const listarea = document.getElementById("listArea");

      for(let item of items) {
        const list = document.createElement("div");
        list.className = "list";
      
        const name = document.createElement("div");
        name.className = "fileNameArea";
        name.innerText = item.name;
        list.appendChild(name);
      
        const version = document.createElement("div");
        version.innerText = item.version;
        version.className = "fileDescArea";
        version.innerText = item.version;
        list.appendChild(version);
      
        const url = document.createElement("div");
        url.className = "urlArea";
        url.innerHTML = `<a target="_blank" href="${item.url}">表示</a>`;
        list.appendChild(url);
      
        listarea.appendChild(list);
      }
    }

    //サーバ側の関数を呼び出し
    document.addEventListener("DOMContentLoaded", () => {
      google.script.run.withSuccessHandler(createList).getList();
    });
  </script>
</head>

<body>
  <div id='listArea'>読み込み中...</div>
</body>
</html>

おわり

ありがとうございました.