HTMLビューアの作り方と応用例11選！初心者でも簡単にマスター

はじめに
●HTMLビューアとは
●HTMLビューアの作り方
●使い方と注意点
●応用例とサンプルコード
まとめ

はじめに

HTMLビューアは、ウェブ開発者にとって欠かせないツールの一つです。

この記事では、HTMLビューアの作り方から使い方まで、初心者でも理解しやすいように丁寧に解説していきます。

さらに、応用例やサンプルコードを通じて、実践的なスキルを身につけることができるでしょう。

ウェブ開発に踏み出したばかりの方も、経験豊富な開発者も、この記事から新たな知識やアイデアを得ることができるはずです。

●HTMLビューアとは

HTMLビューアは、HTMLファイルを表示し、解析し、編集するための強力なツールです。

単にブラウザでHTMLを閲覧するだけでなく、開発者向けの高度な機能も備えています。

例えば、リアルタイムでのコード編集やデバッグ、さらにはクロスブラウザテストなどが可能です。

HTMLビューアを使いこなすことで、ウェブ開発の効率が大幅に向上し、より洗練されたウェブサイトやアプリケーションを作成することができるのです。

●HTMLビューアの作り方

HTMLビューアを自作することで、自分のニーズに合わせたカスタマイズが可能になります。

また、その過程でHTMLやJavaScript、CSSなどのウェブ技術への理解も深まります。

ここでは、HTMLビューアを作成するための手順を、順を追って説明していきます。

○環境設定

HTMLビューアを作成する前に、適切な開発環境を整えることが重要です。

まず、テキストエディタやIDE（統合開発環境）を選択しましょう。

Visual Studio CodeやSublime Textなどが人気です。

次に、Node.jsをインストールします。

これで、npm（Node Package Manager）を使用して必要なライブラリやツールを簡単にインストールできます。

また、Git for version controlをセットアップすることで、コードの変更履歴を管理できるようになります。

○基本的なHTML構造

HTMLビューアを作成する上で、HTMLの基本構造を理解することは不可欠です。

HTMLは、文書の構造を定義するためのマークアップ言語です。

要素はタグで囲まれ、開始タグと終了タグの間にコンテンツが配置されます。例えば、<p>これは段落です。</p>のように使用します。

また、HTML文書全体は<!DOCTYPE html>宣言で始まり、<html>タグで囲まれます。

その中に<head>と<body>セクションがあり、それぞれメタデータと実際のコンテンツを含みます。

○ビューアの作成

HTMLビューアの核心部分は、JavaScriptを使用してファイルを読み込み、解析し、表示する機能です。

ファイルの読み込みには、ファイルAPIを使用してローカルファイルを扱うか、XMLHttpRequestやFetch APIを使用してリモートファイルを取得します。

ここでは、シンプルなHTMLビューアの基本構造を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプルHTMLビューア</title>
    <style>
        #fileInput { margin-bottom: 10px; }
        #viewer { width: 100%; height: 500px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <input type="file" id="fileInput" accept=".html,.htm">
    <div id="viewer"></div>
    <script>
        const fileInput = document.getElementById('fileInput');
        const viewer = document.getElementById('viewer');

        fileInput.addEventListener('change', (event) => {
            const file = event.target.files[0];
            const reader = new FileReader();

            reader.onload = (e) => {
                viewer.innerHTML = e.target.result;
            };

            reader.readAsText(file);
        });
    </script>
</body>
</html>

この例では、ファイル選択インターフェースを提供し、選択されたHTMLファイルの内容をビューア領域に表示します。

○カスタマイズの方法

HTMLビューアの基本機能ができたら、次はカスタマイズです。CSSを使用してデザインを改善し、JavaScriptで追加機能を実装できます。

例えば、シンタックスハイライトを追加するには、Prism.jsやHighlight.jsなどのライブラリを使用できます。

また、エディタ機能を追加するには、CodeMirrorやAce Editorなどのライブラリが役立ちます。

ここでは、シンタックスハイライトを追加する例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンタックスハイライト付きHTMLビューア</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet" />
    <style>
        #fileInput { margin-bottom: 10px; }
        #viewer { width: 100%; height: 500px; border: 1px solid #ccc; overflow: auto; }
    </style>
</head>
<body>
    <input type="file" id="fileInput" accept=".html,.htm">
    <pre><code id="viewer" class="language-html"></code></pre>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
    <script>
        const fileInput = document.getElementById('fileInput');
        const viewer = document.getElementById('viewer');

        fileInput.addEventListener('change', (event) => {
            const file = event.target.files[0];
            const reader = new FileReader();

            reader.onload = (e) => {
                viewer.textContent = e.target.result;
                Prism.highlightElement(viewer);
            };

            reader.readAsText(file);
        });
    </script>
</body>
</html>

このコードでは、Prism.jsを使用してHTMLコードにシンタックスハイライトを適用しています。

●使い方と注意点

HTMLビューアを効果的に使用するためには、いくつかの重要な点に注意する必要があります。

ここでは、ファイルの読み込み、表示の調整、デバッグとエラー対処について詳しく説明します。

○ファイルの読み込み

HTMLファイルを正確に読み込むためには、ファイルの形式と文字コードに注意を払う必要があります。

多くのHTMLファイルはUTF-8でエンコードされていますが、古いファイルではShift_JISやEUC-JPなどの文字コードが使用されていることがあります。

ファイルの文字コードを正しく認識し、適切にデコードすることが重要です。

ここでは、文字コードを自動検出する機能を追加したコード例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字コード自動検出HTMLビューア</title>
    <style>
        #fileInput { margin-bottom: 10px; }
        #viewer { width: 100%; height: 500px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <input type="file" id="fileInput" accept=".html,.htm">
    <div id="viewer"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jschardet/3.0.0/jschardet.min.js"></script>
    <script>
        const fileInput = document.getElementById('fileInput');
        const viewer = document.getElementById('viewer');

        fileInput.addEventListener('change', (event) => {
            const file = event.target.files[0];
            const reader = new FileReader();

            reader.onload = (e) => {
                const content = e.target.result;
                const detected = jschardet.detect(content);
                const decoder = new TextDecoder(detected.encoding);
                viewer.innerHTML = decoder.decode(new Uint8Array(content));
            };

            reader.readAsArrayBuffer(file);
        });
    </script>
</body>
</html>

このコードでは、jschardetライブラリを使用して文字コードを自動検出し、適切にデコードしています。

○表示の調整

HTMLビューアでコンテンツを表示する際、ビューポートやズーム設定に注意を払うことで、より見やすい表示を実現できます。

レスポンシブデザインのウェブサイトをテストする場合、異なる画面サイズでの表示を確認することが重要です。

ここでは、ビューポートサイズを変更できる機能を追加したコード例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ビューポート調整可能HTMLビューア</title>
    <style>
        #fileInput, #viewportSize { margin-bottom: 10px; }
        #viewer { border: 1px solid #ccc; }
    </style>
</head>
<body>
    <input type="file" id="fileInput" accept=".html,.htm">
    <select id="viewportSize">
        <option value="100%">デスクトップ (100%)</option>
        <option value="768px">タブレット (768px)</option>
        <option value="375px">スマートフォン (375px)</option>
    </select>
    <iframe id="viewer" width="100%" height="500px"></iframe>
    <script>
        const fileInput = document.getElementById('fileInput');
        const viewportSize = document.getElementById('viewportSize');
        const viewer = document.getElementById('viewer');

        fileInput.addEventListener('change', (event) => {
            const file = event.target.files[0];
            const reader = new FileReader();

            reader.onload = (e) => {
                viewer.srcdoc = e.target.result;
            };

            reader.readAsText(file);
        });

        viewportSize.addEventListener('change', (event) => {
            viewer.style.width = event.target.value;
        });
    </script>
</body>
</html>

このコードでは、ドロップダウンメニューを使用してビューポートのサイズを変更できるようになっています。

○デバッグとエラー対処法

HTMLビューアを使用してデバッグを行う際、コンソールやエラーメッセージを活用することが重要です。

多くのブラウザには開発者ツールが組み込まれており、これを使用してJavaScriptのエラーやネットワークの問題を特定できます。

また、HTMLビューアに独自のデバッグ機能を追加することも可能です。

ここでは、簡単なエラーログ機能を追加したコード例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>デバッグ機能付きHTMLビューア</title>
    <style>
        #fileInput { margin-bottom: 10px; }
        #viewer, #errorLog { width: 100%; height: 300px; border: 1px solid #ccc; margin-bottom: 10px; overflow: auto; }
    </style>
</head>
<body>
    <input type="file" id="fileInput" accept=".html,.htm">
    <div id="viewer"></div>
    <div id="errorLog"></div>
    <script>
        const fileInput = document.getElementById('fileInput');
        const viewer = document.getElementById('viewer');
        const errorLog = document.getElementById('errorLog');

        fileInput.addEventListener('change', (event) => {
            const file = event.target.files[0];
            const reader = new FileReader();

            reader.onload = (e) => {
                try {
                    viewer.innerHTML = e.target.result;
                    errorLog.innerHTML = "ファイルが正常に読み込まれました。";
                } catch (error) {
                    errorLog.innerHTML = `エラーが発生しました: ${error.message}`;
                }
            };

            reader.onerror = (e) => {
                errorLog.innerHTML = `ファイルの読み込み中にエラーが発生しました: ${e.target.error}`;
            };

            reader.readAsText(file);
        });

        window.onerror = function(message, source, lineno, colno, error) {
            errorLog.innerHTML += `<br>JavaScriptエラー: ${message} (行: ${lineno}, 列: ${colno})`;
        };
    </script>
</body>
</html>

このコードでは、ファイルの読み込みエラーやJavaScriptの実行エラーを捕捉し、エラーログに表示する機能を追加しています。

●応用例とサンプルコード

HTMLビューアの基本的な機能を理解したら、さまざまな応用例を考えることができます。

ここでは、実践的な応用例とそのサンプルコードを紹介します。

○オンラインエディタ

HTMLビューアの機能を拡張して、オンラインでHTMLを編集し、リアルタイムでプレビューできるエディタを作成できます。

これで、ブラウザ上で直接HTMLコードを書き、即座に結果を確認することができます。

このような機能は、初心者がHTMLを学ぶ際や、開発者が素早くプロトタイプを作成する際に非常に有用です。

ここでは、シンプルなオンラインHTMLエディタのサンプルコードを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>オンラインHTMLエディタ</title>
    <style>
        body { display: flex; height: 100vh; margin: 0; }
        #editor, #preview { width: 50%; height: 100%; }
        #editor { font-family: monospace; font-size: 14px; }
    </style>
</head>
<body>
    <textarea id="editor"><h1>こんにちは、世界！</h1></textarea>
    <iframe id="preview"></iframe>
    <script>
        const editor = document.getElementById('editor');
        const preview = document.getElementById('preview');

        function updatePreview() {
            preview.srcdoc = editor.value;
        }

        editor.addEventListener('input', updatePreview);
        updatePreview();
    </script>
</body>
</html>

このコードでは、画面を左右に分割し、左側にHTMLを入力するためのテキストエリア、右側にリアルタイムでプレビューを表示するiframeを配置しています。

エディタに入力されたHTMLコードは、inputイベントが発生するたびにプレビュー側に反映されます。

これで、コードの変更がすぐに視覚的に確認できるため、迅速な開発やデバッグが可能になります。

また、このオンラインエディタをさらに発展させることで、より高度な機能を持つWebアプリケーションを作成することができます。

例えば、シンタックスハイライト機能を追加したり、複数のファイルを編集できるようにタブ機能を実装したり、さらにはサーバーサイドと連携してプロジェクトの保存や共有機能を追加したりすることが可能です。

○プレビューアプリ

HTMLビューアの概念をデスクトップアプリケーションとして実装することで、オフライン環境でも使用でき、より柔軟な操作が可能になります。

Electronなどのフレームワークを利用することで、Webアプリケーションをデスクトップアプリケーションとしてパッケージ化できます。

これで、ファイルシステムへの直接アクセスやシステムレベルの機能を利用することが可能になります。

ここでは、Electronを使用したシンプルなHTMLプレビューアアプリのメイン処理（main.js）とレンダラー処理（renderer.js）のサンプルコードを紹介します。

main.js

const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const fs = require('fs');
const path = require('path');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });

    win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

ipcMain.handle('open-file', async () => {
    const { filePaths } = await dialog.showOpenDialog({
        properties: ['openFile'],
        filters: [{ name: 'HTML Files', extensions: ['html', 'htm'] }]
    });

    if (filePaths && filePaths.length > 0) {
        const content = fs.readFileSync(filePaths[0], 'utf8');
        return content;
    }

    return null;
});

renderer.js

const { ipcRenderer } = require('electron');

document.getElementById('openFile').addEventListener('click', async () => {
    const content = await ipcRenderer.invoke('open-file');
    if (content) {
        document.getElementById('preview').srcdoc = content;
    }
});

index.html

<!DOCTYPE html>
<html>
<head>
    <title>HTMLプレビューアアプリ</title>
</head>
<body>
    <button id="openFile">ファイルを開く</button>
    <iframe id="preview" style="width:100%; height:500px; border:1px solid #ccc;"></iframe>
    <script src="renderer.js"></script>
</body>
</html>

このアプリケーションでは、「ファイルを開く」ボタンをクリックすると、ファイル選択ダイアログが表示され、選択したHTMLファイルの内容がiframe内にプレビューされます。

Electronを使用することで、デスクトップアプリケーションならではの使いやすさと、Webアプリケーションの柔軟性を兼ね備えたツールを作成することができます。

○レスポンシブデザインチェック

現代のWeb開発において、レスポンシブデザインは非常に重要です。

HTMLビューアを拡張して、異なる画面サイズでのレイアウトを簡単にチェックできる機能を追加することで、開発者はより効率的にレスポンシブデザインを実装し、テストすることができます。

ここでは、複数の画面サイズでプレビューできるHTMLビューアのサンプルコードを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>レスポンシブデザインチェッカー</title>
    <style>
        body { font-family: Arial, sans-serif; }
        #fileInput { margin-bottom: 10px; }
        .preview-container { display: flex; flex-wrap: wrap; }
        .preview-item { margin: 10px; text-align: center; }
        .preview-frame { border: 1px solid #ccc; }
    </style>
</head>
<body>
    <input type="file" id="fileInput" accept=".html,.htm">
    <div class="preview-container" id="previewContainer"></div>

    <script>
        const fileInput = document.getElementById('fileInput');
        const previewContainer = document.getElementById('previewContainer');
        const viewports = [
            { name: 'Mobile', width: 375, height: 667 },
            { name: 'Tablet', width: 768, height: 1024 },
            { name: 'Desktop', width: 1366, height: 768 }
        ];

        fileInput.addEventListener('change', (event) => {
            const file = event.target.files[0];
            const reader = new FileReader();

            reader.onload = (e) => {
                const content = e.target.result;
                previewContainer.innerHTML = '';

                viewports.forEach(viewport => {
                    const previewItem = document.createElement('div');
                    previewItem.className = 'preview-item';
                    previewItem.innerHTML = `
                        <h3>${viewport.name} (${viewport.width}x${viewport.height})</h3>
                        <iframe class="preview-frame" width="${viewport.width}" height="${viewport.height}" srcdoc="${encodeURIComponent(content)}"></iframe>
                    `;
                    previewContainer.appendChild(previewItem);
                });
            };

            reader.readAsText(file);
        });
    </script>
</body>
</html>

このコードでは、選択されたHTMLファイルを複数の画面サイズ（モバイル、タブレット、デスクトップ）で同時にプレビューします。

これにより、開発者はウェブサイトがさまざまなデバイスでどのように表示されるかを一目で確認できます。

レスポンシブデザインの問題点を素早く特定し、修正することが可能になります。

○スクリプトテスト

HTMLビューアは、JavaScriptやCSSの動作をテストするためのプラットフォームとしても活用できます。

特に、外部リソースへのアクセスが制限される環境下でのテストに有用です。

ここでは、JavaScriptのコードをリアルタイムで実行し、結果を表示できるシンプルなテスト環境のサンプルコードを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptテスト環境</title>
    <style>
        body { display: flex; height: 100vh; margin: 0; font-family: Arial, sans-serif; }
        #editor, #output { width: 50%; height: 100%; padding: 10px; box-sizing: border-box; }
        #editor { font-family: monospace; font-size: 14px; }
        #output { border-left: 1px solid #ccc; overflow: auto; }
    </style>
</head>
<body>
    <textarea id="editor">// JavaScriptコードをここに入力
console.log('Hello, World!');
const numbers = [1, 2, 3, 4, 5];
console.log('合計:', numbers.reduce((sum, num) => sum + num, 0));
</textarea>
    <div id="output"></div>

    <script>
        const editor = document.getElementById('editor');
        const output = document.getElementById('output');

        function runCode() {
            output.innerHTML = '';
            const originalLog = console.log;
            console.log = (...args) => {
                output.innerHTML += args.join(' ') + '<br>';
                originalLog.apply(console, args);
            };

            try {
                eval(editor.value);
            } catch (error) {
                console.log('エラー:', error.message);
            }

            console.log = originalLog;
        }

        editor.addEventListener('input', runCode);
        runCode();
    </script>
</body>
</html>

このコードでは、左側のテキストエリアにJavaScriptコードを入力すると、右側のOutput欄にその実行結果がリアルタイムで表示されます。

console.log関数をオーバーライドすることで、通常はブラウザのコンソールに出力される内容をページ上に表示しています。

これにより、開発者はコードの動作を即座に確認でき、迅速なデバッグや実験が可能になります。

○フォーム確認

HTMLフォームの設計と実装は、多くのウェブアプリケーションにとって重要な要素です。

HTMLビューアを拡張して、フォームの入力検証やサブミット処理をシミュレートする機能を追加することで、開発者はフォームの動作を効率的にテストできます。

これで、ユーザー体験の向上やエラー処理の改善が可能になります。

ここでは、フォームのプレビューとバリデーションチェックが可能なHTMLビューアのサンプルコードを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フォーム確認ツール</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        #formEditor, #formPreview { width: 100%; min-height: 200px; margin-bottom: 20px; }
        #formPreview { border: 1px solid #ccc; padding: 10px; }
        .error { color: red; }
    </style>
</head>
<body>
    <h2>フォームエディタ</h2>
    <textarea id="formEditor">
<form id="myForm">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" required><br><br>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required><br><br>
    <label for="age">年齢:</label>
    <input type="number" id="age" name="age" min="0" max="120"><br><br>
    <input type="submit" value="送信">
</form>
    </textarea>
    <button onclick="updatePreview()">プレビュー更新</button>

    <h2>フォームプレビュー</h2>
    <div id="formPreview"></div>

    <script>
        function updatePreview() {
            const formEditor = document.getElementById('formEditor');
            const formPreview = document.getElementById('formPreview');
            formPreview.innerHTML = formEditor.value;

            const form = formPreview.querySelector('form');
            if (form) {
                form.onsubmit = function(e) {
                    e.preventDefault();
                    validateForm(form);
                };
            }
        }

        function validateForm(form) {
            const formData = new FormData(form);
            let isValid = true;
            let result = "フォーム送信結果:\n";

            for (let [name, value] of formData.entries()) {
                const field = form.elements[name];
                let fieldValid = true;

                if (field.required && value.trim() === '') {
                    fieldValid = false;
                    isValid = false;
                    result += `${name}: 必須項目です\n`;
                } else if (field.type === 'email' && !validateEmail(value)) {
                    fieldValid = false;
                    isValid = false;
                    result += `${name}: 有効なメールアドレスではありません\n`;
                } else if (field.type === 'number') {
                    const num = Number(value);
                    if (isNaN(num) || num < field.min || num > field.max) {
                        fieldValid = false;
                        isValid = false;
                        result += `${name}: ${field.min}から${field.max}の間の数値を入力してください\n`;
                    }
                } else {
                    result += `${name}: ${value}\n`;
                }

                field.classList.toggle('error', !fieldValid);
            }

            if (isValid) {
                result = "フォームが正常に送信されました。\n" + result;
            } else {
                result = "フォームにエラーがあります。修正してください。\n" + result;
            }

            alert(result);
        }

        function validateEmail(email) {
            const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            return re.test(String(email).toLowerCase());
        }

        updatePreview();
    </script>
</body>
</html>

このコードでは、左側のテキストエリアにHTMLフォームのコードを入力し、「プレビュー更新」ボタンをクリックすると、右側にそのフォームがプレビュー表示されます。

プレビュー内のフォームは実際に機能し、送信ボタンをクリックするとバリデーションチェックが行われます。

各入力フィールドは次のように検証されます。

必須フィールドが空でないか
メールアドレスが有効な形式か
数値フィールドが指定された範囲内か

バリデーションの結果は、アラートとして表示されます。

エラーがある場合、該当するフィールドが赤く表示されます。

これで、開発者はフォームの動作を視覚的に確認し、ユーザーの入力に対する適切なフィードバックを設計することができます。

このツールを使用することで、開発者はフォームのデザインと機能を迅速に調整し、最適なユーザー体験を提供するフォームを作成することができます。

また、さまざまなエッジケースや入力パターンを簡単にテストできるため、堅牢なフォーム処理を実装する上で非常に役立ちます。

○ウェブページアーカイブ

HTMLビューアの機能を拡張して、ウェブページのアーカイブを作成・閲覧するツールを開発することができます。

このツールは、過去のウェブコンテンツを保存し、後で参照したり分析したりする際に非常に有用です。

ここでは、シンプルなウェブページアーカイブビューアのサンプルコードを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ウェブページアーカイブビューア</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        #archiveList { width: 30%; float: left; }
        #viewer { width: 65%; float: right; height: 600px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <h1>ウェブページアーカイブビューア</h1>
    <div id="archiveList">
        <h2>アーカイブリスト</h2>
        <ul id="pageList"></ul>
    </div>
    <iframe id="viewer"></iframe>

    <script>
        // アーカイブデータ（実際にはサーバーやローカルストレージから取得します）
        const archives = [
            { id: 1, title: "サンプルページ1", content: "<h1>サンプルページ1</h1><p>これはアーカイブされたサンプルページ1です。</p>" },
            { id: 2, title: "サンプルページ2", content: "<h1>サンプルページ2</h1><p>これはアーカイブされたサンプルページ2です。</p>" },
            { id: 3, title: "サンプルページ3", content: "<h1>サンプルページ3</h1><p>これはアーカイブされたサンプルページ3です。</p>" }
        ];

        const pageList = document.getElementById('pageList');
        const viewer = document.getElementById('viewer');

        // アーカイブリストの表示
        archives.forEach(page => {
            const li = document.createElement('li');
            const a = document.createElement('a');
            a.href = '#';
            a.textContent = page.title;
            a.onclick = (e) => {
                e.preventDefault();
                viewPage(page);
            };
            li.appendChild(a);
            pageList.appendChild(li);
        });

        function viewPage(page) {
            viewer.srcdoc = page.content;
        }
    </script>
</body>
</html>

このコードでは、左側にアーカイブされたページのリストを表示し、右側に選択されたページの内容をiframe内に表示します。

実際の使用では、アーカイブデータはサーバーやローカルストレージから取得することになります。

このツールを使用することで、次のようなメリットがあります。