セクションタイトル抽出

ページ内のセクション区切りとなっている行をタイトルとして抽出するツール。

このページの以下のコードを任意のページにコピーして使います。

code:RUN.html

code:RUN.css

RUNボタンをクリックして、ダイアログボックスが出たら、セクション・タイトルを抽出したいページへ移動します。

そこで、「START」ボタンをクリックすると、クリップボードにそのページのセクション・タイトル列が格納されます。

OKボタンを押して終了します。

クリップボードのテキストをペーストしてご利用下さい。

プレゼン資料のタイトル列挙や目次作成などに使います。

https://gyazo.com/75878f43b4cf6a4ca755835e42e423a5

code:RUN.html

<div class="dialog">

<p id="dialogMessage">セクションタイトルとなる行の抽出を行います。

<br>目的のページに移動してSTARTをクリックして下さい。</p>

<button id="startButton">START</button>

</div>

code:RUN.css

.dialog {

position: fixed;

top: 50%;

left: 50%;

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

width: 600px;

padding: 20px;

border-radius: 5px;

text-align: center;

}

button {

border: none;

margin: 10px 20px;

padding: 10px 50px;

border-radius: 5px;

cursor: pointer;

}

code:RUN.js

// STARTボタンがクリックされたら実行

document.getElementById('startButton').addEventListener('click', function() {

setTimeout(async function() { // 終了時告知のための同期関数

var spans = document.querySelectorAll('span.text');

var extractedText = '';

for (var i = 0; i < spans.length; i++) {

if (span.closest('.line.section-title')) {

extractedText += span.textContent + '\n';

}

}

// クリップボードに保存

navigator.clipboard.writeText(extractedText)

.then(function() {

document.getElementById('dialogMessage').textContent

= '抽出結果がクリップボードにコピーされました。';

document.getElementById('startButton').textContent = 'OK';

document.getElementById('startButton').addEventListener('click', BeepAndReload);

})

.catch(function(err) {

document.getElementById('dialogMessage').textContent

= 'クリップボードへのコピーに失敗しました。';

document.getElementById('startButton').textContent = 'OK';

document.getElementById('startButton').addEventListener('click', BeepAndReload);

});

}, 500); /* 0.5秒後コールバック */

});

ダイアログボックス内のメーッセージとボタンの書き換えをしています。

UserCSS.icon

UserScript.icon