セクションタイトルへジャンプ（改）
https://gyazo.com/e8f5ebdabdddf06c66d5d72077541e9a
連続操作すると選択したセクションタイトルが更新されなくなる不具合がありました。
AI（Google Bard と Microsoft Bing）に 修正してもらいました。
動作（の解説文も書いてもらった）
ALT+S キーを押すと、ページ内の .section-title 以外の全ての要素が非表示になり、.section-title のみが表示される状態になります。これにより、.section-title を一覧表示することができます。
この状態で、マウスの左クリックをすると、クリックした .section-title がアクティブになり、その情報が記憶されます。アクティブになった .section-title の背景色がオレンジ色に変わります。
再度 ALT+S キーを押すと、非表示になっていた要素が再び表示され、ページが元の状態に戻ります。そして、記憶していた .section-title の位置まで自動的にスクロールします。
ノーマル状態で、マウスの左クリックをすると、選択していた .section-title の選択が解除され、背景色がオレンジ色になる表示も消えます。
以上の動作により、ユーザーは .section-title を一覧表示し、特定のセクションを選択してその位置までスクロールすることができます。これは大量の情報があるページで特定のセクションを素早く探すのに役立つ機能です。
◆ ピっと鳴く
code:script.js
window.SineBeep = function() {
return new Promise((resolve, reject) => {
var context = new AudioContext();
var oscillator = context.createOscillator();
oscillator.type = "sine";
oscillator.frequency.value = 1040; // 音の高さ
oscillator.connect(context.destination);
oscillator.start();
var beepDuration = 50; // Beep音の長さを変数に代入
setTimeout(function() {
oscillator.stop();
resolve(); // Promiseを解決 ビープ音が終了
}, beepDuration);
});
};
◆ セクションタイトルを抽出してジャンプ
code:script.js
let isHidden = false;
let activeTitle = null;
let previousActiveTitle = null;
let hasBeenHidden = false;
document.addEventListener('click', function(e) {
if (e.target.matches('.section-title .text') && hasBeenHidden) {
if (activeTitle === e.target && !isHidden) {
// 表示状態で同じタイトルをクリックした場合、選択を解除
activeTitle.parentNode.style.backgroundColor = '';
activeTitle = null;
previousActiveTitle = null;
} else {
// 新しいタイトルを選択した場合
if (previousActiveTitle) {
previousActiveTitle.parentNode.style.backgroundColor = '';
}
activeTitle = e.target;
activeTitle.parentNode.style.backgroundColor = 'rgba(255, 165, 0, 0.4)';
previousActiveTitle = activeTitle;
}
} else if (!isHidden && activeTitle) {
// 表示状態でタイトル以外をクリックした場合、選択を解除
activeTitle.parentNode.style.backgroundColor = '';
activeTitle = null;
previousActiveTitle = null;
}
});
document.addEventListener('keydown', function(e) {
if (e.altKey && e.key === 's') {
e.preventDefault();
if (isHidden) {
// 非表示要素をすべて表示 もとにもどす
document.querySelectorAll('.page .line > *:not(.section-title .text)').forEach(el => {
el.style.display = '';
});
// アクティブな要素があれば、画面1/4にスクロール
if (activeTitle) {
scrollToActiveTitle();
}
} else {
// セクションタイトル以外を非表示にして、タイトルリストとする。
document.querySelectorAll('.page .line > *:not(.section-title .text)').forEach(el => {
el.style.display = 'none';
});
hasBeenHidden = true;
}
isHidden = !isHidden;
// 初期状態に戻す（プログラムの「終了」を模倣）
if (!isHidden) {
hasBeenHidden = false;
}
}
});
function scrollToActiveTitle() {
if (!activeTitle) return;
const activeTitleRect = activeTitle.getBoundingClientRect();
const windowHeight = window.innerHeight;
const scrollTop = window.pageYOffset;
const offsetY = activeTitleRect.top + scrollTop - (windowHeight / 4);
SineBeep(); // 動作音
window.scrollTo({
top: offsetY,
behavior: 'smooth'
});
// スクロールした先の行全体の背景色を orange に変更
activeTitle.parentNode.style.backgroundColor = 'rgba(255, 165, 0, 0.4)';
previousActiveTitle = activeTitle;
}
不具合
ページリロードをしないと機能しなくなることがあります。
引用行がセクションタイトルになっていると、ジャンプしてくれません。
プログラムの修正箇所がわかりません。
ご教示いただけると幸いです。
補足
セクション区切りを可視化する 2
セクション番号や区切り線の表示を連動させると良いかも。