GoogleスプレッドシートとGASで掲示板を作成しGoogleサイトに埋め込んでみた！

GoogleスプレッドシートとGoogle Apps Script（GAS）を使って、簡易掲示板アプリを作成し、Googleサイトに埋め込んでみました。必要なのはGoogleアカウントだけ。
クレジットカード登録も不要で、すべて無料で始められます。

GASで作成した掲示板は、デプロイするだけでWebアプリとして公開可能。
今回はその掲示板をGoogleサイトに埋め込み、さらに投稿データを記録するスプレッドシートも表示させることで、どのようにスプレッドシートに書き込まれているか見れるように作りました。

掲示板アプリhttps://script.google.com/macros/s/AKfycby0pX6tlHeiBBPCvLqvujubdY9KnOeJ2Q_ur7TaldoLNw8ikdIgFg-7wfdJBI20UdY/exec
Googleサイト
https://sites.google.com/view/gaskeijiban/%E3%83%9B%E3%83%BC%E3%83%A0

GASとは？
1. できること（初心者向け）
2. はじめ方
掲示板アプリ
Googleサイト
アクセスはカウンタ
まとめ

GASとは？

Google Apps Script（GAS）は、Googleが提供する無料のプログラミング環境で、Googleのサービス（スプレッドシート、Gmail、Googleフォームなど）を自動化・拡張するためのツールです。

JavaScriptベースなので、Web開発経験がある人には馴染みやすい
ブラウザ上で動作するため、インストール不要
Googleアカウントがあればすぐに使える

できること（初心者向け）

機能	具体例
スプレッドシート操作	データの自動入力、集計、並び替え
Gmail連携	自動メール送信、メールの整理
Googleフォーム連携	回答の自動処理、通知
カレンダー操作	イベントの自動登録、リマインダー送信
Webアプリ化	フォームや掲示板などをWeb上に公開

はじめ方

Googleスプレッドシートを開く
メニューから「拡張機能」→「Apps Script」を選択
エディタが開くので、JavaScript風のコードを書いて保存
「デプロイ」すればWebアプリとして公開も可能！

掲示板アプリ

Google Apps Script（GAS）で作成した掲示板は、デプロイすることでWebアプリとして公開できます。
今回は、GeminiとClaudeという無料版AIを活用しながら、掲示板アプリの作成とトラブル対応を行いました。

🛠 使用ツールと目的

Googleスプレッドシート：投稿データの保存・管理
GAS（Google Apps Script）：掲示板のロジックとWebアプリ化

🤖 AIとのやり取り

Gemini：CanvasをONにして掲示板の作成手順を質問。

プロンプト：掲示板をhtmlで作りたい。使用するもの
・Googleスプレッドシートでデータを管理したい。

デプロイまでの手順とGASコード、HTML（コード.jsとindex.html）を生成してくれたが、一部、動作せず。
Claude：Geminiのコードを添付して相談。最終的に、GASが空のレスポンスを返していた原因を特定。JSON形式で明示的にレスポンスを返すよう修正し、動作するようになった。

掲示板アプリの作り方は、こちらを参照してください。

GoogleスプレッドシートとGASで掲示板を作成する方法

このチュートリアルで作成するアプリは学習目的です。手順のみ書かれています。GASやHTMLのコード解説はありません。セキュリティに関する気になる点もGeminiに聞いてまとめました。1. 開発者のメールアドレスや個人情報が直接公開されること...

Googleサイト

https://about.google/intl/ja_ALL/products→「Google のプロダクト」→フィルタ条件を「すべての人向け」でGoogleサイトが出てきますので、クリック→ログイン

操作は直感的なので、いじるとすぐわかると思います。

主にやったこと
掲示板アプリの埋め込み
挿入→埋め込む→掲示板アプリのURL入力→挿入
スプレッドシートの埋め込み
挿入→スプレッドシート→掲示板アプリのスプレッドシートを選択→「リンクを知っている全員にアクセスを許可」を「閲覧者」→共有
フッターコードの埋め込み
挿入→埋め込みコードで以下を書きました。流用しいるのでcalss定義はされていないが、書いてます。

    <footer class="site-footer">
        <div class="footer-container">
            <p class="footer-copyright">&copy; 2025 イチゲブログ. All Rights Reserved.</p>
            <!-- リンクの追加 -->
            <div class="footer-links">
                <a href="https://kikuichige.com/32175/" target="_blank" rel="noopener noreferrer">HOME</a>
                <a href="https://kikuichige.com/profile/" target="_blank" rel="noopener noreferrer">プロフィール</a>
                <a href="https://twitter.com/kikumel1" target="_blank" rel="noopener noreferrer">Ｘ（Twitter）</a>
                <a href="https://kikuichige.com/privacy-policy/" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>
                
            </div>
        </div>
    </footer>

公開は
「公開」でウェブアドレスに任意の文字（例：gaskeijiban）を入力して「公開」で完了です。
https://sites.google.com/view/gaskeijiban/%E3%83%9B%E3%83%BC%E3%83%A0