349　html ファイル読み込み　拡大表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<!-- 修正3: ダウンロード時のファイル名（タイトル）を変更 -->
<title>htm　ファイル読み込んで背景黒にする</title>

<style>

:root {
    --BG_COLOR: #1b1b1b ;     /* 背景色: 黒っぽい */
    --TEXT_COLOR: #000000 ;   /* 文字色: 黒 */
    --LINK_COLOR: #000033 ;   /* リンク色: 濃い青で黒い */
    --MEDIA_OPACITY: 0.0;    /* 画像透明度: 0% */

    --BUTTON_BG: #222222 ;
    --BUTTON_BORDER: #666666 ;

    --PAGE_WIDTH: 900px;
    --PAGE_GAP: 20px;

    --ZOOM_DEFAULT: 1.0;
    --ZOOM_STEP: 0.1;
    --ZOOM_MIN: 0.5;
    --ZOOM_MAX: 3.0;
}


/* =========================
   基本
   ========================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    background: #111111 ;
    color: #E0E0E0 ;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        Meiryo,
        sans-serif;
}


/* =========================
   上部操作バー
   ========================= */
 #CONTROL_BAR  {
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #000000 ;
    border-bottom: 1px solid #444444 ;
}
 #FILE_BUTTON  {
    padding: 8px 14px;
    background: var(--BUTTON_BG);
    color: #FFFFFF ;
    border: 1px solid var(--BUTTON_BORDER);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}
 #FILE_NAME  {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
}

/* 個別色設定グループ */
.control-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
}

.control-group label {
    cursor: pointer;
    user-select: none;
}

.control-group input[type="color"] {
    width: 32px;
    height: 24px;
    border: 1px solid var(--BUTTON_BORDER);
    border-radius: 3px;
    background: none;
    cursor: pointer;
    padding: 0;
}

/* カラーコードの直接テキスト入力用 */
.color-text-input {
    width: 70px;
    height: 24px;
    background: #222222 ;
    color: #ffffff ;
    border: 1px solid var(--BUTTON_BORDER);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
}

.control-group input[type="range"] {
    width: 70px;
    cursor: pointer;
}
 #OPACITY_VAL , #WEIGHT_VAL , #SIZE_VAL  {
    min-width: 35px;
    font-size: 12px;
    text-align: right;
    display: inline-block;
}

button {
    padding: 7px 13px;
    background: var(--BUTTON_BG);
    color: #FFFFFF ;
    border: 1px solid var(--BUTTON_BORDER);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

button:hover, #FILE_BUTTON :hover {
    background: #444444 ;
}


/* =========================
   HTML表示領域
   ========================= */
 #VIEWER_CONTAINER  {
    width: 100%;
    min-height: calc(100vh - 60px);
    padding: 20px 10px 50px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1a1a1a ;
    overflow-x: auto;
}


/* =========================
   初期メッセージ
   ========================= */
 #MESSAGE  {
    padding: 60px 20px;
    text-align: center;
    color: #FFFFFF ;
    line-height: 1.8;
}


/* =========================
   ステータス
   ========================= */
 #STATUS  {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 2000;
    padding: 7px 12px;
    background: rgba(0, 0, 0, 0.9);
    color: #FFFFFF ;
    border: 1px solid #555555 ;
    border-radius: 4px;
    font-size: 13px;
}


/* =========================
   ファイル入力を非表示
   ========================= */
 #HTML_FILE_INPUT  {
    display: none;
}


/* =========================
   スマートフォン等
   ========================= */

@media (max-width: 1100px) {
    #FILE_NAME  {
        display: none;
    }
    #CONTROL_BAR  {
        gap: 8px;
    }
}

</style>

</head>


<body class="bg-enabled text-enabled link-enabled">


<!-- ==========================================
     操作バー
     ========================================== -->

<div id="CONTROL_BAR">


    <!-- PC内HTML選択 -->
    <label id="FILE_BUTTON" for="HTML_FILE_INPUT">
        HTMLを開く
    </label>

    <input id="HTML_FILE_INPUT" type="file" accept="text/html,.html,.htm">


    <!-- ファイル名 -->
    <div id="FILE_NAME">
        HTMLを選択してください
    </div>


    <!-- 背景色設定 -->
    <div class="control-group">
        <input type="checkbox" id="BG_ENABLE" checked>
        <label for="BG_ENABLE">背景</label>
        <input type="color" id="BG_COLOR_PICKER" value="#1b1b1b">
        <input type="text" id="BG_COLOR_TEXT" class="color-text-input" value="#1B1B1B" maxlength="7">
    </div>


    <!-- 文字色設定 -->
    <div class="control-group">
        <input type="checkbox" id="TEXT_ENABLE" checked>
        <label for="TEXT_ENABLE">文字</label>
        <input type="color" id="TEXT_COLOR_PICKER" value="#000000">
        <input type="text" id="TEXT_COLOR_TEXT" class="color-text-input" value="#000000" maxlength="7">
    </div>


    <!-- リンク枠設定 -->
    <div class="control-group">
        <input type="checkbox" id="LINK_ENABLE" checked>
        <label for="LINK_ENABLE">リンク</label>
        <input type="color" id="LINK_COLOR_PICKER" value="#000033">
        <input type="text" id="LINK_COLOR_TEXT" class="color-text-input" value="#000033" maxlength="7">
    </div>
    
    
    <!-- 修正2: 文字サイズ設定の追加 -->
    <div class="control-group">
        <label for="SIZE_SLIDER" title="文字の大きさを変更します">文字サイズ</label>
        <input type="range" id="SIZE_SLIDER" min="10" max="50" step="1" value="16">
        <span id="SIZE_VAL">16px</span>
    </div>


    <!-- 文字太さ設定 -->
    <div class="control-group">
        <label for="WEIGHT_SLIDER" title="文字の太さを変更します">太さ</label>
        <input type="range" id="WEIGHT_SLIDER" min="100" max="900" step="100" value="600">
        <span id="WEIGHT_VAL">600</span>
    </div>


    <!-- 画像等の不透明度調整 -->
    <div class="control-group">
        <label for="OPACITY_SLIDER" title="画像やメディアを薄くして、テキストを読みやすくします">画像等</label>
        <input type="range" id="OPACITY_SLIDER" min="0.0" max="1.0" step="0.1" value="0.0">
        <span id="OPACITY_VAL">0%</span>
    </div>


    <!-- 全体のズーム -->
    <button id="ZOOM_OUT_BUTTON">−</button>
    <button id="ZOOM_RESET_BUTTON" title="クリックで100%に戻す">100%</button>
    <button id="ZOOM_IN_BUTTON">＋</button>


</div>


<!-- ==========================================
     HTML表示領域
     ========================================== -->

<div id="VIEWER_CONTAINER">
    <div id="MESSAGE">
        「HTMLを開く」を押して<br>
        PC内のHTMLファイルを選択してください。
    </div>
</div>


<div id="STATUS">
    待機中
</div>



<!-- ==========================================
     スクリプト
     ========================================== -->

<script>

/* =========================================================
   パラメータ
   ========================================================= */

const PAGE_WIDTH = 900;
const ZOOM_DEFAULT = 1.0;
const ZOOM_STEP = 0.1;
const ZOOM_MIN = 0.5;
const ZOOM_MAX = 3.0;


/* =========================================================
   DOM
   ========================================================= */

const HTML_FILE_INPUT = document.getElementById("HTML_FILE_INPUT");
const VIEWER_CONTAINER = document.getElementById("VIEWER_CONTAINER");
const FILE_NAME = document.getElementById("FILE_NAME");
const STATUS = document.getElementById("STATUS");

const ZOOM_IN_BUTTON = document.getElementById("ZOOM_IN_BUTTON");
const ZOOM_OUT_BUTTON = document.getElementById("ZOOM_OUT_BUTTON");
const ZOOM_RESET_BUTTON = document.getElementById("ZOOM_RESET_BUTTON");

const BG_ENABLE = document.getElementById("BG_ENABLE");
const BG_COLOR_PICKER = document.getElementById("BG_COLOR_PICKER");
const BG_COLOR_TEXT = document.getElementById("BG_COLOR_TEXT");

const TEXT_ENABLE = document.getElementById("TEXT_ENABLE");
const TEXT_COLOR_PICKER = document.getElementById("TEXT_COLOR_PICKER");
const TEXT_COLOR_TEXT = document.getElementById("TEXT_COLOR_TEXT");

const LINK_ENABLE = document.getElementById("LINK_ENABLE");
const LINK_COLOR_PICKER = document.getElementById("LINK_COLOR_PICKER");
const LINK_COLOR_TEXT = document.getElementById("LINK_COLOR_TEXT");

const WEIGHT_SLIDER = document.getElementById("WEIGHT_SLIDER");
const WEIGHT_VAL = document.getElementById("WEIGHT_VAL");

// 修正2: 追加DOM
const SIZE_SLIDER = document.getElementById("SIZE_SLIDER");
const SIZE_VAL = document.getElementById("SIZE_VAL");

const OPACITY_SLIDER = document.getElementById("OPACITY_SLIDER");
const OPACITY_VAL = document.getElementById("OPACITY_VAL");


/* =========================================================
   状態
   ========================================================= */

let currentHtmlContent = "";
let currentZoom = ZOOM_DEFAULT;
let iframeContentHeight = 800; // iframeの初期高さ


/* =========================================================
   色・太さ・サイズ・透明度設定の更新
   ========================================================= */

function updateColorSettings() {
    // クラスの付け替え
    document.body.classList.toggle("bg-enabled", BG_ENABLE.checked);
    document.body.classList.toggle("text-enabled", TEXT_ENABLE.checked);
    document.body.classList.toggle("link-enabled", LINK_ENABLE.checked);

    // CSSカスタムプロパティの更新
    document.documentElement.style.setProperty("--BG_COLOR", BG_COLOR_PICKER.value);
    document.documentElement.style.setProperty("--TEXT_COLOR", TEXT_COLOR_PICKER.value);
    document.documentElement.style.setProperty("--LINK_COLOR", LINK_COLOR_PICKER.value);

    updateIframeStyles();
}

function updateWeightSettings() {
    WEIGHT_VAL.textContent = WEIGHT_SLIDER.value;
    updateIframeStyles();
}

// 修正2: 文字サイズ処理の追加
function updateSizeSettings() {
    SIZE_VAL.textContent = SIZE_SLIDER.value + "px";
    updateIframeStyles();
}

function updateOpacitySettings() {
    const opacityValue = OPACITY_SLIDER.value;
    document.documentElement.style.setProperty("--MEDIA_OPACITY", opacityValue);
    OPACITY_VAL.textContent = Math.round(opacityValue * 100) + "%";

    updateIframeStyles();
}

function updateIframeStyles() {
    const iframe = document.getElementById("HTML_FRAME");
    if (iframe) {
        // 背景色を iframe 自体に即時反映
        iframe.style.backgroundColor = BG_ENABLE.checked ? BG_COLOR_PICKER.value : "#ffffff";
        injectStyles(iframe);
        
        // 修正2: 文字サイズ変更によってページの高さが変わるため、再計算して高さを自動調整する
        setTimeout(() => {
            try {
                const doc = iframe.contentWindow.document;
                const body = doc.body;
                const html = doc.documentElement;
                const h = Math.max(
                    body.scrollHeight, body.offsetHeight,
                    html.clientHeight, html.scrollHeight, html.offsetHeight
                );
                iframeContentHeight = h;
                iframe.style.height = `${h}px`;
                updateZoomDisplay(); // 外側のラッパーの高さも更新
            } catch(e) {}
        }, 50);
    }
}

/* ピッカーとテキストボックスの双方向同期の登録 */
function setupColorSync(picker, textInput) {
    picker.addEventListener("input", () => {
        textInput.value = picker.value.toUpperCase();
        updateColorSettings();
    });

    textInput.addEventListener("input", () => {
        let val = textInput.value.trim();
        if (val.length === 6 && !val.startsWith("#")) {
            val = "#" + val;
        }
        if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
            picker.value = val;
            updateColorSettings();
        }
    });
}

// 動的変更リスナーの紐づけ
[BG_ENABLE, TEXT_ENABLE, LINK_ENABLE].forEach(el => {
    el.addEventListener("input", updateColorSettings);
});

setupColorSync(BG_COLOR_PICKER, BG_COLOR_TEXT);
setupColorSync(TEXT_COLOR_PICKER, TEXT_COLOR_TEXT);
setupColorSync(LINK_COLOR_PICKER, LINK_COLOR_TEXT);

WEIGHT_SLIDER.addEventListener("input", updateWeightSettings);
SIZE_SLIDER.addEventListener("input", updateSizeSettings); // 追加
OPACITY_SLIDER.addEventListener("input", updateOpacitySettings);

// 初回反映呼び出し
updateColorSettings();
updateWeightSettings();
updateSizeSettings(); // 追加
updateOpacitySettings();


/* =========================================================
   ステータス
   ========================================================= */

function setStatus(text) {
    STATUS.textContent = text;
}


/* =========================================================
   HTML選択
   ========================================================= */

HTML_FILE_INPUT.addEventListener("change", function(event) {
    const file = event.target.files[0];
    if (!file) return;

    if (file.type !== "text/html" && !file.name.toLowerCase().endsWith(".html") && !file.name.toLowerCase().endsWith(".htm")) {
        alert("HTMLファイルを選択してください。");
        return;
    }

    FILE_NAME.textContent = file.name;
    setStatus("HTML読み込み中...");

    // FileReaderでテキストとして読み込む
    const reader = new FileReader();
    reader.onload = function(e) {
        currentHtmlContent = e.target.result;
        currentZoom = ZOOM_DEFAULT;
        renderHtml();
    };
    reader.onerror = function() {
        setStatus("読み込みエラー");
        alert("HTMLを読み込めませんでした。");
    };
    reader.readAsText(file);
});


/* =========================================================
   HTML表示とスタイル注入
   ========================================================= */

function renderHtml() {
    VIEWER_CONTAINER.innerHTML = "";
    iframeContentHeight = 800; // リセット

    // iframeをラップしてズームの中心を確保するコンテナ
    const wrapper = document.createElement("div");
    wrapper.id = "IFRAME_WRAPPER";
    wrapper.style.position = "relative";
    wrapper.style.margin = "0 auto";
    wrapper.style.boxShadow = "0 4px 12px rgba(0,0,0,0.5)";
    wrapper.style.overflow = "hidden";
    wrapper.style.transition = "width 0.2s, height 0.2s";

    const iframe = document.createElement("iframe");
    iframe.id = "HTML_FRAME";
    iframe.style.width = `${PAGE_WIDTH}px`;
    iframe.style.height = `${iframeContentHeight}px`;
    iframe.style.border = "none";
    iframe.style.display = "block";
    iframe.style.transformOrigin = "top left";
    iframe.style.transition = "transform 0.2s";
    
    // Iframe自体の背景色を適用
    iframe.style.backgroundColor = BG_ENABLE.checked ? BG_COLOR_PICKER.value : "#ffffff";

    // 読み込み完了時にスタイルを注入・高さを調整
    iframe.onload = function() {
        injectStyles(iframe);
        
        try {
            const doc = iframe.contentWindow.document;
            const body = doc.body;
            const html = doc.documentElement;
            // コンテンツの実際の高さを取得
            const h = Math.max(
                body.scrollHeight, body.offsetHeight,
                html.clientHeight, html.scrollHeight, html.offsetHeight
            );
            iframeContentHeight = h;
            iframe.style.height = `${h}px`;
        } catch(e) {
            console.warn("Iframeの高さ取得に失敗しました:", e);
        }
        
        updateZoomDisplay();
        setStatus("表示完了");
    };

    // 読み込んだHTMLのソースをIframeへ流し込む
    iframe.srcdoc = currentHtmlContent;

    wrapper.appendChild(iframe);
    VIEWER_CONTAINER.appendChild(wrapper);
    
    updateZoomDisplay();
}

function injectStyles(iframe) {
    if (!iframe.contentWindow) return;
    try {
        const doc = iframe.contentWindow.document;
        if (!doc.body) return; // まだDOMがロードされていない場合は無視

        let style = doc.getElementById("custom-viewer-styles");
        if (!style) {
            style = doc.createElement("style");
            style.id = "custom-viewer-styles";
            doc.head.appendChild(style);
        }
        
        const bg = BG_ENABLE.checked ? BG_COLOR_PICKER.value : "";
        const text = TEXT_ENABLE.checked ? TEXT_COLOR_PICKER.value : "";
        const link = LINK_ENABLE.checked ? LINK_COLOR_PICKER.value : "";
        const opacity = OPACITY_SLIDER.value;
        const weight = WEIGHT_SLIDER.value;
        const size = SIZE_SLIDER.value; // 修正2: 追加

        let css = "";
        
        const baseSelectors = "body, p, span, div, li, td, th";
        const textSelectors = baseSelectors + ", h1, h2, h3, h4, h5, h6";
        
        // 修正2: 文字太さの適用
        css += `${textSelectors}, a { font-weight: ${weight} !important; }\n`;
        
        // 修正2: 文字サイズの強制適用 (px単位でどんなHTMLの指定も上書き)
        css += `${baseSelectors}, a { font-size: ${size}px !important; line-height: 1.6 !important; }\n`;
        css += `h1 { font-size: calc(${size}px * 2.0) !important; line-height: 1.4 !important; }\n`;
        css += `h2 { font-size: calc(${size}px * 1.5) !important; line-height: 1.4 !important; }\n`;
        css += `h3 { font-size: calc(${size}px * 1.17) !important; line-height: 1.4 !important; }\n`;
        css += `h4 { font-size: calc(${size}px * 1.0) !important; line-height: 1.4 !important; }\n`;
        css += `h5 { font-size: calc(${size}px * 0.83) !important; line-height: 1.4 !important; }\n`;
        css += `h6 { font-size: calc(${size}px * 0.67) !important; line-height: 1.4 !important; }\n`;
        
        
        if (BG_ENABLE.checked) {
            css += `body, html { background: ${bg} !important; }\n`;
        }
        if (TEXT_ENABLE.checked) {
            css += `${textSelectors} { color: ${text} !important; text-shadow: none !important; }\n`;
        }
        if (LINK_ENABLE.checked) {
            css += `a { color: ${link} !important; outline: 1px dashed ${link} !important; background-color: rgba(0,0,0,0.05) !important; text-decoration: none !important; }\n`;
            css += `a:hover { outline: 2px solid ${link} !important; background-color: rgba(255,255,255,0.1) !important; }\n`;
        }
        
        // 画像やメディア要素の不透明度を調整
        css += `img, video, canvas, svg, picture, figure, iframe { opacity: ${opacity} !important; transition: opacity 0.2s; }\n`;

        style.textContent = css;
    } catch (e) {
        console.warn("スタイルの注入に失敗しました:", e);
    }
}


/* =========================================================
   ズーム変更
   ========================================================= */

function changeZoom(amount) {
    if (!currentHtmlContent) return;

    currentZoom += amount;
    currentZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, currentZoom));

    setStatus(`ズーム ${Math.round(currentZoom * 100)}%`);
    updateZoomDisplay();
}

function updateZoomDisplay() {
    const wrapper = document.getElementById("IFRAME_WRAPPER");
    const iframe = document.getElementById("HTML_FRAME");
    if (wrapper && iframe) {
        wrapper.style.width = `${PAGE_WIDTH * currentZoom}px`;
        wrapper.style.height = `${iframeContentHeight * currentZoom}px`;
        iframe.style.transform = `scale(${currentZoom})`;
    }
    
    // 修正1: ズームボタン（100%の表記）を現在のパーセント表示と連動させる
    ZOOM_RESET_BUTTON.textContent = Math.round(currentZoom * 100) + "%";
}


/* =========================================================
   ズーム＋
   ========================================================= */

ZOOM_IN_BUTTON.addEventListener("click", function() {
    changeZoom(ZOOM_STEP);
});


/* =========================================================
   ズーム−
   ========================================================= */

ZOOM_OUT_BUTTON.addEventListener("click", function() {
    changeZoom(-ZOOM_STEP);
});


/* =========================================================
   100%（リセット）
   ========================================================= */

ZOOM_RESET_BUTTON.addEventListener("click", function() {
    if (!currentHtmlContent) return;

    currentZoom = ZOOM_DEFAULT;
    setStatus(`ズーム 100%`);
    updateZoomDisplay();
});


</script>

</body>
</html>