![見出し画像](https://assets.st-note.com/production/uploads/images/21797563/rectangle_large_type_2_42d9c0a19c4c8120f3ddc6ba2e8da35e.png?width=1200)
GAS でファイルリストを自動生成
【この記事は 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>
おわり
ありがとうございました.
この記事が気に入ったらサポートをしてみませんか?