💬
Googleサイトにコピーボタンを実装する方法(API不要)
初めに
社内ドキュメントの作成にGoogleサイトを使用しているのですが、コードの埋め込みでコピーボタンを実装しようとしたところ、一般的なAPIを使う方法では実装できませんでした。なのでAPIなしでコピーボタンを実装しました。
公開サイト
動作テスト用のページを公開しています。以下のリンクから確認できます。
動作のスクショ
以下のように、ボタンをクリックすると指定したテキストがコピーされます。
コピー前
コピー後
実装したコード
Googleサイトの埋め込む機能を使い、以下の手順でコードを追加します。
具体的な手順としては、埋め込む -> ウェブからの埋め込み -> 埋め込みコード を選択。以下のコードをコピペする。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>コピーボタン サンプル</title>
<style>
/* ボタンの基本スタイル（固定サイズ指定） */
button.copy-btn {
width: 100px; /* 固定幅 */
height: 40px; /* 固定高さ */
line-height: 40px; /* テキストを縦方向中央に配置 */
text-align: center; /* テキストを横方向中央に配置 */
font-size: 16px;
cursor: pointer;
border: none;
background-color: #388fed; /* デフォルト背景色 */
color: white;
border-radius: 5px;
transition: background-color 0.3s ease;
box-sizing: border-box;
}
button.copy-btn:focus {
outline: none;
}
/* コピー後の状態（背景色変更） */
button.copy-btn.copied {
background-color: #bbc0c0;
color: #ffffff;
}
.defaultTable {
border-collapse: collapse;
border: 1px solid #000;
}
.tableHead {
border: 1px solid #000;
background: #ffbb1e;
padding: 20px;
}
.mainTable {
border: 1px solid #000;
padding: 20px;
}
.copyTable {
border: 1px solid #000;
padding: 5px;
}
.bold { font-weight: bold; }
.bolder { font-weight: bolder; }
</style>
<script>
// 各ボタンの状態を管理するオブジェクト
var buttonState = {};
// ボタンに順番にIDを割り当てるためのカウンター
var buttonCounter = 1;
var copy_test = "Copy";
var copied_test = "Copied!";
/**
* コピー処理を行う関数
* @param {string} text - コピーするテキスト
* @param {HTMLElement} button - クリックされたボタン要素
*/
function copyToClipboard(text, button) {
// ボタンにIDが設定されていなければ、順番に割り当てる（1, 2, 3, …）
if (!button.id) {
button.id = buttonCounter++;
}
var buttonId = button.id;
// 連続クリック防止のため、状態を確認
if (!buttonState[buttonId]) {
buttonState[buttonId] = true;
// 一時的なテキストエリアを生成して、指定されたテキストをコピー
var textArea = document.createElement('textarea');
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
// ボタンの元のテキストを保持し、一時的に "Copied!" に変更
var originalText = button.innerText;
button.innerText = copied_test;
// CSSクラスを追加して背景色を変更
button.classList.add('copied');
// 3秒後に元の状態に戻す
setTimeout(function() {
button.innerText = originalText;
button.classList.remove('copied');
buttonState[buttonId] = false;
}, 3000);
}
}
// ページ読み込み時に、.copy-btn クラスを持つ全てのボタンを設定する
document.addEventListener("DOMContentLoaded", function() {
var buttons = document.querySelectorAll('.copy-btn');
buttons.forEach(function(btn) {
// ボタン内が空の場合、初期ラベルとして「コピー」をセットする
if (!btn.innerText || btn.innerText.trim() === "") {
btn.innerText = copy_test;
}
// クリックイベントを登録する
btn.addEventListener('click', function() {
// data-copy-text 属性の値を取得してコピーする
var text = btn.getAttribute('data-copy-text');
if (text) {
copyToClipboard(text, btn);
} else {
// data-copy-text 属性がない場合は何もしない、またはデフォルト値を設定する
console.warn("data-copy-text 属性が設定されていません。");
}
});
});
});
</script>
</head>
<body>
<table class="defaultTable">
<tr>
<th class="tableHead">機能</th>
<th class="tableHead">コマンド</th>
<th class="tableHead"></th>
</tr>
<tr>
<td class="mainTable" align="center" class="bold"><span class="bolder">コンテナの監視</span></td>
<td class="mainTable" align="center" valign="middle" >docker ps (-a)</td>
<td class="copyTable" align="center" valign="middle" ><button class="copy-btn" data-copy-text="docker ps"></button></td>
</tr>
<tr>
<td class="mainTable" align="center" class="bold"><span class="bolder"></span></td>
<td class="mainTable" align="center" valign="middle" ></td>
<td class="copyTable" align="center" valign="middle" ><button class="copy-btn" data-copy-text=""></button></td>
</tr>
</table>
</body>
</html>
以下のように data-copy-text にコピーしたい文字列を入れることで、ボタンを作成できます。
<!-- コピーボタン -->
<button class="copy-btn" data-copy-text="ここにコピーしたいテキストを入力">コピー</button>
Discussion