< 掲示板の特色(共通)>
お好きな掲示板の、スプレッドシートのコピーボタンを押す ➡ コピーの作成 ➡ スプレッドシートが開きます ➡ デプロイ ➡ Googleサイトに埋め込み
コピーすると言っても Apps Script がコピーされるだけで、スプレッドシートIDはすべて異なりますので安心してください
背景色・ヘッダータイトルなどはお好きに変えてください(コードにコメントがあります)
掲示板はすべて画像です
掲示板の高さ調整方法
80をお好きな高さに変更
bbs.html
/* 掲示板 */
#bbs {
height: 80vh; /* 掲示板の高さ調整 */
掲示板の高さ調整方法
62をお好きな高さに変更
index.html
/* 掲示板 */
#bbs {
height: 62vh; /* 掲示板の高さ調整 */
管理者投稿パスワードの変更方法
123をお好きなパスワードに変更
コード.gs(1行目)
const ADMIN_PASS = "123"; // 管理者パスワード
拡張機能 ➡ Apps Script
スプレッドシートのブック名、Apps Scriptのプロジェクトタイトルは任意にお決めください
デプロイ ➡ 新しいデプロイ
設定 ➡ ウェブアプリ
新しい説明文にBBS(任意)と入力 ➡ アクセスできるユーザーで全員を選択 ➡ デプロイ
アクセスを承認
承認プロセス ▽
googleアカウントを選択
Advanced
Go to ◯◯のプロジェクト(unsafe)
Allow
ウェブアプリURLのコピー
分離型の場合
iframeタグ使ってGoogleサイトに埋め込みます
[Google sites埋め込み用コード] ▼
<投稿フォーム用 >
<iframe id="form-frame" src="ウェブアプリのデプロイURL?page=form" width="100%" height="330" style="border:none;"></iframe>
<掲示板用 >
<iframe id="bbs-frame" src="ウェブアプリのデプロイURL?page=bbs" width="100%" height="800" style="border:none;"></iframe>
例えば、ウェブアプリのデプロイURLが以下の場合
これを上記ウェブアプリのデプロイURLにコピペ
<iframe id="form-frame" src="https://script.google.com/macros/s/AKfyctzDNbgWI_-9Iv6A3RrzKYU8a78yXe6yhE_o2xDPNWSpSJGpOe3-29HwFzCRPxFeKF2roW/exec?page=form" width="100%" height="330" style="border:none;"></iframe>
<iframe id="bbs-frame" src="https://script.google.com/macros/s/AKfyctzDNbgWI_-9Iv6A3RrzKYU8a78yXe6yhE_o2xDPNWSpSJGpOe3-29HwFzCRPxFeKF2roW/exec?page=bbs" width="100%" height="800" style="border:none;"></iframe>
この2つの iframeタグ をそれぞれGoogleサイトの<>埋め込む ➡ 埋め込みコード(URLではありません)にペースト
要するに、投稿フォーム用 と掲示板用の2つを iframeタグとして埋め込む訳です
高さ(ピンク色)は、お好みで変えてください。(URLではなくコードとして埋め込んでありますので、埋め込み後でも変更できます)
ーーーーーーーーーーーーーーーー
一体型の場合
①デプロイしたウェブアプリURL を Googleサイトの<>埋め込む ➡ URL にペースト(とてもシンプル)
分割型: form.html / 一体型:index.html の変更(追加)が必要です。 を追加
<script>の中にあります⬇
// コメント未入力チェック
if (!title) {
statusEl.style.color = "red";
statusEl.innerText = "タイトルを入力してください";
return;
}
if (!comment) {
statusEl.style.color = "red";
statusEl.innerText = "コメントを入力してください";
return;
}