Closed psmuler closed 1 year ago
Pythonでの実装を提案します。以下のコードは、JSONファイルを読み込み、HTMLファイルに変換して表形式で表示します。このコードは、Pythonのjsonモジュールと、ファイルの読み書きを使用しています。
import json
def json_to_html(json_file, html_file):
with open(json_file, 'r', encoding='utf-8') as f:
data = json.load(f)
html = '''<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JSON to HTML Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>名前</th>
<th>詳細</th>
<th>緊急度</th>
<th>重要度</th>
<th>親</th>
</tr>
</thead>
<tbody>
'''
for item in data:
html += f'''<tr>
<td>{item["name"]}</td>
<td>{item["detail"]}</td>
<td>{item["urgency"]}</td>
<td>{item["importance"]}</td>
<td>{item["parent"] if item["parent"] else "null"}</td>
</tr>
'''
html += ''' </tbody>
</table>
</body>
</html>
'''
with open(html_file, 'w', encoding='utf-8') as f:
f.write(html)
# JSONファイルとHTMLファイルのパスを指定して、json_to_html関数を呼び出します。
json_file = 'tasks.json'
html_file = 'tasks.html'
json_to_html(json_file, html_file)
このコードは、tasks.json
ファイルを読み込み、tasks.html
ファイルに変換して表形式で表示します。json_to_html
関数にJSONファイルとHTMLファイルのパスを指定して呼び出してください。HTMLファイルは、5x5の表で名前、詳細、緊急度、重要度、親の項目が表示されます。
ありがとうございます。伝え方が悪かったようなので補足します。再度実装していただけますか。 ・htmlの表は5*5の表で、列方向に重要度、行方向に緊急度が割り振られている。 ・表の各セルの中にタスクのnameがリストで書かれている。 ・例えば重要度3、緊急度2、であれば、3列目の2段目のセルに「タスクの名前」が書かれる
申し訳ありません。指定された条件に従って、新しい実装を提供します。以下のコードは、指定された緊急度と重要度に応じて5x5のHTML表にタスク名を配置します。
import json
def json_to_html(json_file, html_file):
with open(json_file, 'r', encoding='utf-8') as f:
data = json.load(f)
tasks = [[[] for _ in range(5)] for _ in range(5)]
for item in data:
urgency_idx = item["urgency"] - 1
importance_idx = item["importance"] - 1
tasks[urgency_idx][importance_idx].append(item["name"])
html = '''<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JSON to HTML Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
'''
for i in range(1, 6):
html += f'<th>重要度 {i}</th>'
html += '</tr></thead><tbody>'
for i in range(5):
html += f'<tr><th>緊急度 {i + 1}</th>'
for j in range(5):
html += f'<td>{", ".join(tasks[i][j])}</td>'
html += '</tr>'
html += ''' </tbody>
</table>
</body>
</html>
'''
with open(html_file, 'w', encoding='utf-8') as f:
f.write(html)
# JSONファイルとHTMLファイルのパスを指定して、json_to_html関数を呼び出します。
json_file = 'tasks.json'
html_file = 'tasks.html'
json_to_html(json_file, html_file)
このコードは、tasks.json
ファイルを読み込み、tasks.html
ファイルに変換して表形式で表示します。json_to_html
関数にJSONファイルとHTMLファイルのパスを指定して呼び出してください。HTMLファイルは、5x5の表で緊急度と重要度に応じてタスク名が配置されます。
すごくいいです。すごいですね。追加でこういうこともできますか: ・タスクごとに改行をいれる ・文字をより小さくし、各セルの大きさを揃える ・罫線を非表示とする ・CSSを適用して、全体の見栄えをAbyss調あるいはDark調に整える
もちろん、追加の変更を実装できます。以下のコードは、追加の要求に従って変更されています。
import json
def json_to_html(json_file, html_file):
with open(json_file, 'r', encoding='utf-8') as f:
data = json.load(f)
tasks = [[[] for _ in range(5)] for _ in range(5)]
for item in data:
urgency_idx = item["urgency"] - 1
importance_idx = item["importance"] - 1
tasks[urgency_idx][importance_idx].append(item["name"])
html = '''<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JSON to HTML Table</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #222831;
color: #eeeeee;
}
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
th, td {
border: none;
padding: 8px;
text-align: left;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
th {
background-color: #393e46;
padding: 12px;
}
td {
background-color: #30475e;
max-width: 150px;
white-space: pre-wrap; /* 改行を有効にする */
word-wrap: break-word; /* 単語がセルの幅を超えた場合に改行する */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
'''
for i in range(1, 6):
html += f'<th>重要度 {i}</th>'
html += '</tr></thead><tbody>'
for i in range(5):
html += f'<tr><th>緊急度 {i + 1}</th>'
for j in range(5):
html += f'<td>{"<br>".join(tasks[i][j])}</td>'
html += '</tr>'
html += ''' </tbody>
</table>
</body>
</html>
'''
with open(html_file, 'w', encoding='utf-8') as f:
f.write(html)
# JSONファイルとHTMLファイルのパスを指定して、json_to_html関数を呼び出します。
json_file = 'tasks.json'
html_file = 'tasks.html'
json_to_html(json_file, html_file)
このコードは、各タスクに改行を追加し、文字サイズを小さくし、各セルの大きさを揃え、罫線を非表示にし、Abyss調(ダーク)のスタイルで全体の見栄えを整えています。tasks.json
ファイルを読み込み、tasks.html
ファイルに変換して表形式で表示します。json_to_html
関数にJSONファイルとHTMLファイルのパスを指定して呼び出してください。
上下方向にもセルの大きさを均等になるよう調整して、またアイテムごとに囲みをつけられますか。 たくさん書くのは大変でしょうから変更点と挿入位置だけ教えてください。
もちろん、変更点と挿入位置を説明します。以下の手順に従って、上下方向にもセルの大きさを均等にし、アイテムごとに囲みを追加してください。
<style>
タグ内に以下のCSSを追加して、各行の高さを均等に設定します。
tbody tr {
height: 20%; /* 各行の高さを均等にする */
}
これにより、表の各行の高さが均等になります。
<style>
タグ内に以下のCSSを追加して、アイテムごとに囲みを追加します。
.item {
display: inline-block;
border: 1px solid #eeeeee;
border-radius: 5px;
padding: 2px 5px;
margin: 2px;
}
これにより、アイテムごとに囲みが追加され、角丸の線で囲まれ、内外の余白が適用されます。
Pythonコードのhtml += f'<td>{"<br>".join(tasks[i][j])}</td>'
行を以下のように書き換えて、アイテムに<span class="item"></span>
タグを適用します。
html += f'<td>{"<br>".join([f\'<span class="item">{task}</span>\' for task in tasks[i][j]])}</td>'
これにより、アイテムごとに<span>
タグが適用され、スタイルが適切に適用されます。
これらの変更を加えることで、上下方向にもセルの大きさが均等になり、アイテムごとに囲みが追加されます。
File "~/taskjson2html.py", line 76
html += f'<td>{"<br>".join([f\'<span class="item">\{task}</span>\' for task in tasks[i][j]])}</td>'
^
SyntaxError: f-string expression part cannot include a backslash
申し訳ありません。このエラーは、f-string内でのバックスラッシュの使用が原因です。代わりに、以下のようにコードを書き換えてください。
html += f'<td>{"<br>".join([f\'<span class="item">{task}</span>\' for task in tasks[i][j]])}</td>'
上記のコードを以下のように修正してください。
html += f'<td>{"<br>".join(['<span class="item">' + task + '</span>' for task in tasks[i][j]])}</td>'
修正後のコードでは、f-string内でバックスラッシュを使用せず、代わりに文字列の連結を使用しています。この修正により、SyntaxErrorが解決されます。
html += f'<td>{"<br>".join(['<span class="item">' + task + '</span>' for task in tasks[i][j]])}</td>'
^
SyntaxError: f-string: unmatched '['
一旦仮変数に保存し、複数の行に分けて記述しても良いかもしれません。
申し訳ありません。確かに、この方法で解決しましょう。以下のようにコードを書き換えて、仮変数を使用して複数の行に分けて記述します。
for i in range(5):
html += f'<tr><th>緊急度 {i + 1}</th>'
for j in range(5):
task_list = tasks[i][j]
task_items = ['<span class="item">' + task + '</span>' for task in task_list]
task_html = "<br>".join(task_items)
html += f'<td>{task_html}</td>'
html += '</tr>'
この修正により、SyntaxErrorが解決されます。このコードは、各タスクに<span class="item"></span>
タグを適用し、アイテムごとに囲みが追加されます。
HTMLの\
jsonファイルを読み込んでhtmlファイルに変換する機能をpythonあるいはjavascriptいずれか一方のやりやすい方で実装してください。 各jsonアイテムが持つ二つのパラメータに沿ってhtml上に表形式でアイテムを表示したいです。 各アイテムが以下のようになっており、2軸のそれぞれは「重要度(importance)」と「緊急度(urgency)」で、1~5の値をとります。各アイテムは5*5の表内にnameのリストで記述されます。
{ “name”: //このタスクの名前 “detail”: //このタスクをなぜ実行すべきか。実行によって達成されること。 “urgency”: //このタスクの緊急度 “importance”: //このタスクの重要度 “parent”: //このタスクより大分類のタスク。なければnull。 }