☰

Waze Editor Clock

Wazeエディターにドラッグ可能でサイズ変更可能な装飾付き時計を表示します

  1. // ==UserScript==
  2. // @name        Waze Editor Clock
  3. // @namespace   waze-editor-clock
  4. // @version     1.8
  5. // @description Wazeエディターにドラッグ可能でサイズ変更可能な装飾付き時計を表示します
  6. // @author      Bard
  7. // @match       https://www.waze.com/ja/editor?env=*
  8. // @grant       none
  9. // ==/UserScript==
  10.  
  11. // 時計要素
  12. const clockElement = document.createElement('div');
  13. clockElement.id = 'waze-editor-clock';
  14. clockElement.style.cssText = `
  15.   position: fixed;
  16.   bottom: 19px;
  17.   left: 50%; /* 中央揃え */
  18.   transform: translateX(-50%);
  19.   z-index: 1000;
  20.   background-color: #007bff; /* 背景色を青に変更 */
  21.   color: #fff; /* テキスト色を白に変更 */
  22.   padding: 10px;
  23.   border-radius: 5px; /* 角を丸くする */
  24.   font-size: 23px;
  25.   cursor: move; /* 時計をドラッグ可能にする */
  26.   aspect-ratio: 1; /* アスペクト比を維持する */
  27.   resize: both; /* サイズ変更を有効にする */
  28.   overflow: hidden; /* サイズ変更中のオーバーフローを隠す */
  29.   min-width: 100px; /* 最小幅を設定 */
  30.   min-height: 40px; /* 最小高さを設定 */
  31.   text-align: center; /* テキストを中央揃えにする */
  32. `;
  33.  
  34. // ローカルストレージから時計の位置とサイズを読み込む
  35. const storedClockStyle = localStorage.getItem('wazeEditorClockStyle');
  36. if (storedClockStyle) {
  37.   clockElement.style.cssText = storedClockStyle;
  38. }
  39.  
  40. // ドラッグイベントを処理する関数
  41. function handleDrag(event) {
  42.   const newX = event.clientX - offsetX;
  43.   const newY = event.clientY - offsetY;
  44.   // アスペクト比を維持するため、垂直方向の移動を制限する
  45.   if (newY >= 0 && newY + clockElement.offsetHeight <= window.innerHeight) {
  46.     clockElement.style.left = newX + 'px';
  47.     clockElement.style.top = newY + 'px';
  48.     // 新しい位置をローカルストレージに保存する
  49.     saveClockStyle();
  50.   }
  51. }
  52.  
  53. // ドラッグを開始する関数
  54. function startDrag(event) {
  55.   offsetX = event.clientX - clockElement.getBoundingClientRect().left;
  56.   offsetY = event.clientY - clockElement.getBoundingClientRect().top;
  57.   window.addEventListener('mousemove', handleDrag);
  58.   window.addEventListener('mouseup', stopDrag);
  59. }
  60.  
  61. // ドラッグを停止する関数
  62. function stopDrag() {
  63.   window.removeEventListener('mousemove', handleDrag);
  64.   window.removeEventListener('mouseup', stopDrag);
  65. }
  66.  
  67. // 時計のスタイルをローカルストレージに保存する関数
  68. function saveClockStyle() {
  69.   localStorage.setItem('wazeEditorClockStyle', clockElement.style.cssText);
  70. }
  71.  
  72. // ドラッグ中のオフセットを格納する変数
  73. let offsetX, offsetY;
  74.  
  75. // 時計をドラッグ可能にする
  76. clockElement.addEventListener('mousedown', startDrag);
  77.  
  78. // 1秒ごとに時計を更新する
  79. setInterval(() => {
  80.   const date = new Date();
  81.   const hours = date.getHours().toString().padStart(2, '0');
  82.   const minutes = date.getMinutes().toString().padStart(2, '0');
  83.   // 秒を時計表示から削除する
  84.   clockElement.textContent = `${hours}:${minutes}`;
  85. }, 1000);
  86.  
  87. // 時計要素をbodyに追加する
  88. document.body.appendChild(clockElement);