回答編集履歴

4

CSSアニメーションを追記

2018/05/02 14:40

投稿

miyabi-sun
miyabi-sun

スコア21158

test CHANGED
@@ -129,3 +129,39 @@
129
129
  アドバイスするなら、そのサイトがヒットした時に備えて独自ドメインだけは取っておきなさい。
130
130
 
131
131
  そうすれば、いざ転送量過多でレンタルサーバから追い出されても、もっと強力なサーバに移行出来るわよ。
132
+
133
+
134
+
135
+ ---
136
+
137
+
138
+
139
+ おまけ: CSSアニメーションに関して
140
+
141
+
142
+
143
+ もしかしてBlob云々は興味本位であって、
144
+
145
+ ムービー的なものなら何でも良かったのかしら?
146
+
147
+
148
+
149
+ 参考サイト: [drop out](https://magical-girl.site/)
150
+
151
+
152
+
153
+ このサイト、実は全部CSSアニメーションよ。
154
+
155
+ だから手間暇は掛かってるしレンダリングがそこそこ重いけど、ファイルサイズ自体はとても軽い。
156
+
157
+ このサイトは大量のPNG画像を使ってるから8MBの超力作になってるけど、2MBはアニメーションとは関係ない画像だし、PNGを極力さけてSVG中心にしていけばもう2MB程は削れるかもしれないわね。
158
+
159
+
160
+
161
+ このクオリティでmpegにしたら多分20〜30MBくらいになるんじゃないかしら?
162
+
163
+ 動画はあまり詳しくないからヤマカンだけど、線をきっちり出そうとすると1000Kbpsくらいにはなるわよね?
164
+
165
+
166
+
167
+ 質問の根底がmpegの動画ファイルではなく、可愛いアニメーションで魅せたいという要望なら、実現出来ると思うからCSSアニメーションについて調べてみてね。

3

更に考察をすすめた

2018/05/02 14:39

投稿

miyabi-sun
miyabi-sun

スコア21158

test CHANGED
@@ -6,21 +6,31 @@
6
6
 
7
7
 
8
8
 
9
- 確かに一度HTMLJSファイルをダウンロードしてしまえば、それ以上の通信は発生しないわね。
9
+ 確かに一度HTMLJS、CSS、画像データはダウンロードしてしまえば、それ以上の通信は発生しないわね。
10
10
 
11
11
  動画のバイナリデータはたった数秒でも凄まじいサイズになる。
12
12
 
13
- 例えばmidiという音楽楽譜ファイルを落として、ローカルで音を鳴らすような仕組みを構築出来れば通信量を抑えられるのではな考えたわけよね?
13
+ [midi](https://ja.wikipedia.org/wiki/MIDI)のような仕組みを構築したいという要望よね?
14
14
 
15
+
16
+
15
- ず、この考え方自体は合ってるわ。
17
+ ぁ扱うモノにもよるわ
18
+
19
+ 例えばゲームのプレイングムービーのようなものをコマ枚に画像データにして、パラパラ漫画のように差し込んでいく作り方をするなら完全に無駄よ。
20
+
21
+ 動画のエンコーダーも賢いから時系列で色が変わってない箇所は色の情報を削ったりして軽量化してるから逆に重くなる。
22
+
23
+ でも逆に、写真や図形を切り貼りして音楽を付けたようなものなら確実に軽くなるでしょうね。
24
+
25
+
26
+
27
+ わざわざ質問する位だから後者の使い方なのよね?そちらの想定で話を進めましょう。
16
28
 
17
29
 
18
30
 
19
31
  次、作ったBlob形式の動画データ。
20
32
 
21
- FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、BlobをURLに変換させてDLさせるという違いこそあるけど、
33
+ FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、BlobをURLに変換させてDLさせるという違いこそあるけど、どちらもメモリ空間上のデータをそのまま保存するから転送量は一切かからない。
22
-
23
- どちらもメモリ空間上のデータをそのまま保存するだけだから転送量は一切かからない。
24
34
 
25
35
  これも質問文の通りね。
26
36
 
@@ -32,7 +42,7 @@
32
42
 
33
43
  フロントエンドエンジニアのほぼ全員が即答で無理と答えるくらい難易度が高いわよ。
34
44
 
35
- (調査したら多分いけるという事は分かったけど、ネットワークの負荷対策としは酷いからオススメはしない)
45
+ (調査したら多分いけるという事は分かったけど、根本的な解決になっいからオススメはしない)
36
46
 
37
47
 
38
48
 
@@ -84,6 +94,14 @@
84
94
 
85
95
 
86
96
 
97
+ よしんば動画データにできても、今度はその動画データを再生するところまでがゴールでしょ?
98
+
99
+ ブラウザの種別によってコンパイルする動画データを切り替えるような処理も必要になりそうね。
100
+
101
+ 私だったら何百万積まれても絶対やらないわ。
102
+
103
+
104
+
87
105
  ---
88
106
 
89
107
 

2

やり方が見つかったので出来る調に変更

2018/05/02 14:14

投稿

miyabi-sun
miyabi-sun

スコア21158

test CHANGED
@@ -16,9 +16,9 @@
16
16
 
17
17
 
18
18
 
19
- FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、
19
+ 次、作ったBlob形式の動画データ。
20
20
 
21
- BlobをURLに変換させてDLさせるという違いこそあるけど、
21
+ FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、BlobをURLに変換させてDLさせるという違いこそあるけど、
22
22
 
23
23
  どちらもメモリ空間上のデータをそのまま保存するだけだから転送量は一切かからない。
24
24
 
@@ -30,23 +30,21 @@
30
30
 
31
31
  でも、どうやって動画を生成するの?
32
32
 
33
- フロントエンドエンジニアのほぼ全員が即答で無理と答えるでしょうね
33
+ フロントエンドエンジニアのほぼ全員が即答で無理と答えるくらい難易度が高いわよ
34
+
35
+ (調査したら多分いけるという事は分かったけど、ネットワークの負荷対策としては酷いからオススメはしない)
34
36
 
35
37
 
36
38
 
37
- 理由は書いておくけど、ローカルで動画をというのは呼吸をするように何で自動化たり作れる凄腕エンジニアでもなければほぼ無理よ。
39
+ HTML5で実装されたのは主動画を再生」す機能、動画生成する機能はとてもしょぼいのよ。
38
40
 
39
- 私も回避策色々練ってみた難易度が高すぎてプロトイプ作るのだけでも数ヶ月スパンで掛かる…仕事という形では残念がら引き受けられない。
41
+ バイナリデータ触れるってJavaScriptはそもそもバイナリデーを触言語じゃない
40
42
 
43
+ 私も「HTML5 Web標準API バイブル」という書籍を眺めたけれど、MediaRecorderという機能くらいしか見つからなかったわ。
41
44
 
45
+ `new MediaRecorder(stream)`で作成する時にChromeの画面を60fpsでパシャパシャ記録する`stream`を自作すればいけるんじゃないかしら?
42
46
 
43
- HTML5で実装された機能は「動画を再生」する機能は豊富だけど、動画を生成する機能はとてもしょぼいわよ。
44
-
45
- 私も「HTML5 Web標準API バイブル」という書籍を眺めたけれど、ワンチャンあるのがMediaRecorderという機能のみ。
46
-
47
- `new MediaRecorder(stream)`で作成する時にChromeの画面を60fpsでパシャパシャ記録する`stream`を自作すればいける……かも。
48
-
49
- まぁ、このstreamの作り方は私も皆目見当がつかないし、多分答えられる人はTeratailやStackOverflow合わせても多分誰も居ないんじゃないかしら
47
+ まぁ、このstreamの作り方は私も皆目見当がつかないし、多分答えられる人は居ないんじゃないかしら。
50
48
 
51
49
 
52
50
 
@@ -61,6 +59,32 @@
61
59
  [Emscripten](http://kripken.github.io/emscripten-site/index.html)というソフトを使えば移植は可能だけど、C言語がある程度触れないとスタートラインに立てないわ。
62
60
 
63
61
  動画を扱うなら専用のパーサはC言語で付け足す必要があるし、私は二度とやりたくないわね……
62
+
63
+
64
+
65
+ 【追記】
66
+
67
+ もしかしたらあるかも…と思って探したら案の定見つかったわ。
68
+
69
+ [videoconverter.js](https://github.com/bgrins/videoconverter.js)
70
+
71
+
72
+
73
+ > FFmpeg library into JavaScript, using Emscripten.
74
+
75
+
76
+
77
+ コマンドライン操作でAviファイルを生成するFFmpegというソフトがあって、それをEmscriptenでJSにコンパイルしなおしたもののようね。
78
+
79
+ でも、出来ると言ってもEmscriptenで生成したJSファイルは死ぬほど扱いが難しいし、
80
+
81
+ 動画データをエンコードするのは凄まじい負荷が掛かるから、普通にDLするより絶対時間かかるし、スマホで見ようとすると燃えるように発熱するでしょうね。
82
+
83
+ GUI操作のパソコンの動画メーカーみたいなソフトをWeb上で自作するつもりでなければオススメしないわ。
84
+
85
+
86
+
87
+ ---
64
88
 
65
89
 
66
90
 

1

文頭を構成:;(∩´﹏`∩);:

2018/05/02 13:52

投稿

miyabi-sun
miyabi-sun

スコア21158

test CHANGED
@@ -6,23 +6,37 @@
6
6
 
7
7
 
8
8
 
9
- JavaScriptで扱うデータはAjax通信等で取得てこない限り全てクライアント側にあるの
9
+ 確かに一度HTMLやJSファイルをダウンロードしてしまえば、それ以通信は発生しないわね
10
10
 
11
+ 動画のバイナリデータはたった数秒でも凄まじいサイズになる。
12
+
11
- メモリ空間上に存在してそれをダウンロードした場合、表示上だけダウンロードとい扱いになるけど、内部ではメモリ空間上のデータをそのまま保存するだけだから転送量は一切かからないわよ
13
+ 例えばmidiという音楽の楽譜ファイルを落として、ローカルで音を鳴らすような仕組みを構築出来れば通信量を抑えられではないかと考えたね?
14
+
15
+ まず、この考え方自体は合ってるわ。
12
16
 
13
17
 
14
18
 
15
- そのための素材ァイルを山ほどダウンロードさせたら余り意味ないのだけれど
19
+ FileAPIを使って指定しあげてそこに改めて書き込むか
16
20
 
21
+ BlobをURLに変換させてDLさせるという違いこそあるけど、
22
+
23
+ どちらもメモリ空間上のデータをそのまま保存するだけだから転送量は一切かからない。
24
+
17
- 転送量対策としては一考余地があるわね。
25
+ これも質問文通りね。
18
26
 
19
27
 
20
28
 
29
+ だから転送量対策としては一考の余地があるわね。
30
+
21
31
  でも、どうやって動画を生成するの?
22
32
 
23
- まともなエンジニアのほぼ全員が即答で無理と答えるでしょうね。
33
+ フロントエンドエンジニアのほぼ全員が即答で無理と答えるでしょうね。
34
+
35
+
24
36
 
25
37
  下に理由は書いておくけど、ローカルで動画を作るというのは呼吸をするように何でも自動化したり作れる凄腕のエンジニアでもなければほぼ無理よ。
38
+
39
+ 私も回避策を色々練ってみたけど、難易度が高すぎてプロトタイプ作るのだけでも数ヶ月スパンで掛かる…仕事という形では残念ながら引き受けられない。
26
40
 
27
41
 
28
42