こんにちは。のっくんです。
csvファイルをHTMLに変換する方法について紹介します。
[toc]使用するcsvファイル
使用するcsvファイルは、前回の記事
https://ymgsapo.com/scraping_soccer_ranking
で取得したサッカーのランキング表にしましょう。
中身は以下の通り。
,順位,クラブ名,勝点,試合数,勝,分,負,得点,失点,得失点,直近5試合 ,1,大分トリニータ,66,36,20,6,10,65,41,24, ,2,松本山雅FC,66,36,18,12,6,50,33,17, ,3,FC町田ゼルビア,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に出力して見やすくしたり、順位によって背景色が変わるようにしたいと思います。
その前に、、
よく見ると、1列目と最後の列のデータがありませんね。
ネットからスクレイピングしてくると、画像などが入っていた箇所が空欄になってしまいます。
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が1つでも入った列を削除するには、dropnaを使っています。
axis=1というのは、列を削除するという意味です。
how=”any”は、1つでもNaNがあったら削除するという意味です。
順位 クラブ名 勝点 試合数 勝 分 負 得点 失点 得失点 0 1 大分トリニータ 66 36 20 6 10 65 41 24 1 2 松本山雅FC 66 36 18 12 6 50 33 17 2 3 FC町田ゼルビア 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
を指定し、表にマウスポインタを置くと背景がシルバーになるようにしています。
実際のページはこちら:
以上。