「Googleサイトを使っていて、ここでGAS(Google Apps Script)を動かせたらもっと便利なのに…」と思ったことはありませんか?
結論から言うと、GoogleサイトでもGASを利用することは可能です!
ただし、スプレッドシートのように「シートの裏側に直接コードを書き込む(コンテナバインドスクリプト)」のとは少し仕組みが異なります。Googleサイトの場合は、「Webアプリとして公開したGASを、サイト内に埋め込む」という形をとるのが基本です。
この記事では、GoogleサイトでGASを活用する具体的な方法と、実装前に知っておくべき注意点を分かりやすく解説します。
GoogleサイトでGASを動かす2つの方法
Googleサイト上でGASやそれに類する自動化を実装するには、大きく分けて以下の2つのアプローチがあります。
1. GASを「Webアプリ」にして埋め込む(主流)
GASでHTMLやCSSを使って画面(UI)を作成し、それをGoogleサイト内に表示させる王道の方法です。
- できることの例:
- Googleサイト上に独自の入力フォームを作り、入力されたデータをスプレッドシートに自動保存する。
- スプレッドシートのデータを読み込んで、Googleサイト上にオリジナルのグラフや一覧表を表示する。
- 仕組み:
GASのエディタでコード(HTML/GAS)を書き、「デプロイ」機能を利用してWebアプリとしてURLを発行します。その後、Googleサイトの「埋め込み」機能を使って、発行されたURLを貼り付けます。
2. 連携するGoogleサービスを埋め込む(ノンコード・推奨)
「GASを使ってサイトを動かしたい」という目的の多くは、実はGASのコードを一行も書かなくても、他のGoogleサービスを組み合わせるだけで解決することがあります。まずはこの方法で実現できないか検討するのがおすすめです。
- フォームの設置: 「Googleフォーム」を作成してGoogleサイトに埋め込むだけ。データは自動的にスプレッドシートに蓄積されます。
- データの表示: スプレッドシートの表や、「Looker Studio(旧データポータル)」で作ったダッシュボードを、そのままGoogleサイトに埋め込むことでリッチなデータ表示が可能です。
Googleサイト×GASの注意点(制限事項)
スプレッドシートのGAS(マクロ)に慣れている方がGoogleサイトでGASを使う際、壁になりやすいポイントがいくつかあります。
⚠️ 完全に自由なデザインは難しい
GoogleサイトにGASを埋め込むと、サイト内に「枠(iFrame)」が作られ、その独立した枠の中でGASが動く形になります。そのため、サイトのデザインと完全に一体化させたり、サイト全体のデザイン(背景やヘッダーなど)をGASのコードから直接書き換えたりすることはできません。
⚠️ 「ボタンを押したらマクロを実行」はひと工夫必要
スプレッドシートでおなじみの「図形にマクロを登録して、クリックしたらセルの値を書き換える」といった単純な動かし方は、Googleサイト上ではできません。ボタンなどの見た目も含めて、HTMLとGASを組み合わせて自作する必要があります。