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

新しい記事を投稿しました。シェアして読者に伝えましょう

×

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

2016-12-23 04:56
  • 8


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


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やってないし)

広告
×
これはすごい機能ですね…
天に愛されているようなタイミングも
10ヶ月前
×
あけましておめでとうございます。

おお!いつの間にやらコメント入力時の動画一時停止の機能が直ってる!
また、提供とニコニコ市場を見れる機能が増えていてすこぶる使い勝手が良くなりました。
更新ありがとうございます!
(一番気に入っている機能は倍速再生機能で、公式HTML5プレイヤーにもつかないかなぁと思っていたり。)
9ヶ月前
×
コメントの過去ログが見れないのは仕様?実装できるならして欲しい。←職人再現を掲げてるのならば特に。
あと新システムが自動 中 低 となっているけどこれは自動にした方が一番いい画質なの?(旧システムもエコノミーと自動で自動の方が画質良かったので。)
あとこれはなんとなく私の疑問なんですけどChromeって普通だとフォントがメイリオ(ゴリ押し)で、動画はZenzaでとりあえずいいんですけどニコ生は生とタイムシフト両方ともメイリオのごっついフォントなので生の方はフォントでも対策法かなにかあれば教えてほしいです。←windowsのフォント一覧からメイリオを強制削除してもwindowsの起動画面で出てくるようこそとかがメイリオで消すと逆にそっちがMS系のフォントになって他にも色々とメンドイのでせめてChromeにニコニコ(もしくは特定のサイトだけ)にフォントを指定する方法とか無いですかね?←逆にmsだけにしても他の所がガッタガタになるしニコニコに限らずChromeは本来他のフォントが使われるべき場所でメイリオに差し替えるのでここをなんとかしたい(切実)←コメント関係に詳しいので聞いてみました。あと自分がwin7の時に自分で確認したんですけどやっぱりメイリオのせいでせっかくChromeが軽いのにメイリオフォントのせいで重くなっていました。 長文になってしまってすいません。
9ヶ月前
×
http://ch.nicovideo.jp/segabito/blomaga/ar921995 ←こちらにも大量に他の人がコメントしていますよ-!
あとなんとなく思ったのがフォントの再現とかその辺をうまいことやれば生主がよく使うコメビューと合わせてそっからまた配信画面に弾幕を流せるみたいな仕組み(ソフト)ってできそうですか?←今の技術的にできるかどうかを聞きたいのと暇だったら作ってみたいか←5年後とかでもいいんで(イメージで言うとニコファーレに近い感じです。他の例を言うと第66回紅白歌合戦の小林幸子さんのコメントの演出で最後に画面に直接流すという物があったんですけどそれとほぼおなじ感じです←ニコ生でコメントを視聴者に送ってもらって、紅白の時は人力とNG設定(仮にソフト化するならNGはコメビュー側にしてもらってただ単にコメントを汲み取ってもう1回流すみたいな)簡単にまとめると今のテレビだとほとんどある(ニュースなんかでよく使われる)リアルタイム字幕のシステムと思っていただければ←ただこれと違ってリアルタイム字幕は直接放送されている映像には乗らないですけど僕が言いたいのは編集済みのテレビ番組(バラエティ番組)に出てくるような字幕がリアルタイムで出てくるイメージです。色々と聞きたいことばっかり書いてすいません。 私が要求してるのはコメントの過去ログが見れたら満足で、他は暇があればって感じです。
9ヶ月前
×
http://dic.nicovideo.jp/a/%E7%B1%B3%E7%B1%B3plus
9ヶ月前
×
いつもお世話になっております。
手前勝手ながら、要望がいくつかありますので、ここに書かせていただきます。

・任意の文字数以上のコメントは非表示にすることができる設定
・本家のプレーヤーのようにコメントを右クリックするとNGID、NGコメント指定をすることができる

以上です。ZENZAWATCHにはいつも助けられております。ニコニコ動画の仕様変更にも素早く対応してくださって本当にありがとうございました。
7ヶ月前
×
書き忘れていたことがありました

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

以上です。
7ヶ月前
×
いつも利用させていただいています。
・コメントログ機能
・タグ編集
の実装は可能でしょうか?
動画ページを開かずにZenzawatch上ですべて完結できればありがたいです。
7ヶ月前
コメントを書く
コメントをするには、
ログインして下さい。