Web制作者やサイト運営者の皆さん、Googleスプレッドシートを単なる表計算ソフトだと思っていませんか？実は、スプレッドシートはWeb制作の様々な場面で活躍する強力なツールなんです。
関数やスクリプトを活用すれば、Webサイトの情報を自動で収集したり、データを管理する簡易的なデータベースとして使ったり、さらにはWebAPIとして外部にデータを公開したりすることも可能です。
この記事では、Web制作の効率を格段に上げる、Googleスプレッドシートの具体的な活用テクニックを3つ、コード例とともにご紹介します。
1. Webサイトの情報を自動収集（スクレイピング）
スクレイピングとは、Webサイトから特定の情報を自動で抽出する技術です。Googleスプレッドシートには、このスクレイピングを手軽に実現する方法が用意されています。
IMPORTXML：特定の要素をXPathで取得
IMPORTXML関数は、指定したURLのWebページから、XPathという形式で指定した部分の情報を抽出します。特定のニュースサイトの見出しだけを一覧にしたい場合などに便利です。
使い方や詳細は、公式のヘルプページをご覧ください。
Google ドキュメント エディタ ヘルプ: IMPORTXML
IMPORTHTML：表（table）やリスト（ul/ol）を取得
IMPORTHTML関数は、Webページ内の表（<table>タグ）やリスト（<ul>や<ol>タグ）の情報を、まるごとシートに取り込みたい場合に役立ちます。更新されるランキング表などを手軽に取得できます。
こちらも、公式のヘルプページで詳しい使い方が確認できます。
Google ドキュメント エディタ ヘルプ: IMPORTHTML
Google Apps Script (GAS) で柔軟に取得
上記の関数では対応できない複雑なサイトや、より細かく抽出条件を指定したい場合は、Google Apps Script (GAS) の出番です。GASはJavaScriptに似た文法で、Googleの各種サービスを自動操作できるスクリプト環境です。
スプレッドシートの「ツール」メニューから「スクリプトエディタ」を開いて、コードを記述します。
スクレイピングの実行コード例
以下の例では、指定したURL（getUrl）からページのHTMLソースを取得し、正規表現（RegExp）を使って必要な情報（この例では特定のdivタグ内のリンクURLと画像パス）を抽出し、シートに貼り付けています。
// スクレイピング実行
function run_scraping() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート名');
var getUrl = 'https://www.interlifemedia.co.jp/'; // 対象のURL
var content = UrlFetchApp.fetch(getUrl).getContentText('UTF-8');
// 正規表現で必要な箇所を抽出
var itemRegexp = new RegExp(/<div class="blockItem(.*)/g);
var item = content.match(itemRegexp);
var links = [];
var imgs = [];
for (var i = 0; i < item.length; i++) {
var linkURL = item[i];
var imgPath = item[i];
// 正規表現で整形
linkURL = linkURL.replace(/"/g, '').replace(/<div class=blockItem(.*)<a href=/, '').replace(/><img(.*)/, '');
imgPath = getUrl + imgPath.replace(/"/g, '').replace(/<div class=blockItem(.*)<a href=(.*)><img(.+)src=/, '').replace(/ alt=(.*)/, '');
links.push([linkURL]);
imgs.push([imgPath]);
}
// シートに貼り付け
sheet.getRange(2, 1, links.length, 1).setValues(links); // A列2行目からリンクURL
sheet.getRange(2, 2, links.length, 1).setValues(imgs); // B列2行目から画像パス
sheet.getRange(2, 3, links.length, 1).setValue("=image($B:$B)"); // C列に画像を表示
}
2. データをWebAPIとして公開
スクレイピングで収集したデータや、スプレッドシートにまとめたデータを、別のWebサイトやアプリケーションから利用したい場合、GASを使って簡易的なWebAPI（JSON形式）として公開できます。
GASでスプレッドシートのデータをJSONに変換
まずは、シートのデータをJSONとして扱いやすい配列（オブジェクトの配列）に変換する関数を用意します。シートの1行目をキー（プロパティ名）として利用します。
// JSON変換
function getData(id, sheetName) {
var sheet = SpreadsheetApp.openById(id).getSheetByName(sheetName);
var rows = sheet.getDataRange().getValues();
var keys = rows.splice(0, 1)[0]; // 1行目をキーとして取得
return rows.map(function(row) {
var obj = {}
row.map(function(item, index) {
if (keys[index].length != 0) {
obj[keys[index]] = item;
}
});
return obj;
});
}
doGet関数でブラウザ表示（WebAPI化）
GASには、スクリプトを「Webアプリケーションとして導入」すると、特定のURLにアクセスした際に実行される `doGet` という特別な関数があります。これを利用して、先ほどJSON形式に変換したデータをブラウザに表示させます。
// ブラウザで実行（WebAPI化）
function doGet() {
var data = getData("スプレッドシートのID", 'シート名');
// JSON形式でテキストとして出力
return ContentService.createTextOutput(JSON.stringify(data, null, 2))
.setMimeType(ContentService.MimeType.JSON);
}
このスクリプトをWebアプリケーションとして公開（デプロイ）すると、発行されたURLにアクセスするだけで、誰でも（権限設定によります）シートのデータをJSON形式で取得できるようになります。
3. 簡易データベースとして利用
さらに一歩進んで、GoogleスプレッドシートをWebサイトのフォームデータを受け取る「簡易データベース」として利用することも可能です。これには Google Sheets API を使います。
GASがスプレッドシート側（サーバーサイド）で動くのに対し、Google Sheets APIは外部のアプリケーション（例えば、あなたのWebサイトのPHPサーバー）からスプレッドシートを直接操作するためのインターフェースです。
詳細は公式ガイドをご覧ください。
Google Sheets API 概要
PHPからGoogle Sheets APIで書き込むコード例
以下のコードは、PHP（サーバーサイド）からGoogle Sheets APIを利用して、スプレッドシートにデータを追記する例です。Webサイトのお問い合わせフォームなどから送信された（$_POST）データをスプレッドシートに保存できます。
※実行には、Google Cloud PlatformでのAPIの有効化、認証情報（credentials.json）の取得、Google API Client Library（vendor/autoload.php）のインストールが別途必要です。
<?php
class SheetClass
{
private $data;
// GASで公開したJSONを取得する例（読み取り）
public function get_sheet_json()
{
$data = 'https://script.google.com/macros/s/AKfycbyNn55mEIypcFWyR_O_x68OzjK2gmLFMJkRy7vX1kc87eZUlAY/exec'; // doGetで公開したURL
$this->data = $json = json_decode(file_get_contents($data));
return $this->data;
}
// Google Sheets APIでスプレッドシートに保存する例（書き込み）
public function save_sheets()
{
require_once $_SERVER["DOCUMENT_ROOT"] . '/vendor/autoload.php';
if ($_POST) {
// ダウンロードした認証ファイル
$keyFile = $_SERVER["DOCUMENT_ROOT"] . "/credentials.json";
// アカウント認証情報インスタンスを作成
$client = new Google_Client();
$client->setAuthConfig($keyFile);
// 任意名
$client->setApplicationName("Sheet API TEST");
// サービスの権限スコープ
$scopes = [Google_Service_Sheets::SPREADSHEETS];
$client->setScopes($scopes);
// シート情報を操作するインスタンスを生成
$sheet = new Google_Service_Sheets($client);
// 保存するデータ（例：フォームからPOSTされた'test'という値）
$values = [
[$_POST['test']] // データを配列の配列として渡す
];
// データ操作領域を設定
$body = new Google_Service_Sheets_ValueRange([
'values' => $values,
]);
// データを追記（append）
$response = $sheet->spreadsheets_values->append(
"スプレッドシートのID",
'シート名',
$body,
["valueInputOption" => 'USER_ENTERED']
);
// 処理後にリダイレクト
header('Location: ' . $_SERVER["REQUEST_URI"]);
exit;
}
}
// 読み取ったデータ（JSON）をリスト表示する例
public function the_sheet_list()
{
if ($this->data) {
print '<ul class="list-group row">';
$c = 0;
foreach ($this->data as $v) {
printf('<li class="list-group-item col-lg-12"><a href="/apps/post.php?id=%d">%s</a></li>', $c, $v->title);
$c++;
}
print '</ul>';
}
}
// 読み取ったデータ（JSON）の詳細ページを表示する例
public function the_detail_page()
{
$page_data = $this->data[$_GET['id']];
print '<h1>' . $page_data->title . '</h1>';
print nl2br($page_data->cont);
}
}
?>
このように、Googleスプレッドシートは工夫次第でWeb制作の強力な味方になります。ぜひ、これらのテクニックを活用して、日々の業務を効率化してみてください。
よくある質問（FAQ）
Q1. スクレイピングを行う際に注意すべきことはありますか？
A1. はい、注意が必要です。スクレイピング対象のWebサイトが、利用規約でスクレイピングを禁止していないか必ず確認してください。また、サーバーに過度な負荷をかけないよう、短時間に連続してアクセスするのは避けましょう。著作権や利用規約を遵守し、良識の範囲内で行うことが重要です。
Q2. Google Apps Script (GAS) と Google Sheets API の違いがよく分かりません。
A2. GASは「Google側のサーバーで動くスクリプト」で、スプレッドシートを開いた時や時間をトリガーにして自動実行するのに向いています（例：毎日自動でスクレイピング）。一方、Google Sheets APIは「外部のサーバー（あなたのWebサイトなど）からスプレッドシートを操作するための『窓口』」です。外部からのリクエストに応じてリアルタイムでデータを読み書きしたい場合（例：フォームのデータを即時保存）に使います。
Q3. IMPORTXML や IMPORTHTML がうまくデータを取得できません。
A3. 対象のWebサイトがJavaScriptで動的にコンテンツを生成している場合、これらの関数ではうまく取得できないことがあります。また、サイト側がスクレイピング対策（例：アクセス元のブロック）を行っている可能性も考えられます。その場合は、Q1の注意事項を守った上で、Google Apps Script (GAS) を使ったより高度な方法を試す必要があります。