Embedded Files
掲示板の作成手順の簡略化と安定動作のため、コードを改定しました。（2025/9/22）
＜この双方向掲示板の特色＞
掲示板の大きさはドラッグで変更できます
背景色や文字色の変更・コメントの古い順での表示は下記 bbs.html を参照ください
作成する掲示板 ▽（下の掲示板は画像ですので、スマホでご覧の場合小さく表示されます）
◆ 双方向掲示板（コメント・チャット機能）の作り方
（送信フォーム（Googleフォーム）を埋め込まなければ、お知らせ専用掲示板となります）
Googleフォームでの操作
Googleフォームで空白のフォームを作成
タイトル（任意）では、記述式（短文）➡ 質問を追加（⊕）
ハンドルネーム（任意）では、記述式（短文）➡ 必須 ➡ 質問を追加（⊕）
コメント（任意）では、段落 ➡ 必須
回答
スプレッドシートにリンク
新しいスプレッドシートを作成 ➡ 作成
スプレッドシートでの操作
拡張機能 ➡ Apps Script
ファイル追加（⊕）➡ HTML
ファイル名を 無題から bbs に変更
コード.gs に下記「コード.gs」をコピーしてペースト（最初に打たれているコードは削除）
bbs.html に下記「コード bbs.html 」をコピーしてペースト（最初に打たれているコードは削除）
手動でコピーした場合、コードが1行おきになると思いますが、全く問題ありません
コード .gs
function doGet() {
return HtmlService.createTemplateFromFile('bbs')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function getData() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var values = ss.getSheets()[0].getDataRange().getValues();
return values;
}
var data = getData();
data.sort(function(a, b) {
var dateA = new Date(a[0]);
var dateB = new Date(b[0]);
return dateA - dateB;
});
コード bbs.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?
var data = getData();
var header = data.shift();
data.sort(function(a, b) {
return new Date(b[0]) - new Date(a[0]); // 降順（投稿の新しい順）、昇順（投稿の古い順）の場合は、aとbを入れ替える
});
data.unshift(header);
?>
<table>
<tr>
<th><?php= data[0][0] ?></th>
<th><?php= data[0][1] ?></th>
<th><?php= data[0][2] ?></th>
<th><?php= data[0][3] ?></th>
</tr>
<?
for(var i = 1, j = data.length; i < j; i++){
output._=('<tr>');
output._=('<td colspan="4" 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="4" class="title">' + String(data[i][1]).replace(/</g, "<").replace(/>/g, ">") + '</td>');
output._=('</tr>');
output._=('<tr>');
output._=('<td colspan="4" class="name">' + String(data[i][2]).replace(/</g, "<").replace(/>/g, ">") + '</td>');
output._=('</tr>');
output._=('<tr>');
output._=('<td colspan="4" class="comment">' + String(data[i][3]).replace(/</g, "<").replace(/>/g, ">").replace(/\n/g, '<br>') + '</td>');
output._=('</tr>');
}
?>
</table>
</body>
</html>
<style>
/* 外枠 */
body {
border 0px solid gray; /* 枠の太さ・線種・色 */
background: #e7f2fe; /* 背景色 */
}
/* 内枠 */
table {
width: 100%;
table-layout: fixed;
overflow-wrap: anywhere;
background: white; /* 内枠の色 */
padding: 0 10px 0 10px; /* 余白（上・右・下・左） */
border: 0px solid gray; /* 内枠線 */
}
/* タイトル */
.title {
font-size: 14px;
font-weight: 400; /* 文字の太さ、boldで太字 */
line-height: 1.3em; /* 行間 */
text-align: left; /* タイトル横位置（center・right） */
color: dimgray;
padding-top: 5px;
padding-bottom: 5px;
}
/* ハンドルネーム */
.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; /* 文字の大きさ */
font-weight: 400; /* 文字の太さ、boldで太字 */
color: #1e2428; /* 文字色 */
background: lightyellow; /* コメントの背景色 */
line-height: 1.5em; /* 行間 */
border-bottom: 1px solid #d0d0d0; /* 区切り線 */
padding-top: 10px; /* 上余白 */
padding-bottom: 10px; /* 下余白 */
}
</style>
青字の箇所は、お好きなサイズ、色に変更してください
線種の説明：solid（実践）dashed（破線）dotted（点線）double（二重線）
掲示板作成２では、ここまでの手順は不要です
デプロイ ➡ 新しいデプロイ
設定 ➡ ウェブアプリ
新しい説明文にBBS（任意）と入力 ➡ アクセスできるユーザーで全員を選択 ➡ デプロイ
アクセスを承認
承認プロセス ▽
googleアカウントを選択
Advanced
Go to 無題のプロジェクト(unsafe)
Allow
ウェブアプリURLのコピー ➡ 完了（後はこのコピーを、掲示板を設置したい任意の場所に埋め込むだけです）
Googleサイト編集画面での操作
[ ＜＞埋め込む ]
先ほどコピーしたものを右クリックで [ URL ] に貼り付 ➡ 挿入
これで掲示板テーブルの完成です
あとは任意の位置にGoogleフォームを挿入しお使いください。
Googleフォームは公開設定を リンクを知っている全員 とし公開したあとgoogleフォームに埋め込んでください（公開サイトのリンクをコピーしてもOK）
なお、googleフォームのフォーム名およびスプレッドシートのブック名は任意にお決めください
ページリロードボタン（投稿コメントの更新）のつくり方
掲示板のページのコピー（ナビゲーションに表示しないとします）を作成し、相互にリンクさせるだけです。
Google Sites
Report abuse