今回の記事はPythpn(Flask)でcsvを読み込みHTMLに表示する流れをご紹介していきます。まずは、Flaskプロジェクトを作る必要がありますがそちらに関しては過去記事リンクから行ってみてください。（参照リンク）
今回のフォルダ構成は下記です。
|-csv
| |-AirPassenger.csv
|-templates
| |-index.html
|-app.pyでは早速CSV読み込みの流れをご紹介していきます。
Python(Flask)でcsv読み込みを行う方法
Flaskの基本的な流れとしては「ローカルサーバを立てる」→「ローカルサーバのURLかその先のフォルダにアクセス」→「Flask(Pythonファイル)でページの表示」という流れになります。csvを読み込む場所は「Flask(Pythonファイル)でページの表示」の部分です。
ではそのcsv読み込み工程のファイルをみていきましょう。
まずは読み込むcsvです。時系列分析の際に使用したcsvです。時系列関連の記事はKerasのRNN・LSTMあたりをご参照ださい。
['1949-01', '112']
['1949-02', '118']
['1949-03', '132']
['1949-04', '129']
['1949-05', '121']
['1949-06', '135']
['1949-07', '148']
['1949-08', '148']
['1949-09', '136']
['1949-10', '119']
['1949-11', '104']
['1949-12', '118']
['1950-01', '115']
['1950-02', '126']
['1950-03', '141']
['1950-04', '135']
['1950-05', '125']
['1950-06', '149']
['1950-07', '170']
['1950-08', '170']
['1950-09', '158']
['1950-10', '133']
['1950-11', '114']
['1950-12', '140']
['1951-01', '145']
['1951-02', '150']
['1951-03', '178']
['1951-04', '163']
['1951-05', '172']
['1951-06', '178']
['1951-07', '199']
['1951-08', '199']
['1951-09', '184']
['1951-10', '162']
['1951-11', '146']
['1951-12', '166']
['1952-01', '171']
['1952-02', '180']
['1952-03', '193']
['1952-04', '181']
['1952-05', '183']
['1952-06', '218']
['1952-07', '230']
['1952-08', '242']
['1952-09', '209']
['1952-10', '191']
['1952-11', '172']
['1952-12', '194']
['1953-01', '196']
['1953-02', '196']
['1953-03', '236']
['1953-04', '235']
['1953-05', '229']
['1953-06', '243']
['1953-07', '264']
['1953-08', '272']
['1953-09', '237']
['1953-10', '211']
['1953-11', '180']
['1953-12', '201']
['1954-01', '204']
['1954-02', '188']
['1954-03', '235']
['1954-04', '227']
['1954-05', '234']
['1954-06', '264']
['1954-07', '302']
['1954-08', '293']
['1954-09', '259']
['1954-10', '229']
['1954-11', '203']
['1954-12', '229']
['1955-01', '242']
['1955-02', '233']
['1955-03', '267']
['1955-04', '269']
['1955-05', '270']
['1955-06', '315']
['1955-07', '364']
['1955-08', '347']
['1955-09', '312']
['1955-10', '274']
['1955-11', '237']
['1955-12', '278']
['1956-01', '284']
['1956-02', '277']
['1956-03', '317']
['1956-04', '313']
['1956-05', '318']
['1956-06', '374']
['1956-07', '413']
['1956-08', '405']
['1956-09', '355']
['1956-10', '306']
['1956-11', '271']
['1956-12', '306']
['1957-01', '315']
['1957-02', '301']
['1957-03', '356']
['1957-04', '348']
['1957-05', '355']
['1957-06', '422']
['1957-07', '465']
['1957-08', '467']
['1957-09', '404']
['1957-10', '347']
['1957-11', '305']
['1957-12', '336']
['1958-01', '340']
['1958-02', '318']
['1958-03', '362']
['1958-04', '348']
['1958-05', '363']
['1958-06', '435']
['1958-07', '491']
['1958-08', '505']
['1958-09', '404']
['1958-10', '359']
['1958-11', '310']
['1958-12', '337']
['1959-01', '360']
['1959-02', '342']
['1959-03', '406']
['1959-04', '396']
['1959-05', '420']
['1959-06', '472']
['1959-07', '548']
['1959-08', '559']
['1959-09', '463']
['1959-10', '407']
['1959-11', '362']
['1959-12', '405']
['1960-01', '417']
['1960-02', '391']
['1960-03', '419']
['1960-04', '461']
['1960-05', '472']
['1960-06', '535']
['1960-07', '622']
['1960-08', '606']
['1960-09', '508']
['1960-10', '461']
['1960-11', '390']
['1960-12', '432']これを読み込みます。
from flask import Flask, render_template
import csv
app = Flask(__name__)
data = []
@app.route("/index")
def index():
csv_content = read_csv("AirPassengers")
for row in csv_content:
data.append(row[0])
print(data)
return render_template("index.html",input_from_python= data) # templatesフォルダ内のindex.htmlを表示する
def read_csv(filename):
csv_file = open("./csv/" + str(filename) + ".csv", "r", encoding="ms932", errors="", newline="" )
f = csv.reader(csv_file, delimiter=",", doublequote=True, lineterminator="\r\n", quotechar='"', skipinitialspace=True)
#f = csv.DictReader(csv_file, delimiter=",", doublequote=True, lineterminator="\r\n", quotechar='"', skipinitialspace=True)
return f
if __name__ == "__main__":
app.run()「read_csv」が自作の関数です。ファイル名を引数にとってcsvフォルダ内のファイル名から読み込むファイルを指定して「csv.reader」で値を読み込んでいます。「csv.DictReader」では辞書型配列を読み込めます。この中身としてはcsvのオブジェクトになっているのでそれぞれを行に分解するためにfor文でrowに格納し、その値をさらに変数引き渡しようのキーに「append」しております。
これでFlaskのローカルサーバに読み込めているかをTerminalでかくにんできます。
では次はそれをHTMLに表示させていきます。
Python(Flask)で読み込んだcsvをHTMLに表示させる方法
<!DOCTYPE html>
<html lang="ja">
<body>
<button onclick=test_click()>ボタン</button>
<script>
function test_click(){
let list_data = {{ input_from_python | tojson }};
alert(list_data);
};
</script>
</body>
</html>簡単な実装です。ボタンクリック でAlertを表示させるという機能のみです。解説する箇所としては「let list_data = {{ input_from_python | tojson }};」部分で変数をJavaScriptが使用できるJson形式に変換していることくらいでしょうか。
今回の記事は以上です。他のFlask記事に関しても気になるものご参照ください。
コメント
csv読み込みのところを下記のようにapp.run()の前に書いてはいけないのでしょうか？
if __name__ == “__main__”:
csv_content = read_csv(“AirPassengers”)
app.run()
最初に一度読み込んで変数に格納しておけば、「/index」ページに飛んでくるたびに毎回読み込む必要はないと思うのですが・・・。
ただ、app.run()の直前にこのような記述をしている参考書は見かけないから、やはり間違っているということなのでしょうか。
確かに上記でもおそらく問題なく動くのではと思います。試してはいませんが。。
通例として下記の記述が多いだけで絶対ではないと思うので動くのであれば問題なさそうですね。
if __name__ == “__main__”:
app.run()
このコードそのままではないのですが、app.run()の前にファイルを読み込む記述をすると、Flaskのまま実行するときは問題ないのですが、本番環境でgunicornを使うとエラーが出ました。