update: ドキュメントの更新

PigeonsHouse · Feb 10, 2024 · cb3c82b · cb3c82b
1 parent b1d9118
commit cb3c82b
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 49 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ __pycache__/
 debug.json
 *.mp4
 *.png
+!examples/**/*.mp4
diff --git a/README.md b/README.md
@@ -4,24 +4,23 @@ VSML
 HTML/CSSの記法で動画制作できる言語 VSMLを受け取り動画へ変換するエンコーダ
 
 ## Description
-HTML/CSSの記法で動画制作できる言語 VSMLを受け取り動画へ変換するエンコーダ。
+HTML/CSSの記法で動画制作できる言語 VSMLを受け取り動画へ変換するエンコーダ。  
 バックエンドにはFFmpeg v4を使用。このプログラム自体はFFmpegを呼び出すラッパープログラムとなっているので、[FFmpeg公式](https://ffmpeg.org/download.html)からFFmpegをダウンロードする必要がある。
 
 ## Demo
 実際の挙動は[こちら](./syntax.md#サンプル)
 
 ## VS.
-[Remotion](https://www.remotion.dev/)
-類似プロダクトとしてReact.jsベースの動画編集ライブラリRemotionが挙げられる。
+[Remotion](https://www.remotion.dev/)  
+類似プロダクトとしてReact.jsベースの動画編集ライブラリRemotionが挙げられる。  
 React.jsをベースとしているためCSSを流用して動画編集ができるが，VSMLは動画制作を目的とした言語として設計しているためより動画制作向きなプロパティを使用して動画制作することができる。
 
 ## Requirement
 - Python 3.10
 - FFmpeg v4
 
 ## Usage
-[Github Releases](https://github.com/PigeonsHouse/VSML/releases)から自分のOSに合ったバイナリを入手する。
-また、FFmpeg公式から自分のOSに合ったファイルをインストールする。
+[Github Releases](https://github.com/PigeonsHouse/VSML/releases)から自分のOSに合ったバイナリを入手する。また、FFmpeg公式から自分のOSに合ったファイルをインストールする。  
 記述したVSMLファイルのパスを実行引数に渡すと動画への変換が始まる。
 
 `./main example.vsml`

diff --git a/VSS.md b/VSS.md
@@ -1,7 +1,5 @@
 # VSS
-
 ## 共通プロパティ
-
 全てのタグに適用されるプロパティ
 
 - [x] object-length
@@ -36,7 +34,6 @@
     - `<percent[%]>`
 
 ## 映像プロパティ
-
 画像や動画、テキストなどのグラフィック関連の操作をするプロパティ
 
 - [x] layer-mode
@@ -129,7 +126,6 @@
     - 自要素領域の右上境界線の角丸
 
 ## 音声プロパティ
-
 音声関連の操作をするプロパティ
 
 - [x] audio-volume
@@ -138,7 +134,6 @@
     - モノラル・ステレオ
 
 ## テキストプロパティ
-
 テキストを操作をするプロパティ
 
 - [x] font-color

diff --git a/examples/aud.mp4 b/examples/aud.mp4
diff --git a/examples/img.mp4 b/examples/img.mp4
diff --git a/examples/layer.mp4 b/examples/layer.mp4
diff --git a/examples/prl.mp4 b/examples/prl.mp4
diff --git a/examples/prl2.mp4 b/examples/prl2.mp4
diff --git a/examples/seq.mp4 b/examples/seq.mp4
diff --git a/examples/txt.mp4 b/examples/txt.mp4
diff --git a/syntax.md b/syntax.md
@@ -1,8 +1,7 @@
 # VSML
 ## XMLの記法
-記法はHTMLと類似しています。XMLの一種となっています。
-以下の `vid` のように、単一のタグとして記述したり、 `txt` のように開始タグ、終了タグをわけて記述したりします。
-`vid` の `src` のようなタグの追加情報を記述する書き方をアトリビュートと言います。
+記法はHTMLをベースとしたXMLの一種となっています。  
+以下の `vid` のように、単一のタグとして記述したり、 `txt` のように開始タグ、終了タグをわけて記述したりします。`vid` の `src` のようなタグの追加情報を記述する書き方をアトリビュートと言います。  
 また、 `cont` のように、開始タグと終了タグで記述した場合、間に別の要素やテキストを記述できます。その際、間に記述するテキストはインデント上げすることを推奨します。
 ```xml
 <cont>
@@ -18,8 +17,8 @@
 ...
 </vsml>
 ```
-基本的に上記のタグの間( `...` の箇所)に動画の情報を書いていきます。上記の詳細な意味は理解しなくても問題ありません。
-`vsml` タグの中には、 `meta`, `cont` のタグを含めることが出来ます。 `meta` タグの挿入は任意ですが、 `cont` タグは必ず含めるようにしてください。( `meta` タグがあれば `meta` タグの下の位置に)
+基本的に上記のタグの間( `...` の箇所)に動画の情報を書いていきます。上記の詳細な意味は理解しなくても問題ありません。  
+`vsml` タグの中には、 `meta`, `cont` のタグを含めることが出来ます。 `meta` タグの挿入は任意ですが、 `cont` タグは必ず含めるようにしてください。( `meta` タグがあれば `meta` タグの下の位置に)  
 
 **↓ これは `cont` と `meta` が逆で動かない例**
 
@@ -48,9 +47,8 @@
 ```
 
 ## 動画の要素
-`cont` タグには、`resolution`, `fps` の2つのアトリビュートが必須です。
-`resolution` には `{width}x{height}` と、幅の数値, 'x'(小文字のX), 高さの数値を並べた文字列を指定します。
-`fps` には 指定したいfpsの整数値を文字列にして指定します。
+`cont` タグには、`resolution`, `fps` の2つのアトリビュートが必須です。  
+`resolution` には `{width}x{height}` と、幅の数値, 'x'(小文字のX), 高さの数値を並べた文字列を指定します。`fps` には指定したいfpsの整数値を文字列にして指定します。  
 記述の仕方は以下の通りです。以下は幅1920px、高さ1080px、60fpsの動画を作成する際の記述例です。
 ```xml
 <cont resolution="1920x1080" fps="60">
@@ -62,59 +60,151 @@
 **source系**
 |タグ名|名前の意味|説明|
 |--|--|--|
-|vid|video|映像を表示します。 `src` アトリビュートで動画ファイルを相対パス、絶対パスで指定できます。時間的長さは映像の再生時間と同じになります。|
-|aud|audio|音声を表示します。 `src` アトリビュートで動画ファイルを相対パス、絶対パスで指定できます。時間的長さは音声の再生時間と同じになります。|
-|img|image|画像を表示します。 `src` アトリビュートで動画ファイルを相対パス、絶対パスで指定できます。時間的長さは無限になります。|
-|txt|text|タグで挟まれた範囲に書いたテキストを字幕として表示します。改行する場合は `br` タグが使用できます。時間的長さは無限になります。|
+|vid|video|映像を表示します。 `src` アトリビュートで動画ファイルを相対パス、絶対パスで指定できます。デフォルトの時間長は映像ファイルの再生時間と同じになります。|
+|aud|audio|音声を表示します。 `src` アトリビュートで動画ファイルを相対パス、絶対パスで指定できます。デフォルトの時間長は音声ファイルの再生時間と同じになります。|
+|img|image|画像を表示します。 `src` アトリビュートで動画ファイルを相対パス、絶対パスで指定できます。デフォルトの時間長は無限になります。|
+|txt|text|タグで挟まれた範囲に書いたテキストを字幕として表示します。改行する場合は `br` タグが使用できます。デフォルトの時間長は無限になります。|
 
 **wrap系**
 |タグ名|名前の意味|説明|
 |--|--|--|
-|seq|sequence-wrap|子要素に持つsource系、wrap系の要素を順番に再生します。子要素は左上揃えで再生されます。時間的長さは子要素の時間的長さの総和になります。|
-|prl|parallel-wrap|子要素に持つsource系、wrap系の要素を並列に再生します。子要素は左上揃えで重ねて再生されます。時間的長さは、子要素の有限な時間的長さの最大値になります。子要素が全て時間的長さが無限である場合は無限になります。|
+|seq|sequence-wrap|子要素に持つsource系、wrap系の要素を順番に再生します。子要素は左上揃えで再生されます。デフォルトの時間長は子要素の時間的長さの総和になります。|
+|prl|parallel-wrap|子要素に持つsource系、wrap系の要素を並列に再生します。子要素は左上揃えで重ねて再生されます。デフォルトの時間長は、時間長が無限の子要素を除く，子要素の時間長の最大値になります。子要素の時間長が全て無限である場合は無限になります。|
 |rect|rectangle|seqの仕様をベースに、 `color` アトリビュートで背景色を指定できます。|
 |layer|single-layer|prlの仕様をベースに、子要素は、上揃えで右向きに並べて再生されます。|
 
 また、 `cont` タグは、 `seq` タグと同じく、子要素を順番に再生します。
 
-`cont` を含む `cont` 以下のタグは全て、 `id`, `class`, `style` というアトリビュートを持てます。
+`cont` 以下のタグ(当然 `cont` も含む)は全て、 `id`, `class`, `style` というアトリビュートを持てます。
 `id`, `class` は、後述のVSSでスタイルを当てる対象として名前をつけることが出来ます。
 (`id` に付ける名前と同一の名前の `id` は、VSMLファイル内で登場してはいけないのですが、現状の仕様として、制限をかけていないため、この2つのアトリビュートは同じ挙動を取ります。)
 `style` は、アトリビュートの値にスタイルのプロパティと値を指定すると、そのタグ単体にそのスタイルが当てられます。
 
-具体的な例は添付されている `.vsml` ファイルを確認ください。
-
 ## サンプル
 ### txt
-<img src="https://hackmd.io/_uploads/rJUE_CqYp.png" alt="image" />
-<br/>
-<iframe src="https://drive.google.com/file/d/1uhtgLBO60V6WFQQ4BAMM8EGLXEI_Dkm-/preview" width="400" height="225" allow="autoplay"></iframe>
+```xml
+<vsml>
+  <meta>
+    <style>
+      txt {
+        font-family: "Meiryo";
+        font-size: 50px;
+        background-color: red;
+      }
+    </style>
+  </meta>
+  <cont resolution="1920x1080" fps="30">
+    <txt style="object-length: 1s;">1つ目の文章</txt>
+  </cont>
+</vsml>
+```
+<video width=400 height=225 controls src="examples/txt.mp4"></video>
 
 ### img
-<img src="https://hackmd.io/_uploads/SkJU_0cFa.png" alt="image" />
-<br/>
-<iframe src="https://drive.google.com/file/d/16uUWTOhTkzHVTvdGGOzx3b8oZ1nQ4W7G/preview" width="400" height="225" allow="autoplay"></iframe>
+```xml
+<vsml>
+  <cont>
+    <img style="object-length: 1s;" src="キリン.png" />
+  </cont>
+</vsml>
+```
+<video width=400 height=225 controls src="examples/img.mp4"></video>
 
 ### aud
-<img src="https://hackmd.io/_uploads/ry3zn05KT.png" alt="image" />
-<br/>
-<iframe src="https://drive.google.com/file/d/1l4QPf8aqOZ5Qcg-NEE_Jwku00QfNS53d/preview" width="400" height="225" allow="autoplay"></iframe>
+```xml
+<vsml>
+  <cont>
+    <aud src="ピロッ.mp3" />
+  </cont>
+</vsml>
+```
+<video width=400 height=225 controls src="examples/aud.mp4"></video>
 
 ### seq
-<img src="https://hackmd.io/_uploads/SyF2BToKp.png" alt="image" />
-<br/>
-<iframe src="https://drive.google.com/file/d/1q14z4RpMb0aiD_M2XtnGVs-rBhixlNeW/preview" width="400" height="225" allow="autoplay"></iframe>
+```xml
+<vsml>
+  <meta>
+    <style>
+      txt {
+        font-family: "Meiryo";
+        font-size: 50px;
+        background-color: red;
+      }
+    </style>
+  </meta>
+  <cont>
+    <seq>
+      <aud src="ピロッ.mp3" />
+      <txt style="object-length: 1s;">1つ目の文章</txt>
+      <img style="object-length: 1s;" src="キリン.png" />
+    </seq>
+  </cont>
+</vsml>
+```
+<video width=400 height=225 controls src="examples/seq.mp4"></video>
 
 ### prl
-<img src="https://hackmd.io/_uploads/S1NHRTcYa.png" alt="image" />
-<br/>
-<iframe src="https://drive.google.com/file/d/1Y3tZEQt83-cnP_5jy7_vqT_IcZnTMW_x/preview" width="400" height="225" allow="autoplay"></iframe>
-<br/>
-<img src="https://hackmd.io/_uploads/Hkd2EasYT.png" alt="image" />
-<br/>
-<iframe src="https://drive.google.com/file/d/1yty7HHaHej2QIRqYEokcZYxSKHGii-oG/preview" width="400" height="225" allow="autoplay"></iframe>
+```xml
+<vsml>
+  <meta>
+    <style>
+      txt {
+        font-family: "Meiryo";
+        font-size: 50px;
+        background-color: red;
+      }
+    </style>
+  </meta>
+  <cont>
+    <prl>
+      <txt style="object-length: 1s;">1つ目の文章</txt>
+      <img style="object-length: 1s;" src="キリン.png" />
+    </prl>
+  </cont>
+</vsml>
+```
+<video width=400 height=225 controls src="examples/prl.mp4"></video>
+
+```xml
+<vsml>
+  <meta>
+    <style>
+      txt {
+        font-family: "Meiryo";
+        font-size: 50px;
+        background-color: red;
+      }
+    </style>
+  </meta>
+  <cont>
+    <prl>
+      <aud src="ピロッ.mp3" />
+      <txt>1つ目の文章</txt>
+      <img src="キリン.png" />
+    </prl>
+  </cont>
+</vsml>
+```
+<video width=400 height=225 controls src="examples/prl2.mp4"></video>
 
 ### layer
-<img src="https://hackmd.io/_uploads/Hy9UlCqY6.png" alt="image" />
-<br/>
-<iframe src="https://drive.google.com/file/d/1Cok2iHMy_Ul2miEpL1WdETT8iaq4rYwm/preview" width="400" height="225" allow="autoplay"></iframe>
+```xml
+<vsml>
+  <meta>
+    <style>
+      txt {
+        font-family: "Meiryo";
+        font-size: 50px;
+        background-color: red;
+      }
+    </style>
+  </meta>
+  <cont>
+    <layer>
+      <txt style="object-length: 1s;">1つ目の文章</txt>
+      <img style="object-length: 1s;" src="キリン.png" />
+    </layer>
+  </cont>
+</vsml>
+```
+<video width=400 height=225 controls src="examples/layer.mp4"></video>
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,4 @@ __pycache__/ @@
     debug.json
     *.mp4
     *.png
+    !examples/**/*.mp4