こちらの掲示板作成は、Appa Script の記述をすべて手作業で行うため「掲示板作成2」と比べ少し手間がかかります
掲示板作成2がおすすめです!
<この双方向掲示板の特色>
● レスポンシブ対応
● コメント欄の改行が反映される
● コメント表示の昇順・降順が選択できる
● HTMLコードの書き込みがテキストとして反映される(コードとして認識させると掲示板が停止することがあります)
● 掲示板の読み込み速度が比較的早い
掲示板の大きさはドラッグするだけで、背景の色や文字の色も簡単に変えられます(下記コード2を参照)
◆ 双方向掲示板(コメント・チャット機能)の作り方
(送信フォーム(Googleフォーム)を埋め込まなければ、お知らせ専用掲示板となります)
Googleフォームでの操作
Googleフォームを選択し、空白のフォームをクリック
名前(任意)ではラジオボタンから記述式に変更し、右下必須をクリック
⊕をクリックし、質問を追加
コメント(任意)では、ラジオボタンから段落にし、右下必須をクリック
回答をクリック
スプレッドシートにリンクをクリック
右下(あるいは右上)の作成をクリック
スプレッドシートが開きますので、左下のシート名を「シート1」から「投稿内容」に変更
拡張機能の Apps Script をクリック
ファイル追加 → HTMLをクリック
ファイル名を 無題からboardに変更
コード.gsに下記「コード1−1」または「コード1−2」をコピーして貼り付け(最初に打たれているコードは削除してください)
コード1−1は投稿内容が 新しい順 に表示され、コード1−2は投稿内容が 古い順 に表示されます(お好きな方をお選びください)
★この際スプレッドシートIDの箇所にスプレッドシートのID部分(下記画像の青色部分)をコピーして張り付けます。
d/〜〜〜〜〜〜〜〜〜〜〜〜/edit? の部分
コード1−1(新しい順)
function main(){
doGet();
allSort();
}
function doGet() {
return HtmlService.createTemplateFromFile("board").evaluate();
}
function getData() {
var ss = SpreadsheetApp.openById("スプレッドシートID");
var values = ss.getSheetByName("投稿内容").getDataRange().getValues();
return values;
}
function allSort() {
let data = SpreadsheetApp.getActiveSheet();
let lastRow = data.getLastRow();
let lastCol = data.getLastColumn();
data.getRange(2, 1, lastRow, lastCol).sort({column: 1, ascending: false});
}
コード1−2(古い順)
function doGet() {
return HtmlService.createTemplateFromFile("board").evaluate();
}
function getData() {
var ss = SpreadsheetApp.openById("スプレッドシートID");
var values = ss.getSheetByName("投稿内容").getDataRange().getValues();
return values;
}
board.htmlを開き、下記コード2をコピーして張り付け(最初に打たれているコードは削除してください)
手動でコピーした場合、コードに空白行が入ると思いますが、
全く問題ありません
コード2(レスポンシブ対応)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body bgcolor="#e7f2fe"> <!-- 背景色 -->
<?
var data = getData();
?>
<table bgcolor="white"> <!-- 内枠の色 -->
<tr>
<th><?php= data[0][0] ?></th>
<th><?php= data[0][1] ?></th>
<th><?php= data[0][2] ?></th>
</tr>
<?
for(var i = 1, j = data.length; i < j; i++){
output._=('<tr>');
output._=('<td colspan="3" valign="bottom" class="date">'+ Utilities.formatDate(new Date(data[i][0]),'Asia/Tokyo','yyyy/MM/dd HH:mm')+'</td>');
output._=('</tr>');
output._=('<tr>');
output._=('<td colspan="3" class="name">' + data[i][1].replace(/</g, "<").replace(/>/g, ">") + '</td>');
output._=('</tr>');
output._=('<tr>');
output._=('<td colspan="3" class="comment">' + data[i][2].replace(/</g, "<").replace(/>/g, ">").replace(/\n/g, '<br>') + '</td>');
output._=('</tr>');
}
?>
</table>
</body>
</html>
<style>
table {
width: 100%;
table-layout: fixed;
overflow-wrap: anywhere;
padding: 0 10px 0 10px;
border: 0px solid gray;
}
.name {
font-size: 14px;
font-weight: bold; /* 文字の太さ、400で標準 */
line-height: 1.3em;
color: #383985;
padding-top: 5px;
padding-bottom: 10px;
}
.date {
font-size: 12px;
color: #5E4505;
padding-top: 15px;
text-align: left;
}
@media (max-width: 480px) {
.date {
width: 39%;
}
}
.comment {
font-size: 15px;
color: #1e2428;
line-height: 1.5em;
border-bottom: 1px solid #d0d0d0; /* 区切り線 */
padding-bottom: 15px;
}
</style>
青字の箇所は、お好きなサイズ、色に変更してください
2025/2/27 以前に掲示板を作成された方は、こちらのコードを再度board.html に貼り付け、デプロイ → 新たなURLを埋め込めば、レスポンシブ対応となります。(これまでのデータは失われません)
手動でコピーしてください
ここまでお疲れ様、 あともう少しです 😅
コード1−1(新しい順)選択時の説明 へ
コード.gsをクリックし、▷実行をクリック
青い枠のmyFunctionがmainになっていることを確認(なっていなければmainにしてください)
下にエラーと出ますが無視してください
左の時計アイコン(トリガー)をクリック
右下の「トリガーを追加」をクリック
「イベントの種類を選択」(一番下)を 起動時からフォーム送信時に変更し、保存をクリック
※日本語と英語の表記選択が可能かもしれません
下記画像は英語表記を選んだ場合のものです
ご自身のgoogleアカウントを選択
左下のAdvanced(高度な)をクリック
左下のGo to 無題のプロジェクト(unsafe)((無題のプロジェクトへ(危険))をクリック
右下Allow(許可する)をクリック(ちょっとのタイムラグがあり自動的にデプロイ画面になります)
デプロイ(右上)から新しいデプロイをクリック
設定(左上部の歯車)からウェブアプリをクリック
新しい説明文にBBS(任意)と入力し、アクセスできるユーザーで全員を選択
デプロイ(右下)をクリック
ウェブアプリURLのコピーをクリック → 完了(後はこのコピーを、掲示板を設置したい任意の場所に埋め込むだけです)
Googleサイト編集画面での操作
掲示板お手軽作成のデプロイ手順)
(アクセスカウンターのデプロイ手順)
[ <>埋め込む ] をクリックし、先ほどコピーしたものを右クリックで [ URL ] に貼り付け、挿入をクリック
これで掲示板テーブルの完成です
あとは任意の位置にGoogleフォームを挿入しお使いください。
Googleフォームは公開設定を リンクを知っている全員 とし公開したあとgoogleフォームに埋め込んでください(公開サイトのリンクをコピーしてもOK)
なお、googleフォームのフォーム名およびスプレッドシートのブック名は任意にお決めください
以上、お疲れ様でした
なお、Googleフォームのデザインをカスタマイズする場合は、「Google form カスタム」を、投稿フォームの雛形は、「投稿フォーム」をご覧ください。
ページリロードボタン(投稿コメントの更新)のつくり方
掲示板のページのコピー(ナビゲーションに表示しないとします)を作成し、相互にリンクさせるだけです。
デプロイ(右上)から新しいデプロイをクリック
設定(左上部の歯車)からウェブアプリをクリック
新しい説明文にBBS(任意)と入力し、アクセスできるユーザーで全員を選択
デプロイ(右下)をクリック
アクセスを承認をクリック
ご自身のgoogleアカウントを選択
左下のAdvanced(高度な)をクリック
左下のGo to 無題のプロジェクト(unsafe)をクリック
右下Allow(許可する)をクリック
ウェブアプリURLのコピーをクリック → 完了(後はこのコピーを、掲示板を設置したい任意の場所に埋め込むだけです)
Googleサイト編集画面での操作
[ <>埋め込む ] をクリックし、先ほどコピーしたものを右クリックで [ URL ] に貼り付け、挿入をクリック
これで掲示板テーブルの完成です
あとは任意の位置にGoogleフォームを挿入しお使いください。
Googleフォームは公開設定を リンクを知っている全員 とし公開したあとgoogleフォームに埋め込んでください(公開サイトのリンクをコピーしてもOK)
なお、googleフォームのフォーム名およびスプレッドシートのブック名は任意にお決めください