Googleスプレッドシートのマクロ動作を、閲覧者権限のままWeb上で体験してもらうための最小限の構成です。
以下に実装した内容をご紹介します（簡略化してます）
https://www.cibalabo.site/anime1/
・シートに入った数字１と２を黒く塗りつぶすアニメーションです。
・数字１は縦方向、数字２は横方向に塗りつぶす、というロジックです。
・ボタンを２つ配置しており、１つめのボタンで数字をセットし、２つめのボタンで黒塗りします。
1. Google Apps Script（コード.gs）
アニメーション動作をさせるシートを用意した後、「拡張機能」メニューからApps Scriptを呼び出し、コード.gsに以下の処理を記載します。数値を一括配置し、それを1セルずつスキャンして黒塗りします。
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
// ① 数値を配置
function fillNumbers() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.getRange("O2:O18").setValue(1);
sheet.getRange("F7:X7").setValue(2);
}
// ② 黒塗り実行
function runRemoteMacro() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const vValues = sheet.getRange("O2:O18").getValues();
const hValues = sheet.getRange("F7:X7").getValues()[0];
// 縦方向の黒塗り
vValues.forEach((row, i) => {
if (row[0] === 1) {
sheet.getRange(i + 2, 15).setBackground("#000").setFontColor("#fff");
SpreadsheetApp.flush();
Utilities.sleep(50);
}
});
// 横方向の黒塗り
hValues.forEach((val, j) => {
if (val === 2) {
sheet.getRange(7, j + 6).setBackground("#000").setFontColor("#fff");
SpreadsheetApp.flush();
Utilities.sleep(50);
}
});
// 3秒待機後に初期化
Utilities.sleep(3000);
sheet.getRange("O2:O18").clear().setBackground(null);
sheet.getRange("F7:X7").clear().setBackground(null);
}
2. Google Apps Script（Index.html）
フロント側のUIです。CSSで上部のスプレッドシートメニュー（約10px分）を枠外に隠しています。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body { margin: 0; text-align: center; font-family: sans-serif; }
.btns { height: 80px; padding-top: 10px; box-sizing: border-box; }
.sheet-frame {
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: calc(100vh - 80px);
overflow: hidden;
}
iframe {
position: absolute;
top: -10px; /* スプレッドシートのメニューバーを隠す */
left: 0;
width: 100%;
height: calc(100% + 10px);
border: none;
}
</style>
</head>
<body>
<div class="btns">
<button onclick="run(1)">① 数字配置</button>
<button onclick="run(2)">② マクロ実行</button>
<p id="msg" style="margin: 5px 0; font-size: 12px; color: #1a73e8; height: 15px;"></p>
</div>
<div class="sheet-frame">
<iframe src="[https://docs.google.com/spreadsheets/d/](https://docs.google.com/spreadsheets/d/)【スプレッドシートID】/edit?rm=minimal"></iframe>
</div>
<script>
function run(mode) {
document.getElementById("msg").innerText = "実行中...";
const func = (mode === 1) ? "fillNumbers" : "runRemoteMacro";
google.script.run
.withSuccessHandler(() => {
document.getElementById("msg").innerText = "完了";
})[func]();
}
</script>
</body>
</html>
3. WordPress（カスタムHTML）
Webアプリを埋め込むための記述と、下部に配置するスマホ用注釈です。
<style>
/* 必要に応じてWordPressテーマのヘッダー等を非表示にする記述を追加してください */
.demo-container {
width: 100%;
height: 600px;
border: 1px solid #ccc;
overflow: hidden;
}
.note-box {
background: #fff9e6;
border-left: 4px solid #ff9900;
padding: 15px;
margin-top: 20px;
font-size: 13px;
border-radius: 4px;
font-family: sans-serif;
}
.note-box p { margin: 0 0 5px 0; font-weight: bold; color: #b36b00; }
.note-box ul { margin: 0; padding-left: 20px; color: #665233; }
</style>
<div class="demo-container">
<iframe src="【GASのデプロイURL】" width="100%" height="100%" style="border:none;"></iframe>
</div>
<div class="note-box">
<p>⚠️ スマートフォン（モバイル環境）でご覧の方へ</p>
<ul>
<li>Googleスプレッドシートの仕様上、スマホでは表示や動作が不安定になる場合があります。</li>
<li>100%快適に体験いただくには、PCブラウザ環境での閲覧を推奨します。</li>
</ul>
</div>
導入の重要ポイント
- 共有権限: スプレッドシートは「リンクを知っている全員（閲覧者）」に設定します。
- GASデプロイ: 実行ユーザーを「自分（アクセス権を持つユーザー）」、アクセスできるユーザーを「全員（匿名ユーザーを含む）」にしてデプロイします。
-
右側パネルについて:
/edit画面で表示されるGoogleドライブのガイド等は、無理に隠す（クリッピングする）よりも標準表示にとどめ、スマホ等の操作性の限界は注釈等で補完する運用が最もシンプルで堅実です。