【javascript】 ニコニコ動画のサムネイルのURLが変わったので、ニコニコapiからサムネイル情報を取得する方法

ニコニコ動画のいくつかの情報をスクレイピングしたいときに今までは動画IDがサムネイルのIDでしたのでサムネイルを簡単に取得できていましたけど、17日頃（？）ぐらいからサムネイルのURLにランダムみたいな数値が付くようになり、apiのページを見ないとサムネイルのURLがわからなくなりましたね

デベロッパーツールなどで見ることもできますけど、ぼくは投稿日時も取得したかったので、apiから一発で取得する方法を模索しました＾＾

ぼくは完全なる素人でjavascriptを試しながら調べながら丸一日以上かかりましたけど、そのあんこ部分をシェアしておこうかなと思います＾＾しかし、完全にメモ程度の内容です＾＾

意図したような動きができましたけど、これが正しいやり方かどうかなどは一切わかりません＾＾なお、ぼくが行うようなスクレイピングという意味は、単純なコピペの自動化のことですね＾＾

動画のタイトルとか日付とかをいちいちコピペするのがめんどくさいので、それをブックマークレットにまとめてワンクリックで取得しているという感じです＾＾難しすぎたことはしない感じですね＾＾

欲しい情報はこんな感じです＾＾

1. 動画ID
2. タイトル
3. サムネイルのURL
4. 投稿日時

たったのこれだけです＾＾

〇 ニコニコ動画のapiのページ

sm後ろの数字を任意の物に変えます。

参考：[ニコニコ動画のAPIをまとめてみた - コピペプログラマーの日記] (http://nico-archive.hatenablog.jp/entry/2017/09/24/172421)

〇 流れの把握

1 . ニコニコの動画情報が欲しいページにアクセスして表示します。

例）https://www.nicovideo.jp/watch/sm9

2 . ブックマークレット(※1)で動画IDを取得しつつ、その動画固有のapiのページを開きます。

例) https://ext.nicovideo.jp/api/getthumbinfo/sm9

3 . apiのページで別のブックマークレット(※2)を使用してほしい情報を取得します。

4 . また別のブックマークレット(※3)で今開いたapiのページを閉じます。

ちなみにすべてGoogle クロームです。Fire Foxだとうまくいかないかもしれません。また、なぜ、4段階の手順を踏むのかと言いますと、ぼくがjavascriptに精通していないからですね＾＾いくつかのの処理を1つにすることができていないためです＾＾

〇 流れ（具体的なコード）

◇ 1. ニコニコ動画の元ページからapiページへ遷移

※1 一つ目のブックマークレットの中身の説明 ↓

単純に動画IDを取得してapiのURLの後ろにくっつけてそのURLを開くという物になります。（以下はブックマークレットの中身そのままになります。コピペ可能です。）

javascript:window.open("https://ext.nicovideo.jp/api/getthumbinfo/" + location.pathname.replace('/watch/', ''), '_blank');

このブックマークレットは元ページで使用することがみそになります＾＾

元ページの一例）https://www.nicovideo.jp/watch/sm9

◇ 2. ニコニコのapiのページでスクレイピング

※2 任意のスクレイピングのためのコードを2個目のブックマークレットに書きます。

動作確認のために以下のコードをコピーし、いま開いているニコニコ動画のapiのページのデベロッパーモードを開きます。コンソールタブを選択してコンソールにペーストしてエンターを押しますと、ダイアログが表示されてニコニコのサムネイルが取得できます＾＾（以下はブックマークレットの中身です。1行にすればコピペ可能です。）

javascript:(function(){
var  a = document.evaluate('//thumbnail_url', document, null, XPathResult.STRING_TYPE, null).stringValue.replace('http:', '');
prompt('HTML link', a);
})();

コンソールにコピペするときには複数行でもOKみたいですけど、ブックマークレットにする時には1行にします。

◇ 3. 開いた情報ページを閉じる

※3 今開いたapiのページを閉じます。（以下はブックマークレットの中身そのままになります。コピペ可能です。）

javascript:window.close();

〇 補足情報：上記「 2.情報ページでスクレイピング」の補足

ニコニコのapiのページはXML形式の表示なので以下のようなワンセットで（任意のapiのページの）コンソールに打ち込むと情報を取得できますね＾＾

//javascript

var a = document.evaluate('//video_id', document, null, XPathResult.STRING_TYPE, null).stringValue;

console.log(a);

「//video_id」の部分は『 Xpath 』という物だそうです＾＾

参考：HTML情報を取得する Xpath を覚えよう – Cloud Cafe

参考：自動化やスクレイピングに使えるやつ XPath | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]

「//thumbnail_url」とか、「//first_retrieve」とか、「///video_id」とか、「//title」とか、xmlのタグを指定することでいろいろな情報が取得できて便利ですね＾＾このやり方があっているのかどうかは素人なのでわかりませんけど、とりあえずがんばってできたので良しとしましょう＾＾ぼくはこの4つの値だけで十分です＾＾

その他、書いたjavascriptのコードにエラーが無いかどうか調べつつやるとうまく行きやすい気がしましたね＾＾ぼくはこちらのサイト様を利用させていただいていますよ＾＾

あとは、お好みでjavascriptを使用してコードを制作して、ブックマークレットの形にすればいいと思います＾＾

追記：

あとから教えていただいたのですけど、Tampermonkey等でニコニコ動画の元ページにサムネイルを表示させてそれをブックマークレットでスクレイピングすれば、ページの遷移が無いのと、旧サムネイルと新サムネイルの両方に対応した一つのブックマークレットで済ませることができますのでかなり便利になる気がしました＾＾

しかしまだ具体的なやり方に至っていませんので、わかったら追記しようかなと思います＾＾
また、もし知ってるよという方がいらっしゃいましたら教えていただけるとうれしいです＾＾

その他

もし知っている方がいらっしゃいましたら、bilibiliのサムネイルの取得の仕方をお教えいただけると嬉しいです＾＾

現状のbilibiliのサムネイルのurlはbilibiliの元サイトでしか使用できないのか、デベロッパーツールでコピーして自分のホームページに張り付けたとしても、1回目の表示では普通に表示されますけど、リロードしますと画像が壊れたアイコンに代わり、表示されなくなります。

また、スーパーリロードをしても改善されませんので、使えのかなとあきらめて、自分のサーバーに一度UPしてそれを使用させていただいていますが、サムネイルの著作権の問題で自分のサーバーにUPするというやり方も使うことができないことがわかりお手上げという感じです＾＾

bilibiliのサムネイルの一例）

//i0.hdslb.com/bfs/archive/da6dd0924c797944fb7e0e664a8783467760ae7b.jpg@560w_350h_100Q_1c.webp