https://4fd8fb4d.blog-dyb.pages.dev/others/Recent content in 雑記 on 幻想亀の自叙伝Hugoja-jpFri, 14 Aug 2026 00:00:00 +0900https://4fd8fb4d.blog-dyb.pages.dev/others/%E4%BD%93%E9%87%8D%E8%A8%98%E9%8C%B2/Sun, 09 Aug 2026 13:49:22 +0000https://4fd8fb4d.blog-dyb.pages.dev/others/%E4%BD%93%E9%87%8D%E8%A8%98%E9%8C%B2/<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script> <div class="weight-dashboard"> <div class="weight-cards"> <div class="weight-card"> <p>最新体重</p> <strong>90.7 kg</strong> </div> <div class="weight-card"> <p>最新体脂肪率</p> <strong>25.9 %</strong> </div> <div class="weight-card"> <p>7日平均体重</p> <strong>90.4 kg</strong> </div> </div> <div class="weight-chart-wrap"> <h3 class="weight-chart-title">体重・体脂肪率推移</h3> <div class="weight-canvas-box"> <canvas id="weightChart" height="280"></canvas> </div> </div> </div> <style> :root { --panel-bg: #ffffff; --panel-border: #e5e7eb; --text-muted: #6b7280; --accent-weight: #0f6ab3; --accent-fat: #10a273; --grid-line: rgba(15, 23, 42, 0.08); } .weight-dashboard { margin: 1rem 0 1.5rem; } .weight-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .weight-card { border-radius: 12px; padding: 0.85rem 0.95rem; background: var(--panel-bg); border: 1px solid var(--panel-border); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .weight-card p { margin: 0 0 0.3rem; font-size: 0.82rem; color: var(--text-muted); } .weight-card strong { font-size: 1.15rem; letter-spacing: 0.01em; } .weight-chart-wrap { border-radius: 14px; padding: 0.8rem 0.8rem 0.2rem; border: 1px solid var(--panel-border); background: #ffffff; margin-bottom: 0.9rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .weight-chart-title { margin: 0 0 0.5rem; font-size: 0.98rem; } .weight-canvas-box { position: relative; height: 280px; } .weight-chart-wrap canvas { width: 100%; height: 100%; display: block; } @media (max-width: 720px) { .weight-cards { grid-template-columns: 1fr; } .weight-chart-wrap canvas { height: 100% !important; } .weight-canvas-box { height: 240px; } } </style> <script> (function () { const fullDates = ["2026-08-09","2026-08-10","2026-08-11","2026-08-12","2026-08-13","2026-08-14"]; const shortDates = ["08/09","08/10","08/11","08/12","08/13","08/14"]; const weights = [91.7,90.5,89.5,90.1,89.7,90.7]; const bodyFats = [25.9,25.7,26,27.1,26.1,25.9]; const labelMode = "day"; const labelStep = 1; const xAxisTitle = labelMode === "month" ? "日付（月）" : "日付（月/日）"; const minW = 88; const maxW = 93; const minF = 24; const maxF = 29; const weightEl = document.getElementById("weightChart"); if (!weightEl || typeof Chart === "undefined") return; const isMobile = window.innerWidth <= 720; const chartHeight = isMobile ? 300 : 320; weightEl.height = chartHeight; const axisTitleSize = isMobile ? 10 : 12; const tickSize = isMobile ? 9 : 11; if (window.__weightChartInstance) { window.__weightChartInstance.destroy(); } const sharedXAxis = { title: { display: !isMobile, text: xAxisTitle, color: "#6b7280", font: { size: axisTitleSize, weight: "bold" } }, grid: { color: "rgba(15, 23, 42, 0.08)" }, ticks: { font: { size: tickSize }, maxRotation: 0, autoSkip: false, callback: function (value, index) { const label = this.getLabelForValue(value) || ""; if (index === 0 || index === shortDates.length - 1) return label; if (labelMode === "day") { return index % labelStep === 0 ? label : ""; } const prev = shortDates[index - 1] || ""; return label !== prev ? label : ""; return ""; } } }; const commonOptions = { responsive: false, maintainAspectRatio: false, animation: false, interaction: { mode: "index", intersect: false }, plugins: { legend: { display: true, position: "top" }, tooltip: { callbacks: { title: function (items) { const idx = items[0]?.dataIndex ?? 0; return fullDates[idx] || ""; } } } } }; window.__weightChartInstance = new Chart(weightEl, { type: "line", data: { labels: shortDates, datasets: [ { label: "体重 (kg)", data: weights, yAxisID: "yWeight", borderColor: "#0f6ab3", backgroundColor: "rgba(15, 106, 179, 0.12)", borderWidth: 2.2, tension: 0, pointRadius: 0, pointHoverRadius: 4, spanGaps: true }, { label: "体脂肪率 (%)", data: bodyFats, yAxisID: "yFat", borderColor: "#10a273", backgroundColor: "rgba(16, 162, 115, 0.12)", borderWidth: 2.2, tension: 0, pointRadius: 0, pointHoverRadius: 4, spanGaps: true } ] }, options: Object.assign({}, commonOptions, { scales: { x: sharedXAxis, yWeight: { position: "left", min: minW, max: maxW, title: { display: !isMobile, text: "体重 (kg)", color: "#0f6ab3", font: { size: axisTitleSize, weight: "bold" } }, ticks: { font: { size: tickSize }, callback: function (v) { return isMobile ? v : v + " kg"; } }, grid: { color: "rgba(15, 23, 42, 0.08)" } }, yFat: { position: "right", min: minF, max: maxF, title: { display: !isMobile, text: "体脂肪率 (%)", color: "#10a273", font: { size: axisTitleSize, weight: "bold" } }, ticks: { font: { size: tickSize }, callback: function (v) { return isMobile ? v : v + " %"; } }, grid: { drawOnChartArea: false } } } }) }); })(); </script>