Qwatch

Qwatchとは、

1. Qwatch (クウォッチ) - 株式会社アイ・オー・データ機器が製造、販売しているネットワークカメラシリーズ。
2. Qwatch (キューウォッチ) - ニコニコ動画:Qで採用している動画プレイヤー。

本項では2.について記述する。

2012年10月17日17時からの『新バージョン発表会』で初公開され、同日17時半頃にリリースされた『ニコニコ動画:Q』の新機能として開放された、ZeroWatch の後継となる動画プレイヤーである。

概要

ニコ厨たちを失望のどん底に陥れ、

「使いやすさ:Zero」「運営のセンス:Zero」「発案者:Dero」「減点怪奇」

とまで言わしめた、ZeroWatch。
「原点回帰」とは、一体何だったのか。

あるニコニコユーザーは言った。

私たちはニコニコ動画で動画を観たいんです
動画プレイヤーを見たいんじゃない

この一見当たり前ともとれる願望を叶えるべく、
軽さと使いやすさを重視した新プレイヤーが開発された。

ZeroWatch をベースに開発されており、動画プレイヤー部分のみFlash、その他のユーザーインターフェースは全てHTMLで構成されている作りは継承している。

だがしかし、根本的に設計が見直されており、特に不評の原因の多くを占めていた「マウスカーソルをのせるだけでうねうね動くうざいギミック」のほとんどが廃止され、大幅にシンプル・軽量化された。そのため、前とはうって変わって低スペックの環境でもそこそこ使えるものになっているはず、たぶん。低く見積もっても、ZeroWatch よりもマシであることは間違いないだろう。

要は ZeroWatch の良い部分を残しつつ、ダメな部分を、付け焼き刃ではなく根本的に修正させたものである。

但し、大サイズの動画表示サイズがこっそりと 864×486 (半端なサイズ) から 854×480 (FWVGA) にしれっと変更された点は注意。旧サイズにぴったり合わせて作った動画は、微妙に縮小されることとなる。

バージョンアップ

第一次アップデート (2012年12月20日)

リリースから2ヶ月後、使い勝手と機能を改善するアップデートが行われた。特に動画情報が動画の上に展開できるようになったのは注目。しかし、Qwatch になってせっかく左パネルを廃止することで使いやすくしたのに、ニコメンドの追加で早速左パネルを復活させてしまって使いにくい状態に戻してしまうところあたりは非常にニコニコの運営らしい。

• 動画の詳細を上に表示できるようになった - 動画タイトルをクリックし、動画説明を展開したとき、投稿日・再生/コメント/マイリスト数・ランキング履歴・投稿者などの詳細情報や、共有ボタンなどが、動画の上に表示されるようになった (これらの情報は、説明を展開しているときは動画の上に、閉じているときは下に表示される)。
• ティッカー表示位置が変更 - ニコニコニュースなどのティッカーが、動画の下から上に移動した。
• ニコメンド機能が追加 - 動画の左のパネルが、うざいニコメンド用の領域となった。自動抽出ではなく、ユーザーが直接おすすめした動画などが表示される。ニコメンドは動画の下、ニコニコ市場領域の上にも表示される。
• 検索結果表示が広くなった - ページの移動なしに動画検索した場合の画面が改善され、画面全体が検索画面に置き換わるようになった。これにより検索結果の表示自体が広くなり、1ページあたりの表示動画数が2倍になった。また、表示を4列と1列に切り替えることができるようになった。
• 設定項目が増えた- 以下の設定項目が追加された。
  • プレイヤーの幅がブラウザの幅を越えた場合、「ニコメンド」「動画」「コメント欄」のどれを優先するかを設定できる。
  • パフォーマンス設定を追加。軽さを優先したり、見た目やなめらかさを優先したりできる。
  • 低画質 (エコノミー画質) で動画を再生する設定を追加

第二次アップデート (2013年7月25日)

運営は、なぜ多くのユーザーがニコニコ動画(原宿)に留まり、ニコニコ動画:Qに移行してくれないのか、かなり気にしている様子。「なぜQに移行しないのか」というアンケート結果の「Qwatchが使いづらい」「動画情報が動画の上にない」「ニコメンドパネルがくそうざい」という結果を踏まえて、原宿の使い勝手をかなり意識した改善が行われた。

• 動画の詳細を展開する操作が変更された - 動画の詳細の展開が、動画タイトルのクリックから、タイトルの下にある「動画情報を開く▼」をクリックする操作に変更され、原宿から来た人でも分かりやすくなった。展開すると上に動画情報が表示されるのは同様。また、詳細を閉じているときも、原宿同様に動画タイトルの下に1行分だけ動画説明が表示されるようになった。さらに、動画のサイズを大きくした場合、その横幅にあわせて動画説明も広がるようになった。
• 左パネルの廃止 - 一次アップデートで改悪され、恐ろしく邪魔だった動画左パネルがふたたび廃止され、原宿に近いレイアウトに戻った。ここにあったニコメンドパネルは、右のコメントパネルのタブのひとつとして統合された。
• 右パネルの切り替えがタブになった - Zeroからずっと分かりづらく使いにくいままだった、右のコメントパネルの機能切り替えがついに原宿同様にタブになり、1クリックで済み分かりやすくなった。デザインもZeroWatchからの中途半端なグレーから、すっきりとした白ベースに変更し、角丸デザインも排された。なお、「ニコメンド」はテレビちゃんメニュー内に移動、「過去ログ」はコメントタブ内の過去ログアイコンのクリックになり、「ローカルコメント」や「コミュニティコメント」の切り替えは、原宿ライクなコンボボックスとなった。
• 横スクロールが復活 - コメントパネルが画面外に出たときの自動ポップアップが廃止され、原宿のように横スクロールができるようになり、ブラウザの横幅を縮めても大丈夫になった。
• シークバーにサムネイルが追加 - シークバーにマウスオーバーした際、YouTube のように、その時間のサムネイルが表示されるようになった。

第三次アップデート (2013年10月8日)

• Wall 機能が追加 - 従来グレー一色だった動画周辺の背景を、複数のパターンから選べるようになった。
• ニコニコ動画:GINZA 開始に伴う変更だが、ほかはほぼ変わっていないので名前は Qwatch のままである。

ZeroWatch との比較

★印付きの記述は第一次アップデート、◆印付きの記述は第二次アップデートにより変更された仕様。

変更要素	Qwatch	ZeroWatch
動画説明領域の背景色	白に近いグレー (主コメの文字色も安心)	黒に近いグレー
動画視聴領域の背景色	中間グレーから濃いグレーのグラデ ※GINZA 以降は複数種類から選べる	黒に近いグレー
動画タイトルの文字色	黒	黄色がかった微妙なオレンジ
登録タグの表示行数	3行	2行
動画の大サイズ	854×480	864×486
ニコ割領域	必要ないときは常時非表示 必要であれば、大サイズ時でも表示 ★動画上部はユーザーニコ割未使用時、 両サイズでティッカー領域となった	中サイズ時のみ常時表示 大サイズ時は表示されない
標準の再生サイズ	中サイズ 前回使用したサイズがそのまま適用	大サイズ 標準設定を変えるには設定変更が必要
再生リスト領域	サムネは常時少し大きめ、タイトル付き マウスオーバーでサムネ拡大しない	サムネは小さめ マウスオーバーでサムネ拡大してうざい
コメント入力欄	Flash(動画再生領域の一部分)で実装	HTMLで実装
ニコニコ市場用領域	廃止 (うっすらと枠線だけ残ってる) ★ニコメンド用に変更。相変わらずうざい ◆枠線もろとも完全に廃止	動画再生領域の左側に存在
設定画面	動画が小画面になりその右に表示	再生している動画に重なって表示
動画検索画面	ZeroWatch と同じ ★ページ遷移なしに、画面全体が 検索結果に置き換わる。検索結果は 4列×8行、もしくは1列×16行で表示	ページ遷移なしに、動画の下から 検索結果がにゅっと引き出される 検索結果は4列×4行で表示
投稿日、再生数 などの詳細情報	ZeroWatch と同じ ★標準状態では ZeroWatch と同じ。 動画の上にある詳細情報を展開すると、 動画の下から上に移動する	動画の下に長くごちゃっと表示
マウスオーバーで 勝手に動く領域	タグが4行以上ありピン留めされて いないときのタグ領域と、シークバー程度	とにかくどこにマウスを置いても 何かが動いて重いしうざい。超うざい
右コメントパネルの 機能切り替え	ZeroWatch と同じ ◆タブでの切り替えになり、原宿に 近い使い勝手に戻った	「コメント▼」などと書かれた部分を クリックしてメニューを展開して選択。 うざい、分かりにくい、操作しにくい。
軽さ	ズバリ軽い。低スペックでもわりと安心 ★さらに低スペックのPCのために パフォーマンス設定が追加	CPUちゃんが熱出して倒れそう
使いやすさ	原宿以前に特別な思い入れがなければ 普通に使えそう。一部設定は必須。	おい運営なんとかしろよ 動画観るってレベルじゃねーぞおい

ユーザーCSSによるカスタマイズ

Qwatch は、動画再生領域とコメント入力欄のみ Flash で、コメント一覧など、周囲のインターフェイスはすべて HTML で構成されている。そのため、ユーザー CSS を用いることで、非公式に見た目を柔軟にカスタマイズすることが可能である。

ニコニコニュースの領域のような邪魔な要素をごそっと消すことも簡単だし、大きく配置を変えることも可能。Qwatch の使い勝手に満足できなくてニコニコ動画(原宿)の旧プレイヤーから出られない人も知っておいて損はない。

Stylish アドオンを使用する方法

Firefox、Chrome、Safari、Opera (つまり IE 以外) で有効な方法。Stylish というアドオンをインストールする。

• Firefox 用 Stylish
• Google Chrome 用 Stylish
• Safari 用 Stylish
• Opera 用 Stylish

このアドオンをインストールしたうえで、userstyles.org のニコニコ動画用ユーザーCSS一覧 から目的に合ったものをインストールするだけで、プレイヤーのインターフェイスを大きく変えることができる。筆者の個人的意見を挙げるなら、ニコニコをシンプル表示(GINZA対応) や ニコニコ動画:GINZA 表示項目カスタマイズ あたりが万人におすすめできる。

また、スタイルシートが書ける人は、特定の URL に対して任意のスタイルシートを設定することも可能なので、その気になれば Qwatch のプレイヤー本体みならず、さまざまな部分のカスタマイズが可能となる。

Internet Explorer のユーザー CSS 機能を使用する方法

Internet Explorer は残念ながら Stylish アドオンが存在しない (AdBlock はある) ので、メモ帳などのテキストエディタを使い、自分で CSS ファイルにスタイルシートの定義を書く必要がある。

まず、自分で書いた、もしくはコピペしたスタイルシートの内容をメモ帳などで「適当な名前.css」というテキストファイルに保存しする。次に、IEのメニューの「インターネット オプション」を開き、「全般」タブの「ユーザー補助」ボタンを押して、「自分のスタイル シートでドキュメントの書式を設定する」に先ほど作った CSS ファイルを指定してやればおk。

Adblock Plus を使用する方法

ユーザー CSS ではないが、Adblock Plus というアドオンを使うと、広告や見たくないものを部分的に非表示にすることができる。ユーザー CSS とは使い方が大きく異なり「うざいものの非表示」に特化したもので、このページでもまだ設定方法を解説していないが、Internet Explorer 用を含む全ての主要ブラウザ用アドオンが存在している点が大きい。

コピペでできるスタイルシート例

ここでは、Stylish に自分でスタイルシートの定義を追加する場合、もしくは、IE のユーザー CSS を作る際に役に立つスタイルシート例を紹介する。

方法は簡単。以下に示す一行を、Stylish のスタイルシート定義、または IE 用のユーザー CSS ファイルにコピペするだけ。複数を適用したい場合は、1つずつコピペすればいい。あら簡単!

なお、Stylish は特に指定しない限り、どのサイトを見ていてもスタイルシートを適用してしまうため、できれば適用の対象とする URL を指定することをおすすめする。このあとで紹介するコピペでできる CSS 例では、以下の設定を忘れても、なるべく他のサイトで誤爆しないような指定にしてます。

• Chrome 版, Safari 版, Opera 版の場合、設定画面で適用対象とする URL を指定できるので、「次で始まる URL (URL Prefix)」として「http://www.nicovideo.jp/watch/」を指定する。
• Firefox 版の場合、の中身に以下のように書く。
  @-moz-document url-prefix(http://www.nicovideo.jp/watch/) {
    /* この間にスタイルシートを貼り付けると、ニコ動の視聴ページのみに適用されます  */
}
• Internet Explorer のユーザー CSS には、こういった設定はない (全てに対して適用するしかない)。

ニュースティッカー領域 (ニコニコニュース、ブロマガ) を消す

ニコニコ動画のプレイヤーでもっともうざい、目障りと評判のニュース領域は、この一行で簡単に消えてくれる。なお、ユーザーニコ割は別の領域となっているので影響しない。

以下の場合は、枠だけを残し、中身の文字だけが消える。以下から「*」の1文字を外せば、枠ごと消滅する。

body div#content div#textMarquee * { display: none !important; }

※「ブロマガの対策方法」で紹介されている方法は、サービスを終了した (原宿) バージョン向けなので注意。

ニュースティッカー領域から気に入らないものだけを個別に消す

しかし、ブロマガは消したいがニコニコインフォや生放送案内は残しておきたい、といった人もいるであろう。

以下のCSSから「消したくないもの」を行ごと削除して使用すれば、気に入らないカテゴリだけを個別に選んで見えなくすることもできる。例えば、ニコニコニュースとブロマガだけを消したい場合は、下から3行分だけ残して使えばOK。

.textMarqueeInner div.item.event, /* イベント情報を消す */
.textMarqueeInner div.item.live_jr, /* 生放送開始告知を消す */
.textMarqueeInner div.item.tag_relation, /* なんだろうこれ? 関連タグ? */
.textMarqueeInner div.item.recommend, /* 掲載記事紹介を消す */
.textMarqueeInner div.item.uads.gold, /* ニコニ広告 宣伝(金) を消す */
.textMarqueeInner div.item.uads.silver, /* ニコニ広告 宣伝(銀) を消す */
.textMarqueeInner div.item.news, /* ニコニコニュース を消す */
.textMarqueeInner div.item.blomaga, /* ブロマガ を消す */
_dummy_ { display: none !important; } /* この行は消さないこと */

上級者向けとして、以下のように、特定の URL や 文字列を含む記事だけ消すことも可能。

.textMarqueeInner div.item[title*="ガジェット通信"], /* タイトルに特定文字列を含むと消す */
.textMarqueeInner div.item[title*="と話題に"], /* タイトルに特定文字列を含むと消す */
.textMarqueeInner div.item[title*="ｗｗｗ"], /* タイトルに全角の草が生えていると消す */
.textMarqueeInner div.item a[href*="moe2p.com"], /* URL に特定文字列を含むと消す */
.textMarqueeInner div.item a[href*="damage0.blomama"], /* URL に特定文字列を含むと消す */
_dummy_ { display: none !important; } /* 消すためのおまじない。この行は消さないこと */

やろうと思えば、特定のタイトルや URLを含む記事「のみ」を表示するホワイトリスト方式にもできる。

.textMarqueeInner div.item a { display: none !important; } /* 一旦全消し */
/* 以下、ホワイトリスト */
.textMarqueeInner div.item[title*="生放送"] a, /* タイトルに特定文字列を含むと表示 */
.textMarqueeInner div.item a[href*="live.nicovideo.jp"], /* URL に特定文字列を含むと表示 */
_dummy_ { display: inline !important; } /* 表示するためのおまじない。この行は消さないこと */


動画再生ページの広告を消す

以下の4行で、動画再生前、コメントパネル下、レビュー欄上下、ページ最下部の広告がまとめて消える。

/* 各種広告を消す */
.panel_ads_shown #playerTabContainer.has_panel_ads .playerTabContent { bottom: 0 !important; }
div#videoInformationWrapper .videoStartAdsOuter, div#playerTabContainer .playerTabAds,
.outer .sidebar div#playerBottomAd, .outer .sidebar div#videoReviewBottomAd,
div#outline div#pageFooter div#pageFooterAds, div.nicoSpotAds { display: none !important; }

コメントパネルの「ニコる」を消す

掲示板の >>187 より。これで、コメントパネルの上にマウスカーソルを載せたときの「ニコる」を消すことができる。

/* コメントパネル上のニコるを消す */
.nicoru-button { left: -9999; display: none !important; }
.menuOpened #videoMenuTopList li.videoMenuListNicoru .nicoru-button
{ display: block !important; }
#videoTagContainer .tagInner #videoHeaderTagList li { margin: 0 18px 4px 0; }

コメントパネル下のソーシャルボタン (Twitter, Facebook) を消す

別にニコニコからソーシャったりしないから、コメント欄の縦幅を少しでも多く取りたい方はこちら。

/* コメントパネル下のソーシャルボタンを消す */
div#playerTabContainer div.socialButtons { display: none !important; }
#playerTabContainer .playerTabContent { bottom: 0 !important; }
#playerCommentPanel .section { margin-bottom: 7px !important; }

動画の右にあるコメントパネル自体をを消す

div#playerContainer div#playerTabWrapper { display: none !important; }

この2行で、コメントパネルが消えた分動画の領域を中央に寄せられる。ただし、ウインドウ内のフルスクリーンがヘンになってしまう。

div#playerAlignmentArea.size_medium { width:672px !important; }
div#playerAlignmentArea.size_normal { width:898px !important; }

動画を中央に寄せる

左パネルが無くなった新しい Qwatch で動画を中央に配置したい場合はこれ。ただし、ウインドウ内でのフルスクリーンの場合、左にすきまが空いてしまう。

div#playerAlignmentArea.size_medium, div#playerAlignmentArea.size_normal { position: relative; left: 139px !important; }

動画の下にある再生リスト・おすすめ動画リストを消す

動画下にサムネイルがずらっと並ぶリストは、以下の1行で最初から存在しなかったようにできる。Qwatch の象徴ともいえる領域だが、これのせいでごちゃっと感があるのも否めないので、ほとんど使っていないならどうぞ。

body div#content div#playlist { display: none !important; }

「動画をもっと見る」バーを消す

body div#content div#videoExplorerExpand { display: none !important; }


Wall (壁紙変更) ボタンを消す

#playerAlignmentArea div#chipWallList { display: none !important; }


動画の下の市場やレビュー領域を消す

動画下のごちゃごちゃ感って Qwatch になっても全然解消されないよね、という人は以下からチョイス。

/* 動画の下の情報領域全体を消す */
body div#bottomContentTabContainer div#outline { display: none !important; }

/* 動画情報を消す (動画タイトルをクリックして展開したときの動画情報には影響しない) */
div#outline div.outer div.main div#videoInfo { display: none !important; }

/* ニコメンドを消す */
div#outline div.outer div.main div#nicommendContainer { display: none !important; }

/* ニコニコ市場を消す */
div#outline div.outer div.main div#nicoIchiba { display: none !important; }

/* 動画レビューを上下の広告ごと消す */
div#outline div.outer div.sidebar { display: none !important; }

/* フィードバックボタン */
div#outline div.outer div#feedbackLink { display: none !important; }

よくある質問集

Q. NG共有設定とか184コメントとかの設定はどこにあるの?
A. シークバーの右にある歯車アイコンのボタンをクリック。直後の質問でも触れるが、動画にコメントを投稿する人は以下の2つは設定必須。そうでなくても設定することをおすすめする。
・ ページ表示タブの「コメント入力フォームを動画上に表示」のチェックを外す。
・ ページ表示タブの「コントローラ（再生ボタン、シークバーなど）を動画上に表示」のチェックを外す。

Q. コメント欄が動画の上にかぶさるんだけど、開発者はバカなの? マジで
A. 設定を表示し、ページ表示タブの「コメント入力フォームを動画上に表示」のチェックを外せばおk。

Q. シークバーが動画の上にかぶさるとか、作った人頭おかしいんじゃないの?
A. 設定のページ表示タブの「コントローラ（再生ボタン、シークバーなど）を動画上に表示」のチェックを外す。ちなみに、これとすぐ上の設定は当初からデフォルトではチェックありだったにもかかわらず、Qwatch の紹介ページではチェックを外した状態のスクリーンショットが載っていたので、事実上の推奨設定なのであろう。

Q. 動画説明 (主コメ) が動画よりもすごく下に書かれていて読むのが面倒だわ
A. ページ上の動画タイトルをクリックすると動画説明の全文が表示される。また、設定のページ表示タブの「動画説明を常に表示」にチェックすることで、常時上にも表示されるようになる。

Q. 動画上のニュースティッカー (ニコニコニュース、ブロマガ) がうざい
A. すぐ上で消し方を解説してる。

Q. 左のニコメンドがうざい
A. アップデートで廃止されたぞ。よかったな。

Q. 右下のニコニコアプリがうざい
A. 設定のその他タブの「アプリを表示する」のチェックを外すと消える。

Q. Firefox でコメント欄の日本語入力ができなくなったんだけど
A. Flash Player の不具合。原宿に戻しても起きているはず。ZeroWatch 使用者が Qwatch で急に入力できなくなったのは、ZeroWatch の入力欄がひそかに Flash 不使用だったため。対処法としては、「Firefox Flash 日本語」でググってみるとたくさん出てくるはず。現在の Flash Player ではバグが修正された模様。

Q. 動画プレイヤー上の広告がうざいんだが
A. 諦めろ、設定もないし、プレミアム会員でも消えないので、すぐ上に書いたユーザー CSS による消し方しかない。ただしプレミアム会員は自動再生をオンにしておけば再生前の動画領域の広告は回避出来る。動画前にCM見せられたり、動画の下に広告が重なったりするYouTubeよりマシなはずだ。また、コメント一覧下の広告は、広告右下の [×] ボタンをクリックすると一時的に消せる。

Q. 重くないのに動画が常時コマ落ちする
A. たまにあるらしい? この記事主の環境でもサービス開始当初に2回ほど起きたが、リロードしたら直った。またはパフォーマンス設定からコメントの滑らかさを24fpsにすればいいかも。起きた環境を添えて「フィードバック」のページに愚痴るといいかもしれない。

Q. バグとか使いにくいところとか直してほしいんだけど、どこに愚痴ればいいの?
A. ページの右下にある「フィードバック」から、使っている環境を添えて愚痴ればいいと思うよ。

Q. 命が惜しければ原宿バージョンに戻す方法を教えろ、今すぐにだ
A. 原宿バージョンはなくなってしまいました! もう戻す方法はありません! でもどうか命だけは…ぐふっ

関連動画

関連項目

• ニコニコ動画:Q
• ニコニコ動画:GINZA
• ZeroWatch
• ニコプレイヤー4
• 志賀雄太
• Zwatch

関連リンク

• ニコニコ動画:Q 紹介とバージョン変更
• ニコニコ新バージョン：Q、新機能＆新サービス (ニコニコインフォ)
• Qwatch リリース! (ニコニコ動画開発者ブログ)