Udemy講座の目次を作成する
やること
Udemy講座の目次をぱぱっと作成してしまおう
できること
Udemy講座の目次がクリップボードにコピーされます。
やりかた
ブックマークレットでサクッと
以下をブックマークレットとしてブラウザに登録してください。
javascript:document.querySelectorAll(".section--section--BukKG").forEach(el=>{ if(el.getAttribute("aria-expanded") == "false" ){ el.querySelector("[role=button]").click(); }}); function execCopy(string) { var tmp = document.createElement("div"); var pre = document.createElement("pre"); pre.style.webkitUserSelect = "auto"; pre.style.userSelect = "auto"; tmp.appendChild(pre).textContent = string; var s = tmp.style; s.position = "fixed"; s.right = "200%"; document.body.appendChild(tmp); document.getSelection().selectAllChildren(tmp); var result = document.execCommand("copy"); document.body.removeChild(tmp); return result;} var ary = [];document.querySelectorAll(".curriculum-item-link--title--zI5QT").forEach(el=>{ary.push(el.innerText.split("\n").join(""));});console.log(ary.join("\r\n"));execCopy(ary.join("\r\n"));
使い方
Udemyの講座ページを開いて実行します。
あとは、エディタに貼り付けて加工!
以上!
解説
整形
// javascript:
// ★(1)ここで右側のプルダウンをすべて展開します!
document.querySelectorAll(".section--section--BukKG").forEach(el => {
if (el.getAttribute("aria-expanded") == "false") {
el.querySelector("[role=button]").click();
}
});
// ★(2)クリップボードにコピーするための関数を定義します!
function execCopy(string) {
var tmp = document.createElement("div");
var pre = document.createElement("pre");
pre.style.webkitUserSelect = "auto";
pre.style.userSelect = "auto";
tmp.appendChild(pre).textContent = string;
var s = tmp.style;
s.position = "fixed";
s.right = "200%";
document.body.appendChild(tmp);
document.getSelection().selectAllChildren(tmp);
var result = document.execCommand("copy");
document.body.removeChild(tmp);
return result;
}
// ★(3)要素を取得して配列に詰め込みます!
var ary = [];
document.querySelectorAll(".curriculum-item-link--title--zI5QT").forEach(el => {
ary.push(el.innerText.split("\n").join(""));
});
console.log(ary.join("\r\n"));
// ★(4)配列をくっつけて、クリップボードにコピーします!
execCopy(ary.join("\r\n"));
あとがき
取得対象の要素名(クラス名など)が変わると動かなくなります。
2020/07/05現在動いているので目次を取りたい際は試してみて下さい。