Embedded Files
高評価ボタンと低評価ボタンです
色やデザインは、適当にアレンジしてお使い下さい
挙動を確認いただけます
▼ 実際のコードでは2回以上クリックしてもカウントは増えません
① いいね数（カウンター）
常時表示
② 残念数（カウンター）
初回or更新時非表示
常に非表示にもできます
① コード GS（いいね）
function doGet() {
return HtmlService.createHtmlOutputFromFile('like');
}
function increaseLikeCount() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var likeCell = sheet.getRange('A1'); // いいね数を保存するセル
var currentCount = likeCell.getValue();
if (currentCount === '') {
currentCount = 0;
}
var newCount = currentCount + 1;
likeCell.setValue(newCount);
return newCount;
}
function nowCount(){
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var likeCell = sheet.getRange('A1'); // いいね数を保存するセル
var currentCount = likeCell.getValue();
if (currentCount === '') {
currentCount = 0;
}
return currentCount;
}
１つのスプレッドシートで複数の「いいねボタン」を作成する場合は、「いいねボタン」毎にセルを変更（2箇所）して下さい
① コード like.html（いいね）
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="like-container">
<button id="likeButton" onclick="disabled=true; incrementLike()">いいね！</button>
<span id="likeCount">❤ 0</span> <!-- 下の ❤ とは同じ絵文字を使います -->
</div>
<script>
function incrementLike() {
google.script.run.withSuccessHandler(updateLikeCount).increaseLikeCount();
}
function updateLikeCount(count) {
// ❤ と$ の間のスペースを削除してもOKです。❤ を絵文字などに置き換えても、削除してもOKです。
document.getElementById('likeCount').innerText = `❤ ${count}`;
}
google.script.run.withSuccessHandler(updateLikeCount).nowCount();
</script>
</body>
</html>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: left; /* 横の配置：left（左）・center（中央）・right（右）（「ボタン」と「いいね数」を横並びにする場合は left を選択して下さい */
align-items: start; /* 縦の配置：start（上）・center（中央）・end（下） */
height: 100vh;
margin: 0;
background: white;
}
.like-container {
display: flex;
flex-direction: row; /* 「ボタン」と「いいね数」の配置：row（横並び）・column（縦並び） */
text-align: center;
align-items: center;
}
/* いいねボタン */
#likeButton {
color: #404040;
font-size: 1.2em;
background-color: transparent;
border: 0.1em solid;
border-radius: 4px;
padding: 0.3em 0.7em; /* 数値を大きくすれば、「ボタン」が上下・左右に大きくなります */
line-height: 1.2em;
margin: 8px; /* 下の影の大きさに合わせます */
cursor: pointer;
outline: 0;
}
/* いいねボタンマウスホバー時 */
#likeButton:hover {
color: white;
background-color: deeppink;
}
/* いいねボタンマウスクリック時 */
#likeButton:focus-within {
box-shadow: 0 0 8px hotpink; /* 影の大きさと色 */
}
/* いいね数カウンター */
#likeCount {
color: #404040;
font-size: 1.2em;
line-height: 1.2em;
/* 以下は「いいね数」を枠線で囲う場合に設定 */
background-color: transparent;
border: 0em solid transparent;
border-radius: 0px;
padding: 0em 0em;
}
</style>
ピンク・青色箇所はお好みで変更して下さい
② コード GS（残念）
function doGet() {
var html = HtmlService.createHtmlOutputFromFile('like');
return html;
}
function incrementLike() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var like = sheet.getRange('B1').getValue(); // 残念数を保存するセル
like++;
sheet.getRange('B1').setValue(like); // 残念数を保存するセル
return like;
}
１つのスプレッドシートで複数の「いいねボタン」を作成する場合は、「残念ボタン」毎にセルを変更（2箇所）して下さい
② コード like.html（残念）
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="like-container">
<button id="likeButton" onclick="disabled=true; incrementLike()">残念！</button>
<div id="likeCount"></div>
</div>
<script>
document.getElementById('likeButton').addEventListener('click', () => {
google.script.run.withSuccessHandler((count) => {
// ☹ と$ の間のスペースを削除してもOKです。☹ を別の絵文字などに置き換えても、削除してもOKです。
document.getElementById('likeCount').innerText = `☹ ${count}`;
}).incrementLike();
});
</script>
</body>
</html>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: left; /* 横の配置：left（左）・center（中央）・right（右）（「ボタン」と「残念数」を横並びにする場合は left を選択して下さい */
align-items: start; /* 縦の配置：start（上）・center（中央）・end（下） */
height: 100vh;
margin: 0;
background: white;
}
.like-container {
display: flex;
flex-direction: row; /* 「ボタン」と「残念数」の配置：row（横並び）・column（縦並び） */
text-align: center;
align-items: center;
}
/* 残念ボタン */
#likeButton {
color: #404040;
font-size: 1.2em;
background-color: transparent;
border: 0.1em solid;
border-radius: 4px;
padding: 0.3em 0.7em; /* 数値を大きくすれば、「ボタン」が上下・左右に大きくなります */
line-height: 1.2em;
margin: 8px; /* 下の影の大きさに合わせます */
cursor: pointer;
outline: 0;
}
/* 残念ボタンマウスホバー時 */
#likeButton:hover {
color: white;
background-color: #404040;
}
/* 残念ボタンマウスクリック時 */
#likeButton:focus-within {
box-shadow: 0 0 8px #606060; /* 影の大きさと色 */
}
/* 残念数カウンター */
#likeCount {
color: #404040; /* 背景色（bodyのbackgroundと同色）にすれば、カウンターは常に非表示になります */
font-size: 1.2em;
line-height: 1.2em;
/* 以下は「残念数」を枠線で囲う場合に設定 */
background-color: transparent;
border: 0em solid transparent;
border-radius: 0px;
padding: 0em 0em;
}
</style>
ピンク・青色・オレンジ箇所はお好みで変更して下さい
作成手順を見る
まずは、以下のどちらで作成するか決めましょう
作成手順は、基本的に一緒です
スプレッドシート：いいねボタン＝１：複数 で作成する
メリット：デプロイの際のアクセス認証が1回で済むため、「いいねボタン」の作成が容易
デメリット：Apps Script は最後に作成した「いいねボタン」のものに上書きされるため、個々の「いいねボタン」の変更が面倒
▲ たくさんの「いいねボタン」を作成し、その後の変更はあまり行わない人向け
スプレッドシート：いいねボタン＝１：１で 作成する
メリット：Apps Script は個々の「いいねボタン」に対応しているため、変更が容易
デメリット：デプロイの際のアクセス認証を何回も行うため、「いいねボタン」の作成が面倒
▲ 「いいねボタン」の数は多くないが、頻繁にデザインなどを変更したい人向け
Google アプリからスプレッドシートを開く
空白のスプレッドシートをクリック
赤枠をクリックし、ファイル名を いいねボタン（任意）に変更
複数のスプレッドシートを使う方は、もちろんすべて異なるファイル名にします
拡張機能の Apps Script をクリック
無題のプロジェクトをクリックし、プロジェクト名を いいねボタン（任意）に変更
スプレッドシート：いいねボタン＝１：複数 の場合
プロジェクト名は同じでOK（スプレッドシートが１つなので、プロジェクトも１つです）
スプレッドシート：いいねボタン＝１：１ の場合
（複数のプロジェクトになるため）ボタンごとに、いいねボタン１・いいねボタン２ などと区別します
コード.gs をクリック → 上記 コード GS をペースト → （いいね数をカウントする）セル（A1）を変更する場合は、赤枠の２箇所は同じセル番地を指定
（スプレッドシート：いいねボタン＝１：複数 の場合は、「いいねボタン」ごとにセル番地（B1,C1など）を指定 ）
→ 青枠のプロジェクト保存アイコンをクリック（デプロイすればプロジェクトは保存されるので、クリックしないでもOK）
ファイルを追加（＋）をクリック → HTMLをクリック
ファイル名を無題から like（任意）に変更（ファイル名が like.html）となります
上記コード like.html をペースト → 青枠のプロジェクト保存アイコンをクリック（デプロイすればプロジェクトは保存されるので、クリックしないでもOK）
デプロイに進んでください
右上 デプロイの新しいデプロイをクリック
設定からウェブアプリをクリック
新しい説明文をいいねボタン（任意）に変更 → アクセスできるユーザーを 全員 に変えデプロイをクリック
スプレッドシート：いいねボタン＝１：複数 の場合は、ボタンごとに、いいねボタン１・いいねボタン２ などと説明文を区別します。
また、説明文の文字数は８文字（全角の場合）までにしましょう（理由は、後述）
アクセスを承認をクリック
以下は表記が日本語になっているかもしれません
アカウントをクリック
Advanced をクリック
Go to いいねボタン（unsafe）をクリック
Allow をクリック
URLをコピーし、完了
このURLをGoogleサイトに埋め込めば、「いいねボタン」の完成です。
２つ以上「いいねボタンを」作成する場合
スプレッドシート：いいねボタン＝１：１ の方は、シートごとに以上の作業を繰り返します。
スプレッドシート：いいねボタン＝１：複数 の方は、いいね数を保存するセルを変更し、新たにデプロイするだけです。
これ以降は、デプロイ管理の説明です
デプロイの管理画面
作成済みのスプレッドシート（いいねボタン）を開く → Apps Script
デプロイ → デプロイを管理
青枠にはデプロイ時に説明文に書き込んだ語句（私は「いいね１採用」～「いいね６採用」としています）がデプロイ履歴として新しい順に並んでいます。
これが、8文字を超えると文字の右側が隠れてしまいデプロイ履歴の判別がしにくくなります。（右上の鉛筆アイコンをクリックし、新たにデプロイし直せば、変更もできます）
赤枠には「いいねボタン」を設置する際に埋め込んだURLのコピーボタンがあります。
つまり、Apps Script のコード自体は最後に作成した「いいね６採用」のものしかスプレッドシートに残っていませんが、デプロイ履歴をクリックすればURLのコピーはすべて手に入るわけです。
これで、作成済みの「いいねボタン」をいつでも他のページや他のサイトに設置・移設することができます。
デプロイ履歴の削除方法
デプロイ履歴の上限は、1プロジェクトにつき200で、これを超えるとデプロイできなくなります
個別削除方法（（✕）は画像なし）
個別削除ができない場合は次の一括削除を実行してください
スプレッドシートファイルを開く → Apps Script → デプロイ → デプロイを管理（✕）
プロジェクト履歴アイコン
ケバブメニュー（︙）→ このバージョンを削除する
削除（✕）
表示されているのは、バージョンと日付で、説明文はありません
一括削除方法（（✕）は画像なし）
アーカイブしてからの削除ですので、こちらのほうが面倒ですが、説明を見ながら削除できます
スプレッドシートファイルを開く → Apps Script → デプロイ → デプロイを管理（✕）
履歴の選択 → アーカイブアイコン
アーカイブ（✕）
完了（✕）
１つずつアーカイブするため、とても面倒です
プロジェクト履歴アイコン
バージョンの一括削除アイコン
チェック → 削除
削除（✕）
完了（✕）
Google Sites
Report abuse