< 添付ファイルについて>
お好きな掲示板の、スプレッドシートのコピーボタンを押す ➡ コピーの作成 ➡ スプレッドシートが開きます ➡ デプロイ ➡ Googleサイトに埋め込み
コピーすると言っても Apps Script がコピーされるだけで、スプレッドシートIDはすべて異なりますので安心してください
背景色・ヘッダータイトルなどはお好きに変えてください(コードにコメントがあります)
掲示板はすべて画像です
Googleドライブ ファイル保管場所の設定方法手順
Googleドライブ内にフォルダを作成 ➡ フォルダをダブルクリック ➡ アドレスバーに表示されたURL末尾のフォルダIDをコピー
➡ Apps Script ➡ 「コード.gs」の該当箇所にペースト(下記説明) ➡ デプロイ
(例)https://drive.google.com/drive/folders/1Sryz7a_R-5bbrAOZNITwcJCmDCQ-E-0i(GoogleドライブフォルダのURL)
1Sryz7a_R-5bbrAOZNITwcJCmDCQ-E-0i(◁フォルダID)をコピーした掲示板の「コード.gs」の該当箇所にペースト
コード.gs(51行目)
var folder = DriveApp.getFolderById("**********"); // ←実際のフォルダIDに置き換える
掲示板の高さ調整方法
80をお好きな高さに変更
bbs.html
/* 掲示板 */
#bbs {
height: 80vh; /* 掲示板の高さ調整 */
Googleドライブ ファイル保管場所の設定方法手順
Googleドライブ内にフォルダを作成 ➡ フォルダをダブルクリック ➡ アドレスバーに表示されたURL末尾のフォルダIDをコピー
➡ Apps Script ➡ 「コード.gs」の該当箇所にペースト(下記説明) ➡ デプロイ
(例)https://drive.google.com/drive/folders/1Sryz7a_R-5bbrAOZNITwcJCmDCQ-E-0i(GoogleドライブフォルダのURL)
1Sryz7a_R-5bbrAOZNITwcJCmDCQ-E-0i(◁フォルダID)をコピーした掲示板の「コード.gs」の該当箇所にペースト
コード.gs(2行目)
const FOLDER_ID = "**********"; // ←実際のフォルダIDに置き換える
掲示板の高さ調整方法
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サイトに埋め込みます
例えば、ウェブアプリURLが https://script.google.com/macros/s/AKfyctzDNbgWI_-9Iv6A3RrzKYU8a78yXe6yhE_o2xDPNWSpSJGpOe3-29HwFzCRPxFeKF2roW/exec の場合の [Google sites埋め込み用コード] ▼
< 投稿フォーム用 >
<iframe id="form-frame" src="https://script.google.com/macros/s/AKfyctzDNbgWI_-9Iv6A3RrzKYU8a78yXe6yhE_o2xDPNWSpSJGpOe3-29HwFzCRPxFeKF2roW/exec?page=form" width="100%" height="360" 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>
上記コードの をご自身のウェブアプリURLに置き換えてください
この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;
}
お知らせ: index.html の変更(追加)が必要です。 を追加
if (!adminPass){statusEl.style.color="red"; statusEl.innerText="管理者用パスワードを入力してください"; return;}
if (!title){statusEl.style.color="red"; statusEl.innerText="タイトルを入力してください"; return;}
if (!comment){statusEl.style.color="red"; statusEl.innerText="コメントを入力してください"; return;}