{"id":383,"date":"2026-04-08T21:11:19","date_gmt":"2026-04-08T12:11:19","guid":{"rendered":"https:\/\/tool-laboratory.com\/?p=383"},"modified":"2026-04-08T21:18:52","modified_gmt":"2026-04-08T12:18:52","slug":"habit-tracker-streak-level","status":"publish","type":"post","link":"https:\/\/tool-laboratory.com\/en\/habit-tracker-streak-level\/","title":{"rendered":"\u3010\u7121\u6599\u3011\u7fd2\u6163\u30c8\u30e9\u30c3\u30ab\u30fc\uff5c\u30b9\u30c8\u30ea\u30fc\u30af\u30fb\u30ec\u30d9\u30eb\u30fb\u9054\u6210\u7387\u3092\u53ef\u8996\u5316\uff08\u4fdd\u5b58\u30fb\u5c65\u6b74\u4ed8\u304d\uff09"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>\u3010\u7121\u6599\u3011\u7fd2\u6163\u30c8\u30e9\u30c3\u30ab\u30fcPro\uff5c\u30b9\u30c8\u30ea\u30fc\u30af\u30fb\u9054\u6210\u7387\u30fb\u53ef\u8996\u5316<\/title>\n<meta name=\"description\" content=\"\u6bce\u65e5\u7d9a\u304f\u7fd2\u6163\u30c8\u30e9\u30c3\u30ab\u30fc\u3002\u30b9\u30c8\u30ea\u30fc\u30af\u30fb\u9054\u6210\u7387\u30fb\u5c65\u6b74\u30fb\u30ec\u30d9\u30eb\u30fb\u30b0\u30e9\u30d5\u4ed8\u304d\u3002\u30b9\u30de\u30db\u6700\u9069\u3067\u5b8c\u5168\u7121\u6599\u3002\">\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n<style>\nbody{\n  margin:0;\n  font-family:sans-serif;\n  background:#f4f6fb;\n}\n.container{\n  max-width:700px;\n  margin:auto;\n  padding:15px;\n}\n.card{\n  background:#fff;\n  padding:15px;\n  margin-bottom:15px;\n  border-radius:12px;\n}\ninput,button{\n  width:100%;\n  padding:14px;\n  margin-top:10px;\n  font-size:16px;\n  border-radius:10px;\n}\nbutton{\n  background:#4CAF50;\n  color:#fff;\n  border:none;\n  font-weight:bold;\n}\n.habit{\n  padding:10px;\n  border-bottom:1px solid #eee;\n}\n.done{\n  background:#e8f5e9;\n}\n.today{\n  border:2px solid #4CAF50;\n}\n.progress{\n  background:#eee;\n  height:8px;\n  border-radius:10px;\n  overflow:hidden;\n}\n.bar{\n  height:100%;\n  background:#4CAF50;\n}\n.big{\n  text-align:center;\n  font-size:20px;\n  font-weight:bold;\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"container\">\n\n<h1>\ud83d\udd25 \u7fd2\u6163\u30c8\u30e9\u30c3\u30ab\u30fcPro<\/h1>\n\n<div class=\"card\">\n<input id=\"input\" placeholder=\"\u4f8b\uff1a\u7b4b\u30c8\u30ec \/ \u82f1\u8a9e\">\n<button onclick=\"addHabit()\">\uff0b\u7fd2\u6163\u8ffd\u52a0<\/button>\n<\/div>\n\n<div class=\"card\">\n<div class=\"big\">\u30ec\u30d9\u30eb: <span id=\"level\">1<\/span><\/div>\n<div class=\"big\">\u9054\u6210\u7387: <span id=\"rate\">0<\/span>%<\/div>\n<\/div>\n\n<div class=\"card\" id=\"list\"><\/div>\n\n<div class=\"card\">\n<canvas id=\"chart\"><\/canvas>\n<\/div>\n\n<\/div>\n\n<script>\nlet data = JSON.parse(localStorage.getItem(\"habit_v3\")) || {\n  habits:[],\n  exp:0\n};\n\nfunction today(){\n  return new Date().toISOString().split(\"T\")[0];\n}\n\nfunction save(){\n  localStorage.setItem(\"habit_v3\", JSON.stringify(data));\n}\n\nfunction addHabit(){\n  let name = document.getElementById(\"input\").value.trim();\n  if(!name) return;\n\n  data.habits.push({\n    name,\n    history:[]\n  });\n\n  document.getElementById(\"input\").value=\"\";\n  save();\n  render();\n}\n\nfunction toggle(i){\n  let h = data.habits[i];\n  let t = today();\n\n  if(h.history.includes(t)){\n    h.history = h.history.filter(d=>d!==t);\n    data.exp -= 5;\n  }else{\n    h.history.push(t);\n    data.exp += 10;\n  }\n\n  save();\n  render();\n}\n\nfunction calcStreak(history){\n  let count = 0;\n  let d = new Date();\n\n  while(true){\n    let str = d.toISOString().split(\"T\")[0];\n    if(history.includes(str)){\n      count++;\n      d.setDate(d.getDate()-1);\n    }else break;\n  }\n\n  return count;\n}\n\nfunction render(){\n  let html = \"\";\n  let doneCount = 0;\n  let t = today();\n\n  data.habits.forEach((h,i)=>{\n    let done = h.history.includes(t);\n    if(done) doneCount++;\n\n    let streak = calcStreak(h.history);\n\n    html += `\n    <div class=\"habit ${done?\"done today\":\"\"}\">\n      <b>${h.name}<\/b>\n      <div>\u30b9\u30c8\u30ea\u30fc\u30af: ${streak}\u65e5<\/div>\n\n      <div class=\"progress\">\n        <div class=\"bar\" style=\"width:${Math.min(streak*10,100)}%\"><\/div>\n      <\/div>\n\n      <button onclick=\"toggle(${i})\">\n        ${done?\"\u2714\u9054\u6210\u6e08\u307f\":\"\u4eca\u65e5\u3084\u308b\"}\n      <\/button>\n    <\/div>\n    `;\n  });\n\n  document.getElementById(\"list\").innerHTML = html;\n\n  let rate = data.habits.length ? Math.round(doneCount\/data.habits.length*100):0;\n  document.getElementById(\"rate\").textContent = rate;\n\n  let level = Math.floor(data.exp\/50)+1;\n  document.getElementById(\"level\").textContent = level;\n\n  drawChart();\n}\n\nlet chart;\n\nfunction drawChart(){\n  let ctx = document.getElementById(\"chart\");\n\n  let arr = [];\n\n  for(let i=6;i>=0;i--){\n    let d = new Date();\n    d.setDate(d.getDate()-i);\n    let str = d.toISOString().split(\"T\")[0];\n\n    let c = 0;\n    data.habits.forEach(h=>{\n      if(h.history.includes(str)) c++;\n    });\n\n    arr.push(c);\n  }\n\n  if(chart) chart.destroy();\n\n  chart = new Chart(ctx,{\n    type:\"bar\",\n    data:{\n      labels:[\"6\u65e5\u524d\",\"5\u65e5\u524d\",\"4\u65e5\u524d\",\"3\u65e5\u524d\",\"2\u65e5\u524d\",\"\u6628\u65e5\",\"\u4eca\u65e5\"],\n      datasets:[{data:arr}]\n    }\n  });\n}\n\nrender();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\">\u7fd2\u6163\u30c8\u30e9\u30c3\u30ab\u30fc\u3068\u306f<\/h2>\n\n\n\n<p>\u7fd2\u6163\u30c8\u30e9\u30c3\u30ab\u30fc\u3068\u306f\u3001\u65e5\u3005\u306e\u884c\u52d5\u3092\u8a18\u9332\u3057\u300c\u7d99\u7d9a\u300d\u3092\u53ef\u8996\u5316\u3059\u308b\u30c4\u30fc\u30eb\u3067\u3059\u3002\u7279\u306b\u30b9\u30c8\u30ea\u30fc\u30af\uff08\u9023\u7d9a\u9054\u6210\u65e5\u6570\uff09\u3092\u610f\u8b58\u3059\u308b\u3053\u3068\u3067\u3001\u81ea\u7136\u3068\u7fd2\u6163\u5316\u304c\u9032\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u3067\u304d\u308b\u3053\u3068<\/h2>\n\n\n\n<p>\u30fb\u30b9\u30c8\u30ea\u30fc\u30af\u7ba1\u7406\uff08\u9023\u7d9a\u8a18\u9332\uff09<br>\u30fb\u30ec\u30d9\u30eb\u30a2\u30c3\u30d7\u6a5f\u80fd<br>\u30fb\u9054\u6210\u5c65\u6b74\u4fdd\u5b58<br>\u30fbCSV\u51fa\u529b<br>\u30fb\u9032\u6357\u30d0\u30fc\u53ef\u8996\u5316<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f7f\u3044\u65b9<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u7fd2\u6163\u3092\u5165\u529b<\/li>\n\n\n\n<li>\u6bce\u65e5\u300c\u9054\u6210\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3059<\/li>\n\n\n\n<li>\u30b9\u30c8\u30ea\u30fc\u30af\u3092\u4f38\u3070\u3059<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u30e1\u30ea\u30c3\u30c8<\/h2>\n\n\n\n<p>\u30fb\u3084\u308b\u6c17\u304c\u7d9a\u304f<br>\u30fb\u9054\u6210\u611f\u304c\u898b\u3048\u308b<br>\u30fb\u30b5\u30dc\u308a\u9632\u6b62<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u6d3b\u7528\u30b7\u30fc\u30f3<\/h2>\n\n\n\n<p>\u30fb\u7b4b\u30c8\u30ec<br>\u30fb\u52c9\u5f37<br>\u30fb\u526f\u696d<br>\u30fb\u65e5\u8a18<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u3088\u304f\u3042\u308b\u8cea\u554f\uff08FAQ\uff09<\/h2>\n\n\n\n<p>Q. \u7121\u6599\u3067\u4f7f\u3048\u307e\u3059\u304b\uff1f<br>A. \u306f\u3044\u3001\u5b8c\u5168\u7121\u6599\u3067\u3059\u3002<\/p>\n\n\n\n<p>Q. \u30c7\u30fc\u30bf\u306f\u4fdd\u5b58\u3055\u308c\u307e\u3059\u304b\uff1f<br>A. \u30d6\u30e9\u30a6\u30b6\u306b\u4fdd\u5b58\u3055\u308c\u307e\u3059\uff08localStorage\uff09\u3002<\/p>\n\n\n\n<p>Q. \u30b9\u30de\u30db\u3067\u3082\u4f7f\u3048\u307e\u3059\u304b\uff1f<br>A. \u306f\u3044\u3001\u30b9\u30de\u30db\u6700\u9069\u5316\u6e08\u307f\u3067\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u95a2\u9023\u30c4\u30fc\u30eb<\/h2>\n\n\n\n<p>\u30fb\u30dd\u30e2\u30c9\u30fc\u30ed\u30bf\u30a4\u30de\u30fc<br>\u30fb\u6642\u9593\u7ba1\u7406\u30c4\u30fc\u30eb<br>\u30fb\u76ee\u6a19\u8a2d\u5b9a\u30c4\u30fc\u30eb<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u7fd2\u6163\u5316\u3068\u306f<\/h2>\n\n\n\n<p>\u7fd2\u6163\u5316\u3068\u306f\u3001\u610f\u8b58\u305b\u305a\u3068\u3082\u7d99\u7d9a\u3067\u304d\u308b\u72b6\u614b\u306e\u3053\u3068\u3067\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u7fd2\u6163\u5316\u306e\u30e1\u30ea\u30c3\u30c8<\/h2>\n\n\n\n<p>\u30fb\u52aa\u529b\u304c\u4e0d\u8981\u306b\u306a\u308b<br>\u30fb\u7d99\u7d9a\u529b\u304c\u4e0a\u304c\u308b<br>\u30fb\u6210\u679c\u304c\u51fa\u3084\u3059\u3044<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u7fd2\u6163\u5316\u306e\u30b3\u30c4<\/h2>\n\n\n\n<p>\u30fb\u5c0f\u3055\u304f\u59cb\u3081\u308b<br>\u30fb\u6bce\u65e5\u8a18\u9332\u3059\u308b<br>\u30fb\u53ef\u8996\u5316\u3059\u308b<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3010\u7121\u6599\u3011\u7fd2\u6163\u30c8\u30e9\u30c3\u30ab\u30fcPro\uff5c\u30b9\u30c8\u30ea\u30fc\u30af\u30fb\u9054\u6210\u7387\u30fb\u53ef\u8996\u5316 \ud83d\udd25 \u7fd2\u6163\u30c8\u30e9\u30c3\u30ab\u30fcPro \uff0b\u7fd2\u6163\u8ffd\u52a0 \u30ec\u30d9\u30eb: 1 \u9054\u6210\u7387: 0% \u7fd2\u6163\u30c8\u30e9\u30c3\u30ab\u30fc\u3068\u306f \u7fd2\u6163\u30c8\u30e9\u30c3\u30ab\u30fc\u3068\u306f\u3001\u65e5\u3005\u306e\u884c\u52d5\u3092\u8a18\u9332\u3057\u300c\u7d99\u7d9a\u300d\u3092\u53ef\u8996\u5316\u3059\u308b\u30c4\u30fc\u30eb\u3067\u3059\u3002\u7279\u306b &#8230; <a title=\"\u3010\u7121\u6599\u3011\u7fd2\u6163\u30c8\u30e9\u30c3\u30ab\u30fc\uff5c\u30b9\u30c8\u30ea\u30fc\u30af\u30fb\u30ec\u30d9\u30eb\u30fb\u9054\u6210\u7387\u3092\u53ef\u8996\u5316\uff08\u4fdd\u5b58\u30fb\u5c65\u6b74\u4ed8\u304d\uff09\" class=\"read-more\" href=\"https:\/\/tool-laboratory.com\/en\/habit-tracker-streak-level\/\" aria-label=\"Read more about \u3010\u7121\u6599\u3011\u7fd2\u6163\u30c8\u30e9\u30c3\u30ab\u30fc\uff5c\u30b9\u30c8\u30ea\u30fc\u30af\u30fb\u30ec\u30d9\u30eb\u30fb\u9054\u6210\u7387\u3092\u53ef\u8996\u5316\uff08\u4fdd\u5b58\u30fb\u5c65\u6b74\u4ed8\u304d\uff09\">Read more<\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-383","post","type-post","status-publish","format-standard","hentry","category-house-tools"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts\/383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/comments?post=383"}],"version-history":[{"count":3,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts\/383\/revisions"}],"predecessor-version":[{"id":389,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts\/383\/revisions\/389"}],"wp:attachment":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/media?parent=383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/categories?post=383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/tags?post=383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}