前職の先輩に「googleサイトで作ったHPにいいねボタンをつけたいのだけど…」と相談をいただいた。
必要としている機能はシンプルなもので、いいねボタンをクリックした数がカウントされ、ボタンの下に累計の「いいね数」が表示されるというもの。
ユーザーの区別はせず、同じ人が複数回クリックしたらカウントアップ↔︎カウントダウン、とかもない。クリックした分だけ純粋にカウントアップされる。
恥ずかしながら、そもそもgoogleサイトでHPを作った経験がなかったので、とりあえず「googleサイト いいねボタン」でググる。
記事はいくつか出てくるが、５年以上前のものが多く、上から順番に試していくもののうまくいかない。
こんな時は初心者の味方・chatGPTパイセンに聞くしかない…！！！
僕「googleサイトに「いいねボタン」を実装したい。
ハートマークが書かれたボタンを押すと、そのボタンの下に、今まで何回ボタンが押されたか表示されるようにしたい。できる？」
chatGPT「Googleサイトでは、HTMLやJavaScriptのカスタムコードを直接挿入することが難しいため、「いいねボタン」のような動的な機能を追加するのは少し手間がかかります。ただし、GoogleスプレッドシートやGoogle Apps Scriptを活用して、近いことが実現できます。」
とのこと。やり方を教えてもらったので共有。
なお、ステップごとに細かく指示を出してほしいこと、こちらが「完了」と伝えたら次のステップの説明をしてほしいことを伝えて、とっても優しく教えてもらった。以下コピペ。
【ステップ 1: Googleスプレッドシートを作成】
１ Googleスプレッドシートを開く
Googleスプレッドシートにアクセスし、Googleアカウントでログインします。
２ 新しいスプレッドシートを作成
左側にある「空白」をクリックして新しいスプレッドシートを作成します。
３ スプレッドシートに「いいね」のカウントを保存するセルを用意
セルA1に 0 と入力します。これが「いいね」の初期カウントになります。
【ステップ 2: Google Apps Script を作成】
１ スプレッドシートのメニューから「拡張機能」 > 「Apps Script」を選択
スプレッドシートの上部メニューにある「拡張機能」をクリックし、その中の「Apps Script」を選択します。
２ Apps Scriptエディタで新しいスクリプトを作成
Apps Scriptエディタが開いたら、デフォルトである「コード.gs」ファイルが表示されます。
３ このファイルに以下のコードをコピーして貼り付けます。
function doGet() {
var html = HtmlService.createHtmlOutputFromFile('index');
return html;
}
function incrementLike() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var likes = sheet.getRange('A1').getValue();
likes++;
sheet.getRange('A1').setValue(likes);
return likes;
}
4 スクリプトを保存
画面左上の「名前を付けて保存」アイコンをクリックし、プロジェクトに適当な名前を付けて保存します（例: LikeButtonScript）。
（著者注：「名前を付けて保存」が見当たらず、「プロジェクトを保存」を押しました。）
【ステップ 3: HTML ファイルを作成】
１ スクリプトエディタの左側で、「ファイル」 > 「新規作成」 > 「HTML」を選択
新しいHTMLファイルを作成します。
（著者注：「ファイル」ボタンが見当たらず、＋マーク（ファイルを追加）→HTMLを押しました。）
２ ファイル名を index として保存
ファイル名を index.html と入力して保存します。
３ 以下のHTMLコードを index.html ファイルに貼り付け
以下のHTMLコードをコピーして、index.html ファイルに貼り付けます。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<button id="likeButton">❤️ Like</button>
<div id="likeCount"></div>
<script>
document.getElementById('likeButton').addEventListener('click', () => {
google.script.run.withSuccessHandler((count) => {
document.getElementById('likeCount').innerText = `Likes: ${count}`;
}).incrementLike();
});
</script>
</body>
</html>
【ステップ 4: Web アプリとして公開】
１ スクリプトエディタのメニューで「デプロイ」 > 「新しいデプロイ」を選択
スクリプトエディタの上部メニューから「デプロイ」を選択し、その中から「新しいデプロイ」を選択します。
２ 設定を行う
デプロイ設定画面が表示されます。次の設定を行います。
・デプロイの種類：「Webアプリ」を選択
（著者注：「種類の選択」の横の歯車マークを押すと選択肢が出てきます。）
・誰がアプリを実行できるようにするか：「自分」を選択
・アプリを実行するときのアクセス権：「全員（匿名ユーザーを含む）」を選択
３ デプロイ
「デプロイ」をクリックして、アプリをデプロイします。
表示されるウィンドウで、アプリのURLをコピーします。
【ステップ 5: Googleサイトに埋め込む】
１ Googleサイトを開く
Googleサイトにアクセスして、自分のサイトを開きます。
２ 編集モードに切り替える
サイトを編集するために右上の「編集」ボタンをクリックします。
３ 埋め込み用のコンテンツを追加する
「挿入」メニューをクリックし、その後「埋め込み」を選択します。
４ WebアプリのURLを貼り付ける
先ほどコピーしたWebアプリのURLを埋め込み用のフィールドに貼り付けます。
５ 挿入
「挿入」ボタンをクリックして、WebアプリをGoogleサイトに埋め込みます。
６ 公開
変更を保存して、Googleサイトを公開します。
という感じで、いいねボタンが実装できた。おおー！シンプルでいい感じだ。
ページ内に２個以上いいねボタンを設置したい場合はどうすればいいのだろうか。
chatGPT「複数の「いいねボタン」を設置するためには、それぞれのボタンが独立したカウントを持つように設定する必要があります。以下の手順で進めましょう。」
とのこと。ボタンを２個設置する想定で試してみる。以下コピペ。
【ステップ 1: スプレッドシートの設定】
スプレッドシートに複数のカウント用セルを用意します。例えば、セル A1, B1, C1 などにそれぞれ 0 を設定します。
【ステップ 2: Google Apps Script の修正】
function doGet(e) {
var cell = e.parameter.cell || 'A1'; // デフォルトはA1
var html = HtmlService.createTemplateFromFile('index');
html.cell = cell;
return html.evaluate();
}
function incrementLike(cell) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var likes = sheet.getRange(cell).getValue();
likes++;
sheet.getRange(cell).setValue(likes);
return likes;
}
【ステップ 3: HTML ファイルの修正】
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<button id="likeButton">❤️ Like</button>
<div id="likeCount"></div>
<script>
document.getElementById('likeButton').addEventListener('click', () => {
google.script.run.withSuccessHandler((count) => {
document.getElementById('likeCount').innerText = `Likes: ${count}`;
}).incrementLike('<?= cell ?>');
});
</script>
</body>
</html>
【ステップ ４: デプロイの更新】
新しいスクリプトをデプロイします。
１ スクリプトエディタのメニューで「デプロイ」 > 「デプロイの管理」を選択
２ 既存のデプロイを選択し、「新しいバージョンを作成」し、デプロイを更新
（著者注：右上の鉛筆マークをクリックするとバージョンを編集できるようになりますので、「新バージョン」を選んでデプロイしましょう。また、webアプリのURLをコピーしておいてください。）
【ステップ ５: URLの生成】
ボタンごとにURLを生成します。
ボタン１：webアプリのURLの末尾に?cell=A1を付け足したもの
ボタン２：webアプリのURLの末尾に?cell=B1を付け足したもの
【ステップ ６: Googleサイトに埋め込む】
１ Googleサイトを開く
Googleサイトにアクセスして、自分のサイトを開きます。
２ 編集モードに切り替える
サイトを編集するために右上の「編集」ボタンをクリックします。
３ 埋め込み用のコンテンツを追加する
「挿入」メニューをクリックし、その後「埋め込み」を選択します。
４ WebアプリのURLを貼り付ける
ボタン１、ボタン２のURLをそれぞれ埋め込みたいフィールドに貼り付けます。
おおー！できた！ボタンがそれぞれ独立しているのが分かる。
スプレッドシートをいじれば何個でもボタンが作れそうだ。
というわけで、chatGPT先輩に手取り足取り教えてもらい大変勉強になった。
以上、最後まで読んでいただきありがとうございました。
同じように困っている誰かのお役に立てましたら幸いです。