回答編集履歴
4
CSSアニメーションを追記
answer
CHANGED
|
@@ -63,4 +63,22 @@
|
|
|
63
63
|
だから転送量超過で怒られてから考えた方が良いと思うわ。
|
|
64
64
|
|
|
65
65
|
アドバイスするなら、そのサイトがヒットした時に備えて独自ドメインだけは取っておきなさい。
|
|
66
|
-
そうすれば、いざ転送量過多でレンタルサーバから追い出されても、もっと強力なサーバに移行出来るわよ。
|
|
66
|
+
そうすれば、いざ転送量過多でレンタルサーバから追い出されても、もっと強力なサーバに移行出来るわよ。
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
おまけ: CSSアニメーションに関して
|
|
71
|
+
|
|
72
|
+
もしかしてBlob云々は興味本位であって、
|
|
73
|
+
ムービー的なものなら何でも良かったのかしら？
|
|
74
|
+
|
|
75
|
+
参考サイト: [drop out](https://magical-girl.site/)
|
|
76
|
+
|
|
77
|
+
このサイト、実は全部CSSアニメーションよ。
|
|
78
|
+
だから手間暇は掛かってるしレンダリングがそこそこ重いけど、ファイルサイズ自体はとても軽い。
|
|
79
|
+
このサイトは大量のPNG画像を使ってるから8MBの超力作になってるけど、2MBはアニメーションとは関係ない画像だし、PNGを極力さけてSVG中心にしていけばもう2MB程は削れるかもしれないわね。
|
|
80
|
+
|
|
81
|
+
このクオリティでmpegにしたら多分20〜30MBくらいになるんじゃないかしら？
|
|
82
|
+
動画はあまり詳しくないからヤマカンだけど、線をきっちり出そうとすると1000Kbpsくらいにはなるわよね？
|
|
83
|
+
|
|
84
|
+
質問の根底がmpegの動画ファイルではなく、可愛いアニメーションで魅せたいという要望なら、実現出来ると思うからCSSアニメーションについて調べてみてね。
|
3
更に考察をすすめた
answer
CHANGED
|
@@ -2,20 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
> クライアント側で動画生成⇒blob形式のデータをダウンロード
|
|
4
4
|
|
|
5
|
-
確かに一度HTML
|
|
5
|
+
確かに一度HTML、JS、CSS、画像データはダウンロードしてしまえば、それ以上の通信は発生しないわね。
|
|
6
6
|
動画のバイナリデータはたった数秒でも凄まじいサイズになる。
|
|
7
|
-
|
|
7
|
+
[midi](https://ja.wikipedia.org/wiki/MIDI)のような仕組みを構築したいという要望よね？
|
|
8
|
-
まず、この考え方自体は合ってるわ。
|
|
9
8
|
|
|
9
|
+
まぁ扱うモノにもよるわね。
|
|
10
|
+
例えばゲームのプレイングムービーのようなものをコマ枚に画像データにして、パラパラ漫画のように差し込んでいく作り方をするなら完全に無駄よ。
|
|
11
|
+
動画のエンコーダーも賢いから時系列で色が変わってない箇所は色の情報を削ったりして軽量化してるから逆に重くなる。
|
|
12
|
+
でも逆に、写真や図形を切り貼りして音楽を付けたようなものなら確実に軽くなるでしょうね。
|
|
13
|
+
|
|
14
|
+
わざわざ質問する位だから後者の使い方なのよね？そちらの想定で話を進めましょう。
|
|
15
|
+
|
|
10
16
|
次、作ったBlob形式の動画データ。
|
|
11
|
-
FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、BlobをURLに変換させてDLさせるという違いこそあるけど、
|
|
17
|
+
FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、BlobをURLに変換させてDLさせるという違いこそあるけれど、どちらもメモリ空間上のデータをそのまま保存するから転送量は一切かからない。
|
|
12
|
-
どちらもメモリ空間上のデータをそのまま保存するだけだから転送量は一切かからない。
|
|
13
18
|
これも質問文の通りね。
|
|
14
19
|
|
|
15
20
|
だから転送量対策としては一考の余地があるわね。
|
|
16
21
|
でも、どうやって動画を生成するの？
|
|
17
22
|
フロントエンドエンジニアのほぼ全員が即答で無理と答えるくらい難易度が高いわよ。
|
|
18
|
-
（調査したら多分いけるという事は分かったけど、
|
|
23
|
+
（調査したら多分いけるという事は分かったけど、根本的な解決になってないからオススメはしない）
|
|
19
24
|
|
|
20
25
|
HTML5で実装されたのは主に「動画を再生」する機能、動画を生成する機能はとてもしょぼいのよ。
|
|
21
26
|
バイナリデータを触れるってだけで、JavaScriptはそもそもバイナリデータを触る為の言語じゃないし。
|
|
@@ -41,6 +46,10 @@
|
|
|
41
46
|
動画データをエンコードするのは凄まじい負荷が掛かるから、普通にDLするより絶対時間かかるし、スマホで見ようとすると燃えるように発熱するでしょうね。
|
|
42
47
|
GUI操作のパソコンの動画メーカーみたいなソフトをWeb上で自作するつもりでなければオススメしないわ。
|
|
43
48
|
|
|
49
|
+
よしんば動画データにできても、今度はその動画データを再生するところまでがゴールでしょ？
|
|
50
|
+
ブラウザの種別によってコンパイルする動画データを切り替えるような処理も必要になりそうね。
|
|
51
|
+
私だったら何百万積まれても絶対やらないわ。
|
|
52
|
+
|
|
44
53
|
---
|
|
45
54
|
|
|
46
55
|
> サーバー（レンタルを想定しています）には転送量制限
|
2
やり方が見つかったので出来る調に変更
answer
CHANGED
|
@@ -7,23 +7,22 @@
|
|
|
7
7
|
例えばmidiという音楽の楽譜ファイルを落として、ローカルで音を鳴らすような仕組みを構築出来れば通信量を抑えられるのではないかと考えたわけよね？
|
|
8
8
|
まず、この考え方自体は合ってるわ。
|
|
9
9
|
|
|
10
|
+
次、作ったBlob形式の動画データ。
|
|
10
|
-
FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、
|
|
11
|
+
FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、BlobをURLに変換させてDLさせるという違いこそあるけど、
|
|
11
|
-
BlobをURLに変換させてDLさせるという違いこそあるけど、
|
|
12
12
|
どちらもメモリ空間上のデータをそのまま保存するだけだから転送量は一切かからない。
|
|
13
13
|
これも質問文の通りね。
|
|
14
14
|
|
|
15
15
|
だから転送量対策としては一考の余地があるわね。
|
|
16
16
|
でも、どうやって動画を生成するの？
|
|
17
|
-
フロントエンドエンジニアのほぼ全員が即答で無理と答える
|
|
17
|
+
フロントエンドエンジニアのほぼ全員が即答で無理と答えるくらい難易度が高いわよ。
|
|
18
|
+
（調査したら多分いけるという事は分かったけど、ネットワークの負荷対策としては酷いからオススメはしない）
|
|
18
19
|
|
|
19
|
-
|
|
20
|
+
HTML5で実装されたのは主に「動画を再生」する機能、動画を生成する機能はとてもしょぼいのよ。
|
|
21
|
+
バイナリデータを触れるってだけで、JavaScriptはそもそもバイナリデータを触る為の言語じゃないし。
|
|
20
|
-
私も
|
|
22
|
+
私も「HTML5 Web標準API バイブル」という書籍を眺めたけれど、MediaRecorderという機能くらいしか見つからなかったわ。
|
|
23
|
+
`new MediaRecorder(stream)`で作成する時にChromeの画面を60fpsでパシャパシャ記録する`stream`を自作すればいけるんじゃないかしら？
|
|
24
|
+
まぁ、このstreamの作り方は私も皆目見当がつかないし、多分答えられる人は居ないんじゃないかしら。
|
|
21
25
|
|
|
22
|
-
HTML5で実装された機能は「動画を再生」する機能は豊富だけど、動画を生成する機能はとてもしょぼいわよ。
|
|
23
|
-
私も「HTML5 Web標準API バイブル」という書籍を眺めたけれど、ワンチャンあるのがMediaRecorderという機能のみ。
|
|
24
|
-
`new MediaRecorder(stream)`で作成する時にChromeの画面を60fpsでパシャパシャ記録する`stream`を自作すればいける……かも。
|
|
25
|
-
まぁ、このstreamの作り方は私も皆目見当がつかないし、多分答えられる人はTeratailやStackOverflow合わせても多分誰も居ないんじゃないかしらね。
|
|
26
|
-
|
|
27
26
|
もしくは[AviUtl](https://github.com/VFR-maniac/L-SMASH-Works/tree/master/AviUtl)みたいなC言語で書かれている動画作成ソフトをゴリ押しで移植して使う方法ね。
|
|
28
27
|
こっちも質問しても答えは帰って来ないわよ。
|
|
29
28
|
|
|
@@ -31,6 +30,19 @@
|
|
|
31
30
|
[Emscripten](http://kripken.github.io/emscripten-site/index.html)というソフトを使えば移植は可能だけど、C言語がある程度触れないとスタートラインに立てないわ。
|
|
32
31
|
動画を扱うなら専用のパーサはC言語で付け足す必要があるし、私は二度とやりたくないわね……
|
|
33
32
|
|
|
33
|
+
【追記】
|
|
34
|
+
もしかしたらあるかも…と思って探したら案の定見つかったわ。
|
|
35
|
+
[videoconverter.js](https://github.com/bgrins/videoconverter.js)
|
|
36
|
+
|
|
37
|
+
> FFmpeg library into JavaScript, using Emscripten.
|
|
38
|
+
|
|
39
|
+
コマンドライン操作でAviファイルを生成するFFmpegというソフトがあって、それをEmscriptenでJSにコンパイルしなおしたもののようね。
|
|
40
|
+
でも、出来ると言ってもEmscriptenで生成したJSファイルは死ぬほど扱いが難しいし、
|
|
41
|
+
動画データをエンコードするのは凄まじい負荷が掛かるから、普通にDLするより絶対時間かかるし、スマホで見ようとすると燃えるように発熱するでしょうね。
|
|
42
|
+
GUI操作のパソコンの動画メーカーみたいなソフトをWeb上で自作するつもりでなければオススメしないわ。
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
34
46
|
> サーバー（レンタルを想定しています）には転送量制限
|
|
35
47
|
|
|
36
48
|
どうせ貴方が作った無名のサイトなんて誰も利用しないわよ。
|
1
文頭を構成:;(∩´﹏`∩);:
answer
CHANGED
|
@@ -2,15 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
> クライアント側で動画生成⇒blob形式のデータをダウンロード
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
確かに一度HTMLやJSファイルをダウンロードしてしまえば、それ以上の通信は発生しないわね。
|
|
6
|
+
動画のバイナリデータはたった数秒でも凄まじいサイズになる。
|
|
6
|
-
|
|
7
|
+
例えばmidiという音楽の楽譜ファイルを落として、ローカルで音を鳴らすような仕組みを構築出来れば通信量を抑えられるのではないかと考えたわけよね？
|
|
8
|
+
まず、この考え方自体は合ってるわ。
|
|
7
9
|
|
|
10
|
+
FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、
|
|
8
|
-
|
|
11
|
+
BlobをURLに変換させてDLさせるという違いこそあるけど、
|
|
12
|
+
どちらもメモリ空間上のデータをそのまま保存するだけだから転送量は一切かからない。
|
|
9
|
-
|
|
13
|
+
これも質問文の通りね。
|
|
10
14
|
|
|
15
|
+
だから転送量対策としては一考の余地があるわね。
|
|
11
16
|
でも、どうやって動画を生成するの？
|
|
12
|
-
|
|
17
|
+
フロントエンドエンジニアのほぼ全員が即答で無理と答えるでしょうね。
|
|
18
|
+
|
|
13
19
|
下に理由は書いておくけど、ローカルで動画を作るというのは呼吸をするように何でも自動化したり作れる凄腕のエンジニアでもなければほぼ無理よ。
|
|
20
|
+
私も回避策を色々練ってみたけど、難易度が高すぎてプロトタイプ作るのだけでも数ヶ月スパンで掛かる…仕事という形では残念ながら引き受けられない。
|
|
14
21
|
|
|
15
22
|
HTML5で実装された機能は「動画を再生」する機能は豊富だけど、動画を生成する機能はとてもしょぼいわよ。
|
|
16
23
|
私も「HTML5 Web標準API バイブル」という書籍を眺めたけれど、ワンチャンあるのがMediaRecorderという機能のみ。
|