#author("2023-02-20T16:12:17+09:00","","") #author("2023-02-20T16:13:32+09:00","","") ** analogclock.inc.php [#wb01523e] |RIGHT:125|LEFT:360|c |~サマリ|アナログ時計プラグイン| |~サマリ|メニューバー用のアナログ時計プラグイン| |~リビジョン|1.0| |~対応バージョン|1.5.4| |~投稿者|[[Colug]]| |~投稿日|&new{2023-02-20 (月) 16:10:59};| ChatGPTにプラグインのプログラムと説明を生成させてみました。~ 不安定だったため、ところどころ手動で修正しました。~ ~ このPukiWikiプラグインはアナログ時計を表示するプラグインです。~ プラグイン名は「analogclock」で、引数は最大4つ指定できます。~ ** 書式 [#d23b75c9] #analogclock([針の色], [秒針の色], [ボーダーの色], [秒針の表示/非表示]) ** 引数 [#w9103815] |~引数|~説明|~デフォルト値|h |針の色|針の色を指定します。|#000000| |秒針の色|秒針の色を指定します。|#ff0000| |ボーダーの色|ボーダーの色を指定します。|#000000| |秒針の表示/非表示|true を指定すると秒針を表示します。false を指定すると秒針を非表示にします。|true| ** 使用例 [#l7725cb5] #analogclock(#000000, #00ff00, #0000ff, false) この使用例では、秒針は非表示にし、アナログ時計の針の色は緑色、ボーダーの色は青色に設定しています。 ** plugin/analogclock.inc.php [#xa3b7404] <?php /** * Analog Clock Plugin * * Syntax: #analogclock(hand_color, sec_hand_color, border_color, show_sec) * * @author ChatGPT * @license MIT License */ // アナログ時計を表示する間隔 define('PLUGIN_ANALOGCLOCK_INTERVAL', 100); // プラグインの実行時に実行される処理 function plugin_analogclock_convert() { $arg = func_get_args(); $hand_color = isset($arg[0]) ? $arg[0] : '#000000'; // 針の色 $sec_hand_color = isset($arg[1]) ? $arg[1] : '#ff0000'; // 秒針の色 $border_color = isset($arg[2]) ? $arg[2] : '#000000'; // ボーダーの色 $show_sec = isset($arg[3]) ? $arg[3] : true; // 秒針の表示/非表示 $interval = PLUGIN_ANALOGCLOCK_INTERVAL; $id = 'analogclock_' . md5(uniqid(rand(), true)); $js_sec_hand = $show_sec && $show_sec !== 'false' ? 'document.getElementById(\'second-hand-' . $id . '\').style.transform = "rotate(" + secondDeg + "deg)"' : ''; $html_sec_hand = $show_sec && $show_sec !== 'false' ? '<div id="second-hand-' . $id . '"></div>' : ''; $html = <<<EOD <script> function moveHands() { var date = new Date(); var hour = date.getHours() % 12; var minute = date.getMinutes(); var second = date.getSeconds(); var millisecond = date.getMilliseconds(); var hourDeg = hour * 30 + minute / 2; var minuteDeg = minute * 6; var secondDeg = (second + millisecond / 1000) * 6; document.getElementById('hour-hand-{$id}').style.transform = "rotate(" + hourDeg + "deg)"; document.getElementById('minute-hand-{$id}').style.transform = "rotate(" + minuteDeg + "deg)"; {$js_sec_hand} } setInterval(moveHands, {$interval}); </script> <style> #analog-clock-{$id} { border: 2px solid {$border_color}; border-radius: 50%; width: 100px; height: 100px; position: relative; } #hour-hand-{$id} { position: absolute; width: 6px; height: 30px; background-color: {$hand_color}; transform-origin: 50% 100%; top: 20px; left: 47px; } #minute-hand-{$id} { position: absolute; width: 4px; height: 45px; background-color: {$hand_color}; transform-origin: 50% 100%; top: 5px; left: 48px; } #second-hand-{$id} { position: absolute; width: 2px; height: 48px; background-color: {$sec_hand_color}; transform-origin: 50% 100%; top: 2px; left: 49px; } #clock-center-{$id} { position: absolute; width: 8px; height: 8px; border-radius: 50%; background-color: white; top: 45px; left: 45px; border: 1px solid {$border_color}; } </style> <div id="analog-clock-{$id}"> <div id="hour-hand-{$id}"></div> <div id="minute-hand-{$id}"></div> {$html_sec_hand} <div id="clock-center-{$id}"></div> </div> EOD; return $html; } ?> ** コメント [#o267a255] #comment