Embedded Files
作成の手間を省いた「お手軽な掲示板の作成」は、こちら
こちらの掲示板作成は、Appa Script の記述（コピー）をすべて手作業で行うため少し手間がかかります
＜この双方向掲示板の特色＞
● レスポンシブ対応
● コメント欄の改行が反映される
● コメント表示の昇順・降順が選択できる
● HTMLコードの書き込みがテキストとして反映される（コードとして認識させると掲示板が停止することがあります）
● 掲示板の読み込み速度が比較的早い
下の掲示板は画像ですので、スマホでご覧の場合小さく表示されます
◆ 双方向掲示板（コメント・チャット機能）の作り方
（送信フォーム（Googleフォーム）を埋め込まなければ、お知らせ専用掲示板となります）
Googleフォームでの操作
Googleフォームを選択し、空白のフォームをクリック
名前（任意）ではラジオボタンから記述式に変更し、右下必須をクリック
⊕をクリックし、質問を追加
コメント（任意）では、ラジオボタンから段落にし、右下必須をクリック
回答をクリック
スプレッドシートにリンクをクリック
新しいスプレッドシートを作成 ➡ 作成をクリック
スプレッドシートでの操作
スプレッドシートが開きますので、左下のシート名を「フォームの回答 1」から「投稿内容」に変更
拡張機能の Apps Script をクリック
ファイル追加 → HTMLをクリック
ファイル名を 無題からboardに変更
コード.gsに下記「コード１−１」または「コード１−２」をコピーして貼り付け（最初に打たれているコードは削除してください）
コード１−１は投稿内容が 新しい順 に表示され、コード１−２は投稿内容が 古い順 に表示されます（お好きな方をお選びください）
★この際スプレッドシートIDの箇所にスプレッドシートのID部分（下記画像の青色部分）をコピーして張り付けます。
d/〜〜〜〜〜〜〜〜〜〜〜〜/edit? の部分
コード１−１（新しい順）
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});
}
コード１−２（古い順）
function doGet() {
return HtmlService.createTemplateFromFile("board").evaluate();
}
function getData() {
var ss = SpreadsheetApp.openById("スプレッドシートID");
var values = ss.getSheetByName("投稿内容").getDataRange().getValues();
return values;
}
board.htmlを開き、下記コード２をコピーして張り付け（最初に打たれているコードは削除してください）
手動でコピーした場合、コードに空白行が入ると思いますが、
全く問題ありません
コード２
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?
var data = getData();
?>
<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">' + data[i][1].replace(/</g, "<").replace(/>/g, ">") + '</td>');
output._=('</tr>');
output._=('<tr>');
output._=('<td colspan="4" class="name">' + data[i][2].replace(/</g, "<").replace(/>/g, ">") + '</td>');
output._=('</tr>');
output._=('<tr>');
output._=('<td colspan="4" class="comment">' + 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（二重線）
2025/2/27 以前に掲示板を作成された方は、こちらのコードを再度board.html に貼り付け、デプロイ して 新たなURLを埋め込めば、レスポンシブ対応となります。（これまでのデータは失われません）
手動でコピーしてください
ここまでお疲れ様、 あともう少しです 😅
コード１−１（新しい順）選択時の説明 へ
コード.gsをクリックし、▷実行をクリック
青い枠のmyFunctionがmainになっていることを確認（なっていなければmainにしてください）
下にエラーと出ますが無視してください
左の時計アイコン（トリガー）をクリック
右下の「トリガーを追加」をクリック
「イベントの種類を選択」（一番下）を 起動時からフォーム送信時に変更し、保存をクリック
※日本語と英語の表記選択が可能かもしれません
下記画像は英語表記を選んだ場合のものです
ご自身のgoogleアカウントを選択
左下のAdvanced（高度な）をクリック
左下のGo to 無題のプロジェクト(unsafe)（（無題のプロジェクトへ（危険））をクリック
右下Allow（許可する）をクリック（ちょっとのタイムラグがあり自動的にデプロイ画面になります）
デプロイ（右上）から新しいデプロイをクリック
設定（左上部の歯車）からウェブアプリをクリック
新しい説明文にBBS（任意）と入力し、アクセスできるユーザーで全員を選択
デプロイ（右下）をクリック
ウェブアプリURLのコピーをクリック → 完了（後はこのコピーを、掲示板を設置したい任意の場所に埋め込むだけです）
Googleサイト編集画面での操作
[ ＜＞埋め込む ] をクリックし、先ほどコピーしたものを右クリックで [ URL ] に貼り付け、挿入をクリック
これで掲示板テーブルの完成です
あとは任意の位置にGoogleフォームを挿入しお使いください。
Googleフォームは公開設定を リンクを知っている全員 とし公開したあとgoogleフォームに埋め込んでください（公開サイトのリンクをコピーしてもOK）
なお、googleフォームのフォーム名およびスプレッドシートのブック名は任意にお決めください
以上、お疲れ様でした
なお、Googleフォームのデザインをカスタマイズする場合は、「カスタムフォーム紐付」を、投稿フォームの雛形は、「カスタムフォーム」をご覧ください。
ページリロードボタン（投稿コメントの更新）のつくり方
掲示板のページのコピー（ナビゲーションに表示しないとします）を作成し、相互にリンクさせるだけです。
コード１−２（古い順）選択時の説明 ▷
（アクセスカウンターのデプロイ手順）
デプロイ（右上）から新しいデプロイをクリック
設定（左上部の歯車）からウェブアプリをクリック
新しい説明文にBBS（任意）と入力し、アクセスできるユーザーで全員を選択
デプロイ（右下）をクリック
アクセスを承認をクリック
ご自身のgoogleアカウントを選択
左下のAdvanced（高度な）をクリック
左下のGo to 無題のプロジェクト(unsafe)をクリック
右下Allow（許可する）をクリック
ウェブアプリURLのコピーをクリック → 完了（後はこのコピーを、掲示板を設置したい任意の場所に埋め込むだけです）
Googleサイト編集画面での操作
[ ＜＞埋め込む ] をクリックし、先ほどコピーしたものを右クリックで [ URL ] に貼り付け、挿入をクリック
これで掲示板テーブルの完成です
あとは任意の位置にGoogleフォームを挿入しお使いください。
Googleフォームは公開設定を リンクを知っている全員 とし公開したあとgoogleフォームに埋め込んでください（公開サイトのリンクをコピーしてもOK）
なお、googleフォームのフォーム名およびスプレッドシートのブック名は任意にお決めください
Google Sites
Report abuse