#ニコニコ動画: GINZA を YouTube 化する CSS を公開したよ！

February 12th, 2015
作ってみた

以前フラット化するUCSSを書いていたんですが、15年1月末の更新に伴い表示が崩れてしまいまして。バグ修正するのも面倒だし新しく作ってしまえという謎理論で出来上がりました。

特徴

YouTube のUIを忠実に再現したデザイン
画面スクロール不要の動画再生
広告を表示しない

ほぼ全ての要素を一から作り直している状態に近く、細かな部分までスタイルを適応しています。

今回のUCSS作成にあたり YouTube のCSSにだいぶ詳しくなりましたが、英語を前提に作られているからかテキスト関連のプロパティに雑な部分がありました。

UIを再現しつつも、多少なりの改良を加えています。

デメリット

ニコニコ側のHTML、CSSが少し変わるだけでも表示が極端に崩れる場合がある
Chrome版とFirefox版では表示が若干異なる
動画が最上部に位置するため、動画説明文を読み飛ばしがちになる

1に関してはどうしようもありません。「表示が崩れました直して下さい！」というリプライをよくいただきますが、ニコニコ側のアップデートが原因であり、他のニコニコ用UCSSの表示も同様に崩れていたりします。私のUCSSのように数々の要素をコーディングしているなら尚更です。

2は頑張り次第では統一できなくもないですが、手間がかかるので表示がおかしくない限りは手を加えません。私は自称Firefox信者なのでFirefoxで制作していますし、Firefoxが優先されます。

3に関して補足すると、例えば動画説明文に「#3:04 にノイズが発生するようなので音量注意です。」と書いてあり、実際に動画でノイズが発生すると…

！？
何だ今の音ｗｗｗ
びびったｗｗｗｗｗ
↑いや主コメに書いてあっただろ
主コメくらい読めやｋｓ
コメントにいちいち反応すんな荒れるだろ

といったコメントがつくのがお約束なのですが、それを助長しかねません。

実際私も使ってみて説明文を読まなくなりましたが、すぐに再生できることの方がメリットがあるように思えます。

インストールしてみよう

アドオンを入手する

FirefoxとChromeで動作します。Opera版もあるらしいのですが詳しく知らないので解説しません。まずはUCSSを取り入れる専用プラグインである「Stylish」をインストールします。

Firefox版 – Stylish :: Add-ons for Firefox

Chrome版 – Stylish – Chrome ウェブストア

アドオン（拡張機能）のインストールが完了したら一度ブラウザを再起動して下さい。

スタイルシートを追加する

ニコニコ動画:GINZA YouTube化 – Themes and Skins for Nicovideo – userstyles.org

userstyle.orgに行き、真ん中あたりにある緑色のボタンを押してスタイルを追加します。インストールは一瞬で終わるので、ニコニコで動画を見て表示が変わっているかどうか確認しましょう。

CSSが書ける人にとってStylishは非常に楽しいアドオンです。

アイコンフォントをインストールする

アイコンフォントが無いとアイコンが表示されません。Stylishでは@importが使えないので手動でユーザーの方にインストールしてもらう必要があります。

Font Awesome, the iconic font and CSS toolkit

Webデザイナーにはお馴染みですね。

その他

不具合報告やら要望やら提案やらありましたらお気軽にコメント下さい。インストールできない！という方にもなるべく丁寧に対応します。もちろん Twitter でもOKです。

週間ダウンロード数によって表示順序が上下するのでなるべくたくさんの人に使ってもらいたいと思っております。

http://mabihoka.exblog.jp/ あねご

ちわ・3・ノ
昔からお世話になっております。
コメントのほうご親切にありがとうございます。
ＣＧの件是非とも教えていただけないでしょうか。
- http://aicle.me/ xu
  
  わーありがとうございます！
  CGの件は意外とめんどくさいのでここに書くとちょっと大変です…。
  
  1. まずは英雄伝のクライアント内にあるhfsの中身をチェックします。
  →C:NexonHeroesja-JPhfs
  
  2. 大量のデータが入っていますが、その中でロングハンマーのデータが入っているファイルが以下です。
  ・E69B6BDB19CADE555B27B058A43B98F7419E79F8.hfs
  ※こちらのサイトを参照して下さい。
  →http://wangyou.pcgames.com.cn/zhuanti/mh/buding/1203/2466533.html?ad=6364
  
  3. E69B6BDB19CADE555B27B058A43B98F7419E79F8.hfs をコピーしてとりあえずデスクトップに保存しておきます。
  
  4. hfsを解凍するための専用ツールをDLして解凍します。
  →http://dl.dropbox.com/u/82685732/VZipFlip6.zip
  
  5. [win + R]: ファイル名を指定して実行より、[ cmd ]と入力してコマンドプロンプトを実行します。
  
  6. 黒い画面のウィンドウが立ち上がるので、解凍したVZipFlip.exeをドラッグアンドドロップします。
  
  7. その後続けてコマンドプロンプト内で [半角スペース] z [半角スペース] と入力して下さい。
  
  8. デスクトップにコピーしたE69B6BDB19CADE555B27B058A43B98F7419E79F8.hfs をコマンドプロンプトへドラッグアンドドロップします。
  
  9. エンターキーを押して処理を実行します。デスクトップ上にE69B6BDB19CADE555B27B058A43B98F7419E79F8_ という名前のzipフォルダが新しくできるので解凍して中身を見ると中にロングハンマーのデータが入っています。
  
  10. ファイル名の拡張子が全て.compになっているので、名前の変更から.compをバックスペースで削除します。
  
  以上で拡張子.vtx, .vvd, .mdl などのファイルが入手できます。書いててわかりにくいなぁと思いましたが時間がないので一旦送信します…。
  - http://mabihoka.exblog.jp/ あねご
    
    ちわ・3・ノ　　　　
    ご丁寧にありがとうございます。
    説明の10の拡張子入手まではうまくできました！
    
    ですが…今手持ちのソフトだとやっぱり拡張端子が対応してないので、
    新たに模索しております。
    - http://aicle.me/ xu
      
      そうなんですね…残念です。
      
      ・VTF、VMTについてはこちらの記事が参考になりました
      →https://gist.github.com/879358/1a615776067bcdd9e02f4051fe5da3db94b49cc9
      
      ・MDLに関して
      →http://oshiete.goo.ne.jp/qa/3392881.html
      →http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1420781759
      
      ・VVDに関して
      →http://www.filejapan.org/extension/vvd
      
      なかなかに難解ですね…。
      フリーソフトで編集できそうなら私も試してみようかと思います。
      - http://mabihoka.exblog.jp/ あねご
        
        ちわ・3・ノ
        わざわざありがとうございます。今こちら参考にしてます。
        http://www.fileregistry.org/ja/extensions,cats,3d-image-files.html
        
        構造見るだけでいいんですけどね。いろいろ試しております。
        
        言いそびれてましたが、
        ブログリンク頂いてもよろしいですか？
      - http://aicle.me/ xu
        
        いい結果が得られるように願っております。
        ブログリンクを貼っていただける分には大歓迎ですが、現時点でアートあいくるにはリンクを貼るスペースがないので相互リンクはできません。
        
        そのうち英雄伝のブログを勝手に登録したリンク集を作ろうかなと思っておりました。
        でも怒られそうなんですよね。怒られてもいいからやってみたいです。
      - http://mabihoka.exblog.jp/ あねご
        
        ＣＧのほうまた分かり次第ご報告したいと思います。
        リンクのほう許可ありがとうございます。
        どうぞよろしくお願いします。
        
        シュウさんが作るブログリンク集はぜひ見てみたいです！
        つくちゃえ…（無責任
        
        長くなりましたがもう一つ質問がありまして、
        内容武器リーチの話ですのでそちらでコメします。
no name

たまたま見かけてCSS使わせて頂きました。
ニコニコの動画再生ページが見やすくなってホントに最高です！
Youtubeのデザインがどれだけ見やすく作られててニコニコ動画がどれだけ見難いか改めてよく分かりました…
- http://aicle.me/ xu
  
  ありがとうございます。
  ニコニコは巨大サイトなのにデザインがチープなのでUCSSを作る絶好の対象でした。
  まだ作りが甘い部分もあるのでバグとか見つけたらご報告お願いします…！
felt

こんにちは。フラット化からの乗り換えで試用してみましたが、
アイコンフォントの都合上仕方ないと思いますがFirefoxの「Web ページが指定したフォントを優先する」を切っていると豆腐になってしまいますね・・
仕方がない事とは思いますが代替案等あれば頂ければ幸いです。
- http://aicle.me/ xu
  
  こんにちは。フラット化からのユーザーと聞けて嬉しいです。
  
  アイコンフォントの件ですが、ブラウザの設定を変えない以上は無理だと思われます…。代替案としてStylishで新規にCSSを書いてしまうという手があります。以下の記事が参考になります。
  →http://d.hatena.ne.jp/torutk/20140829/p1
  
  feltさんは何かお気に入りのフォントがあるということでしょうか？
  それとも、MSゴシックで表示したくないとかでしょうか…両方かな？
  満足のいく結果が得られると良いのですが…。
  - felt
    
    返信ありがとうございます。
    ご教授頂いた記事を元に試してみましたがUI部分にまで適用されたり、若干描画が崩れるようで、もう少し模索してみようと思います。
    
    自分の場合はMSゴシックで表示したくない点と気に入っているフォントがあるので両者です。
    個人的な環境の問題にご丁寧に返信して頂きありがとうございました。
    - http://aicle.me/ Xu
      
      アイコンフォントを使っているサイトは数多くあるので、できればWebページが指定したフォントを優先させてあげて下さい…。それでもなお自分のお気に入りのフォントでのみWebページを閲覧したいと思うのなら、Stylishで新規にスタイルを定義し、
      
      @namespace url(http://www.w3.org/1999/xhtml);
      html {
      font-family: sans-serif !important;
      }
      html * {
      font-family: inherit !important;
      }
      
      とでも書いて、ブラウザ側のオプションからお気に入りのフォントを指定すれば、ほとんどのサイトのフォントを指定したフォントに変えることができるかと思います。
      アイコンフォントは疑似要素に対して指定されていることが多いため、問題なく表示できるでしょう。実際にこの通りにスタイルを定義すると、YouTube化CSSではアイコンは正常に表示され、かつ他の文字は自分の指定したフォントにできます。
コイワイミツバ

こんにちは！先日はChromeでの表示崩れの件にご対応いただき有難うございました。
アップデートされる度にスタイリッシュなデザインに変わっていくので感動しています。
最近のアップデートで、プレイヤーのサイズが純正より一回り小さくなってしまったようですが、仕様でしょうか？
- http://aicle.me/ xu
  
  こんにちは！ありがとうございますモチベ上がります。
  そちらは仕様です。大画面で横幅898pxから854pxに、中画面で672pxから640pxへ変更しています。
  
  動画再生プレイヤーの解像度は
  通常モード：640×360
  大画面モード：854×480
  
  となっているため、それに合わせて最適化したつもりなのですが…
  どうもニコニコ側で配信形式に変換される際にサイズが変わっているらしく、最適化とは言えないかもしれません。
  なぜニコニコ側でこのような仕様になっているのかは謎です。ただ1280px以内に収めるのが難しくなるので元のサイズには戻したくないです…。
masato kobayashi

いつもお世話になっております。
久しぶりに覗いてみたらよさ気なデザインで気に入って導入したのですがフラット化と同じ投稿者と判り納得しました。流石ですね。
ただ私がchrome使いなので崩れてるのか分かりませんが、動画のニコるボタンが見当たりません。firefoxでは問題ないのですか？反映して頂ければ幸いです。（コメントのニコるボタンは問題なく表現されています）
- http://aicle.me/ xu
  
  どもです！実はつい最近消しちゃいました…。
  コメントをニコることはあっても動画はあまりニコらないだろうと思ってのことと、ニコるボタンだけデザインがそのままになってしまうこと、新しく作り直すにしてもそのためだけに画像を作る必要があるということなどからも消してしまった方が楽でした。
  
  あとはツールチップを実現する過程で、ニコるボタンだけ階層が複雑なので難しいです。他のメニューのツールチップを実現するだけでも実は色々と苦労させられております。
  
  かといってできないわけではないですし、私個人としてはどちらでも良いです。使う人が居るならばニコるボタンは必要でしょうし…考えてみれば私も動画をニコった経験がありました。
  
  デフォルトのデザインでとりあえず復活させておきます。
  - masato kobayashi
    
    おおおお！迅速の返信と対応有難うございます。
    早速ニコるボタン押してます。私は寧ろコメントより動画の作成者を評価したいので押しまくってます。難しいことなのに欲を言って申し訳ありませんが、真っ暗な再生画面にニコるボタンが目立ってなんか可愛いし使い易いです。

Art Icle

The best way to live a smart is to stay artistic.