こんにちは。のっくんです。
csvファイルをHTMLに変換する方法について紹介します。
目次
使用するcsvファイル
使用するcsvファイルは、前回の記事
https://ymgsapo.com/scraping_soccer_ranking
で取得したサッカーのランキング表にしましょう。
中身は以下の通り。
,順位,クラブ名,勝点,試合数,勝,分,負,得点,失点,得失点,直近5試合 ,1,大分トリニータ,66,36,20,6,10,65,41,24, ,2,松本山雅ＦＣ,66,36,18,12,6,50,33,17, ,3,ＦＣ町田ゼルビア,62,34,17,11,6,52,36,16, ,4,アビスパ福岡,61,36,17,10,9,51,36,15, ,5,大宮アルディージャ,60,36,18,6,12,58,43,15, ,6,東京ヴェルディ,60,36,16,12,8,49,36,13, ：
このデータをHTMLに出力して見やすくしたり、順位によって背景色が変わるようにしたいと思います。
その前に、、
よく見ると、１列目と最後の列のデータがありませんね。
ネットからスクレイピングしてくると、画像などが入っていた箇所が空欄になってしまいます。
HTMLに出力する前にこのような列は削除しましょう。
pandasを使う
pandasを使って空欄が入った列を削除してみます。
to_html_pandas.py
import pandas as pd
df = pd.read_csv('ranking.csv')
df = df.dropna(axis=1, how='any')
read_csvでランキング表を読み取っています。
データが読み取れなかった箇所は欠損値(NaN)として扱われます。
このNaNが１つでも入った列を削除するには、dropnaを使っています。
axis=1というのは、列を削除するという意味です。
how=”any”は、１つでもNaNがあったら削除するという意味です。
順位 クラブ名 勝点 試合数 勝 分 負 得点 失点 得失点 0 1 大分トリニータ 66 36 20 6 10 65 41 24 1 2 松本山雅ＦＣ 66 36 18 12 6 50 33 17 2 3 ＦＣ町田ゼルビア 62 34 17 11 6 52 36 16 3 4 アビスパ福岡 61 36 17 10 9 51 36 15 4 5 大宮アルディージャ 60 36 18 6 12 58 43 15 5 6 東京ヴェルディ 60 36 16 12 8 49 36 13 ：
いい感じに整理されました。
HTMLに変換する
pandasの便利なところは、HTMLに変換する関数があることです。
先ほどのコードを拡張してみます。
to_html_pandas.py
import pandas as pd
df = pd.read_csv('ranking.csv')
df = df.dropna(axis=1, how='any')
# <th>内の文字列を真ん中に寄せる
pd.set_option('colheader_justify', 'center')
html_string = '''
<html>
<head><meta charset="UTF-8">
<title>J2 Ranking</title>
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<body>
{table}
</body>
</html>.
'''
# OUTPUT AN HTML FILE
with open('ranking.html', 'w') as f:
f.write(html_string.format(table=df.to_html(classes='mystyle', index=False)))
html_stringには、HTMLを表示するときに必要な基本的な<head>や<body>を入れています。
to_html関数の中では、スタイルシートのクラス名(mystyle)を指定したり、インデックスは読み込まないようにしています。
コードを実行するとHTMLファイルが出力されるので、ブラウザ開くと、、、
見やすくなりました。
使用したスタイルシートも載せておきます。
mystyle.css
.mystyle {
font-size: 11pt;
font-family: Arial;
border-collapse: collapse;
border: 1px solid silver;
}
.mystyle td, th {
padding: 5px;
}
.mystyle tr:nth-child(1) {
background: lightgreen;
}
.mystyle tr:nth-child(2) {
background: lightgreen;
}
.mystyle tr:nth-child(3) {
background: lightblue;
}
.mystyle tr:nth-child(4) {
background: lightblue;
}
.mystyle tr:nth-child(5) {
background: lightblue;
}
.mystyle tr:nth-child(6) {
background: lightblue;
}
.mystyle tr:nth-child(21) {
background: lightcoral;
}
.mystyle tr:nth-child(22) {
background: lightcoral;
}
.mystyle tr:hover {
background: silver;
cursor: pointer;
}
nth-child(行番号)で行の背景色を変更しています。
上位2チームは緑、下位2チームは赤にしています。
（Jリーグではそれぞれ自動昇格圏、自動降格圏と呼ばれます。）
tr:hoverを指定し、表にマウスポインタを置くと背景がシルバーになるようにしています。
実際のページはこちら：
以上。
