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