本文

前回の記事の概要(※このエントリは前回の記事の追記みたいな感じになります)

先日、ニコニコ動画が「GINZA」にバージョンアップして、次のようにデザインが変わりました。

GINZAでの変化の例

つまり、これまでは普通だったサムネが、引き伸ばされたピンボケの状態で表示されるようになった感じです。

GINZAのサムネ表示方法


……と、以前の記事で述べました。

で、別に引っ張るような話ではないのですが、ちょっと説明不足だった気がするので、仕組み的なことを少し追記いたします。

2014年1月14日

GINZAのサムネはどうして汚いのか

ニコニコ動画で表示されるサムネ画像は、それ用の場所にあらかじめ保存されています。

(たとえば、sm9 のサムネなら、http://tn-skr2.smilevideo.jp/smile?i=9 で読み込めます[註1]

サムネの例


このサムネは、動画の投稿時に作成されます(あとから変更はできません[註2])。

また、動画のどのシーンをサムネにするかは、投稿したひとが自由に決められます。

(動画を投稿したときに、○分○秒の○フレーム目……と指定した場面から作られたサムネが保存される感じになります)

サムネ選びの例
サムネ選びは投稿者の悩みどころ


そんな感じで、指定したひとコマが「130×100」に縮小されて、ニコニコ動画に保存されます。

たとえば、このフレームがサムネに指定された場合なら……。

サムネにするフレームの例
(※mylist/31554489より)

次のように、130×100ピクセルの画像がサムネ用として保存されます。

サムネになったフレームの例


また、最近2年くらいに投稿された動画では、同時に360×270ピクセルの画像も保存されています。

大きなサムネの例
URLの末尾に「.L」を付けると大きなサムネにアクセス

(2011年12月8日の11時から、360×270のサムネが保存されるようになりました。ただし、公式チャンネルやswfの動画は例外になります)

(IDとしては、sm16371888以降が対象という感じになります。ただし、sm16368809のように、投稿日時が前後するものは例外になります)


さて、GINZA以前のデザインでは、サムネを130×100よりも大きく表示する状況が、ほとんどありませんでした。

しかし、GINZAでは、サムネを160×90で表示する場面が増えました。

つまり、こうなるはず……

こうなるべきはずだったサムネ

……だと思うのですが、実際のGINZAでは、こうなりました。

現実のサムネ

2012年以降の動画の大半は、360×270の画像から処理する方向で、クッキリしたサムネにできたはずです。

しかし、GINZAでは、共通して130×100の画像を160×90に引き伸ばす方式なので、眠たいサムネになっています。


最近2年間の動画については、もっと綺麗なサムネにできるはずで、手抜きだと言うほかありません[註3]

それ以前の動画については、たぶん、サムネを切り出す位置が○フレーム目だという情報を保存していないため、改めて大きなサイズで作り直すことができず、130×100の画像を引き伸ばす形で仕方なく妥協していると思われます[註4]

かくて、GINZAのサムネは、バージョンアップ前よりも汚くなりました(現状と以前を比較した画像)。

2014年1月14日

4:3の動画の今後について

この問題について、「4:3」の動画に関しては、次のようにアナウンスされています。

ニコニコインフォメーション

4:3の動画に関しては左右に黒帯を入れて表示するよう改善予定です。


つまり、

GINZA以前のイメージ
原宿

改善前のイメージ
GINZA(現在)

改善後のイメージ
GINZA(改善後のイメージ)

……という感じの「改善」になると思います[註5]


全体像的なイメージとしては、こんな感じでしょうか。

改善前のイメージ
現状

改善後のイメージ
改善後のイメージ

「改善」後は、原宿のときよりも小さく表示する形になるので、ぼやけの原因になる引き伸ばしが行われません。

(130×100 のサムネだけで事足りるので、360×270 のサムネがない古い動画でも問題ありません)

私としては、無難な落としどころだと思います。

2014年1月14日

GINZAのサムネはどうして汚いのか(16:9の動画の場合)

……と、ここまでが「4:3」の動画の話でした。

ここからは「16:9」の動画の話になるのですが、基本的には同じです。


たとえば、投稿したときに、このフレームがサムネに指定されたなら……。

サムネ取得元フレームの例
(※mylist/10916387より)

次のように、上下に黒帯を付け加える形で作成された、130×100の画像がサムネ用に保存されます。

16:9のサムネの例

(最近の動画なら、上下黒帯付きの360×270の画像も同時に保存されます)


その後の処理も、「4:3」の動画の場合とまったく同じです。

サムネ切り出しの例1

サムネ切り出しの例2

カットされる部分の大半は黒帯になるので、上下左右カットの影響は「4:3」の動画ほど大きくありません。

(※上の例のように、「15:9」の動画では、地味に上下が切れます)


その後の処理も「4:3」の場合と同じで、

原宿の場合

GINZAの場合

……という感じに、GINZAでは「16:9」の動画もボヤけます。

2014年1月14日

最近2年以内の16:9の動画の今後について

さて、公式アナウンスを見ると、次のように書かれています。

ニコニコインフォメーション

新規投稿ぶんの動画に関しては、現在よりも高い解像度でサムネイル切り出しを行うよう変更予定です。

この文章には、「現在は高い解像度でサムネイルを切り出していない」という暗黙の前提があります。

しかし、実際には、2011年12月から高い解像度でサムネイルを切り出しているわけで、現状と食い違います。

360x270のサムネ
360×270は、GINZAデザインのために十分な解像度です

この点は、ちょっと解釈に困りますが、たぶん、2年前から360×270のサムネを保存していることを、このアナウンスを書いた人物が知らなかったのではないかなと思います。


と、なぜか運営にスルーされている360×270のサムネですが、最近の「16:9」の動画については、それを使う方向で、綺麗に表示できるようになるはずです。

GINZAの現状

改善できるはずの状態

(ただし、公式チャンネルやswfの動画など、360×270のサムネが保存されていない動画は例外となります)

2014年1月14日

2年以上古い16:9の動画の今後について

そんなこんなで、「4:3の動画」と「最近2年間の16:9の動画」については、技術的に難しい問題はないはずなので、そのうち改善されると思います。

厄介なのは、それ以外の動画です。

公式アナウンスでも、「古い16:9の動画」については、まったく触れていません。

ニコニコインフォメーション

4:3の動画に関しては左右に黒帯を入れて表示するよう改善予定です。また、新規投稿ぶんの動画に関しては、現在よりも高い解像度でサムネイル切り出しを行うよう変更予定です。


もしもサムネを作り直すことができれば、次のようにできるのですが……。

劣化したサムネの例

現状(URL)では次の状態になっており、いまのところ、これを改善する予定はないということになります。

劣化したサムネの例

ちなみに、もしも「4:3の動画」と同じような方式で処理するとしたら、次のようになります。

劣化したサムネの例


そんなこんなで、サムネのボヤケについては、ニコニコ動画の手抜きによるところも大きいのですが、ちょっと解決の難しい問題も混ざっています。

そのため、2年以上前の「16:9」の動画については、ずっとボヤけたままかも知れないという感じになります。

註釈

^ 註1:ニコニコ動画のサムネのサーバについて

サムネ画像のURLは、動画IDの数字部分で決まります(※スレッドIDではなく、動画のIDから識別子を除いた部分です)。

基本的には、「http://tn-skr○.smilevideo.jp/smile?i=××」という形。

××は、動画IDの数字部分そのまま(sm116なら「116」)。○は、動画IDの数字部分を4で割った余りに1を足した値です(sm116なら「1」)。

サムネのURLの例

ただ、○については、現状では、「1」~「4」のどれを入れても問題はないようです(「tn-skr」だけでも良し)。

(いちおう、ext.nicovideo.jp/api/getthumbinfo や i.nicovideo.jp/v3/video.array から得られるのは4で割ったURLで、検索結果ページなどでも4で割ったURLを指定しているので、そっちが正式? だろうと思っています)


なお、サーバが重かったりすると、画像のデータのかわりに、「リクエストに応えられません」的なエラーが返されます。

その場合、ニコニコ動画の各ページでは、サムネの部分が真っ白になったり、真っ黒になったりします。

サーバエラーの例
こういう状態 (※例はmylist/13644005あたり)

基本的に、ニコニコ動画のサムネがちゃんと表示されないときには、tn-skr○.smilevideo.jp へのリクエストでエラーが返っています。


余談ですが、2013年の11月末ごろから、そのエラーが非常に増えました。

また、tn-skr○.smilevideo.jp からエラーを返される場合、以前はほとんどが503でしたが、ちょうどその頃から502を返されるケースが多くなっており、11月末くらいにサムネ用のサーバに何か変更があったのだろうと思っています。

公式アナウンスでは、この問題は12月3日の夕方ごろに発生したことになっているのですが、たぶん、GINZAへの完全移行時のアクセス増加で悪化して運営への苦情が増えたのが12月3日の夕方というだけで、問題の原因が作られたのはもう少し前のはずです)

^ 註2:サムネの変更について

ユーザーが投稿した動画のサムネは、あとから変更することはできません。

しかし、公式チャンネルでは、サムネが差し替えられることがあります。

たとえば、『新テニスの王子様』では当初、7話から最終話までのサムネが全部この画像でした。

新テニスの旧サムネ

新テニスの昔のサムネ
こんな感じ

これについては、毎週、コメントでも言及されており、

(7話)
00070 サムネどうしたw
10704 サムネww
11096 サムネのチョイスおかしいよwwww
16218 サムネwww
17301 さむねww
27024 ランキングでサムネを見た時点で笑ってしまうwww
36700 サムネがw
36741 サムネ仕事しろwwwwwwwwww
41434 サムネどうした
53440 おいwwwサムネなんで公式画像なんだよwwwがんばれよwww

(8話)
00049 サムネは前とかわらんのね
38979 サムネ同じで気付かなかった
43717 さむね工夫しろよww
55564 サムネが7話と同じな件

(11話)
000438 なんでサムネ一緒なんだお
041060 サムネ変えろよ何話まで見たかわかんねえじゃん
042305 サムネ手抜きw
108787 サムネまだ決まんないのかよwww

……という感じだったのですが、その後、いつのまにか普通のサムネに差し替わっていました。

差し替え後
昔は全部ドヤ顔のリョーマ様でした

^ 註3:サムネの引き伸ばし方法について

・GINZAの検索結果ページでは、サムネを一律して160×90で表示することになっています。

・ただし、古い動画だと、それよりも小さい130×100の画像しか用意されていません。

・しかし、最近2年くらいの動画なら、それよりも大きい360×270の画像も用意されています。

……という条件で。

GINZAでは、すべての動画で共通して130×100の画像を160×90に引き伸ばして使うという方式を選択しています。


引き伸ばしの方法は、単純にCSSで指定しているだけです。

(※色々省略して該当の部分を抜き出すとこんな感じです)

.itemThumb {
 width: 160px;
 height: 90px;
 overflow: hidden;
}

.itemThumb img {
 width: 172px;
 height: auto;
 margin-left: -6px;
 margin-top: -20px;
}

<div class="itemThumb">
 <img src="ダミー.gif" data-original="http://tn-skr4.smilevideo.jp/smile?i=19922623">
</div>

(130×100の画像を元にして、幅が172ピクセルになるように拡大した上で、横は7ピクセル目からの160ピクセルぶん、縦は21ピクセル目からの90ピクセルぶんだけを表示する……みたいな感じの指定になります)


上記のソースで、次のような表示になります。

上のソースで表示される画像のイメージ

ちなみに、ソースの「smile?i=19922623」の後に「.L」を付け足すだけで、次のような表示になります。

「.L」を付け加えた場合の表示イメージ

もちろん、実際には、単に「.L」を付け足して360×270の画像を読み込む形にすると、無駄に転送量が増えます。また、360x270の画像が存在する場合と、存在しない場合の区別も必要になります。

なので、あらかじめ別のファイルとして160×90サイズの画像を作成しておくなど、「tn-skr○.smilevideo.jp」側の変更が必要になります。

そのためには、CSSを書いた人とは違う部署の人が仕事をする必要があるかもしれませんが、特に難しい作業ではないはずです。

その特に難しくない作業をニコニコ動画がしなかった理由は、謎です

「部門をまたぐ驚くような協力体制、こういったものはまったく必要ありませんでした」
運営としては、GINZAでは部門をまたぐような協力は必要なかったという見解らしいです(sm21870194


余談ですが、CSSで指定しているだけなので、拡大のされ方はブラウザによる違いが出ます。

比較用画像(Firefox)
Firefox

比較用画像(IE)
IE

比較用画像(Chrome)
Chrome

比較用画像(Opera)
Opera

比較用画像(Safari)
Safari(Win版)

比較用画像
※360x270を縮小した場合

※「JPEGファイルを幅130から幅172に拡大する」ということ自体に無理があり、このブラウザなら綺麗に見える……といったことはありません。

^ 註4:サムネの作り直しについて

ニコニコ動画では、動画ごとに、次のようなサムネ画像を保存しています。

サムネ

サムネ

これは、動画の何フレーム目かを抜き出して作られたものです。

なので、動画の同じフレームから抜き出せば、もっと大きなサイズでサムネを作り直すことができます。


しかし、ニコニコ動画では、動画の何フレーム目をサムネにしたかという情報を保存していない可能性が高いです。

(いまのところ、既存の動画のサムネを作り直す予定はないらしく、これから投稿される動画でだけ対処する予定がアナウンスされています)

ニコニコインフォメーション

4:3の動画に関しては左右に黒帯を入れて表示するよう改善予定です。

既存の動画のサムネを作り直せない理由が、切り出すのが何フレーム目かという情報を保存していないからだとしたら、かなり厄介な問題になります。


……とはいえ、ソースの動画と、最初に作ったサムネはあるのですから、ものっそい極端な話、動画の全フレーム総当たりで類似画像を判別すれば、必要なフレームは分かります(もちろん、実際にはもっとマシな方法があります)。

ニコニコ動画の動画数は約1000万ですが、一部の例外を除くと、GINZAのためにサムネの作り直しが必要なのは2011年12月以前に投稿された「16:9」の動画だけ。また、公式プレイヤーの「16:9モード」は2010年7月の実装なので、それ以前の「16:9」の動画は少ないです。

作り直しが必要な動画の数はたぶん100万以下(?)だと思われるので、デタラメな見積もりで恐縮ですが、もしも仮に、動画ひとつにつき10分でサムネが再作成できるとすれば、100台のパソコンで同時進行したとして、2か月くらいで終わる……というバカ算数になります。

まあ、それは色々とアレですけど、とにかく、「サムネを作り直すことができない」と言い切るのも語弊があるので、いちおう補足しておきます。

^ 註5:「改善」のイメージに関する補足

もしも、上下に黒帯が入ったサムネを持つ4:3の動画だった場合は、「改善」後のイメージは次のようになります。

上下に黒帯があるサムネの場合の例

例に挙げたのは、動画としては4:3なのですが、動画内に「16:9+上下黒帯」の部分があって、サムネもそこから作成されている……というケースです。

なので、サムネの見た目は16:9っぽいのですが、4:3の動画として処理されるので、「改善」後は上下左右に黒帯が付く形になります。


なお、ニコニコ動画の公式プレイヤーが16:9の再生に正式に対応したのは2010年の7月でした。

なので、それ以前の動画では、実質的に16:9でも、上下に黒帯の付いた4:3の動画として投稿されているものが、かなり多いです。

サーバエラーの例
現状

サーバエラーの例
「改善」後のイメージ

……という感じで、「改善」の後は、上下左右に黒帯が付く形になる動画もけっこう多くなると思われます。

蛇足

リンクについて

以前、『時空伝承ウインド』の記事で、関連する動画にリンクを貼ったところ、動画の内容と関係のないコメントを増やす結果になってしまいました。

こうなるべきはずだったサムネ

まあ、これは特殊なケースなのですが、こういった経験から、当サイトでは、必然性に乏しいリンクは避ける方向に流れがちで、前回の記事でも、かなり迷ったのですが、動画へのリンクは避ける形にさせていただきました。

(サムネは検索結果などの表示状態の例として挙げているもので、動画の内容は記事とほとんど関わりがないためリンクする必然性が薄く、最低限、興味を持った方が動画名で検索できる形にしておけば問題ない……というように考えました)

しかし、今回は、

サムネになったフレームの例

このサムネなど、記事内で20回近く使わせていただいており、やっぱりリンクすべきだという気がいたしました。

……正直にぶっちゃけさせていただきますと、今回、動画へのリンクを貼るべきか否かで1か月くらい悩んだのですが考えがまとまらず、結局、このページでは、自分でもよくわからない線引きでリンクを貼ったり貼らなかったりする形になりました。

リンクを貼っていない動画については、もしも興味を持たれましたら、ニコニコ動画で検索していただけますと幸いです。