自作プラグイン/analogclock.inc.php の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• 自作プラグイン/analogclock.inc.php へ行く。
• 自作プラグイン/analogclock.inc.php の差分を削除

#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