互換性のある投稿者コメント、スクリプトアート(SA)
ニコニコ動画 互換性のある投稿者コメント、スクリプトアート(SA)を作成する方法を紹介します。
※ニワン語はHTMLプレイヤーでは使用出来ません。(Flash版プレイヤーは使用可能)
投稿者コメントが使える環境だと視聴環境に対する互換性を高める事が出来ます。
私はコメントアートの中でも歌詞が好きなので歌詞を例に詳細を書きます。
- Mac、Android 対応ボタンの設置
- 歌詞非表示ボタンの設置
- 文字表示位置(‘naka’)を使う。
- 文字を明朝体(Simsun)or丸文字体(Gulim)を使う
- 歌詞非表示/表示ボタンの設置
1.@ボタンによる対応
@ボタンには多くの可能性があり、色々な対応が出来そうです。
Mac、Android 対応ボタンの設置
Winではbig16行固定ですがMac、Android だとbig17、5行固定です。通常big16行固定歌詞をボタンクリック時にbig17行に出来るボタンを作りました。
仕組みは、ボタンクリック時に「空白文字」(U+2001)を「改行」(\r)に置き換える様に作りました。
歌詞非表示ボタンの設置
「歌詞が崩れて見えない」、「歌詞なんか いらないんじゃー邪魔だー。」という方の為に、 歌詞非表示ボタンを作りました。視聴者コメを消さずに、歌詞だけ消える様に作りました。歌詞だけ非表示というのは難しく、歌詞を破壊するボタンになりました。一回消すとリロードしないと元に戻りません。
仕組みは、ボタンクリック時に「空白文字」(U+00A0)を含んだ文字列を半角スペースに置き換える様に作りました。歌詞全てにU+00A0を入れると歌詞が半角スペースになり見えなくなります。
参考動画 【東方】魔理沙も吹っ切れた・歌わせてみた【歌ってみた】
URL:https://www.nicovideo.jp/watch/sm11006139
2.ニワン語による対応
ニワン語のテキスト「drawText」は文字サイズ、文字座標が指定出来て、改行、臨界幅リサイズが発生しない為、少しの工夫で 多くの環境に対応させる事が出来ます。
互換性のあるニワン語を作る工夫
drawText(テキスト)
・pos:位置(‘naka’)を使う。(nakaは初期値)
posがnakaでなく空白で位置調整するとOSによってはズレる為。
・文字を明朝体(Simsun)or丸文字体(Gulim)にし、ゴシックの環境でも あまり影響無い様にする。
(初期値はゴシック体(MS Pゴシック))
ゴシック体は文字幅がバラバラなので、等幅の字体(明朝体や丸文字体)に変更する必要があります。
Chrome、Mac、Android の環境だとフォント変化が起きません。
drawShape(丸、四角の図形)
・commentmask(コメントマスク)が機能しなくても、あまり影響無い様にする。
Androidの一部の環境でコメントマスクが機能しない事例が発見されています。
これらを気にするだけで、多くの環境、フルスクリーンにも対応出来ます。
歌詞非表示/表示ボタンの配置。
「歌詞なんか いらないんじゃー。」という方の為に「歌詞非表示/表示ボタン」があります。
先人様が作っていた物を少し変えて使用してます。ニワン語は特殊でプレイヤ ーのコメント非表示を押しても消えません。このボタンは一度押すとニワン語の歌詞を非表 示、もう一度押すと再表示します。
仕組みはニワン語の 「visible」(表示)を使用してます。表示の時にボタンを押すと非表示に、非表示の時に押すと表示されます。
参考動画(本家)【東方Vocal】 緋色月下、狂咲ノ絶-1st Anniversary Remix-
URL:https://www.nicovideo.jp/watch/sm9565258
投稿者コメントの画像 ↓