連番画像をGyazoってScrapboxに素早くまとめたい
Gyazoを便利に使うシリーズ
Scrapboxで漫画を読む
Twitterの4ページ漫画とかをGyazoってScrapboxにまとめたいとき
Gyazoるのを自動化したい
GyazoのUIで複数選択したURLをコピーするUserScript作りたい
https://gyazo.com/4dac523a6d8253a536d0163f99b6f597
この状態の選択された画像のリンクを取得したい
選択した画像のhashはどうやって取るの？
HTMLにはリンクがない
ReactのcomponentsにURLが渡されているのを発見した
でもアクセスする方法がなさそう
開発中はDev toolsを使うと見られるらしいが、世に出ているものは読めない
ブラウザで実行されているのでなんとかして読むことはできるはず。でも簡単に見ることはできない
reactjs - Is REACT State in Production visible in DevTools or something? - Stack Overflow
できる可能性があるらしいのでこれを試したい
/takker/連番画像をGyazoってScrapboxに素早くまとめたい
/takker/Firefoxだとscrapboxの選択文字列をwindow.getSelection().toString()で取得できない#61b693401280f000009d4672あたり？
/takker/連番画像をGyazoってScrapboxに素早くまとめたい#61e9f7031280f00000ba932aでできるらしい
確かにできる
const checkedCards = document.querySelectorAll(".card.checked");でここが取れる
https://gyazo.com/7f284c588b5b7b6d8ea1d54b3a4fc60d
このspan要素のReact Fiberの中にURLが埋め込まれている
なぜこれを見つけられるのだろう？
/takker/開発コンソールからReactの内部情報を得るとのこと
React Fiberというものの構造を知っているとわかる？
__reactFiberで始まる要素の中に色々渡されている
このテクニックはググると他にも出てくる
javascript - React - getting a component from a DOM element for debugging - Stack Overflowを使ってこうかける
code:js
const checkedCards = document.querySelectorAll(".card.checked");
FindReact(checkedCards0.lastElementChild)
まず、埋め込まれているstateNodeの名前は、このように探せる
https://gyazo.com/ac7177441fad4a9e31739424814f3271
ここからstateNodeuの中身を見るとURLがあることがわかる
しかし、u > i > t > PlがHTMLのどこに対応しているのかはこの時点では不明
/takker/連番画像をGyazoってScrapboxに素早くまとめたい#61e9f7511280f00000ba9330この辺りのコードをa prioriに受け入れるとuとかiとかはspan[reactKey].return.stateNode.propsにありそうだから、要素のreturn.stateNodeを確認してみると良さそうだ
確認するとこのような感じだった
https://gyazo.com/7cc820093f6d1a347c08b5f9b131afdc
iが抜けてる？
多分hoverで出るこれなのだが、HTMLに出す方法がわからなかったので確認できなかった
https://gyazo.com/2372ac33e3f083382a2f62ffa5130036
アプリを作ったほうが早い
https://gyazo.com/api/docs/image で一覧を取得して、選択されているものについてURLをクリップボードに渡せばいい
見開きごとに行をつくってして拡大したい
[gyazoのURL][gyazoのURL]を[[gyazoのURL]][[gyazoのURL]]に置換したい
code:script.js
scrapbox.PopupMenu.addButton({
title: '🔎🖼️',
onClick: (str) => (
str.replace(/\[(https:\/\/gyazo\.com\/0-9a-zA-Z+)\]/g, (str, gyazoUrl) => {
return [[${gyazoUrl}]]
})
)
});
/icons/hr.icon
gyazoがコレクションを作るとき
POST /boards
payloadにimage_idsとして画像のハッシュを渡している