Topics

Le service de diagnostic d'accessibilité de Liberogic fournissait des certificats et des rapports au format HTML, mais en réponse aux demandes de certificats au format PDF,Certificats et rapports au format PDFVous pouvez maintenant le délivrer !

Certificat d'inspection d'accessibilité Web PDF

Rapport de conformité d'accessibilité PDF (VPAT/ACR)

Pour résoudre ce problème, nous avons créé un système qui génère automatiquement un PDF en même temps qu'un HTML lors du processus de compilation.

🛠️ Infrastructure de création de PDF : Puppeteer et construction de l’environnement

Il peut faire fonctionner le navigateur Chromium en mode sans interface graphique comme un outil de génération de PDF.PuppeteerComme HTML a été initialement conçu avec Astro, l'introduction de Puppeteer s'est faite relativement sans heurts.

1. Sécuriser un environnement de rendu à l'aide d'un serveur local

Puppeteer utilise la fonctionnalité d'impression de Chromium, mais ne prend pas en charge les fichiers HTML locaux (file://) directement,La mise en page est cassée.Des problèmes surviendront.

Pour éviter cela, nous avons créé l'environnement suivant :

• Serveur web temporaire :Après la constructiondistUn serveur web local temporaire pour héberger le répertoire (http-server) en tant que processus enfant de Node.js.
• Environnement stable :Marionnettiste via serveur (http://localhost:8080) afin de garantir un environnement de rendu stable, identique à celui d'un navigateur.

Configuration de l'environnement et code de démarrage du serveur (extrait)

// プロジェクト定数からドメインを取得し、未設定なら localhost:8080 を使用
const HOST_DOMAIN = SITE_URL || `http://localhost:${PORT}`; 
const BUILD_ROOT = path.join(__dirname, 'dist');
const PORT = 8080;

// --- サーバーの起動ロジック ---
let serverProcess = exec(`npx http-server ${BUILD_ROOT} -p ${PORT} -s --silent`);

// サーバーが起動するまで待機
await new Promise((resolve) => setTimeout(resolve, 2000));

// --- Puppeteerのページアクセス ---
// Puppeteerは localhost:8080 にアクセスし、レンダリングを開始します
const serverUrl = `http://localhost:${PORT}/${REPORT_DIR}/${urlPath}`;
await page.goto(serverUrl, { waitUntil: 'networkidle0' });

2. Application des polices japonaises

Étant donné que l'environnement serveur local sur lequel le PDF est généré ne dispose pas de polices japonaises, les polices intégrées au PDF seront incorrectes.

• Solution de contournement pour les polices :Dans le script, la référence à la police web et le style appliqué sont insérés dynamiquement dans le DOM juste avant la génération du PDF. Cela permet de générer des PDF utilisant des polices japonaises. Le code HTML privilégiant la vitesse et n'utilisant pas de polices web, cette insertion dynamique ne s'applique qu'au PDF.

Code d'insertion dynamique de polices (extrait)

// Webフォントの動的挿入ロジック (page.evaluateでブラウザ側で実行)
await page.evaluate((fontUrl) => {
    // <link>タグを生成してDOMに挿入
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = fontUrl;
    document.head.appendChild(link);
    
    // @media print スタイルを強制的に挿入し、フォントを適用
    const printStyle = document.createElement('style');
    printStyle.textContent = `
      @media print {
        html, body {
          font-family: 'Noto Sans JP', sans-serif !important;
        }
      }
    `;
    document.head.appendChild(printStyle);
}, WEBFONTS_URL);

🚨 Problème majeur : problèmes de référence d’URL dans les liens PDF

Le plus difficile étaitLiens entre les fichiers PDFLe lien intégré dans le PDF pointe toujours vers l'URL de l'environnement de développement local (http://localhost:8080Cela se produit car Chromium conserve l'URI de base lors du chargement du HTML comme base du lien PDF.

Forcer les chemins absolus pour les liens

Pour résoudre ce problème, nous avons forcé la réécriture des liens en chemins absolus complets après le déploiement en suivant les étapes suivantes :

1. Utilisez le domaine cible :Constantes du projet (SITE_URL) au domaine sur lequel vous déployez (par exemple,https://example.com) est obtenu.
2. Construction et substitution d'URL absolues :Récupérer le contenu HTML dans Node.js et renvoyer le lien d'origine (/accessibility_report/top/)de,Domaine acquisL'URL complète commençant par (par exemple,https://example.com/accessibility_report/pdf/acr-top.pdf)
3. Postuler à nouveau auprès du DOM :Réappliquez le code HTML réécrit à Chromium (page.setContent()) pour intégrer des liens dans le PDF.Le domaine après le déploiement prévuétait solidement fixé au

Code de réécriture de liens (extrait)

// 1. 無効化したいリンク（.link-ignore-pdf）を物理的に削除
const ignoreLinkRegex = new RegExp(`(<a\\\\s+[^>]*class=["'][^"']*${ignoreClass}[^"']*["'][^>]*>)(.*?)(<\\/a\\\\s*>)`, 'gi');
content = content.replace(ignoreLinkRegex, '$2'); // <a>タグ全体を中身のテキストに置換

// 2. 詳細ページへのリンクを絶対URLに書き換え
const detailLinkRegex = new RegExp(`href="${reportDirRootLink}([^/]+)\\/"`, 'g');
const detailPdfUrl = `${pdfAbsoluteUrl}/acr-top.pdf`; // 例

content = content.replace(detailLinkRegex, (match, slug) => {
    // リンクを <http://localhost>... ではなく、<https://example.com/>... に強制置換
    return `href="${pdfAbsoluteUrl}/acr-${slug}.pdf"`; 
});

// 3. 最終的なコンテンツをブラウザに再適用し、PDF出力へ
await page.setContent(content, { 
    waitUntil: 'domcontentloaded',
    baseURL: baseUrlForContent
});

🎉 Résumé

Cette fois-ci, nous avons rencontré quelques difficultés liées à l'exigence, un peu inhabituelle, de lier plusieurs fichiers PDF, mais l'intégration de Puppeteer s'est déroulée sans problème. La compilation est rapide et j'ai trouvé l'outil très utile !

Les points clés de cette réponse sont les suivants :

• Le rendu via un serveur local garantit la stabilité
• Injection dynamique de polices Web pour la prise en charge de la langue japonaise
• Créer des liens entre les fichiers PDF en utilisant des chemins absolus.

La prise en charge du format PDF a considérablement amélioré la commodité de notre service. Nous continuerons à nous efforcer de fournir des services d'évaluation d'accessibilité de haute qualité qui soient utiles à nos clients !