excelデータの特定行だけを画面に出力するには？（python,flaskを使っています）

前提・実現したいこと

htmlの入力フォームに打ち込んだ文字列と合致するセルを持つexcelの行を抽出するようなシステムを作りたいと思っています。

試したこと

このようなindex.htmlを作りまして、ここに入力した文字列をPOSTしてpythonに読み込むようなflask環境を整えました。
そして、pythonでは、openpyxlを用いてこの文字列がexcelデータベースのどこに合致するのかを検索する処理を行います。
その結果、pythonはexcelのどの箇所にデータが格納されているかを(行番号,列番号)の形で提示します。

例えば、以下のようなexcelデータがあるとします。

このとき入力フォームに「東京」と打ち込むと、pythonはexcelの(2,3)(4,3)に「東京」が格納されていることを教えてくれます。
同様に、「バナナ」と打ち込むと、(3,2)(5,2)に「バナナ」が格納されていることを教えてくれます。

該当のソースコード

python
1from flask import Flask, render_template
2from flask import request
3import openpyxl
4wb = openpyxl.load_workbook("test.xlsx")
5 
6app = Flask(__name__)
7 
8@app.route("/index") #入力フォームのあるhtmlページです
9def index():
10    renderpage = render_template("index.html")
11    return renderpage
12 
13@app.route("/result", methods=['POST'])
14def result():
15    result = []
16    query = request.form['query'] #入力フォームに打ち込まれた文字列をqueryに格納します。
17    result = search(query) #上のqueryを検索関数に渡して、その結果をresultに格納します。ここから、どういう処理をすべきか悩んでいます。
18
19
20def search(query): #メインの検索関数（ここでは省略します）
21    return list(result) #「東京」というqueryから[(2,3),(4,3)]を返します。
22
23
24if __name__ == "__main__":
25    app.run(debug=True)
26
27

html
1<html>
2  <head>
3    <title>test</title>
4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5  </head>
6  <body>
7    <form action="/result" method="POST">
8      <p>検索文字列：<input type="text" name="query" size="30"></p>
9      <p><input type="submit" value="検索"></p>
10    </form>
11  </body>
12</html>

今後やりたいこと

pythonが探しだしたこのデータに基づいて、該当する行だけを抽出して表示できるようなシステムを作りたいです。
例えば、「東京」であれば、次のような出力画面が理想です。

「バナナ」であれば、次のような出力画面が理想です。

この出力画面はhtmlで出したいと思っています。
可能であれば、ヒットしたセル部分の背景色は画像のように変えて出力したいです。

補足情報

pythonを用いてのプログラム記述やexcel操作などは数ヶ月行ってきたのですが、htmlやflaskを用いたシステム作成に関しては勉強し始めたばかりです。
そのため、こうした理想を実現するためにどのような手段が考えられるかを教えて頂きたいです。

can110

2021/11/21 08:08

現状できているまでのコード、およびどこが分からないかを提示すると回答得られやすくなるかと思います。

sk_zappa

2021/11/21 08:28

ありがとうございます。質問に追記して編集しました。

行動規範の内容に同意します

回答1件

ベストアンサー

基本的にはjinja2のテンプレートエンジンを使うにしても抽出結果のテーブル形式のデータから、自分で<table>ソースを作りこむ必要があります。
ただしpandasを使うとテーブル化したHTMLソースを得る手段があるので少しは楽できるかもしれません。
詳細はTable Visualizationを参照ください。
以下、見栄えは良くありませんが単純なコード例です。

Python
1from flask import Flask, render_template
2from flask import request
3import openpyxl
4import pandas as pd
5import numpy as np
6
7
8#wb = openpyxl.load_workbook("test.xlsx")
9# テストデータ
10df = pd.DataFrame({'品名':['りんご', 'バナナ', 'みかん', 'バナナ'], '場所':['東京','埼玉','東京','埼玉']})
11
12app = Flask(__name__)
13
14@app.route("/index") #入力フォームのあるhtmlページです
15def index():
16    renderpage = render_template("index.html")
17    return renderpage
18
19@app.route("/result", methods=['POST'])
20def result():
21    query = request.form['query']
22    res_html, res_cells = search(query)
23    print(res_cells)
24    return res_html
25
26def search(query):
27
28    # セル毎の一致結果を得る
29    def find(x):
30        return x == query
31    ret = df.applymap(find).values
32    rows, cols = np.where(ret)
33    ret_cells = [(r,c) for r,c in zip(rows,cols)]
34    df_dat = df.copy()
35
36    # スタイル指定のため、一致セル＝'true' or 'false'という文字列テーブルを得る
37    df_col = pd.DataFrame(ret, index=df_dat.index, columns=df_dat.columns)
38    df_col = df_col.applymap(lambda x: 'true' if x else 'false')
39
40    df_dat = df_dat.loc[rows,:]
41    df_col = df_col.loc[rows,:]
42
43    # テーブルのスタイルを指定する
44    s = df_dat.style
45    s = s.set_table_styles([
46        {'selector': '', 'props' : [('border','1px solid')]},
47        {'selector': '.true' , 'props': [('border','1px solid'),('background-color','yellow')]},
48        {'selector': '.false' ,'props': [('border','1px solid')]},
49    ], overwrite=False)
50    s = s.set_td_classes(df_col)
51    ret_html = s.render()
52
53    # テーブルのHTMLソースと（必要であれば）セル位置配列を返す
54    return ret_html, ret_cells
55
56if __name__ == "__main__":
57    app.run(debug=True)