【一発計算ツール】レジスタンスライン・サポートラインを計算するツールを作ってみた【改良版】

この記事は約27分で読めます。
ピボットポイント計算ツール

ピボットポイント計算ツール

少し見やすいように修正を加えました。（2025/4/20）

  1. サポートS1の上に区切り線：レジスタンス（R4～R1）とサポート（S1～S4）の間を視覚的に分けるため、S1の表示の上に水平線（<hr>）を追加。
  2. レジスタンスを赤色、サポートを青色：
    • レジスタンス（R4, R3, R2, R1）関連のテキスト（値と差額）を赤色に。
    • サポート（S1, S2, S3, S4）関連のテキスト（値と差額）を青色に。
    • ピボットポイント（PP）はニュートラルな色（黒）のままにします。
まるも
まるも

初代ツールの方が使いやすかったという方はこちらからどうぞ♪

検証もこちらの記事で行っていますので参考になれば幸いです。

【一発計算ツール】レジスタンスライン・サポートラインを計算するツールを作ってみた
前日高値・安値・終値から日経先物レジスタンスライン・サポートラインを一発計算するツールです。ぜひブックマークしてご使用ください。
www.omo-online.com
2025.04.13
スポンサーリンク

修正後のコード

以下のコードに、CSSとHTMLの出力を調整してご要望を反映しました。主な変更点は、CSSにレジスタンスとサポート用の色設定を追加し、結果表示に区切り線を挿入した点です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ピボットポイント計算ツール</title>
    <style>
        /* ツール内部のみリセット */
        .pivot-tool-container * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .pivot-tool-container {
            display: block;
            position: static;
            width: 100%;
            max-width: 600px;
            margin: 20px 0 0 150px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            font-family: Arial, sans-serif;
        }
        .pivot-tool-container h1 {
            font-size: 24px;
            color: #333;
            text-align: left;
            margin-bottom: 20px;
            width: 100%;
        }
        .pivot-tool-container .input-group {
            display: flex;
            align-items: center;
            margin: 10px 0;
            width: 100%;
        }
        .pivot-tool-container label {
            width: 130px;
            font-size: 16px;
            color: #333;
            font-weight: bold;
        }
        .pivot-tool-container input {
            flex: 1;
            max-width: 300px;
            padding: 8px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .pivot-tool-container button {
            display: block;
            width: 160px;
            margin: 20px auto;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .pivot-tool-container button:hover {
            background-color: #45a049;
        }
        .pivot-tool-container #result {
            width: 100%;
            padding: 15px;
            margin-top: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            min-height: 50px;
        }
        .pivot-tool-container #result p {
            margin: 5px 0;
        }
        .pivot-tool-container .resistance {
            color: #d32f2f; /* 赤色 */
        }
        .pivot-tool-container .support {
            color: #1976d2; /* 青色 */
        }
        .pivot-tool-container .difference {
            font-size: 14px;
            margin-left: 20px;
        }
        .pivot-tool-container .resistance-difference {
            color: #d32f2f; /* 赤色（レジスタンスの差額） */
        }
        .pivot-tool-container .support-difference {
            color: #1976d2; /* 青色（サポートの差額） */
        }
        .pivot-tool-container .divider {
            border: 0;
            border-top: 1px solid #ccc;
            margin: 10px 0;
        }
        .pivot-tool-container .error {
            color: red;
            text-align: center;
            font-size: 16px;
            margin: 10px 0;
        }
        @media (max-width: 768px) {
            .pivot-tool-container {
                margin: 20px 0 0 20px;
                max-width: 90%;
            }
        }
    </style>
</head>
<body>
    <div class="pivot-tool-container">
        <h1>ピボットポイント計算ツール</h1>
        <div class="input-group">
            <label for="high">前日の高値 (H):</label>
            <input type="number" id="high" placeholder="例: 40000" step="0.01" required>
        </div>
        <div class="input-group">
            <label for="low">前日の安値 (L):</label>
            <input type="number" id="low" placeholder="例: 39000" step="0.01" required>
        </div>
        <div class="input-group">
            <label for="close">前日の終値 (C):</label>
            <input type="number" id="close" placeholder="例: 39500" step="0.01" required>
        </div>
        <button onclick="calculatePivotPoints()">計算する</button>
        <div id="result"></div>
    </div>

    <script>
        function calculatePivotPoints() {
            const highInput = document.getElementById('high');
            const lowInput = document.getElementById('low');
            const closeInput = document.getElementById('close');
            const resultDiv = document.getElementById('result');

            const high = parseFloat(highInput.value);
            const low = parseFloat(lowInput.value);
            const close = parseFloat(closeInput.value);

            if (!highInput.value || !lowInput.value || !closeInput.value || isNaN(high) || isNaN(low) || isNaN(close)) {
                resultDiv.innerHTML = '<p class="error">すべての値を正しく入力してください。</p>';
                return;
            }
            if (high < low) {
                resultDiv.innerHTML = '<p class="error">高値は安値より大きくなければなりません。</p>';
                return;
            }

            try {
                // ピボットポイントとレジスタンス・サポートラインの計算
                const pp = (high + low + close) / 3;
                const r1 = (2 * pp) - low;
                const r2 = pp + (high - low);
                const r3 = high + 2 * (pp - low);
                const r4 = r3 + (high - low);
                const s1 = (2 * pp) - high;
                const s2 = pp - (high - low);
                const s3 = low - 2 * (high - pp);
                const s4 = s3 - (high - low);

                // 差額の計算
                const diff_r4_r3 = Math.abs(r4 - r3).toFixed(2);
                const diff_r3_r2 = Math.abs(r3 - r2).toFixed(2);
                const diff_r2_r1 = Math.abs(r2 - r1).toFixed(2);
                const diff_r1_s1 = Math.abs(r1 - s1).toFixed(2);
                const diff_s1_s2 = Math.abs(s1 - s2).toFixed(2);
                const diff_s2_s3 = Math.abs(s2 - s3).toFixed(2);
                const diff_s3_s4 = Math.abs(s3 - s4).toFixed(2);

                // 結果をR4→S4の順で表示
                resultDiv.innerHTML = `
                    <p class="resistance"><strong>レジスタンス R4:</strong> ${r4.toFixed(2)} 円</p>
                    <p class="difference resistance-difference">→ R3: ${diff_r4_r3} 円</p>
                    <p class="resistance"><strong>レジスタンス R3:</strong> ${r3.toFixed(2)} 円</p>
                    <p class="difference resistance-difference">→ R2: ${diff_r3_r2} 円</p>
                    <p class="resistance"><strong>レジスタンス R2:</strong> ${r2.toFixed(2)} 円</p>
                    <p class="difference resistance-difference">→ R1: ${diff_r2_r1} 円</p>
                    <p class="resistance"><strong>レジスタンス R1:</strong> ${r1.toFixed(2)} 円</p>
                    <p class="difference resistance-difference">→ S1: ${diff_r1_s1} 円</p>
                    <hr class="divider">
                    <p class="support"><strong>サポート S1:</strong> ${s1.toFixed(2)} 円</p>
                    <p class="difference support-difference">→ S2: ${diff_s1_s2} 円</p>
                    <p class="support"><strong>サポート S2:</strong> ${s2.toFixed(2)} 円</p>
                    <p class="difference support-difference">→ S3: ${diff_s2_s3} 円</p>
                    <p class="support"><strong>サポート S3:</strong> ${s3.toFixed(2)} 円</p>
                    <p class="difference support-difference">→ S4: ${diff_s3_s4} 円</p>
                    <p class="support"><strong>サポート S4:</strong> ${s4.toFixed(2)} 円</p>
                    <p><strong>ピボットポイント (PP):</strong> ${pp.toFixed(2)} 円</p>
                `;
            } catch (error) {
                resultDiv.innerHTML = '<p class="error">計算中にエラーが発生しました。入力データを確認してください。</p>';
                console.error('Error:', error);
            }
        }
    </script>
</body>
</html>

主な修正点

  1. 区切り線の追加：
    • S1の表示直前に <hr class=”divider”> を挿入。
    • CSSで .divider クラスを定義し、薄いグレー（#ccc）の水平線を追加。マージンを 10px 0 に設定して適切な間隔を確保。
  2. 色の設定：
    • レジスタンス（R4～R1）用のクラス .resistance を追加し、色を赤（#d32f2f）に設定。
    • レジスタンスの差額用クラス .resistance-difference を追加し、同じ赤色を適用。
    • サポート（S1～S4）用のクラス .support を追加し、色を青（#1976d2）に設定。
    • サポートの差額用クラス .support-difference を追加し、同じ青色を適用。
    • ピボットポイント（PP）とエラーメッセージはデフォルトの色（黒または赤）のまま。
  3. CSSの調整：
    • .difference クラスの色指定を削除し、代わりに .resistance-difference と .support-difference で色を管理。
    • 視覚的な一貫性を保つため、差額のフォントサイズ（14px）とインデント（margin-left: 20px）は維持。

動作確認

入力例（H: 40000, L: 39000, C: 39500）を入れると、以下のような表示になります：

  • レジスタンス（赤色）：レジスタンス R4: 41500.00 円 → R3: 1000.00 円 レジスタンス R3: 40500.00 円 → R2: 500.00 円 レジスタンス R2: 40000.00 円 → R1: 500.00 円 レジスタンス R1: 39500.00 円 → S1: 1000.00 円
  • 区切り線：R1とS1の間にグレー（#ccc）の水平線。
  • サポート（青色）：サポート S1: 38500.00 円 → S2: 500.00 円 サポート S2: 38000.00 円 → S3: 500.00 円 サポート S3: 37500.00 円 → S4: 1000.00 円 サポート S4: 36500.00 円
  • ピボットポイント：ピボットポイント (PP): 39500.00 円

追加の要望について

  • 色の調整：赤（#d32f2f）や青（#1976d2）の色味を変更したい場合、具体的なカラーコードや色名を教えてください。
  • 区切り線のスタイル：線の色（現在は #ccc）や太さ、スタイル（例: 点線）を変更したい場合、希望を教えてください。
  • その他のデザイン：フォントサイズや間隔、差額の表示位置など、さらに調整が必要なら詳細を教えてください。
  • 機能追加：例えば、通貨単位の動的変更や小数点精度の設定など、追加機能が必要ならお知らせください。

さらなる調整が必要なら、気軽にコメントで教えてください♪

スポンサーリンク

コメント

タイトルとURLをコピーしました