📘タイトル

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で保存している場合への対応も可能です。もしそのような要望があれば、そちらも記事化予定です。