アナログ時計も連動して動くようにしました
10分進んでいる #10分未来時計 です
https://storied-hummingbird-e3a29b.netlify.app/
ソース
アナログ時計ではいつも10分進めた、未来で暮らしている。
時計が進んでいることによって、時間ギリギリで困るということがない。
また、何かでトラブルことがあっても、10分のバッファが十分に機能してたすかることが多い。
そして10分早く到着することによって、余剰の時間が生まれる。
そこで何かを始めてしまうと、元も子もない。そんな時に役立つのがルービックキューブ。
10分あればクリアできる。 頭も行動もクリアになる。
10分あれば目を瞑って、瞑想状態で仮眠もできる。
デジタル時計のアラームが機能してくれる。
そんなメリットが多いけれども、デジタル時計、とくにスマートウォッチには10分進めるというような機能がまったくないのだ。
パソコンで時計を進めるのは意外にむずかしかったが、java script で chatGPTで書いてもらった。
出来上がったものをベースに、これを入れたい、あれを入れたいと機能をリクエストしていきながら、一緒にコードも勉強中
カスタムHTML用
10分未来時計
<div id="clock"></div>
<script>
function updateClock() {
const now = new Date();
now.setMinutes(now.getMinutes() + 10); // 現在の時間に10分追加
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('clock').innerText = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000); // 1秒ごとに時計を更新
updateClock(); // ページが読み込まれたときにすぐに時計を表示
</script>
<style>
#clock {
font-size: 48px;
font-family: Arial, sans-serif;
color: #333;
text-align: center;
margin-top: 20%;
}
</style>
カスタムHTML用
10分未来時計
西暦日付入り
<div id="clock"></div>
<div id="date"></div> <!-- 日付表示用の要素を追加 -->
<script>
function updateClock() {
const now = new Date();
now.setMinutes(now.getMinutes() + 10); // 現在の時間に10分追加
// 時間部分のフォーマット
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 year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const weekdays = ["日", "月", "火", "水", "木", "金", "土"];
const weekday = weekdays[now.getDay()]; // 曜日を日本語で表示
// 時計と日付を表示
document.getElementById('clock').innerText = `${hours}:${minutes}:${seconds}`;
document.getElementById('date').innerText = `${year}/${month}/${day} (${weekday})`;
}
setInterval(updateClock, 1000); // 1秒ごとに時計を更新
updateClock(); // ページが読み込まれたときにすぐに時計を表示
</script>
<style>
#clock {
font-size: 48px;
font-family: Arial, sans-serif;
color: #333;
text-align: center;
margin-top: 20px;
}
#date {
font-size: 24px;
font-family: Arial, sans-serif;
color: #666;
text-align: center;
margin-top: 10px;
}
</style>
1. プラグインフォルダの作成:
•WordPressのwp-content/pluginsディレクトリ内に新しいフォルダを作成します。ここでは例として「ten_minutes_ahead_clock」とします。
2. プラグインファイルの作成:
•「ten_minutes_ahead_clock.php」というPHPファイルを、このフォルダの中に作成します。
ステップ 2: プラグインコードの記述
以下のコードを「ten_minutes_ahead_clock.php」ファイルに貼り付けます。
<?php
/*
Plugin Name: Ten Minutes Ahead Clock
Description: A plugin that displays a digital clock 10 minutes ahead of the current time.
Version: 1.0
Author: Your Name
*/
// ショートコード関数の定義
function ten_minutes_ahead_clock() {
// HTMLとJavaScriptコードを返す
return '
<div id="clock"></div>
<script>
function updateClock() {
const now = new Date();
now.setMinutes(now.getMinutes() + 10); // 現在の時間に10分追加
const hours = String(now.getHours()).padStart(2, "0");
const minutes = String(now.getMinutes()).padStart(2, "0");
const seconds = String(now.getSeconds()).padStart(2, "0");
document.getElementById("clock").innerText = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000); // 1秒ごとに時計を更新
updateClock(); // ページが読み込まれたときにすぐに時計を表示
</script>
<style>
#clock {
font-size: 48px;
font-family: Arial, sans-serif;
color: #333;
text-align: center;
margin-top: 20px;
}
</style>
';
}
// ショートコードを登録
add_shortcode('ten_minutes_ahead_clock', 'ten_minutes_ahead_clock');
ステップ 3: プラグインのアップロードと有効化
1. ten_minutes_ahead_clockフォルダを、WordPressのwp-content/pluginsディレクトリにアップロードします。
2. WordPress管理画面に移動し、プラグイン > インストール済みプラグインから「Ten Minutes Ahead Clock」を見つけて「有効化」をクリックします。
ステップ 4: プラグインの利用
1. 投稿やページの編集画面で、時計を表示したい場所に以下のショートコードを入力します。
[ten_minutes_ahead_clock]
2. プレビューまたは公開して、時計が10分進んだ状態で表示されているか確認します。
解説
ショートコードの定義 (add_shortcode) を使って、[ten_minutes_ahead_clock]というショートコードで時計を表示するように設定しています。
•プラグインコード内で、JavaScriptとCSSをreturn文内に埋め込んでいるため、ショートコードが呼び出されるたびに時計が表示されるようになります。
■WordPress公式ディレクトリでプラグインを公開
WordPress公式ディレクトリでプラグインを公開するための手順を以下に示します。公開することで、他のユーザーもプラグインをインストール・利用できるようになります。
手順 1: WordPress.org アカウントの作成
1. WordPress.orgにアクセスしてアカウントを作成します。アカウントはこちらから作成できます。
2. アカウントの作成後、ログインして準備完了です。
手順 2: プラグインの準備
1. プラグインのファイル構成：
プラグインには、以下のような基本的なファイル構成が必要です。ここでは、1ファイルだけのシンプルな構成にしています。
ten_minutes_ahead_clock/ └── ten_minutes_ahead_clock.php
2. プラグイン情報を確認：
プラグインファイル（例：ten_minutes_ahead_clock.php）の冒頭部分に記載したプラグイン情報が正確であるか確認してください。
/* Plugin Name: Ten Minutes Ahead Clock Description: A plugin that displays a digital clock 10 minutes ahead of the current time. Version: 1.0 Author: Your Name */
3. Readme ファイルの作成（推奨）：
WordPress公式プラグインディレクトリの仕様に合わせて、readme.txtを作成するのが望ましいです。このファイルにはプラグインの説明やインストール手順、ライセンス情報などを記載します。
readme.txtの例：
=== Ten Minutes Ahead Clock === Contributors: yourusername Tags: clock, digital clock, time Requires at least: 5.0 Tested up to: 6.3 Requires PHP: 7.0 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html == Description == A simple WordPress plugin that displays a digital clock 10 minutes ahead of the current time. == Installation == 1. Upload the `ten_minutes_ahead_clock` folder to the `/wp-content/plugins/` directory. 2. Activate the plugin through the 'Plugins' menu in WordPress. 3. Use the shortcode `[ten_minutes_ahead_clock]` in posts or pages. == Changelog == = 1.0 = * Initial release
手順 3: プラグインのディレクトリ申請
1. WordPress.orgのプラグインページにアクセスし、「プラグインの新規申請」を行います。
2. プラグイン名、説明、スラッグ（プラグインURLの一部に使用される）などの基本情報を入力します。
3. プラグインのZipファイルは申請時にはアップロードしませんが、ディレクトリに承認されると、SVNリポジトリにプラグインをアップロードする準備ができます。
手順 4: SVNでプラグインをアップロード
1. 申請が承認されると、WordPress.orgからSVNリポジトリのURLが提供されます。例: https://plugins.svn.wordpress.org/ten-minutes-ahead-clock/
2. SVNクライアント（例：TortoiseSVN、コマンドラインなど）を使用してリポジトリにアクセスし、プラグインファイルをアップロードします。
SVN コマンド例
svn co https://plugins.svn.wordpress.org/ten-minutes-ahead-clock/ cd ten-minutes-ahead-clock/ mkdir trunk cp -R /path/to/your/plugin/* trunk/ svn add trunk/* svn commit -m "Initial commit for Ten Minutes Ahead Clock plugin"
手順 5: プラグインの公開
SVNにアップロードすると、自動的にWordPress.orgのプラグインディレクトリで公開されます。公開後、検索やダウンロードが可能になります。
メンテナンスとアップデート
プラグインに更新が必要になった場合は、trunkフォルダのファイルを更新して再度SVN経由でコミットすることで、WordPress.orgに反映されます。readme.txtのバージョン情報も更新しておくと良いです。
これで、プラグインの公開と配布が完了します。
