Embedded Files
◆ 双方向掲示板（コメント・チャット機能）の作り方
Googleフォームでの操作
Googleフォームを選択し、空白のフォームをクリック
名前（任意）ではラジオボタンから記述式に変更し、右下必須をクリック
⊕をクリックし、質問を追加
コメント（任意）では、ラジオボタンから段落にし、右下必須をクリック
回答をクリック
スプレッドシートにリンクをクリック
右下（あるいは右上）の作成をクリック
スプレッドシートでの操作
スプレッドシートが開きますので、シート名（左下）を「フォームの回答１」から「投稿内容」に変更
拡張機能の Apps Script をクリック
ファイル追加 → HTMLをクリック
ファイル名を 無題からboardに変更
コード.gsに下記「コード１−１」または「コード１−２」をコピーして貼り付け（最初に打たれているコードは削除してください）
コード１−１は投稿内容が 古い順 に表示され、コード１−２は投稿内容が 新しい順 に表示されます（お好きな方をお選びください）
★この際スプレッドシートIDの箇所にスプレッドシートのID部分（下記画像の青色部分）をコピーして張り付けます。
d/〜〜〜〜〜〜〜〜〜〜〜〜/edit? の部分
コード１−１（古い順）
function doGet() {
return HtmlService.createTemplateFromFile("board").evaluate();
}
function getData() {
var ss = SpreadsheetApp.openById("スプレッドシートID");
var values = ss.getSheetByName("投稿内容").getDataRange().getValues();
return values;
}
コード１−２（新しい順）
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});
}
board.htmlを開き、下記コード２をコピーして張り付け（最初に打たれているコードは削除してください）
コード２（レスポンシブ対応）
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?
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 class="name">' + data[i][1] + '</td>');
output._=('<td align="right" class="date">' + Utilities.formatDate(new Date(data[i][0]),'Asia/Tokyo','yyyy/MM/dd HH:mm')+'</td>');
output._=('</tr>');
output._=('<tr>');
output._=('<td colspan="2" class="comment">' + data[i][2] + '</td>');
output._=('</tr>');
}
?>
</table>
</body>
</html>
<style>
table {
table-layout: fixed;
overflow-wrap: anywhere;
padding: 0 10px 0 10px;
border: none;
}
.name {
font-size: 14px;
color: #383985;
padding-top: 15px;
padding-bottom: 12px;
}
.date {
font-size: 12px;
color: #827153;
}
@media (max-width: 480px) {
.date {
width: 40%;
}
}
.comment {
font-size: 15px;
color: #1e2428;
line-height: 20px;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 15px;
}
</style>
青字の箇所は、お好きなサイズ、色に変更してください
2025/2/27 以前に掲示板を作成された方は、こちらのコードを再度board.html に貼り付け、デプロイ → 新たなURLを埋め込めば、レスポンシブ対応となります。（これまでのデータは失われません）
ここまでお疲れ様、 あともう少しです 😅
▼コード１−１選択時の説明
デプロイ（右上）から新しいデプロイをクリック
設定（左上部の歯車）からウェブアプリをクリック
新しい説明文にBBS（任意）と入力し、アクセスできるユーザーで全員を選択
（自分のみを選択すれば書き込み禁止のお知らせ掲示板となります）
デプロイ（右下）をクリック
アクセスを承認をクリック
※日本語と英語の表記選択が可能かもしれません
下記画像は英語表記を選んだ場合のものです
ご自身のgoogleアカウントを選択
左下のAdvanced（高度な）をクリック
左下のGo to 無題のプロジェクト(unsafe)（（無題のプロジェクトへ（危険））をクリック
右下Allow（許可する）をクリック
ウェブアプリURLのコピーをクリック → 完了（後はこのコピーを、掲示板を設置したい任意の場所に埋め込むだけです）
Googleサイト編集画面での操作
[ ＜＞埋め込む ] をクリックし、先ほどコピーしたものを右クリックで [ URL ] に貼り付け、挿入をクリック
これでテーブルが出来ましたので、任意の位置にGoogleフォームを挿入しお使いください。
（googleフォームのフォーム名およびスプレッドシートのブック名は任意にお決めください）
▼コード１−2選択時の説明 へ
コード.gsをクリックし、▷実行をクリック
青い枠のmyFunctionがmainになっていることを確認（なっていなければmainにしてください）
下にエラーと出ますが無視してください
左の時計アイコン（トリガー）をクリック
右下の「トリガーを追加」をクリック
「イベントの種類を選択」（一番下）を 起動時からフォーム送信時に変更し、保存をクリック
※日本語と英語の表記選択が可能かもしれません
下記画像は英語表記を選んだ場合のものです
ご自身のgoogleアカウントを選択
左下のAdvanced（高度な）をクリック
左下のGo to 無題のプロジェクト(unsafe)（（無題のプロジェクトへ（危険））をクリック
右下Allow（許可する）をクリック（ちょっとのタイムラグがあり自動的にデプロイ画面になります）
デプロイ（右上）から新しいデプロイをクリック
設定（左上部の歯車）からウェブアプリをクリック
新しい説明文にBBS（任意）と入力し、アクセスできるユーザーで全員を選択
（自分のみを選択すれば書き込み禁止のお知らせ掲示板となります）
デプロイ（右下）をクリック
ウェブアプリURLのコピーをクリック → 完了（後はこのコピーを、掲示板を設置したい任意の場所に埋め込むだけです）
Googleサイト編集画面での操作
[ ＜＞埋め込む ] をクリックし、先ほどコピーしたものを右クリックで [ URL ] に貼り付け、挿入をクリック
これでテーブルが出来ましたので、任意の位置にGoogleフォームを挿入しお使いください。
（googleフォームのフォーム名およびスプレッドシートのブック名は任意にお決めください）
以上、お疲れ様でした
なお、Googleフォームのデザインをカスタマイズする場合は、「Google form カスタム」を、投稿フォームの雛形は、「投稿フォーム」をご覧ください。
ページリロードボタン（投稿コメントの更新）のつくり方
掲示板のページのコピー（ナビゲーションに表示しないとします）を作成し、相互にリンクさせるだけです。
（当サイトでは、画像からリンクさせています）
Google Sites
Report abuse