日付を選ばせてデライトのその日が知名になっているページを開くUserScript

ダークモードバージョン

code:js

scrapbox.PageMenu.addMenu({

title: '日付輪郭を開く',

onClick: () => {

// コンテナを作成

const container = document.createElement('div');

Object.assign(container.style, {

position: 'absolute',

zIndex: 1000,

top: '50%',

left: '50%',

transform: 'translate(-50%, -50%)',

backgroundColor: '#2e2e2e',

padding: '30px',

borderRadius: '12px',

fontSize: '18px',

textAlign: 'center',

color: '#fff',

boxShadow: '0 4px 6px rgba(0, 0, 0, 0.2)',

width: '350px',

fontFamily: 'Arial, sans-serif',

display: 'flex',

flexDirection: 'column',

alignItems: 'center',

});

// 1段目: 説明文

const description = document.createElement('p');

description.textContent = '日付を選んで「OK」を押すと、デライトの指定した日の輪郭が開きます。';

Object.assign(description.style, {

marginBottom: '20px', // 説明文と次の要素の間にスペース

fontSize: '16px',

whiteSpace: 'pre-wrap',

wordWrap: 'break-word',

maxWidth: '300px',

});

container.appendChild(description);

// 2段目: 年、月、日

const dateContainer = document.createElement('div');

Object.assign(dateContainer.style, {

display: 'flex',

justifyContent: 'center',

marginBottom: '20px', // 日付選択と次の要素の間にスペース

});

const yearSelect = document.createElement('select');

const monthSelect = document.createElement('select');

const daySelect = document.createElement('select');

const currentDate = new Date();

const currentYear = currentDate.getFullYear();

const currentMonth = currentDate.getMonth() + 1;

const currentDay = currentDate.getDate();

const createOption = (value, text) => {

const option = document.createElement('option');

option.value = value;

option.textContent = text;

return option;

};

for (let i = currentYear - 100; i <= currentYear; i++) {

const option = createOption(i, i);

if (i === currentYear) option.selected = true;

yearSelect.appendChild(option);

}

for (let i = 1; i <= 12; i++) {

const option = createOption(i, i);

if (i === currentMonth) option.selected = true;

monthSelect.appendChild(option);

}

for (let i = 1; i <= 31; i++) {

const option = createOption(i, i);

if (i === currentDay) option.selected = true;

daySelect.appendChild(option);

}

const selectStyle = {

backgroundColor: '#444',

color: '#fff',

borderRadius: '8px',

padding: '10px',

fontSize: '16px',

margin: '5px',

width: '100px',

};

Object.assign(yearSelect.style, selectStyle);

Object.assign(monthSelect.style, selectStyle);

Object.assign(daySelect.style, selectStyle);

dateContainer.appendChild(yearSelect);

dateContainer.appendChild(monthSelect);

dateContainer.appendChild(daySelect);

container.appendChild(dateContainer);

// 3段目: OKボタン、キャンセルボタン

const buttonContainer = document.createElement('div');

buttonContainer.style.marginTop = '20px';

// OKボタン

const okButton = document.createElement('button');

okButton.textContent = 'OK';

Object.assign(okButton.style, {

fontSize: '18px',

padding: '12px 20px',

height: '50px', // 高さを統一

backgroundColor: '#6c8cff',

color: '#fff',

borderRadius: '6px',

cursor: 'pointer',

transition: 'background-color 0.3s, border-color 0.3s',

marginRight: '10px', // OKボタンとキャンセルボタンの間隔

});

okButton.addEventListener('mouseover', () => {

okButton.style.backgroundColor = '#556bd3';

okButton.style.borderColor = '#556bd3';

});

okButton.addEventListener('mouseout', () => {

okButton.style.backgroundColor = '#6c8cff';

okButton.style.borderColor = '#6c8cff';

});

// キャンセルボタン

const cancelButton = document.createElement('button');

cancelButton.textContent = 'キャンセル';

Object.assign(cancelButton.style, {

fontSize: '16px',

padding: '10px 18px',

height: '50px', // 高さを統一

backgroundColor: '#e74c3c',

color: '#fff',

borderRadius: '6px',

cursor: 'pointer',

transition: 'background-color 0.3s, border-color 0.3s',

});

cancelButton.addEventListener('mouseover', () => {

cancelButton.style.backgroundColor = '#c0392b';

cancelButton.style.borderColor = '#c0392b';

});

cancelButton.addEventListener('mouseout', () => {

cancelButton.style.backgroundColor = '#e74c3c';

cancelButton.style.borderColor = '#e74c3c';

});

// ボタンをボタンコンテナに追加

buttonContainer.appendChild(okButton);

buttonContainer.appendChild(cancelButton);

// ボタンコンテナを全体コンテナに追加

container.appendChild(buttonContainer);

// コンテナをページに追加

document.body.appendChild(container);

// OKボタンが押されたらURLを開く

okButton.addEventListener('click', () => {

const year = yearSelect.value;

const month = monthSelect.value;

const day = daySelect.value;

if (year && month && day) {

window.open(url, '_blank');

document.body.removeChild(container); // UIを閉じる

}

});

// キャンセルボタンが押されたらUIを閉じる

cancelButton.addEventListener('click', () => {

document.body.removeChild(container); // UIを閉じる

});

}

});

シンプルバージョン

code:script.js

scrapbox.PageMenu.addMenu({

title: '日付輪郭を開く',

onClick: () => {

// 年、月、日を選択するためのコンテナを作成

const container = document.createElement('div');

// スタイルをObject.assignで設定

Object.assign(container.style, {

position: 'absolute',

zIndex: 1000,

top: '50%',

left: '50%',

transform: 'translate(-50%, -50%)',

backgroundColor: 'white',

padding: '30px',

borderRadius: '10px',

fontSize: '18px',

textAlign: 'center',

width: '300px',

});

// 説明文を追加

const description = document.createElement('p');

description.textContent = '日付を選んで「OK」を押してください。';

container.appendChild(description);

// 年、月、日を選択するためのセレクトボックスを作成

const yearSelect = document.createElement('select');

const monthSelect = document.createElement('select');

const daySelect = document.createElement('select');

// 現在の日付をデフォルトとして設定

const currentDate = new Date();

const currentYear = currentDate.getFullYear();

const currentMonth = currentDate.getMonth() + 1; // 月は0ベースなので+1

const currentDay = currentDate.getDate();

// 年、月、日の選択肢を作成

for (let i = currentYear - 100; i <= currentYear; i++) {

const option = document.createElement('option');

option.value = i;

option.textContent = i;

if (i === currentYear) option.selected = true; // デフォルト選択

yearSelect.appendChild(option);

}

for (let i = 1; i <= 12; i++) {

const option = document.createElement('option');

option.value = i;

option.textContent = i;

if (i === currentMonth) option.selected = true; // デフォルト選択

monthSelect.appendChild(option);

}

for (let i = 1; i <= 31; i++) {

const option = document.createElement('option');

option.value = i;

option.textContent = i;

if (i === currentDay) option.selected = true; // デフォルト選択

daySelect.appendChild(option);

}

// セレクトボックスをコンテナに追加

container.appendChild(yearSelect);

container.appendChild(monthSelect);

container.appendChild(daySelect);

// OKボタンを作成

const okButton = document.createElement('button');

okButton.textContent = 'OK';

okButton.style.marginTop = '20px';

okButton.style.fontSize = '18px';

// ボタンをコンテナに追加

container.appendChild(okButton);

// コンテナをページに追加

document.body.appendChild(container);

// OKボタンが押されたらURLを開く

okButton.addEventListener('click', () => {

const year = yearSelect.value;

const month = monthSelect.value;

const day = daySelect.value;

if (year && month && day) {

// YYYY/M/D形式に変換

window.open(url, '_blank');

document.body.removeChild(container); // セレクトボックスを閉じる

}

});

}

});