・シークバー、音量設定や時間が書いてあるエリア、コメント記入エリアの作製です。
ll お ―――
こ ⤡ ⟳ し
03:34/25:25
《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》
↑白背景だと青のシークバーが少し見づらいですね。解説中に見やすいように黒背景を上に一行追加します↓。
ll お ―――
こ ⤡ ⟳ し
03:34/25:25
《box:w100%,bg#000000》 《/box》
《box:w15%,bo#0000FF》《/box》
《box:w100%,p0.2,bg#000000,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:w15%,bo#0000FF》《/box》
《box:w100%,bg#000000》 《/box》
シークバーの再現には《box》を使用しています。ボックスの内部に何も書かないことでボックスを押し潰して一本のバーにしています。『bo#0000F』は『枠線が青色』というコードです。押し潰されて枠線しか残っていないので、これで色の設定をしています。
更に『w』によってシークバーの位置を再現しています。例えば動画が中盤であれば『w50%』にしてみたり↓
《box:w100%,bg#000000》 《/box》
《box:w50%,bo#0000FF》《/box》
《box:w100%,bg#000000》 《/box》
動画が終盤であれば『80%』にしてみたり↓
《box:w100%,bg#000000》 《/box》
《box:w80%,bo#0000FF》《/box》
《box:w100%,bg#000000》 《/box》
など、再現してみたい動画の状況を想像しながらシークバーを設定すると良いかと思います。また、次の行は動画の再生時間などが書いてある行なので、その再生時間とリンクしているような位置でシークバーを設定すると、よりリアルに見えるかと思います。
・音量設定や再生時間、その他の設定などが書いてあるエリア
ll お ―――
こ ⤡ ⟳ し
03:34/25:25
《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%,bg#000000,p0.2,overhidden》ですね。幅100%の黒色背景のボックスです。また『p』で余白を設定しており、『overhidden』には要素のボックスからはみ出た部分を隠して非表示にしています。例えば、余白を設定する『p』を使用しておらずデフォルト状態のままで『overhidden』が入っていなければ、こうなります↓
ll お ―――
こ ⤡ ⟳ し
03:34/25:25
《box:w100%,bg#000000》《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》
パソコン視聴において、枠内に上下が入りきらなくて右端に上下矢印（スクロールバー）が出てきてしまいました。こうなると見栄えが悪くなってしまうので、余計なスクロールバーを消失させる効果のある『overhidden』を使用しています。
なお、余白の『p』設定を広げるだけでもスクロールバーを消せますが、『overhidden』を併用することで確実性が増すかと思います。
・次は さ お こ し などのフォント機能です。
ハーメルンには自作フォント機能があり、有志の方々がデザインや絵文字を追加してくれています。ハーメルン内での使用が許可されているので、ありがたく使わせていただいています。指定された特殊タグで指定された文字を挟むことでフォントに変換させることが可能です。
なお、再生の停止を意味する『ll』のフォントはまだ作られていないようでした。なので、Lを半角小文字のlにして２つ並べ、太文字化の《b》、二段階拡大の《xbig》、位置を調整するための下付け《sub》を使って無理矢理再現しています。
ll
《b》《sub》《xbig》ll《/xbig》《/sub》《/b》
停止マークやニコ動っぽいフォント、誰かが作ってくださることを密かにお待ちしております（小声）
・次は音量おの横の青バーです。
――― ←これです
《b》《sub》《xbig》《big》《blue》 ――《/blue》《gray》―《/gray》《/big》《/xbig》《/sub》《/b》
これは単純に『―（ダッシュ）』を青色と灰色で色分けしているだけです。ですが、普通の『―』だと線が細いため、《xbig》《big》で大きくし、《b》で太字化しています。しかし、ハーメルンでは下端を揃えて表記されているので文字を大きくすると上にズレていく現象が発生します。その為《sub》で下付きにして位置を調整しています。
青色と灰色の『―』の数で音量を調節しているかのような見た目になるので、お好みで。
・次は『再生停止・音量マーク』『再生時間』『その他設定のマーク』の位置です。
ll お ―――
こ ⤡ ⟳ し
03:34/25:25
《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》
それぞれを《left》、《right》、《center》を使用して左、右、中央に振り分けています。この時の注意点は振り分ける順番です。最後に《center》に持ってこなければいけません
これを見た目通りに左、中央、右の順番でコードを作ると、こうなります↓
ll お ―――
03:34/25:25
こ ⤡ ⟳ し
《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》《center》《white》03:34/25:25《/white》《/center》《right》《white》《font:u58》こ ⤡ ⟳ し《/font》《/white》《/right》《/box》
必要のない改行が発生してしまいました。『《center》』のタグは後ろに改行を発生させる特徴があるからです。その為、《left》、《right》、《center》を使用して左、右、中央に振り分けをしたい時は、《center》を最後に持ってくることを心懸けましょう。
なお、この『03:34/25:25』という時間の位置。実は右に少しズレています↓
ll お ―――
こ ⤡ ⟳ し
03:34/25:25
色分けしてみてみましょう。↓
左部分の文字が多く右部分が少ないので、それらを除いた中央で位置取りした場合、バランスが崩れてしまうのです。
今回の場合、バランス崩壊はそれほど酷くないので私はこのままでやっています。しかし、それでもバランスが気になる方は重ね字を使った突破方法があるそうなので、それをお使いください。今回、これの説明は省略させていただきます↓
《box:w100%,bg#000000,relative,p0.2,overhidden》《left》《white》《font:u58》 さ お《/font》《/white》《b》《sub》《xbig》《big》《blue》 ――《/blue》《gray》―《/gray》《/big》《/xbig》《/sub》《/b》《/left》《right》《white》《font:u58》こ ⤡ ⟳ し《/font》《/white》《/right》《box:absolute(0/0),w100%,overhidden》《center》《white》03:34/25:25《/white》《/center》《/box》《/box》
・コメント入力のエリア
《box:w100%,bo#000000》《gray》 コメントする《/gray》《right》《text:bg#0000FF》《white》 コメント 《/white》《/text》《/right》《/box》
特に難しいモノはありません。黒枠で背景白のボックス作り、文字は灰色にしています。《text:bg#0000FF》で青色のテキストボックスを作り、《right》で右端に持っていっているだけです。
実際のニコ動のコメント記入部分には、左端に『コマンド』という枠もあるのですが、それを再現するとスマホ端末で視聴した際のバランスが悪くなったので削っています。
ニコ動を再現する特殊タグは以上です。
・ついでなのでニコ生風に作ったシークバー、設定エリア、コメントエリアのコードも置いておきます。これもシークバーが見えるよう上に黒背景を一行追加しています。
お ―――
こ ⤡ ⟳ し
LIVE00:17/6:00:00
《box:w100%,bg#000000》 《/box》
《box:w100%,bo#0000FF》《/box》
《box:w100%,bg#000000,p0.2,overhidden》《left》《white》《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》《red》LIVE《/red》《white》00:17/6:00:00《/white》《/center》《/box》
《box:w100%,bo#000000》《gray》 コメントする《/gray》《right》《text:bg#0000FF》《white》 コメント 《/white》《/text》《/right》《/box》
ニコ生の特徴は常にシークバーが100%なことでしょう。それと再生さボタンがないことや、時間の横に赤文字でLIVEがあることなどでしょうか。
それらを押さえていたらニコ生っぽく見えると思います。
何度も言うことになってしまいますが、パソコンでの視聴とスマホの視聴ではアス比が大きく異なりますので気をつけましょう。特にこの行↓
ll お ―――
こ ⤡ ⟳ し
03:34/25:25
は、実はスマホ視聴だと文字数が割とギリギリです。表示出来る文字数を超えると自動で改行がおこなわれます。この行の中に何かを付け足す時は注意してください。
次話ではこれらのタグを使って具体例を作っていこうかと思います。
ニコ動らしくネタまみれでやるつもりなので、お覚悟を。