chromeのディベロッパーツールを使用してニコニコ静画について調べた手順

#はじめに
pythonを使ってニコニコ静画から画像をダウンロードするプログラムを作っていたのですが、その際にwebサイトの分析をしました。
その際、chromeのディベロッパーツールを使用したのですが、分析手順について順にやったことを書いていきます。


#1.ログイン編
ニコニコ静画はログインしないと画像をすべて見ることができません。
seleniumを使ってログインすることも考えましたが、今回は練習がてらpostを使用してログインすることにしました。

##postについての解析

chromeにおいて右クリックをして「検証」というボタンを押し、「Network」というタブを押すとこのようなページになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993303/8cb96db7-c2c1-8743-182b-d57e3c2970e5.png)

この画面の「network」タブではホストと通信した内容が分かるのですが、デフォルトではページが遷移すると前のページの情報はなくなってしまいます。
そこでページが遷移してもログが残るように「network」タブで「preserve log」にチェックを入れ、ログインをしてみます。



![tesrt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993303/e878d356-62a0-090a-475a-ed72a10b65c7.png)

すると上の写真のように、何やらいろいろ出てきます。
中身を一個ずつ見ていくと、下の写真のようにメールアドレスやパスワードをpostしたものが見つかったので、
「Headers」内の「general」及び「form data」を分析する。

![asd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993303/5dc8cb0f-49cd-b134-a712-e164c9cd72c4.png)


どうやらニコニコ静画のログインでは

`https://account.nicovideo.jp/login/redirector?show_button_twitter=1&site=seiga&show_button_facebook=1&sec=header_pc&next_url=%2Fmanga%2F%3Ftrack%3Dhome`

というurlに
`mail_tel: mail adress
password: password
auth_id: auth_id
`

をpostしているらしい。


参考

https://www.tsukimi.net/chrome-developer-tools_post.html

https://www.atmarkit.co.jp/ait/articles/1708/21/news028.html



##auth_idが欲しい

postする中の、`auth_id`が何なのかわからない。
おそらくログイン時に発行されるものなのだろうとあたりをつけて調べたところ、どうやらログインページに行った際に発行される数字らしい。
早速chromeの検証のうち、「elements」タブから「ctrl+F」で`auth_id`と調べた。
すると

![hgfv.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993303/888d9fd3-6ec5-db75-712a-93e2d3c7afa7.png)

中身は、

```.html
<input type="hidden" name="auth_id" value="163-----">
```
となっていることが分かった。
なのでpythonのrequestとbeautifulsoupを使用して取得しようとしたが、どうにもうまくいかない。

調べた結果、どうやらjapascriptでアクセスしてから描写されているらしい。

https://gammasoft.jp/blog/how-to-download-web-page-created-javascript/


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993303/bd93aefb-a7dd-7871-7d9e-bc4ee99a42e5.png)

よって本当は使いたくなかったが、seleniumを使用して取得することにした。

参考

https://qiita.com/Azunyan1111/items/b161b998790b1db2ff7a




```.py
from bs4 import BeautifulSoup
from selenium import webdriver
from selenium.webdriver.chrome.options import Options

# ブラウザのオプションを格納する変数をもらってきます。
options = Options()

# Headlessモードを有効にする（コメントアウトするとブラウザが実際に立ち上がります）
options.set_headless(True)

# ブラウザを起動する
driver = webdriver.Chrome("chromedriver.exe", chrome_options=options)

# ブラウザでアクセスする
driver.get("https://account.nicovideo.jp/login?site=seiga&next_url=%2F&sec=header_pc&cmnhd_ref=device%3Dpc%26site%3Dseiga%26pos%3Duserpanel")

html = driver.page_source.encode('utf-8')
soup =  BeautifulSoup(html,'lxml')
token = soup.find('input', {'name':'auth_id'})['value']


```

これを実行すると無事`token`に`auth_id`の数字があることを確認できた。




#2.url解析編



どうやらニコニコ静画には
漫画の番号
エピソードの番号
画像の番号
が存在するようだ。



どうも
`https://seiga.nicovideo.jp/comic/漫画の番号`

`https://seiga.nicovideo.jp/watch/mgエピソード番号`

`https://deliver.cdn.nicomanga.jp/thumb/画像の番号`

がurlとなっており、画像の番号のみ連番になっているようだ。


これはいろいろな作品のページを開き、urlを見比べることや以下の記事を読んで発見した。



http://xn--tcka4eb5178fi1yb.seesaa.net/

https://qiita.com/yasunari_matsuo/items/ebb9fa7e18bf95bae52c

https://gist.github.com/7cc/c608fe778defd0357d9d1b75d1956816


#まとめ

以上の手順によって、
ログイン方法、
ログイン後の作品ページurl
が分かったので、作品をダウンロードするスクリプトは完成した。
が、あまり使い勝手はよくなく、この記事はwebページの分析に焦点を当てたいので公開しないこととする。
以上。