2022/5/7 モチ会
生HTMLでは保存しない
ページ内で参照されているリソースを全て取っておく必要が出てくる
Wayback Machineで画像が取れていない例
https://gyazo.com/49a013be08e538fae872e5f0a70a4b28/raw
難しい
ポイント
背景画像は一枚岩にしない
高さ1000pxくらいで複数枚撮って並べる
5万ピクセルの高さがあるページも安定して撮れる
imgタグに loading="lazy" つけておく
テキスト情報はどう保持する?
まだ確立していない
実験中
ブックマークしたページを自動で撮影
ここ2年はScrapboxに記事を溜めている
このツールはまた別途公開したい
Scrapboxページを表示するとスナップショットの存在を確認して、無ければ作る
これでオリジナル記事が消えても大丈夫だ。やったね!
UserScriptでPage Menuから開けるようにした
https://gyazo.com/9141bd3581d1512d8c31f348e690ce50
https://gyazo.com/b820069ae28ea269d4f6c926c48fce30
いいねしたツイートを自動で撮影
Twitter APIの制限上、直近3000件くらいしか取れない
3000件たまる前に収集スクリプトを回す
ニュースサイトのトップページを定期的に撮影
SVG snapshot
code:config.js
{
uriPattern: /^https:\/\/twitter\.com\/^\/+\/status\//, layerResources: [
{
name: "main",
selector: "article>div",
textSelector: "article>div div>span",
textSelectorIdx: 2,
paddingX: 8,
paddingY: 8,
},
],
}
メインコンテンツが書かれている領域のCSS Selectorを書いておく
これどうやってスケールさせるか?
切り抜く
https://gyazo.com/d48fd7278ee711b7b595e088cbec4d3d
背景画像を一枚岩にしなかったおかげで、指定された領域に関係する画像だけ使える
真面目なビューがほしい