ScreenshotML
= Screenshot Markup Language
SVG Screenshot画像の安全な配布方法を考えている daiiz.icon
2019/4/14
XMLのほうがいい
→ SVG ScreenshotをXMLで表現する
専用ビューワ不要
XSLと組み合わせればブラウザで表示可能
xml + xsl -> svg
2019/3/13
リンク、参照画像を並べたテキストファイル
ハイパーリンクを含んだ画像を記述できる
2つのパートから成る
リンク
x,y,width,height URI title
画像
base64 encoded URI
または
外部画像のURL
専用ビューワーがSVGを生成して表示する
アプリ側でsvgコードを生成すれば不穏なscriptタグ等が入り込む余地はない
/svg-wiki/svgに埋め込まれたscriptを実行させない、などを気にしなくて良い
ビューワーの例
簡単なPWA
Desktop PWA化できれば、画像ビューワーとして強そう
/\.webi$/なURLに反応してプレビューするChrome拡張機能もほしい
CDN Edge Workerで生成して返すのもあり？
svgをキャッシュしておける
Workerで外部画像URIをbase64 URIに変換してから返すこともできる
svg-screenshot-workerでできた daiiz.icon
デモ
1. 以下のサンプル.webiファイルをダウンロードする
2. https://gyakky.herokuapp.com/webi.html で表示する
サンプル
Imageフィールド以外はOptional
code:sample1.webi
NaturalWidth
588
NaturalHeight
562
LinkBoxs
138,127,45,18 https://scrapbox.io/daiiz/書記素 書記素
258,127,30,18 https://scrapbox.io/daiiz/npm npm
78,183,275,18 https://github.com/nota/split-graphemes split-graphemes
78,211,339,18 https://www.npmjs.com/package/split-graphemes split-graphemes
210,353,158,172 https://scrapbox.io/daiiz/合成絵文字の様子を見るツール 合成絵文字の様子を見るツール
385,353,158,172 https://scrapbox.io/daiiz/2018まとめ 2018まとめ
Image
https://gyazo.com/c0832934875c90fcbcab2a26d698f3e2/raw
code:sample2.webi
NaturalWidth
571
NaturalHeight
506
LinkBoxs
53.5,79,75,17 https://scrapbox.io/daiiz/パンケーキ パンケーキ
76,106,15,17 https://scrapbox.io/daiiz/卵 卵
121,160,60,17 https://scrapbox.io/daiiz/目玉焼き 目玉焼き
31,185,300,300 https://gyazo.com/69610bbbbac53717766940df8203de08
Image
https://gyazo.com/3221f9b7a16b056d80db62c04e4ddb66/raw
#ideabot