Ubuntuコマンドをマスターして名取さなボタンを手に入れよう！

何をするのか

クローラーを作る。クローラーとはWEB上に存在する任意のファイルを収集するプログラムのことを言う。
今回の記事を通してクローラーというものの便利さ、容易さを知っていただければ幸いだ。

名取さなボタンとは

https://www.natorisana.love/
にアクセスするとわかる。バーチャルYoutuber 名取さな の生放送等の音声を収集し、サイト上のボタンを押すことによって聴くことができる。名取さなファンによって作られたサイト。
私も名取さなが好きなので、音声を手元においてみた。

断り書き

ここでは、さなボタンのサイトへ過大な負荷をかけることを考慮し、クローラプログラム全文は載せません。
しかし、この記事を読んでLinuxコマンドをある程度理解した頃には、自力でさなちゃんの音声を収集することができるでしょう。

事前準備

Linux系環境を使う。Ubuntuでの動作を確認しているため、Ubuntuを使うのが望ましい。
OSがWindows10の人はWSLという機能を用いてWindows上でUbuntuを動作させることができるので推奨する。
Windows10へのWSLやUbuntu導入の参考サイト
また、今回は以下のコマンドを用いる。

• cat
• grep
• sed
• wget

以上を見てなんのことだかわからない人はLinux初学者だと思うので、まずLinuxの操作について他サイトで学ぶと良い。以下のサイトなどが良いかもしれない。
https://eng-entrance.com/category/linux/linux-basic
特に上記ページの Linuxの基本操作 と Linux操作のための基本コマンド は重要である。
なお、上の４つのコマンドについてはこのノートでも紹介する。

1.サイトを解析する

https://www.natorisana.love/ へアクセスし、まずどのようにすればプログラムを組めるか考える。
開発者機能を使い、音声ファイルのURLを調べる。ChromeであるとF12キーを押すことで開発者機能を使用できる。

開発者ウィンドウの上方にあるNetworkタブを選択する。ここでは、サイト内で利用するファイルのダウンロード状況を監視(モニター)できる。
左上の○が赤丸でなく灰色のときはモニターが停止しているのでクリックもしくは Ctrl+E で起動する。起動したときはページをリロードしたほうが良い。
モニターしている状態でさなボタンを押してみるとリストにファイルが追加されるのがわかるだろう。
Typeがmediaとなっているファイルをダブルクリックすると別タブでそのファイルにアクセスすることができる。そのファイルのURL例を以下に示す。
https://www.natorisana.love/sounds/ネコのさばきは突然にくる/僕もそう思いますにゃ.mp3
以上からファイルがサーバーのどのような位置に置かれているかなんとなく見当がつくだろう。

つぎにソースコードを調べる。
NetworkタブからElementsタブへ切り替える。
そして、開発者機能の左上のマークもしくは Ctrl+Shift+C で要素選択モードへ切り替える。要素選択モードをオンにした状態でマウスポインタをボタンの上へマウスオーバーすると色が変わる。さらにダブルクリックすると開発者ウィンドウが押したボタンに該当するソースコードをハイライト表示する。

<button type="button" class="sounds" data-file="3D名取のﾌﾆｬﾗｶｻｷﾞｮｰﾊｲｼﾝ/やっていくわよ">やっていくわよ</button>  

ハイライトされたソースコードの例

その内容を詳しく見るとdata-file="~~ 、 と~~ の部分に日本語が続いているのがわかる。以上の事から~~の部分がファイルURLのsoundsディレクトリ以下の部分を指していると推測できる。
試しに上の日本語の部分を適当なButtonのdata-fileの内容に置き換えてみると再生できることが確かめられるだろう。
あとは、もう簡単である。このサイトに存在するすべてのボタンのdata-fileの内容を収集し、
対応するURLを生成して、そこへアクセスするプログラムを組むだけである。

2.wget を使ってソースコードを取得する。

wgetコマンドを使うことでインターネット上のファイルを取得することができる。

wget https://www.natorisana.love/

上のコマンドで先程見たソースコードをindex.htmlという名前で保存された。

3.クローラを作ってUnixコマンドを学ぶ

Ubuntu でファイルを取得するコマンドはcatである。

cat index.html

とすると、ターミナル(コマンドを打つ画面のこと)へソースコードが大量に表示されるのがわかるだろう。
このデータをうまく処理するプログラムへ投げることで必要な情報を取得する。
ここで登場するのがパイプという仕組みだ。実は、先程画面に大量に表示された文字列は標準出力と呼ばれます。正確には、catという’プログラムの実行結果の出力’を標準出力と呼ぶ。
そして、プログラムの呼び出し元であるターミナルは標準出力の出力先を選ぶことが出来る。
何もしなければ画面にただ表示される出力となる。パイプを使うと異なるプログラムの入力として与える事ができるのだ。次のプログラムを実行してみる。

cat index.html | grep data-file

grepコマンドは引数として与えられた文字列を含む行だけを出力するプログラムである。
catのみと比較すると出力の最後が異なるのが確認できるだろう。
この時点でかなりデータはきれいになってきている。とりあえず、data-fileの内容だけを取り出したい。

4.正規表現の偉大さ

ここで紹介するのはプログラム上で文字列を自由自在に操る手法である。
次に上のコマンドで実行された結果のある行を表示しておく。

<button type="button" class="sounds" data-file="俺また雑談しちゃいましたか？/初配信で・・・">初配信で・・・</button>

~data-file="をまず消したい。sedコマンドを用いる。これは与えられた条件に一致する文字列を任意の文字列に置き換えることができるプログラムだ。
すべての行について<button type="button" class="sounds" data-file="を検索し無と置き換えればいい。

では、どのように条件を指定すればいいのだろうか。

正直、この話はとても長いため省略したい。
あえていうほどでもないsed入門
正規表現チートシート
とりあえずここをよむといい。

5.行の先頭からあるパターンまでを

上のgrepにパイプさせるsedコマンドを考える。以下のような文字列が複数行あるが、各行の。

<button type="button" class="sounds" data-file="俺また雑談しちゃいましたか？/初配信で・・・">初配信で・・・</button>

の 頭からdata-file=" までを消したい。このときは^を用いると続く一文字が先頭にある文字のとき対象となる。(/^a/b/とやればある文字が行頭かつaのとき、それをbに置き換える)
これに任意文字.及び、任意回数の繰り返しパターン*を用いると先頭から文末までを参照できる。さらに^.*data-file="とすれば、任意の行頭から任意回数、任意文字が繰り返され最後にdata-file="となる文字列を探す。つまり、上のHTMLは次のようになる。ここで気をつけるべきは"の取り扱いである。"は特殊文字であるためエスケープシーケンスが必要であり、 \" となる。以上から、次のコマンドを実行すると、

cat index.html | grep data-file | sed s/^.*data-file=\"//

俺また雑談しちゃいましたか？/初配信で・・・">初配信で・・・</button>

となる。では、ほしいdata-fileの属性値以降である">初配信で～～～も消してみよう。
これも先程と同様に任意文字が任意回数続くというコマンドを利用する。
どのようなコマンドになるかはあえて省略し、結果だけ示す。

俺また雑談しちゃいましたか？/初配信で・・・

この結果を一旦ファイルに保存しておこう。

6.リダイレクション

ファイルに書き込むにはリダイレクションを作用させる。これによりコマンド実行結果をファイルに書き込みや追記ができる。

コマンド > file_name

これにより上のような結果がfile_nameというファイルに書き込まれる。 ファイル内容へはcatコマンドより参照できることを思い出そう。

7.各行の行頭と行末に必要なURLを付加する。

いままで抽出してきた音声のURLは以下のようになればよい、これは1.のサイト解析より把握できた。
https://www.natorisana.love/sounds/ネコのさばきは突然にくる/僕もそう思いますにゃ.mp3

これより ネコのさばきは突然にくる/僕もそう思いますにゃ が6.までに得られたとして、
https://www.natorisana.love/sounds/と.mp3をそれぞれ行頭、行末に付加しなければならない。
これもsedコマンドを用いる。ただし、sed "/検索パターン/置き換え文字/"とするときの/ととURL内に存在する/がかぶってしまう。エスケープシーケンスでも良いが、実はsedコマンドのスラッシュはスラッシュに限る必要はない。シャープなどでも代用できる。具体的には次のように書くこともできるということだ。

sed "s#^#https://www.natorisana.love/sounds/#"

これで行頭^に必要な文字列を付加することができた。同様に.mp3を付加しよう。行頭パターン^のように行末パターンが存在するのでそれを使用するとできるだろう。

それができたら、最後にもう一度適当なファイルに結果を書き込んでおいてほしい。

wgetで一括ダウンロード

最後にwgetコマンドを再び用いてダウンロードを行う。 wgetコマンドには多くのオプションが存在する。-Pで保存先ディレクトリの指定。-i(--input-file)でURLリストのあるファイルから指定してダウンロード。-rで再帰ダウンロード。 これらをうまく活用するとダウンロードできるだろう。

これ以上は言えない

今まで教えたコマンドをマスターすればもう名取さなボタンは手に入れられるだろう。健闘を祈る。

以上。