// ==UserScript==
// @name カラーピッカーとランダムカラー
// @namespace http://tampermonkey.net/
// @version 1.8
// @description カラーピッカーでオリジナルパレット！ランダムで楽しくお絵描き！
// @author You
// @match https://pictsense.com/*
// @grant none
// @license MIT
// @downloadURL none
// ==/UserScript==
(function() {
'use strict';
setTimeout(() => {
if(document.getElementById("nativeColorPicker")) return;
const container = document.createElement("div");
container.id = "nativeColorPicker";
container.style.position = "fixed";
container.style.top = "100px";
container.style.left = "20px";
container.style.zIndex = 9999;
container.style.backgroundColor = "#222";
container.style.padding = "8px";
container.style.borderRadius = "6px";
container.style.color = "#fff";
container.style.fontFamily = "Arial,sans-serif";
container.style.userSelect = "none";
container.style.boxShadow = "0 0 10px #000";
container.style.cursor = "grab";
container.innerHTML = `
`;
document.body.appendChild(container);
const colorInput = document.getElementById("colorInputNative");
const colorIndexInput = document.getElementById("colorIndex");
const applyBtn = document.getElementById("applyColorBtn");
const randomBtn = document.getElementById("randomColorBtn");
const paletteButtons = Array.from(document.querySelectorAll("#colorPalette button")).slice(0, 10);
function updateColorButton(index, hex) {
const btn = paletteButtons[index];
btn.setAttribute("data-color", hex.slice(1));
btn.style.backgroundColor = hex;
}
function getRandomColor() {
// 0-255の値を16進数2桁で返す
const r = Math.floor(Math.random() * 256).toString(16).padStart(2, "0");
const g = Math.floor(Math.random() * 256).toString(16).padStart(2, "0");
const b = Math.floor(Math.random() * 256).toString(16).padStart(2, "0");
return `#${r}${g}${b}`;
}
applyBtn.addEventListener("click", () => {
const hex = colorInput.value;
const index = parseInt(colorIndexInput.value, 10) - 1;
updateColorButton(index, hex);
});
randomBtn.addEventListener("click", () => {
paletteButtons.forEach((btn, i) => {
const randomHex = getRandomColor();
updateColorButton(i, randomHex);
});
alert("ランダムな色でお絵描きしてみ～");
});
// ドラッグで移動
let isDragging = false;
let offsetX, offsetY;
container.addEventListener("mousedown", (e) => {
isDragging = true;
offsetX = e.clientX - container.getBoundingClientRect().left;
offsetY = e.clientY - container.getBoundingClientRect().top;
container.style.cursor = "grabbing";
});
document.addEventListener("mousemove", (e) => {
if (!isDragging) return;
container.style.left = `${e.clientX - offsetX}px`;
container.style.top = `${e.clientY - offsetY}px`;
});
document.addEventListener("mouseup", () => {
isDragging = false;
container.style.cursor = "grab";
});
}, 1500);
})();