【ニコニコ動画】互換性のあるコメントアートを作る方法

【ニコニコ動画】互換性のあるコメントアートを作る方法

ある程度互換性のあるCA(コメントアート)を作る為の具体的な方法

ニコニコ動画で、〈ある程度互換性のあるCA(コメントアート)〉を作る為の具体的な方法を紹介します。

前回記事 ↓ の続きです。

関連記事

【ニコニコ動画】コメント視聴環境の違い※この記事はFlash版プレイヤーのコメント仕様を書いております、HTML5版プレイヤーでは表示が異なります。ニコニコ動画「コメント視聴環境の違い」を分かる範囲で書きます。[…]

環境の違い

※この記事はFlash版プレイヤーのコメント仕様を書いております、HTML5版プレイヤーでは表示が異なります。

コメントは環境によって見え方が変わってしまうので、代表的な環境で互換性がある物を書きます。

  • IE
  • Chrome pepflashplayer(以後 Chrome)
  • Mac
  • 大画面

の4環境で使えそうな具体的な方法を書きます。

IE、Chrome 、Mac、大画面の4環境対応
  • 「big full 漢字幅19文字× ender10行固定」
  • 「big full 漢字幅27文字× ender14行固定」

2013/11/06 コメント表示の大画面&フルスクリーン対応(第1弾)実装。
2014/02/21 Chrome 33になりU+2588、U+2001等が「Lucida化」で全角幅に変わらなくなる。
・2014/03/18 コメント描画処理の更新。コメント行数が大文字3行、中文字5行、小文字7行以上の場合、コメント縦幅を1/2に縮小。

※CAゲージを使ってズレをピクセル(px)単位で測っていますが参考程度でお願いします。

計ってる私が細かい事を気にしない性格なので

・CAゲージ  URL: https://www.nicovideo.jp/watch/sm9732612

上記4環境で、ほぼ同じ様に見える文字種類

二重リサイズ(ゴシック体)

  • 10行固定×big漢字幅29文字(1px位ズレ)
  • 14行固定×big漢字幅41文字(4px位ズレ)
  • 3行×big漢字幅29文字(多少ズレ)

    ※二重リサイズは負荷が大きいので、あまり使用し過ぎない事を推奨。

ender改行+臨界幅リサイズ(ゴシック体)

  • big漢字幅16文字× ender 合計11行まで(ズレ1px以下)

(重ねる場合は medium漢字幅33文字×1行を重ねる側の足場として1行目に入れます。)

※11行目を重ねる場合は漢字幅34文字にする必要があります。(中画面で3px位ズレ)

上記3環境で、ほぼ同じ様に見える文字種類

ender改行+臨界幅リサイズ固定(ゴシック体)

  • big full 漢字幅19文字× ender10行固定(中画面で4px位、大画面で7px位ズレ)
  • big full 漢字幅27文字× ender14行固定(中画面で4px位、大画面でズレ1px以下)

臨界幅+改行リサイズ積み上げ(ゴシック体)

  • big full 漢字幅34文字+「U+00A0」(空白文字)1文字×2行までを積み上げ

(中画面で4px位、大画面では重ねられない位ズレ)

(重ねる時は2行を8個作り、medium full 漢字幅32文字を重ねる側の足場として1行目に入れます。

ズレても気にならない文字種類

高さが少し変わっても気にならない流しコメント(ゴシック体)

  • 改行「naka」コメント(結構ズレますが気にしない。)
  • 足場付の速度が速い「naka」コメント速ければズレても気にならない。

    ①~⑤これでだけ使えれば、ある程度配置を気にした歌詞が出来そうです

これまで紹介した文字種類を使用する時の細かい方法

ゴシック体 漢字幅行頭の1文字目を少し変える。(Chrome pep対策)

※Chrome 33になり使用不可になりました。
行頭
「U+202A」(ゼロ幅文字)+「U+0655」(結合文字)を先頭に足します。

[open title=”クリックで詳細を開く”]

「U+0655」は前に置いた文字の幅になり、この2個の文字(ゼロ幅結合文字)はゼロ幅になります。

以降は、全角スペースは使わず「U+2001」(空白文字)(ゴシック時に漢字幅)と漢字のみにします。

書きたい行に漢字以外が入ってしまう時は、1行目等をリード行(幅固定行)にして、書きたい行に、ひらがな等 漢字以外を入れると良いです。(文字制限が厳しくなりますが。)

「U+202A」+「U+0655」(ゼロ幅結合文字)は行頭に挿入をお勧めします。

 (行末に挿入すると左側に隣接している「U+2001」(空白文字)がキャンセルされる事が確認されていて、行頭では不具合は確認されていないそうです。)

ゼロ幅文字は扱いが難しいので注意が必要です。

前後の文字を まとめてコピー、ペースト するのがオススメです。

ゼロ幅文字を入れないと文字化けする場合があります。

結合文字等は将来のフラッシュプレイヤーの変更で使えなくなる可能性があります。

[/open]

全角スペース「U+3000」を使わず「U+2001」(空白文字)を使用する(Mac対策)

 全角スペースはWinだと「27px」ですが、Macだと「39px」になってしまう為、使用を避けてMacでも幅の違いが少ない「U+2001」(空白文字)、又は幅が変わらない 「U+00A0」半角スペースを使用する。

「U+2001」(空白文字)を全角文字に隣接させて使用する(文字化け対策)

 リード行(幅固定行)で使用する際は特に注意が必要です。どこかに全角文字の漢字等を入れて隣接させて下さい。

ゴシック保護文字を入れる時は「U+00A0」(空白文字)+「U+30FE」(ヾ)を推奨

 「U+00A0」(空白文字)+「U+30FE」(ヾ)を組み合わせると漢字幅とほぼ同じ位の幅になります。Macでは4px位ズレますが、Chrome pep、IEではズレません。

  ゴシック保護文字を入れる時でも「U+202A」「U+0655」(ゼロ幅結合文字)を入れる必要がありますのでその後に「U+00A0」(空白文字)+「U+30FE」(ヾ)(ゴシック保護文字)を入れる事になります。

 「U+30FE」(ヾ)は全角文字として扱われませんので、リード行等で「U+2001」(空白文字)のみの場合は、どこかに全角文字を入れる必要があります。

二重リサイズの種類

 二重リサイズでも9、11、12、15、16行Macで高さが不安定になり固定されません

二重リサイズ明朝体(Sumsun)はChrome pepに対応出来ないので駄目でした。

空白文字が明朝、ゴシック体で同じ幅の実用的な物が無かった為です。
(半角スペースは幅が同 じですが、文字数が多くなり、明朝化もキャンセルされるので使用出来ない。)

まとめ

①~⑤を使えれば、ある程度手の込んだ歌詞が出来そうです。

今回紹介した

  • 「big full 漢字幅19文字× ender10行固定」
  • 「big full 漢字幅27文字× ender14行固定」

固定が出来て4環境ほぼ同じ様に見える為、かなり使えそうです。

少し紹介しましたが、まだ色々な組み合わせがあるかもしれません。

私はMac視聴環境も整えたので、コマンドテスト等でMacの見え方が気になる方は連絡頂ければ、スクリーンショット等を お渡しします。

今回の記事に載っている文字種類をコメントテスト動画に貼っております。

コメント視聴環境の違い確認用コマンドテストです。
URL:https://www.nicovideo.jp/watch/sm21890792

参考資料

■【コメントアート】両画面対応の積み上げによる重ね合わせ【Qwatch】
URL:https://ch.nicovideo.jp/2o79o33o/blomaga/ar348622

■[コメントアート] Chrome pepflashplayer対応技術:U+2001の漢字幅化
URL: https://ch.nicovideo.jp/gottuttu/blomaga/ar40154

■Qwatch中画面・大画面両対応CAについて【データ編】
URL:https://ch.nicovideo.jp/883797/blomaga/ar342910

■フォント変化と明朝化DR10行固定
URL: https://ch.nicovideo.jp/meg_nakagami/blomaga/ar224487

■commentart @ ウィキ
URL: https://www37.atwiki.jp/commentart/

テスト動画のスクリーンショット

参考でテスト動画のスクリーンショットを貼ります。

※量が多いので見なくて良いと思います。

クリックでスクリーンショットの詳細を開く

「①二重リサイズ10行固定」のテスト画像

「①二重リサイズ10行固定」のテスト画像を貼ります。↓ 見難いですが、下から

・「2、3、4、行目の赤色、ピンク色、オレンジ色の文字」が「ゼロ幅結合文字」を入れた分です。

・「黄色、緑色は「ゼロ幅結合文字」+「半角スペース+ゴシック保護文字」を入れた分です(Macで多少(4px位)ズレ有)」

・「1行目の白っぽい色の文字」と「10行目の黒文字」は漢字のみです。(全て漢字幅)これと同じになる様にしました。

・7,8,9行目は明朝化(Simsun)文字を入れました。9行目は漢字幅、7,8行目は狭い

1.Win7+IE10 中画面 「①二重リサイズ10行固定」(ほぼズレ無)

2.Win7+Chrome pep 中画面 「①二重リサイズ10行固定」(ほぼズレ無)

3.Mac10.5+Safari 中画面「①二重リサイズ10行固定」

(ほぼズレ無)黄色と緑色が「半角スペース+ゴシック保護」が入ってて、右に4px位ズレてます。

4.Win7+IE10 大画面 「①二重リサイズ10行固定」(ほぼズレ無)

「③ender改行+臨界幅リサイズ10行固定」のテスト画像

「③ender改行+臨界幅リサイズ10行固定」のテスト画像を貼ります。

shitaコマンドで黄色2行、ueコマンドで黒色10行固定、オレンジ色10行固定を重ねてます。

大画面だと少しズレます。

5.Win7+IE10 中画面 「③ender改行+臨界幅リサイズ10行固定」(ほぼズレ無)

6.Win7+Chrome pep 中画面「③ender改行+臨界幅リサイズ10行固定」(ほぼズレ無)

7.Mac10.5+Safari 中画面 「③ender改行+臨界幅リサイズ10行固定」(ほぼズレ無)

8.Win7+IE10 大画面「③ender改行+臨界幅リサイズ10行固定」(少しズレてます)

「③ender改行+臨界幅リサイズ14行固定」のテスト画像

「③ender改行+臨界幅リサイズ14行固定」のテスト画像を貼ります。

shitaコマンドで赤色2行、ueコマンドで水色14行固定、オレンジ色14行固定を重ねてます。中画面だと少しズレます。

9.Win7+IE10 中画面 「③ender改行+臨界幅リサイズ10行固定」(少しズレます)

10.Win7+Chrome pep 中画面「③ender改行+臨界幅リサイズ10行固定」(少しズレます)

11.Mac10.5+Safari 中画面「③ender改行+臨界幅リサイズ10行固定」(少しズレます)

12.Win7+IE10 大画面「③ender改行+臨界幅リサイズ10行固定」(ほぼズレ無)

「④改行+臨界幅リサイズ積み上げ」のテスト画像

改行+臨界幅リサイズ積み上げ」のテスト画像を貼ります。

shitaコマンド カラフル色で積み上げ2行bigを8段 積み上げて、ueコマンド黒色で重ねてます。
(ueコマンド1行目は足場の行で、そこから2行bigを8段 重ねてます。)

下から数えて2行目だけ空白を多くしてズレ具合を確認してます。大画面を考えると重ねない方が良いですね。

13.Win7+IE10 中画面 「④改行+臨界幅リサイズ積み上げ」(ズレ無)

14.Win7+Chrome pep 中画面 「④改行+臨界幅リサイズ積み上げ」(ズレ無)

15.Mac10.5+Safari 中画面 「④改行+臨界幅リサイズ積み上げ」(少しズレてます)

16.Win7+IE10 大画面 「④改行+臨界幅リサイズ積み上げ」(大画面を考えると重ねない方が良いですね。)