はじめに
画像などいくつデータがあるかわからないものを表にしたい場合,
一行にいくつデータを表示したいかを決め,
あとはよろしく表を作ってほしい
例えば下のような表
ご参考までに,チャートの描き方はこちら
Jinja2 を使うと楽だったので備忘録として残しておく
python
本サンプルでは,画像ではなく0~25までの数字を表示しています
数字の画像が26枚あるとでも思ってください
26個の数字を5列の表にして,タイトルがtestのtest.htmlを作成します
import os
import jinja2 as jj
# html ファイルへの出力
def to_file(dataDic, filename):
# テンプレートファイル読み込み
je = jj.Environment(loader = jj.FileSystemLoader('.', encoding = 'utf8'))
tpl = je.get_template('jinjatest.tpl')
# 出力
with open(filename, 'w', encoding = 'utf-8') as fp:
st = tpl.render(dataDic)
fp.write(st)
if __name__ == '__main__':
# 0-25の数字
contentList = [{'no': v} for v in range(26)]
# タイトルは"title",列数は5
dataDic = {'contentList': contentList, 'title': 'test', 'num_of_columns': 5}
# html 出力 ファイル名は test.html
to_file(dataDic, 'test.html')
Jinja2 テンプレート
jinjatest.tpl
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{{ title }}</title>
</head>
<body>
<center>
<h1>{{ title }}</h1>
<table border=1>
{% for content in contentList -%}
{% if loop.index0 % num_of_columns == 0 -%}
<tr>
{% endif -%}
<td><center>{{ content.no }}</center></td>
{% if loop.index0 % num_of_columns == num_of_columns-1 -%}
</tr>
{% elif loop.last -%}
{% for i in range(num_of_columns-loop.index % num_of_columns) -%}
<td> </td>
{% endfor -%}
</tr>
{% endif -%}
{% endfor -%}
</table>
</center>
</body>
</html>
データの数(本サンプルでは26回)まわるループです
-%}
のように -
をつけることで出力される html に余計な空行が入りません
{% for content in contentList -%}
・・・
{% endfor -%}
行の先頭では <tr>
を書きます
loop.index0
は 0
から始まるループのインデックスです
ちなみに loop.index
は 1
から始まるループのインデックスです
{% if loop.index0 % num_of_columns == 0 -%}
<tr>
{% endif -%}
行の終わりでは </tr>
を書きます
{% if loop.index0 % num_of_columns == num_of_columns-1 -%}
</tr>
行の終わりではないところで,データの終わりになったら,
行末まで空白スペース
を書きます
{% elif loop.last -%}
{% for i in range(num_of_columns-loop.index % num_of_columns) -%}
<td> </td>
{% endfor -%}
</tr>
{% endif -%}
出力された html
おわりに
最初は python の中で html を一生懸命書いていたが,
Jinja2 を使うと楽だった