ブログ

【ZenzaWatch】コメント付きスクリーンショットを撮る技術

2016/12/23 04:56 投稿

コメント:9

  • タグ:
  • HTML5
  • CSS3
  • SVG
  • ZenzaWatch
  • Firefox
  • Chrome
  • ニコニコ技術部


今回は技術ネタなので、機能的な需要はあまりないと思う。


Canvasを使わないとコメントつきスクリーンショットは不可能 
そんなふうに考えていた時期が 俺にもありました






できちゃったんだなあ
(ショートカットキーはShift+S)


ドドドドドド


31

もっこいしょ



コメントの描画にCanvasを使っている公式プレイヤーと違って、
HTMLとCSS3アニメーションを使っているZenzaWatchでは、流れているコメントのスクリーンショットを取るのは不可能だろうと思われていた。 

ところがある人から、HTMLからスクリーンショットが撮れる技術を教えてもらった。



公式よりくっきり綺麗で高画質



コメントの表示設定も反映される



やってることは、
「コメントのHTML+CSSの内容をまるごとSVGに埋め込んで、そこからCanvasに書き出して画像として保存する」だけ。よくこんなやり方を考えるなー
"たまたま偶然"ZenzaWatchの設計が適していたおかげで、簡単に対応することができた。




ただし、ひとつ大きな問題があって、Chromeではセキュリティ判定上のバグがあって画像を保存できない。 2016年12月時点でできるのはFirefoxだけ。だめじゃん。。。
しかも、調べてみるとこれは3年くらい前から放置されてる不具合のようで、この様子では当面修正されることはなさそうだ。 ガッカリである。











・ ・ ・ と思っていたのだけど、
"たまたま偶然"超タイムリーなタイミングで修正が来たみたい。
なんか知らんけど中の人ありがとう。




この修正が入れば、Chromeでもコメント付きスクリーンショット保存ができるはず。
kusa5やbilibiliもHTMLとCSS3なので、同じようなやり方でできると思う。
(あまり需要はないと思うけど)




テンション上がって書いたせいで、いつも以上にわけわからん記事になってしまった。








以下サンプルなど

1














原理的には公式プレイヤーみたいに画像ツイート機能もできそうだけど、いまのところ対応する予定はありません。(Twitterやってないし)

コメント

めめのん
No.8 (2017/03/10 16:51)
書き忘れていたことがありました

・できれば、zenzaを開いたときに見えるタグを非表示にできるようにしてほしい(ネタバレがまれにあるため)
・ブラウザサイズのフルスクリーンにもできるようにしてほしい

以上です。
えす
No.9 (2017/03/14 00:03)
いつも利用させていただいています。
・コメントログ機能
・タグ編集
の実装は可能でしょうか?
動画ページを開かずにZenzawatch上ですべて完結できればありがたいです。
G.I.N project
No.10 (2018/05/15 18:41)
⑨になれ草
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事