< 添付ファイルについて>
お好きな掲示板の、スプレッドシートのコピーボタンを押す ➡ コピーの作成 ➡ スプレッドシートが開きます ➡ デプロイ ➡ Googleサイトに埋め込み
コピーすると言っても Apps Script がコピーされるだけで、スプレッドシートIDはすべて異なりますので安心してください
背景色・ヘッダータイトルなどはお好きに変えてください(コードにコメントがあります)
絵文字はお好きなものに変更してお使い下さい
掲示板はすべて画像です
分離型のメリット:
・投稿フォームを掲示板とは別のページまたは別のサイトに設置することが可能です
・1つの掲示板に複数の投稿フォームを対応させることも可能です
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(1行目)
const FOLDER_ID = "**********"; // ←実際のフォルダIDに置き換える
掲示板の高さ調整方法
60をお好きな高さに変更
index.html
/* === 掲示板 === */
#bbs {
height: 60vh;
拡張機能 ➡ Apps Script
スプレッドシートのブック名、Apps Scriptのプロジェクトタイトルは任意にお決めください
デプロイ ➡ 新しいデプロイ
設定 ➡ ウェブアプリ
新しい説明文にBBS(任意)と入力 ➡ アクセスできるユーザーで全員を選択 ➡ デプロイ
アクセスを承認
承認プロセス ▽
googleアカウントを選択
Advanced
Go to ◯◯のプロジェクト(unsafe)
Select all にチェック(必要なら) ➡ Continue
ウェブアプリ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="380" 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 にペースト(とてもシンプル)