Bookmarkを追記するBookmarklet
しばらく前からScrapboxにブックマークを置くようにした
毎日見た記事で面白かった/役に立った記事をScrapboxに保存しておくことで「昔読んだあの記事どこだ？」ってなったときに割とすぐ見つけられるようになった
かなりオススメのScrapboxの運用方法
Scrapboxについて調べていたらページのURLの後にbodyパラメータを追加するとその内容がページに追記されるAPIがあるのを発見した
このAPIを使えば、これまで半手動でコピペしていたブックマークが、ボタン1つでページに追記することができる
https://scrapbox.io/[プロジェクト名]/[ページ名]?body=[追記する内容]
タイトルとURLを登録するブックマークレット
ブックマークレットをポチーで特定のページにタイトルとリンクを登録可能なjsを書いた
code:bookmarklet.js
javascript:
bookmarkPage = "2019%2F08_Bookmark"; // ページ名（URLからコピペ推奨）
url = location.href;title = document.title || url;
link = HOME + encodeURIComponent(bookmarkPage) + "?body=" + \n[${title} ${url}];
open(link, "_blank");
https://gyazo.com/581332cb6a97d908bea1c2e968aa3b15
詳細な情報を表示したいブックマークレット
タイトルだけではわからない事もあったので、ogp の image と description から情報を取得して良い感じに表示するようにした
以下のような感じ
「やっぱり自分にはUIは無理だ」そう思う人もいるかもしれません。でもちょっと待ってください。実際に私が経験した失敗事例を聞いてください。それで学びがあれば儲けもの、なければ「自分よりショボい奴がいるw」と思って自信を取...
code:bookmarklet.js
javascript:
bookmarkPage = "2019%2F08_Bookmark";
url = location.href; title = document.title || url;
content = \n\n\n>[_ [${image}] [${title} ${url}]];
if(!!ogDescSelector) content += "\n" + \n%0A>${ogDescSelector.content};
link = HOME + encodeURIComponent(bookmarkPage) + ?body=\n\n\n${content};
open(link, "_blank");
良い感じのデザインで表示するために style.css の修正が必要
code:style.css
.deco-\_{
display: inline-flex;
align-items: center;
text-decoration: none;
}
.deco-\_ img{
border-radius: 8px;
height: 64px;
width: 64px;
display: inline !important;
margin: 0 !important;
padding-top: 4px !important;
}
https://gyazo.com/5ee13921caa0a5d9e5756a1242e5226e
仕様
説明文はog:descriptionから取得
存在しない場合は省略
画像はog:imageから取得して縮小して表示
ファビコンを取得して表示したかったがscrapboxではicoファイルの表示は対応していないみたい
og:imageが存在しない場合は↓の画像を表示
https://placehold.jp/64x64.png?text=None
ogpの画像を縮小して表示しているため、画像サイズが大きくなりがち
タイトルとDescriptionの間で改行ができない？ あとで修正する
![https://placehold.jp/64x64.png?text=None";](https://placehold.jp/64x64.png?text=None";){kind=link}