📘タイトル
Quillで作られたHTML断片をブラウザ表示できる完全なHTMLに変換するPythonスクリプト（PostgreSQL連携）
🏷タグ（例）
Python PostgreSQL HTML Quill エディタ 自動化
はじめに
Webエディタ「Quill」で入力されたHTML断片は、Quill独自の構造を持っているため、そのままではブラウザで正しく表示されないことがあります。
本記事では、PostgreSQLに格納されたファイルパスとファイル名からHTML断片を取得し、完全なHTML構造へ整形して保存するPythonスクリプトを紹介します。
想定する構成
- HTML断片（bodyタグなどがない）を格納したファイルが複数存在
- そのファイルのパスとファイル名が PostgreSQLの
html_filesテーブルに格納されている - Quillで表示できるよう、
quill.snow.cssを含んだHTMLに整形して出力
PostgreSQLのテーブル構成（例）
CREATE TABLE html_files (
id SERIAL PRIMARY KEY,
file_path TEXT NOT NULL,
file_name TEXT NOT NULL
);
Pythonスクリプト
import psycopg2
import os
# DBからファイルパスとファイル名を取得する関数
def get_file_paths_from_postgresql(dbname, user, password, host, port=5432):
conn = psycopg2.connect(
dbname=dbname, user=user, password=password, host=host, port=port
)
cur = conn.cursor()
cur.execute("SELECT file_path, file_name FROM html_files;")
results = cur.fetchall()
conn.close()
return results
# Quill用HTMLテンプレート
def wrap_with_quill_template(html_body):
return f"""<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Quill Rendered</title>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<style>
.ql-container {{
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 20px auto;
padding: 10px;
max-width: 800px;
border: 1px solid #ccc;
}}
</style>
</head>
<body>
<div class="ql-container ql-snow">
<div class="ql-editor">
{{html_body}}
</div>
</div>
</body>
</html>
"""
# HTML断片を読み込んで整形・保存
def convert_quill_fragment_to_full_html(input_path, output_path):
with open(input_path, encoding='utf-8') as f:
fragment = f.read()
full_html = wrap_with_quill_template(fragment)
with open(output_path, 'w', encoding='utf-8') as f:
f.write(full_html)
# メイン処理
if __name__ == "__main__":
# PostgreSQL接続情報を指定
dbname = "your_dbname"
user = "your_user"
password = "your_password"
host = "localhost" # またはDBサーバのIP
output_dir = "converted_html"
os.makedirs(output_dir, exist_ok=True)
for file_path, file_name in get_file_paths_from_postgresql(dbname, user, password, host):
input_file = os.path.join(file_path, file_name)
output_file = os.path.join(output_dir, file_name)
convert_quill_fragment_to_full_html(input_file, output_file)
print(f"✅ Converted: {output_file}")
補足：QuillのHTML断片とは？
Quillエディタで生成されるHTMLは、以下のように<div class="ql-editor">以下の断片だけが保存されていることがあります。
<p>これは<strong>太字</strong>のテキストです。</p>
これをそのままブラウザで表示するとCSSが足りず、レイアウトが崩れたり装飾が無視されることがあります。
おわりに
本記事で紹介したスクリプトを使えば、Quillで作成されたHTML断片を安全にブラウザで表示できる形式へ変換できます。
Delta形式やJSONで保存している場合への対応も可能です。もしそのような要望があれば、そちらも記事化予定です。