天気図を表示する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%;
}