GAS│画像リンク付きHTMLリストをスプレッドシートから自動生成する方法

2025年5月29日

Googleドライブに保存された画像を使って、画像付き一覧表をHTMLで自動生成したいと思ったことはありませんか？

今回は、Googleスプレッドシートを元に、GAS（Google Apps Script）で画像リストをHTML化し、ドライブやWEBアプリとして公開する方法を紹介します。

スプレッドシートを作成

まず、以下のようにスプレッドシートを用意します。

A列：名前
B列：画像リンク（Googleドライブ画像の直接URL）
C列：画像の参照元URL
D列：コメントなど備考

画像リンクの形式に注意

Googleドライブの画像URLは通常このような形式です：

https://drive.google.com/open?id=xxxxxxxxx

このままでは画像として表示されないので、以下のように変換します：

https://drive.google.com/uc?export=view&id=xxxxxxxxx

uc?export=view&id= に変えることで、<img> タグで参照可能になります。

GAS：HTMLファイルの準備

スクリプトエディタで、HTMLファイルを2つ作成します

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画像一覧</title>
  <?!= include('css'); ?>
</head>
<body>
  <table border="1">
    <tr>
      <th>画像</th><th>名前</th><th>備考</th>
    </tr>
    <? productData.forEach(function(option) { ?>
      <tr>
        <td><a href="<?= option[2] ?>"><img src="<?= option[1] ?>"></a></td>
        <td><?= option[0] ?></td>
        <td><?= option[3] ?></td>
      </tr>
    <? }); ?>
  </table>
</body>
</html>

css.html

<style>
table {
  border-collapse: collapse;
}
table th, table td {
  border: solid 1px black;
}
img {
  width: 150px;
  height: 150px;
}
</style>

GAS：出力スクリプト（GoogleドライブにHTML保存）

function exportHTML() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("シート1");
  var count = sheet.getLastRow() - 1;
  var html = HtmlService.createTemplateFromFile('index');
  html.productData = sheet.getRange(2, 1, count, 4).getValues();
  
  var outputFolder = DriveApp.getFolderById("出力先のドライブID");
  var date = new Date();
  outputFolder.createFile("画像一覧_" + Utilities.formatDate(date, "Asia/Tokyo", "yyMMdd"), html.evaluate().getContent(), MimeType.HTML);
}

さらに、メニューからスクリプトを呼び出す処理も追加します：

function onOpen() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  sheet.addMenu("HTMLファイル出力", [
    {name : "HTMLファイル出力", functionName : "exportHTML"}
  ]);
}

表示例（HTML Viewer）

出力されたHTMLはドライブ上で確認可能です。

「HTML Viewer」で開けば、表形式で画像リストを閲覧できます。

WEBアプリとして公開したい場合

1. CSSはHTMLに直接書く（インクルード不要）

<head>
  <style>
    table { border-collapse: collapse; }
    table th, table td { border: solid 1px black; }
    img { width: 150px; height: 150px; }
  </style>
</head>

2. doGet() を追加

function doGet() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("シート1");
  var count = sheet.getLastRow() - 1;
  var html = HtmlService.createTemplateFromFile('index');
  html.productData = sheet.getRange(2, 1, count, 4).getValues();
  return html.evaluate();
}