/Mijinko/天気図を表示するUserScript

generated at 11/17/2024, 7:16:43 AM
天気図を表示するUserScript

以下を錬金釜に突っ込んで新しいUserScriptを作る
/villagepump/天気図を表示するUserCSS
takker/アナログ時計を表示するUserScript

呼び出し例
jsimport { setupWeatherMap } from "/api/code/Mijinko/天気図を表示するUserScript/script.js";
setupWeatherMap(true)
css@import "/api/code/Mijinko/天気図を表示するUserScript/style.js";

 setupWeatherMap() を実行するためのボタン等はご自身で実装してください

スクリプト本体
script.jsimport  "/api/code/Mijinko/github.com%2Fmatthewp%2Fanalog-clock%2Fclock.js/clock.js";

export let isWeatherMapHidden = false
const mapImgSrc = "https://takker-weather.vercel.app/jma/weather-map/archives/today.png"

export function setupWeatherMap(hidden = isWeatherMapHidden) {
  if (typeof hidden != "boolean")
    throw new TypeError("setHidden must be boolean!")
  
  if (document.querySelector(".weather-map") === null)
    generateMapImg() // analog-clockタグがなかったら生成する
  const mapDOM = document.querySelector(".weather-map")
  mapDOM.hidden = hidden
  isWeatherMapHidden = mapDOM.hidden
}

function generateMapImg(hidden = isWeatherMapHidden) {
  const mapDOM = document.createElement("div")
  mapDOM.className = "weather-map"
  mapDOM.hidden = hidden
  const mapImg = document.createElement("img")
  mapImg.src = mapImgSrc
  mapDOM.append(mapImg)
  isWeatherMapHidden = mapDOM.hidden
  document.body.append(mapDOM)
}

CSS
style.css.weather-map {
  position: fixed;
  top: 40px;
  right: 103px;
  width: 255px;
  height: 255px;
  content: "";
}
.weather-map img {
  display: block;
  width: 100%;
  height: 100%;
}