Geminiで実現！ Tampermonkeyスクリプト超速開発体験

画面が小さいのでタスクバーを自動で消すようしていて時間がみえない。ブラウザの左側に小さなデジタル時計を表示させたいと漠然と考えていました。そこで、Tampermonkey用のスクリプトをGeminiで生成してみようと思い立ちました。

まずGeminiのGemに登録してみました。コーディングパートナーのサンプルをベースにTampermonkeyの形式を付け加えるという簡単な指定だけで、一瞬にして目的のスクリプトが完成し、すぐに動作しました。

その後、「クリックで消せる」機能を追加する修正を依頼しましたが、それもまたあっという間に修正スクリプトが提示されたのには本当に驚愕しました。あまりにも簡単に、そして高いレベルのスクリプトが出来上がってしまうことに、正直唖然としてしまいました。

細かいコーディングの知識や使い込みはまだ不十分だと自覚していますが、それでもGeminiを使うだけで、非常に質の高いスクリプトが手に入る。最近使い始めたAI生成システムが、まさかここまで凄いものだとは、改めて驚きを禁じ得ません。

下は今回のスクリプトです。

// ==UserScript==
// @name         ウェブページ上のデジタル時計 (クリックで非表示機能付き)
// @namespace    http://tampermonkey.net/
 @version      1.1  バージョンを更新しました
// @description  ウェブページの右上にリアルタイムの24時間制デジタル時計を表示します。クリックで非表示にできます。
// @author       あなた
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
	'use strict';

	// 1. 時計を表示するための要素を作成する
	const clockDisplay = document.createElement('div');

	// 2. CSSを設定して、時計を画面の右上に固定表示する
	clockDisplay.id = 'tampermonkey-digital-clock';
	clockDisplay.style.position = 'fixed';
	clockDisplay.style.top = '10px';
	clockDisplay.style.right = '10px';
	clockDisplay.style.zIndex = '10000';
	clockDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
	clockDisplay.style.color = 'lime';
	clockDisplay.style.padding = '5px 10px';
	clockDisplay.style.borderRadius = '5px';
	clockDisplay.style.fontSize = '24px';
	clockDisplay.style.fontFamily = 'monospace';
	clockDisplay.style.fontWeight = 'bold';
	clockDisplay.style.cursor = 'pointer'; // ★ マウスカーソルをポインターに変更し、クリック可能であることを示す

	// ページに時計要素を追加する
	document.body.appendChild(clockDisplay);

	// 3. 時刻を更新する関数
	function updateClock() {
		const now = new Date();
		const hours = String(now.getHours()).padStart(2, '0');
		const minutes = String(now.getMinutes()).padStart(2, '0');
		const seconds = String(now.getSeconds()).padStart(2, '0');

		const timeString = `${hours}:${minutes}:${seconds}`;
		clockDisplay.textContent = timeString;
	}

	// ★ 4. クリックイベントを追加して、時計を非表示にする
	clockDisplay.addEventListener('click', function() {
		// 要素の display スタイルを 'none' に設定し、非表示にする
		clockDisplay.style.display = 'none';

		// 開発者向けのヒント:
		// 一度非表示にすると元に戻す手段がないため、
		// もし「再表示」機能が必要な場合は、別の操作（例：キーボードショートカットなど）を追加する必要があります。
	});

	// 初回実行と1秒ごとの更新
	updateClock();
	setInterval(updateClock, 1000);
})();