見たまんまスクラップ

Bookmarkletでスクラップするとき、なるべく元の修飾やらリンクやらを保持するようにしてみたよ。

まだ改善できそうなので随時更新する予定。

追記 2018-06-12

別ページで紹介している「WebからコピペしたらSB記法に変換する」のほうが効率がいいので、

選択範囲からのスクラップはごく最小限にしておいて、あとは必要箇所をコピペする方法がおすすめです！

機能努力目標なので失敗しても大目にみてね！！

ページにOG画像が設定されてたら取得

選択範囲内の画像とリンクはなるべく保持

埋め込まれたYouTube動画も保持

<b> <strong> は太字 [* ] に変換

<i> <em> は斜体 [/ ] に変換

<h1> <h2> <h3> はそれぞれ [**** ] [*** ] [** ] に変換

<code> はインラインコード記法に変換

連続する改行は2つまでに抑える

スクラップした日付を入れる

#scrap タグは最後の行に入れる

スクラップ結果はこんな感じ

例1) Vimの生産性を一撃で高めるシンプルなテクニック | RickyNews

1枚目がこのBookmarkletでスクラップしたページ。2枚目はデフォルトのBookmarkletを使用。

https://gyazo.com/1c7ba947e072127ca23d313fa751674b https://gyazo.com/508fc536b372c3d2d4842b92b0053b93

例2) ぶりのあら煮 by ４人娘ｍａｍａ【クックパッド】簡単おいしいみんなのレシピが282万品

1枚目と2枚目がこのBookmarkletでスクラップしたページ。3枚目はデフォルトのBookmarkletを使用。

https://gyazo.com/ce64345f26be9018dfe059385b74e6cc https://gyazo.com/82fc9f7b2d195a57e0b09ab04e44d0ca https://gyazo.com/e11421a22ac98c89261c49ec315e7cbc

例3) スペースを空けると意味が変わる単語ー everydayとevery dayの違いは何でしょうか | 英語 with Luke

ページによってはスクラップ結果がほとんど変わらない。

https://gyazo.com/d0c7b7e4cb165e970c89eb9e801c3669 https://gyazo.com/d76e50f9b7bc50ede50e9cc972d14441

うまくスクラップできないもの

URLが画像っぽくない画像

選択範囲が小さく、かつリンクを含む場合に失敗してしまうぽい

outerHTML の書き換えで怒られてる

WebからコピペしたらSB記法に変換するのスクリプトを入れてコピペすると大丈夫かも

つかいかた

2行目のここ変えてねってとこを自分のプロジェクトURLに変えて使ってね。

自分のプロジェクト名に書き換えるのめんどい！ので作った→ 見たまんまスクラップ Bookmarklet 生成器

code:なるべくがんばるスクラップ.js

javascript: (() => {

const site = 'https://scrapbox.io/ここ変えてね';

const title = window.prompt('なるべく見たまんまScrapするよ', document.title);

if (!title) return;

const ng = text => text.trim().replace(/[\\\n]/g, ' ');

const lines = [[${window.location.href} ${ng(document.title).trim()}]];

const cover = document.querySelector('metaproperty="og:image"');

if (cover) {

lines.push([${cover.content}#.png]);

lines.push('');

}

const s = document.getSelection();

if (0 < s.rangeCount) {

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

dom.appendChild(s.getRangeAt(0).cloneContents());

const f = (text, deco) => [].concat(text.split(/\n/).filter(l => l.trim()).map(l => [${deco} ${l}])).join('');

const q = query => dom.querySelectorAll(query);

q('h3').forEach(d => { d.innerText = f(d.innerText, '**') });

q('h2').forEach(d => { d.innerText = f(d.innerText, '***') });

q('h1').forEach(d => { d.innerText = f(d.innerText, '****') });

q('strong, b').forEach(d => { d.innerText = f(d.innerText, '*') });

q('em, i').forEach(d => { d.innerText = f(d.innerText, '/') });

q('ahref imgsrc').forEach(d => {

d.closest('a').outerHTML = [${d.src.trim()}#.png ${d.closest('a').href}]

});

q('ahref').forEach(d => { d.outerHTML = [${d.href} ${ng(d.text).trim()}] });

q('imgsrc').forEach(d => { d.outerHTML = [${d.src}#.png] });

q('iframesrc*="//www.youtube.com/embed/"').forEach(d => {

d.outerHTML = [https://www.youtube.com/watch?v=${d.src.split('/embed/')[1].split('?')[0]}]

});

q('code').forEach(d => { d.innerText = '' + d.innerText + '' });

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

div.appendChild(dom);

document.body.appendChild(div);

const range = document.createRange();

range.selectNode(div);

const original = s.getRangeAt(0);

s.removeAllRanges();

s.addRange(range);

const quote = s.toString();

document.body.removeChild(div);

s.removeAllRanges();

s.addRange(original);

if (quote.trim()) {

let blank = 0;

quote.trim().split(/\n/).forEach(l => {

if (l.trim() || blank++ < 2) lines.push(> ${l.trim()});

if (l.trim()) blank = 0;

})

}

lines.push('');

}

const zero = n => String(n).padStart(2, '0');

const today = (d => ${d.getFullYear()}-${zero(d.getMonth()+1)}-${zero(d.getDate())})(new Date());

lines.push(Added on [${today}]);

lines.push('#scrap');

const e = t => encodeURIComponent(t);

window.open(${site}/${e(ng(title))}?body=${e(lines.join('\n'))});

})()

#Bookmarkletとあそぶ #自由研究

初出 2018-01-29

2018-01-30 ページによってスクラップできないことがあったのを回避するようにした

2018-02-04 見たまんまスクラップ Bookmarklet 生成器作りました

2018-02-16 リンクになってる画像をリンクと画像に分解するようにした&YouTube動画の埋め込みに対応

2018-04-05 処理がごちゃごちゃしてたところを多少ましにしたつもり

2018-06-12 WebからコピペしたらSB記法に変換するの挙動に合わせて修正

2018-07-10 Gmail等からスクラップした場合にエラーになってたのを修正