まず、サンプルを表示します。特殊タグの構造に興味のない方は、サンプルの直後に文字コードを記載しますのでコピペして使用してください。コード丸コピペでも構いません。三話では具体例も挙げていこうと思います。
ただし、そのまま載せると特殊タグが自動で発動してしまいコードが見えなくなってしまうので、こちらでコードを表示する際は■を差し込んでタグが発動しないようにしています。実際に使用する際は■を消して使ってください。
有志の方よりタグの起動防止方法を教えていただきました。直後のコードをそのままコピペすれば再現可能です。コピペ時の改行には気を付けてください。
あああwww
いいいwww うううwww
えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww
さささwww
そそそwww たたたwww ちちちwww
しししwww すすすwww せせせwww
わわわwww
をををwww
んんんwww
ll お ―――
こ ⤡ ⟳ し
03:34/25:25
《box:w100%,bg#000000》《marquee:normal》《white》あああwww《/white》《/marquee》
《marquee:normal》《white》いいいwww うううwww《/white》《/marquee》
《marquee:normal,t25》《white》えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww《/white》《/marquee》
《marquee:normal,t1》《blink:v20-40》《white》 さささwww 《/white》《/blink》《/marquee》
《marquee:normal》《white》《small》そそそwww《/small》 《xsmall》たたたwww《/xsmall》 《xsmall》《small》ちちちwww《/small》《/xsmall》《/white》《/marquee》
《marquee:h4,normal》《white》《big》しししwww 《/big》《xbig》すすすwww 《/xbig》《xbig》《big》せせせwww《/big》《/xbig》《/white》《/marquee》
《center》《blink:10,d1》《red》わわわwww《/red》《/blink》《/center》
《center》《blink:10,d2》《red》をををwww《/red》《/blink》《/center》
《center》《blink:10,d3》《red》んんんwww《/red》《/blink》《/center》
《/box》
《box:w15%,bo#0000FF》《/box》
《box:w100%,bg#000000,p0.2,overhidden》《left》《white》《b》《sub》《xbig》ll《/xbig》《/sub》《/b》《font:u58》 お《/font》《/white》《b》《sub》《xbig》《big》《blue》 ――《/blue》《gray》―《/gray》《/big》《/xbig》《/sub》《/b》《/left》《right》《white》《font:u58》こ ⤡ ⟳ し《/font》《/white》《/right》《center》《white》03:34/25:25《/white》《/center》《/box》
《box:w100%,bo#000000》《gray》 コメントする《/gray》《right》《text:bg#0000FF》《white》 コメント 《/white》《/text》《/right》《/box》
というコードになっています(途中の空白の行も含めた上でのコードになっています)。
では、一つ一つの構造を解説していきます。毎回、直後にコードも記載しておきますので参考にしてください。
・背景の黒ボックスについて
《box:w100%,bg#000000》 《/box》
まずは《box:w100%,bg#000000》と《/box》についてです。最初の《box》と最後の《/box》で囲むことによってボックスを作ることができます。次の『w100%』では、そのボックスの幅の表示を決めています。本文幅の100%という意味なので視聴する端末によってズレが発生することもなく便利です。また、『bg#000000』でボックス内の背景色を黒にしています。色はカラーコードを変えるだけで変更可能です。
・ボックスを作ったら、次は文字コードの記入に移りましょう。一行目を表示してみます。
《box:w100%,bg#000000》《marquee:normal》《white》あああwww《/white》《/marquee》《/box》
これは《marquee:normal》のタグによって文字を右から左に動かしています。それから《white》によって文字を白色にしています。背景を黒色にしているので文字が同じ黒だと見えなくなります。逆に白色の背景に白文字を書いても見えません。
文字のデフォルトは黒色、背景のデフォルトは白色なので気をつけましょう。
・次は二行目まで表示してみます。
《box:w100%,bg#000000》《marquee:normal》《white》あああwww《/white》《/marquee》
《marquee:normal》《white》いいいwww うううwww《/white》《/marquee》《/box》
二行目は文字の間にスペースを入れる事で別人のコメントが流れているように見せています。また、流れる文字の表示時間はデフォルトで10秒です。つまり文字数が増えれば増えるほど、その行内で流れるスピードが速くなったようにみえます。これらを活用して複数のコメントが自然に流れているように見せましょう。
また、コメントの間だけでなく、コメントの前や後にスペースを入れる事で位置をズラすことができます。同じ二行目の設定です↓
いいいwww うううwww
いいいwww うううwww
《box:w100%,bg#000000》《marquee:normal》《white》いいいwww うううwww《/white》《/marquee》
《marquee:normal》《white》 いいいwww うううwww 《/white》《/marquee》《/box》
少しズレましたね。同じ設定でもスペースを活用することで位置を調整することが可能です。
・三行目です。
あああwww
いいいwww うううwww
えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww
《box:w100%,bg#000000》《marquee:normal》《white》あああwww《/white》《/marquee》
《marquee:normal》《white》いいいwww うううwww《/white》《/marquee》
《marquee:normal,t25》《white》えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww《/white》《/marquee》《/box》
三行目は『t25』を付け加えることで文字が流れるスピードを遅くしてみました。『t』は表示時間を意味しています。デフォルトは『t10』で表示時間は10秒ですが、たとえば『t25』にすると25秒になり文字が遅く流れます。
複数の行の表示時間がデフォルトだと、同じタイミングでコメントが現われて、同じタイミングで消えていきます。不自然に見えてしまうので、それぞれ表示時間はズラしましょう。しかし『t10』と『t20』のような倍数であれば始まりと終わりのタイミングが被ってしまいます。被らないようにズラし、そして文字スピードを調整して自然なコメントを表現しましょう。
・四行目。超高速コメント
あああwww
いいいwww うううwww
えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww
さささwww
《box:w100%,bg#000000》《marquee:normal》《white》あああwww《/white》《/marquee》
《marquee:normal》《white》いいいwww うううwww《/white》《/marquee》
《marquee:normal,t25》《white》えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww《/white》《/marquee》
《marquee:normal,t1》《blink:v20-40》《white》 さささwww 《/white》《/blink》《/marquee》《/box》
『t1』つまり表示時間を極端に短くすることによって超高速コメントが再現できます。ここでの注意点は《blink》を使用しているところです。このタグは点滅効果のあるタグで《blink:v20-40》と入力した場合、再生時間の20%~40%の間のみを表示し、それ以外の時間は非表示にすることが出来ます。
試しに《blink》を使用しなかった場合の挙動を見てみましょう↓
《box:w100%,bg#000000》《marquee:normal,t1》《white》 さささwww 《/white》《/marquee》《/box》
高速で何度も再生されてしまい非常に不自然ですね。《blink》は調整に重要なタグであることを覚えておきましょう。
・五行目。文字の縮小です。
あああwww
いいいwww うううwww
えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww
さささwww
そそそwww たたたwww ちちちwww
《box:w100%,bg#000000》《marquee:normal》《white》あああwww《/white》《/marquee》
《marquee:normal》《white》いいいwww うううwww《/white》《/marquee》
《marquee:normal,t25》《white》えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww《/white》《/marquee》
《marquee:normal,t1》《blink:v20-40》《white》 さささwww 《/white》《/blink》《/marquee》
《marquee:normal》《white》《small》そそそwww《/small》 《xsmall》たたたwww《/xsmall》 《xsmall》《small》ちちちwww《/small》《/xsmall》《/white》《/marquee》《/box》
文字の縮小は《small》を使用しましょう。《xsmall》は2段階縮小。《xsmall》の中に《small》を入れる事で3段階目の縮小も可能です。
・六行目。文字の拡大です。しかし、流れる拡大文字は扱いが難しいところがあります。実際に試してみます。
あああwww
いいいwww うううwww
えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww
さささwww
そそそwww たたたwww ちちちwww
しししwww すすすwww せせせwww
《box:w100%,bg#000000》《marquee:normal》《white》あああwww《/white》《/marquee》
《marquee:normal》《white》いいいwww うううwww《/white》《/marquee》
《marquee:normal,t25》《white》えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww《/white》《/marquee》
《marquee:normal,t1》《blink:v20-40》《white》 さささwww 《/white》《/blink》《/marquee》
《marquee:normal》《white》《small》そそそwww《/small》 《xsmall》たたたwww《/xsmall》 《xsmall》《small》ちちちwww《/small》《/xsmall》《/white》《/marquee》
《marquee:h4,normal》《white》《big》しししwww 《/big》《xbig》すすすwww 《/xbig》《xbig》《big》せせせwww《/big》《/xbig》《/white》《/marquee》《/box》
文字の拡大は《big》を使用します。《xbig》は2段階拡大。《xbig》の中に《big》を入れる事で3段階目の拡大も可能です。
しかし、拡大文字の下の行に意図せぬ空白ができてしまっています。これが注意する点です
この流れる拡大文字には《marquee:h4,normal》を使用していますが、『h』というタグで『marquee』の縦方向の範囲を定めているのです。試しに『h4』を消去してやってみます↓
《box:w100%,bg#000000》《marquee:normal》《white》《big》しししwww 《/big》《xbig》すすすwww 《/xbig》《xbig》《big》せせせwww《/big》《/xbig》《/white》《/marquee》《/box》
パソコン視聴では何の問題はありませんが、スマホ視聴であれば拡大文字の下部が見切れてしまいましたね。(パソコン視聴でも見切れている人も居るそうです)
この見切れを阻止するために『h』で高さを設定しているのですが、その影響によって余計な空白(行間の空白)も大きくなってしまうのです。困りますが見切れてしまうよりかはマシなので、うまいこと空白の行として扱う方が良いかと思います。
なお、これは流れるコメントだけに発生している問題ですので、スマホ視聴であっても動いていないコメントは拡大しても見切れは発生しません。↓
通常の文字 一段階拡大 二段階拡大 三段階拡大
《box:w100%,bg#000000,overhidden》《white》通常の文字 《big》一段階拡大 《/big》《xbig》二段階拡大 《/xbig》《xbig》《big》三段階拡大《/big》《/xbig》《/white》《/box》
そのため、文字を拡大したいけど空白行を作りたくない場合は、文字を流さないようにして、拡大した文字を流したい場合は下に生まれる空白行に気を付けるようにしましょう。
例えば次の七行目↓のように、あえてコメントのない空白の行を続けて入れることで自然に見せることもできます。
・七行目。コメントなし
あああwww
いいいwww うううwww
えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww
さささwww
そそそwww たたたwww ちちちwww
しししwww すすすwww せせせwww
《box:w100%,bg#000000》《marquee:normal》《white》あああwww《/white》《/marquee》
《marquee:normal》《white》いいいwww うううwww《/white》《/marquee》
《marquee:normal,t25》《white》えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww《/white》《/marquee》
《marquee:normal,t1》《blink:v20-40》《white》 さささwww 《/white》《/blink》《/marquee》
《marquee:normal》《white》《small》そそそwww《/small》 《xsmall》たたたwww《/xsmall》 《xsmall》《small》ちちちwww《/small》《/xsmall》《/white》《/marquee》
《marquee:h4,normal》《white》《big》しししwww 《/big》《xbig》すすすwww 《/xbig》《xbig》《big》せせせwww《/big》《/xbig》《/white》《/marquee》
《/box》 ←ここまで
文字を載せたくない行を作りたい場合は、単純に改行するだけでOKです。何もいりません。逆に、変な改行をしていると意図せず無記載の行が生まれることがあるので気をつけましょう。
・八、九、十行目。流れず現われる文字、色付き文字、中央寄せ
あああwww
いいいwww うううwww
えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww
さささwww
そそそwww たたたwww ちちちwww
しししwww すすすwww せせせwww
わわわwww
をををwww
んんんwww
《box:w100%,bg#000000》《marquee:normal》《white》あああwww《/white》《/marquee》
《marquee:normal》《white》いいいwww うううwww《/white》《/marquee》
《marquee:normal,t25》《white》えええええwwwおおおおおwwwかかかかかwwwきききききwwwくくくくくwwwけけけけけwwwこここここwww《/white》《/marquee》
《marquee:normal,t1》《blink:v20-40》《white》 さささwww 《/white》《/blink》《/marquee》
《marquee:normal》《white》《small》そそそwww《/small》 《xsmall》たたたwww《/xsmall》 《xsmall》《small》ちちちwww《/small》《/xsmall》《/white》《/marquee》
《marquee:h4,normal》《white》《big》しししwww 《/big》《xbig》すすすwww 《/xbig》《xbig》《big》せせせwww《/big》《/xbig》《/white》《/marquee》
《center》《blink:10,d1》《red》わわわwww《/red》《/blink》《/center》
《center》《blink:10,d2》《red》をををwww《/red》《/blink》《/center》
《center》《blink:10,d3》《red》んんんwww《/red》《/blink》《/center》
《/box》
中央寄せにするのは《center》で簡単に出来ます。右寄せにしたいのなら《right》。左寄せはそもそもデフォルトですが《left》でも出来ます。色文字も《red》のように英語で記入したりカラーコードを入れる事で簡単に変えられます。
流れず現われる文字は四行目でも使用した点滅タグの《blink》を使いましょう。遅延を表わす『d』を使用して《blink:10,d1》《blink:10,d2》《blink:10,d3》とすれば表示を1秒ごとズラすことが可能です。『d』の数字を変えれば時間のズレも調整出来ます。
・これでコメント部分の解説は完了です。しかし、一つ注意点があります。それはアスペクト比(動画の縦横比)です。動画風の黒ボックスをパソコンで作製する際、一般的な動画サイズ(16:9)を再現することは可能ですが、それを別端末、たとえばスマホの縦画面で視聴するとアスペクト比が大きくズレます。恐らく縦長のアス比になるでしょう。
そうならないように並べる行数を増やしすぎないことを意識した方が良いです。自分は10~11行を目安に作製しています。流れる文字を拡大している場合は9~10行程度でしょうか。
スマホで見ると正方形に近いアス比ですが、行をこれ以上減らすとパソコンで見た時のアス比が横長になりすぎるので仕方なくそうしてます。
また、流しているコメントの文字数制限はあまり考えなくていいのですが、わわわwwwをををwwwんんんwwwの所のように止まっているコメントは、文字数が多すぎると勝手に改行してしまう可能性があります。ちょっと試してみましょう↓
じゅげむ じゅげむ ごこうのすりきれ かいじゃりすいぎょの すいぎょうまつ うんらいまつ ふうらいまつ くうねるところに すむところ やぶらこうじの ぶらこうじ
《box:w100%,bg#000000》《center》《blink:10,d1》《red》じゅげむ じゅげむ ごこうのすりきれ かいじゃりすいぎょの すいぎょうまつ うんらいまつ ふうらいまつ くうねるところに すむところ やぶらこうじの ぶらこうじ《/red》《/blink》《/center》《/box》
改行していないはずなのに、やはり入りきらない分が自動で改行されていますね。改行される位置もパソコンなら全角44字前後、スマホ縦向き視聴で全角22字前後のようです。まぁ、私のパソコン・スマホサイズの場合であればの話なので、他の端末で見た場合また更に異なって見えることもあると思います。どの端末で視聴しても良いように、文字数は気にかけておきましょう。
ついでに流している文字は何文字までイケるのか試してみます。
じゅげむ じゅげむ ごこうのすりきれ かいじゃりすいぎょの すいぎょうまつ うんらいまつ ふうらいまつ くうねるところに すむところ やぶらこうじの ぶらこうじ パイポパイポ パイポのシューリンガン シューリンガンのグーリンダイ グーリンダイのポンポコピーのポンポコナーのちょうきゅうめいのちょうすけ
《box:w100%,bg#000000》《marquee:normal》《white》じゅげむ じゅげむ ごこうのすりきれ かいじゃりすいぎょの すいぎょうまつ うんらいまつ ふうらいまつ くうねるところに すむところ やぶらこうじの ぶらこうじ パイポパイポ パイポのシューリンガン シューリンガンのグーリンダイ グーリンダイのポンポコピーのポンポコナーのちょうきゅうめいのちょうすけ《/white》《/marquee》《/box》
100文字以上でも問題ないようです。ただ、これだけ文字数が多いと流れるスピードも速くて読みにくいので、三行目で説明した『t』を活用してスピードを調節しましょう。
さて、コメント部分はここまで。
次話ではシークバー、音量や時間が書いてある設定のエリア、コメントを記入エリアの作製について解説します。