毎日定時にWebサイトから数値を取得して自HPに更新するやつ #1

- なんなん -

てとらぽです、タイトルの通りのことを書きます(以降敬省)。

具体的には、osu!の私のプロフィールページにて毎日更新されるGlobal Ranking の数値を毎日任意のN時にWebスクレイピングして自身のホームページに追記更新していこうなというやつ。

思いついてから実装までにかかった期間は大体二か月くらい。11月半ばくらいに一年次の授業がもう終わるという事実にゼツボウし、なにか"モノ"を作りたいなと思い制作を始めたという感じだ。

ここまでの文脈から容易に推測できるとおもうがにテクニカルな話題ときゅうな私のお話がめちゃめちゃになっているためTech系の記事が読みたいやつはブラウザバックしてQiitaでもみててくれ。

 

- 目的 -

というよりは実装するシステムが満たしていたい最低の要件を明確にしておく。当然学習的な側面が大きいというのはあるがせっかく作るならというやつ。

はいこれ: 日付, osu! Global Ranking を記録し続けるWebページ

osu!(っていう素晴らしい音ゲーがあるんだがみんなやってくれ)ではプレイヤーのプロフィールページに89日前から現在までのRanking推移が表示されてる。それで三か月以上前のランキングを見るということができないわけね。軽率に三か月とか放置すると自分の最高順位とかわからなくなるしサイコー!!

先の問題を解決するためには(サーバPCに電源が入っている限りは)自動(最重要。モチベがない時こそ役に立つため)で定時のGlobal Ranking を記録してくれるものが必要という運びだ。

 

- 環境 -

基本的にLinux(のUbuntu)を使っているものとして書いていく。が、バカなので突然GitHub Desktop が使いたくなってWin10したりしていたため多少のガバは許されたい。

Ubuntu Desktop 18.04 LTS

Windows 10 64bit

Raspbian 4.14(サーバ用)

 

- 大まかな流れ -

やっていくぞ、目次

1. WebスクレイピングCSV記述

2. CSV読んでHTML上に動的Table表示

3. サーバPCの環境整備とGitとか

4. 今後の課題

 

- 1. WebスクレイピングCSV記述 -

使用しているものは以下

言語: Python 3.6.0

ライブラリ: requests-html, csv, datetime, time, subprocess

言語に関して、そもそもPython2系がサポート終了しそうであるということ、requests-htmlが3.6以上でないと動作しない等の理由より、必ず3.6.xを使うべき。

私はGoogleの検索結果上位に出てきた記事をまねてPython2系でBeautifulSoupを動かし、JavaScriptに殺されたりした(BeautifulSoup4が動的生成のHTMLに対応していないため)。

ライブラリに関して、requests-htmlはURL扱ったりHTMLを解析、csvCSVファイルの操作、datetime/timeは名前の通り、subprocessはPythonソースコード内で外部コマンドを実行するやつ。

requests-htmlは標準ライブラリではないためpipしてくれ。

基本的にプログラムの挙動はソースコード内にてコメントアウトしているため省略。

getRank_PD.py

後から追加した故にコメント及び前後とのつながりが薄い行に関してはここで軽く触れておく。

8行目: 前日比を表示させるための(処理している日から見て)前日のRanking。while文の外で宣言しているためサーバが意図せず落ちた際、そこに手動入力することにより正しく前日比が出力される。

63~66行目: 前日比を出すためにint型にキャスト。またCSVファイルの特性上、スクレイピングした文字列にカンマが含まれているとえげつないインデントが施されるため取り除く処理をしている。

81行目以降: #2をみてくれ。

while文からスクレイピングに関わっている箇所を抜き出しターミナルで実行するとこんな感じ。

f:id:tetl4pot:20190107144318p:plain

やーい!お前のランク7万代!

 

- 2. CSV読んでHTML上に動的Table表示 -

使用しているものは以下

言語: HTML

プラグインjquerycsvtotable

jquerycsvtotableは名前の通りCSVファイルに記述されたデータをHTML上にTable要素として動的表示してくれるJavaScriptプラグイン。ほかにもいくらか手段はあったが、CSVファイルを書き換えるだけで結果的にHTML編集ができるという点においてかなりハマっていたと思う。

index.html

body要素は13行目以外飾りです、見なくてよいよ。

基本的にプラグインの書き方よんでそのまま写経。たしかダウンロードするとサンプルも入ってた気がするのでそちらを見てよしなに。

今回はindex.htmlとCSVファイルが同じディレクトリに位置しているものとして書いているが、そうでない場合は20行目にはパスを書いてね。

あと私はvscode拡張機能Live HTML Previewer(HTMLドキュメントのリアルタイムプレビュー)を使って書いていたのだが、JSに対応していないらしく永遠にドジってたよ、気をつけようね。

ホスティングされたサイトで見るとこんな感じ: http://tetlapot.github.io

 

- 参考 -

覚えているハンイでお世話になったサイト載せておく。

qiita.com

vaaaaaanquish.hatenablog.com

devlights.hatenablog.com

web-yaro.net

- つ文字数 -

起床後、バイト前のガン萎えタイム、深夜テンション帯と間を開けながら書いているため文体からかなりサイコパスかんが出ているが"味"ということにしておいてほしい。直して回るのはかなりの苦痛を伴う恐れがあるため誠遺。

ここまで読んでくれている人間がインターネットに存在するのかあやしくはあるが聖人の皆様、この場を借りて御礼申し上げます、すきです。

文字数がヤバなってきたので当記事はここで一度区切りたいなあと思う、思っている。続きは(ここにリンクが出るはず)

 

 

jquerycsvtotable