ScrapBubble
一つのページ上で全てのリンクをたどってページを閲覧することができる
wogikaze.icon
使い方
1. このリンクを押して、コードが生成されるのを待ちます App.tsだとmountがexportされないってなりませんか？自分が間違えてるのかな…基素.icon
そうだった！！takker.icon
直しました。ご指摘ありがとうございます
リンクを押して生成したコードをまともに読んでいないことが発覚してしまった
2. 生成されたコードを適当なコードブロックに貼り付けます
一度に貼り付けるとエラーがでるので、適当な位置で2分割して貼り付けて下さい
=>の前後など、改行を加えても問題ない場所で分割するのがおすすめです
もとからある改行で分割したほうがよさそう
ここでは、projectAというprojectのscrapbubbleというページのmod.jsという名前のコードブロックに貼り付けたとします
projectA, scrapbubble,mod.jsは各自の設定で書き換えて下さい
code:sample1.js
import { mount } from "../../projectA/scrapbubble/mod.js";
mount();
4. 設定完了です！ブラウザをリロードするとscriptが読み込まれます
透過的に扱いたいprojectの名前を配列で指定します
scriptを起動している現在のproject(=scrapbox.Project.name)は自動で追加されるので、指定しなくていいです
code:sample2.ts
import { mount } from "../../projectA/scrapbubble/mod.js";
正規表現とかワイルドカード指定できると嬉しいmtane0412.icon
デフォで全project指定すればいい気が
考えてみるtakker.icon
利用上の注意
たくさんprojectを入れても通信負荷は発生ないはずtakker.icon
projectsを増やしても、fetchの総量が変わるだけで叩く頻度は変わらない
だからたくさんprojectsを入れても特に問題はないはず
サムネ用
自分のやつにあとで差し替えるかもtakker.icon
https://gyazo.com/fe4d5b4144e609ee923ca4eae768ae52
別プロジェクトが入ってるやつにするとなお良さそう基素.icon
候補
https://gyazo.com/6dd441ab20802778a49fc8782f058caa
light themeのほうがいい？takker.icon
https://gyazo.com/7c805495f71e0735f28df214cab99e37
GIFでほしいtakker.icon
古い情報が多いtakker.icon
そろそろ書き換えたり切り出したりしないと
https://img.shields.io/github/v/release/takker99/ScrapBubble?display_name=tag&sort=semver#.svg
追加した機能
0.7.0
https://gyazo.com/e2f680ceab8d0ba4e2db3bef02e21f25
https://gyazo.com/572653bbe500b6c42655383adc7548d0
逆リンクの方向にどんどん潜っていける
https://gyazo.com/81ddd56da38cd35b004cf945d50a1508
XSS対策
解析できる構文を増やした
コードブロック記法とかテーブル記法とかも表示できる
コピーもできる
code:filename.foo(bar)以外は大体実装してある
Youtubeやlocation記法も使える
https://gyazo.com/dc6d7780d54c7ad5271e006b3dcdadcc
元のscrapbox記法をコピーすることはできない
流石に実装しないかな……takker.icon
タイトル行をhoverすると逆リンクを表示する
https://gyazo.com/01ffe775ca99d5e682969b65ab7b89e7
@0.2.0の変更点
安定性の向上
自作のハリボテDOM操作コードを全部Preactに置き換えた
public projectで書いているときに、自分のprivate projectのページをつなげることができる
TamperMonkey版を使うと、他者のprojectを自分のprojectとつなげて閲覧することができる
あるキーワードについて他者が書いたことと自分が書いたこととを同時に閲覧できる
インデントをつけるようにした
bubble以外をクリックしない限りbubbleをとじないようにした
消さないように神経質に操作する必要がなくなった
数式記法に対応した
fetchに時間がかかっているときは読み込み中表示を出すようにした
外部projectのbubbleには、リンク元ページへのリンクを表示する
読み込み中表示を出せるようにした
まだバグや未実装の機能があるので修正＆機能追加していきたいtakker.icon
既知の問題
/icons/done.iconなんか挙動が不安定yosider.icon
/icons/わかる.icontakker.icon
変なタイミングで消えたりちらついたりする
確かタイトルの行にhoverしてもbubbleが表示されたんですが、仕様なんでしょうかyosider.icon
あ、それは仕様ですtakker.icon
scriptの開発者には早く直してもらうよう頼みたい……作ってるの自分だった
@0.2.0でほぼ解消した
なんかうまく動いていない
エラーが出て表示できない
全面的にコードを見直す必要がありそう
まだComponentを作っていないので、少々時間かかりそう
2021-06-11 15:46:14 実装done
/icons2/すばら.iconyosider.icon
改善要望
タイトルをホバーしたときに、本文のtext-bubbleは表示しないようにしてほしいwogikaze.icon
二重に表示されるだけで邪魔になると思う
card-bubbleは欲しい、リンク先の本文を読みたいので
出ないはずなんだけど、出てますか？takker.icon
再現方法を教えてほしいです
無印のscreen capture
https://gyazo.com/d81a7a2fa6fa793a3990031cf075d6a8