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

ある程度互換性のあるＣＡ（コメントアート）を作る為の具体的な方法

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

前回記事 ↓ の続きです。

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

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

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

※ＣＡゲージを使ってズレをピクセル（ｐｘ）単位で測っていますが、参考程度でお願いします。

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

・CAゲージ 　ＵＲＬ： https://www.nicovideo.jp/watch/sm9732612

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

①二重リサイズ（ゴシック体）

• １０行固定×big漢字幅２９文字（１ｐｘ位ズレ）
• １４行固定×big漢字幅４１文字（４ｐｘ位ズレ）
• ３行×big漢字幅２９文字（多少ズレ）
  

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

②ender改行＋臨界幅リサイズ（ゴシック体）

• big漢字幅１６文字× ender 合計１１行まで（ズレ１ｐｘ以下）

（重ねる場合は　medium漢字幅３３文字×１行を重ねる側の足場として１行目に入れます。）

※１１行目を重ねる場合は漢字幅３４文字にする必要があります。（中画面で３ｐｘ位ズレ）

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

③ender改行＋臨界幅リサイズ固定（ゴシック体）

• big full 漢字幅１９文字× ender１０行固定（中画面で４ｐｘ位、大画面で７ｐｘ位ズレ）
• big full 漢字幅２７文字× ender１４行固定（中画面で４ｐｘ位、大画面でズレ１ｐｘ以下）
  

④臨界幅＋改行リサイズ積み上げ（ゴシック体）

• big full 漢字幅３４文字＋「U+00A0」（空白文字）１文字×２行までを積み上げ

（中画面で４ｐｘ位、大画面では重ねられない位ズレ）

（重ねる時は２行を８個作り、medium full 漢字幅３２文字を重ねる側の足場として１行目に入れます。

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

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

• 改行「naka」コメント（結構ズレますが気にしない。）
• 足場付の速度が速い「naka」コメント（速ければズレても気にならない。）
  
  ①～⑤これでだけ使えれば、ある程度配置を気にした歌詞が出来そうです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　「U+00A0」（空白文字）＋「U+30FE」（ヾ）を組み合わせると漢字幅とほぼ同じ位の幅になります。Ｍａｃでは４ｐｘ位ズレますが、Chrome pep、ＩＥではズレません。

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

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

二重リサイズの種類

　二重リサイズでも９､１１､１２､１５､１６行はＭａｃで高さが不安定になり固定されません。

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

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

まとめ

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

今回紹介した

• 「big full 漢字幅１９文字× ender１０行固定」
• 「big full 漢字幅２７文字× ender１４行固定」

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

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

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

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

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

参考資料

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

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

■Qwatch中画面・大画面両対応ＣＡについて【データ編】
ＵＲＬ：https://ch.nicovideo.jp/883797/blomaga/ar342910

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

■commentart @ ウィキ
ＵＲＬ： https://www37.atwiki.jp/commentart/

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

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

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

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

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

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

・「黄色、緑色は「ゼロ幅結合文字」＋「半角スペース＋ゴシック保護文字」を入れた分です（Ｍａｃで多少（４ｐｘ位）ズレ有）」

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

・７，８，９行目は明朝化（Simsun）文字を入れました。９行目は漢字幅、７，８行目は狭い

1.Win7＋ＩＥ１０　中画面　「①二重リサイズ１０行固定」（ほぼズレ無）

2.Win7＋Chrome pep　中画面　「①二重リサイズ１０行固定」（ほぼズレ無）

3.Ｍａｃ10.5+Safari　中画面「①二重リサイズ１０行固定」

（ほぼズレ無）黄色と緑色が「半角スペース＋ゴシック保護」が入ってて、右に４ｐｘ位ズレてます。

4.Win7＋ＩＥ１０　大画面　「①二重リサイズ１０行固定」（ほぼズレ無）

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

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

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

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

5.Win7＋ＩＥ１０　中画面　「③ender改行＋臨界幅リサイズ１０行固定」（ほぼズレ無）

6.Win7＋Chrome pep　中画面「③ender改行＋臨界幅リサイズ１０行固定」（ほぼズレ無）

7.Ｍａｃ10.5+Safari　中画面　「③ender改行＋臨界幅リサイズ１０行固定」（ほぼズレ無）

8.Win7＋ＩＥ１０　大画面「③ender改行＋臨界幅リサイズ１０行固定」（少しズレてます）

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

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

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

9.Win7＋ＩＥ１０　中画面　「③ender改行＋臨界幅リサイズ１０行固定」（少しズレます）

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

11.Ｍａｃ10.5+Safari　中画面「③ender改行＋臨界幅リサイズ１０行固定」（少しズレます）

12.Win7＋ＩＥ１０　大画面「③ender改行＋臨界幅リサイズ１０行固定」（ほぼズレ無）

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

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

shitaコマンド カラフル色で積み上げ2行ｂｉｇを８段 積み上げて、ueコマンド黒色で重ねてます。
（ueコマンド１行目は足場の行で、そこから２行ｂｉｇを８段 重ねてます。）

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

13.Win7＋ＩＥ１０　中画面　「④改行＋臨界幅リサイズ積み上げ」（ズレ無）

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

15.Ｍａｃ10.5+Safari　中画面　「④改行＋臨界幅リサイズ積み上げ」（少しズレてます）

16.Win7＋ＩＥ１０　大画面　「④改行＋臨界幅リサイズ積み上げ」（大画面を考えると重ねない方が良いですね。）