【ニコニコ動画】コメント視聴環境の違い

【ニコニコ動画】コメント視聴環境の違い

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

ニコニコ動画「コメント視聴環境の違い」を分かる範囲で書きます。

「各環境の特徴と対策が分かれば、ある程度互換性のあるCAが作れるかもしれない。」

結論
  • 妥協が必要。

どこまで対応させるかは、CA作成者が精密性と互換性を考えて、どこかを妥協して作成すると良いかと思います。

※ブラウザやOS Verの違い、情報が古い場合等があり、情報が間違っている場合もありますので、参考程度に読んで頂ければと思います。

コメントアート(CA)を作る時に多くの人が対象にしている環境は下記です。↓

  • OS:Windows XP, Vista, 7 (ニコニコ動画推奨環境)
  • ブラウザ:Internet Explorer, Firefox(ニコニコ動画推奨環境)
  • プラグイン:Adobe Flash Player 10以降
  • プレイヤー:Qwatch中画面、原宿

この環境以外だと見え方が変わります。
各環境の特徴を簡単に書きます。

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

各環境の特徴

1.Windows OS+Qwatch大画面

  • 「コメントの拡大比率が違う。」

詳しく説明して頂いているブログがあります下記。↓
・Qwatch中画面・大画面両対応CAについて【導入編】
URL:https://ch.nicovideo.jp/883797/blomaga/ar314439

2.Windows OS+ブラウザGoogle Chrome 

  • フォント変化しない。」
  • 「U+2001が漢字幅よりもやや小さい。」


詳しく説明して頂いているブログがあります下記。↓
[コメントアート] Chrome pepflashplayer対応技術:U+2001の漢字幅化
URL: https://ch.nicovideo.jp/gottuttu/blomaga/ar40154
※Chrome 33になり使用不可になりました。

3.Mac OS X 10.7、10.8+ブラウザSafari(ニコニコ動画推奨環境)

  • 「日本語の文字幅が同じ。」(Windowsの標準日本語フォントは文字幅バラバラ。)
  • 「フォント変化しない。」

詳しく説明して頂いているブログがあります下記。↓
フォント変化と明朝化DR10行固定
URL:https://ch.nicovideo.jp/meg_nakagami/blomaga/ar224487

4.Android OS+ブラウザAngel Browser(PC表示)

※AndroidはPC表示にしないと話にならない位見れません、またブラウザによって見え方が変わってきます。ニコニコ推奨アプリや、スマートフォン表示だと文字の大きさがまったく違ったり、カラーコードが反映されません。私が知る限りの一番まともな環境が〈Angel Browser〉のPC表示です。

  • 「日本語の文字幅が同じ。」(Windowsの標準日本語フォントは文字幅バラバラ。)
  • 「フォント変化しない。」
  • 「文字が Windowsよりも少し小さく描画される。」

フォントは違いますが、Macに特徴が似ています。

ある程度互換性のあるCAを作る為の方法

1.Qwatch大画面 対策

  • 中、大両画面の正比率と拡大比率の差が小さい文字サイズを選ぶ。

2.Chrome 対策

  • フォント変化しなくても影響のないレイアウトにする。
    ・U+2001使用時は漢字幅になる様、行頭に「ゼロ幅文字+結合文字」(「U+202A」+  「U+0655」)を入れる。(※ゼロ幅文字は幅が無く扱いが難しいです。)※Chrome 33になり使用不可になりました

3、4.Mac OS、 Android OS 対策

  • フォント変化しなくても影響のないレイアウトにする。
  • 二重リサイズ固定を使用する。
    (二重リサイズは負荷が大きいので、あまり使用し過ぎない事を推奨。)(文章訂正済)
  • 文字が小さくなっても影響のないレイアウトにする。
    (文字が小さくなるというのは大きな問題でレイアウトがガラッと変わる為、かなりの妥協が必要です。コメントの高さを表示 領域と同じにする固定や積上げでズレが発生します。精密さを求めるCAはこの問題により Mac対応を諦めています。)
  • 全角スペース(U+3000)を使わず、U+2001 or 半角スペースを使用する
    全角スペースはWinだと「27px」ですが、Macだと「39px」になってしまう為、使用を避けてMACでも幅の違いが少ないU+2001、又は幅が変わらない半角スペースを使用する。

続き↓

関連記事

ある程度互換性のあるCA(コメントアート)を作る為の具体的な方法 ニコニコ動画で、〈ある程度互換性のあるCA(コメントアート)〉を作る為の具体的な方法を紹介します。 前回記事 ↓ の続きです。[sitecard sub[…]