{"id":33377,"date":"2022-10-18T10:38:58","date_gmt":"2022-10-18T01:38:58","guid":{"rendered":"https:\/\/www.gifuai.net\/?page_id=33377"},"modified":"2025-01-24T18:10:53","modified_gmt":"2025-01-24T09:10:53","slug":"%e3%83%aa%e3%82%a2%e3%83%ab%e3%82%bf%e3%82%a4%e3%83%a0%e3%83%a2%e3%83%8b%e3%82%bf%e3%83%bc","status":"publish","type":"page","link":"https:\/\/www.gifuai.net\/?page_id=33377","title":{"rendered":"\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30e2\u30cb\u30bf\u30fc"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"33377\" class=\"elementor elementor-33377\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b258136 elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b258136\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-b7fe801\" data-id=\"b7fe801\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7d16519 elementor-widget elementor-widget-html\" data-id=\"7d16519\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t<title>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30e2\u30cb\u30bf\u30fc<\/title>\n\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.2\/dist\/leaflet.css\" integrity=\"sha256-sA+zWATbFveLLNqWO2gtiw3HL\/lh1giY\/Inf1BJ0z14=\" crossorigin=\"\" \/>\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.2\/dist\/leaflet.js\" integrity=\"sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=\" crossorigin=\"\"><\/script>\n\n  <style>\n  .japan-time {\n            font-family: 'Arial', sans-serif;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 20px 0; \/* \u4e0a\u4e0b\u306e\u4f59\u767d\u309220px\u306b\u8a2d\u5b9a *\/\n        }\n        #japanTime {\n            padding: 10px; \/* \u4f59\u767d\u3092\u8584\u304f\u8a2d\u5b9a *\/\n            background-color: #333;\n            color: #fff;\n            border-radius: 10px;\n            font-size: 100px;\n            text-align: center;\n            width: 80%;\n            margin: 20px auto 0; \/* \u4f59\u5206\u306a\u5916\u5074\u306e\u4f59\u767d\u3092\u524a\u9664 *\/\n        }\n.flex-master {\n  display: flex;\n}\n\n.flex-slave {\n  margin: 10px;\n}\n\n\n#map {\n  width: 800px;\n  height: 600px;\n\tmargin-top: 10px;\n}\nh1{\ncolor: #000;\ndisplay: block;\npadding-top: 5px !important;\ncolor: #fff;\nbackground: #2015ff;\n-webkit-box-shadow: 5px 5px 0 #007032;\nbox-shadow: 5px 5px 0 #120d93;\nheight: 50px;\nmargin-top: -10px;\nfloat: left;\n}\n\nbutton {\n  font-size: 16px; \/* \u30c6\u30ad\u30b9\u30c8\u306e\u5927\u304d\u3055 *\/\n  padding: 10px 20px; \/* \u5185\u5074\u306e\u4f59\u767d *\/\n  border: none; \/* \u30dc\u30fc\u30c0\u30fc\u3092\u524a\u9664 *\/\n  border-radius: 5px; \/* \u89d2\u3092\u4e38\u304f\u3059\u308b *\/\n  cursor: pointer; \/* \u30db\u30d0\u30fc\u6642\u306b\u30ab\u30fc\u30bd\u30eb\u3092\u30dd\u30a4\u30f3\u30bf\u306b\u5909\u66f4 *\/\n  transition: background-color 0.3s, color 0.3s; \/* \u8272\u306e\u5909\u5316\u3092\u6ed1\u3089\u304b\u306b *\/\n  font-weight: bold;\n}\n\n#defaultBehaviorButton {\n  background-color: #4CAF50; \/* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8868\u793a\u30dc\u30bf\u30f3\u306e\u80cc\u666f\u8272 *\/\n  color: white; \/* \u30c6\u30ad\u30b9\u30c8\u8272 *\/\n  font-weight: bold;\n}\n\n#overrideBehaviorButton {\n  background-color: #008CBA; \/* \u30e6\u30fc\u30b6\u30fc\u3054\u3068\u306e\u7d4c\u8def\u8868\u793a\u30dc\u30bf\u30f3\u306e\u80cc\u666f\u8272 *\/\n  color: white; \/* \u30c6\u30ad\u30b9\u30c8\u8272 *\/\n  font-weight: bold;\n}\n\nbutton:hover {\n  background-color: #45a049; \/* \u30db\u30d0\u30fc\u6642\u306e\u80cc\u666f\u8272\uff08\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8868\u793a\u30dc\u30bf\u30f3\uff09 *\/\n  color: #fff; \/* \u30db\u30d0\u30fc\u6642\u306e\u30c6\u30ad\u30b9\u30c8\u8272 *\/\n}\n\n#overrideBehaviorButton:hover {\n  background-color: #007bb5; \/* \u30db\u30d0\u30fc\u6642\u306e\u80cc\u666f\u8272\uff08\u30e6\u30fc\u30b6\u30fc\u3054\u3068\u306e\u7d4c\u8def\u8868\u793a\u30dc\u30bf\u30f3\uff09 *\/\n}\n\n\n#event_select_map{\n\tborder-left: solid 10px #27acd9;\n\tpadding: 0.75rem 1.5rem;\n\tborder-color:  transparent transparent transparent blue;\n\tfont-weight: bold;\n\tmargin-bottom: 10px;\nbox-shadow: 3px 5px 3px -2px #aaaaaa,3px 3px 2px 0px #ffffff inset;\n\t\tfloat: left;\n\t\tmargin: 0px 10px 0px 0px;\n\t\t}\n\t\t#map_select{\n\t\t\tborder-left: solid 10px #27acd9;\n\t\t\tpadding: 0.75rem 1.5rem;\n\t\t\tborder-color:  transparent transparent transparent blue;\n\t\t\tfont-weight: bold;\n\t\t\tbox-shadow: 3px 5px 3px -2px #aaaaaa,3px 3px 2px 0px #ffffff inset;\n\t\t\t\t\tfloat: left;\n\t\t\tmargin: 0px 10px 0px 0px;\n\t\t\t\t}\n\t\t\t\t#zekken_number_map{\n\t\t\t\t\tbox-shadow: 3px 5px 3px -2px #aaaaaa,3px 3px 2px 0px #ffffff inset;\n\t\tfloat: left;\n\t\t\t\tmargin: 0px 10px 0px 0px;\n\t\t\t\t}\n\n\t#map_button{\n\t\t\tfloat: left;\n\t\t}\n\n\n\t\t\t\/* .wap{\n\t\tdisplay: block;\n\t\tfloat: left;\n\tdisplay: flex;\n\t\tmargin-bottom: 30px;\n\n\t\t} *\/\n        .wap {\n    display: flex;\n    flex-direction: row; \/* \u6a2a\u4e00\u5217\u306b\u4e26\u3079\u308b *\/\n    flex-wrap: nowrap; \/* \u8981\u7d20\u3092\u6298\u308a\u8fd4\u3055\u306a\u3044 *\/\n    margin-bottom: 30px;\n    justify-content: space-around; \/* \u8981\u7d20\u9593\u306b\u5747\u7b49\u306a\u30b9\u30da\u30fc\u30b9\u3092\u8a2d\u3051\u308b *\/\n}\n\n.wap > * {\n    margin-right: 10px; \/* \u5b50\u8981\u7d20\u306e\u53f3\u306b\u4f59\u767d\u3092\u8a2d\u3051\u308b *\/\n}\n\n.wap > *:last-child {\n    margin-right: 0; \/* \u6700\u5f8c\u306e\u5b50\u8981\u7d20\u306e\u53f3\u4f59\u767d\u3092\u524a\u9664 *\/\n}\n\n\n.wap2 {\n    display: flex;\n    flex-direction: row; \/* \u6a2a\u4e00\u5217\u306b\u4e26\u3079\u308b *\/\n    flex-wrap: nowrap; \/* \u8981\u7d20\u3092\u6298\u308a\u8fd4\u3055\u306a\u3044 *\/\n}\n\n\t#map_button, #map_button2{\n  color: #fff;\n  border: 2px solid #fff;\n  border-radius: 0;\n  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));\n  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);\n  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);\n  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);\n  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);\n\t\tborder-radius: 100vh;\n\t\tfont-family: \"Arial\", \"\u30e1\u30a4\u30ea\u30aa\";\n\t\tletter-spacing: 0.1em;\n\n}\n#map_button:hover {\n  -webkit-transform: translate(0, -2px);\n  transform: translate(0, -2px);\n  color: #fff;\n  -webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);\n  box-shadow: 0 8px 15px rgba(0, 0, 0, .2);\n}\n\t#map_button2:hover {\n  -webkit-transform: translate(0, -2px);\n  transform: translate(0, -2px);\n  color: #fff;\n  -webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);\n  box-shadow: 0 8px 15px rgba(0, 0, 0, .2);\n\n}\n\n.button4{\nmargin: -15px 0px 0px 20px ;\nwidth: 150px;\nbackground-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));\nbackground-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);\nbackground-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);\npadding: 10px 15px 10px 20px;\nborder-radius: 100vh;\ncolor: #fff;\nmargin-top: -30px;\nborder: 2px solid #FFF;\nbox-shadow: 0 8px 15px rgba(0, 0, 0, .2);\nfont-weight: bold;\n}\n\n\n.button4:hover {\n\t-webkit-transform: translate(0, -2px);\n  transform: translate(0, -2px);\n  color: #fff;\n  -webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);\n  box-shadow: 0 8px 15px rgba(0, 0, 0, .2);\n}\n\n@media screen and (max-width: 767px) {\nh1{\n\tdisplay: block;\nfont-size: 24px;\n\tdisplay: flex;\n  \/*justify-content: center;*\/\n  align-items: center;\n\tpadding-top: 30px;\n}\n\t.flex-slave{\n\t\t display: flex;\n\t\tflex-direction: column;\n\n\t}\n\n\t.wap{\n\t\tdisplay: block;\n\t\/*\tmargin-bottom: 10px;*\/\n\t\tfloat: left;\n\t}\n\t.wap2{\n\t\tdisplay: block;\n\t\tmargin-bottom: 10px;\n\t}\n\n\t#event_select_map{\n\t\tdisplay: block;\n\t\twidth: 100%;\n\tmargin-bottom: 10px;\n\t}\n\t#map_select{\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\tmargin-bottom: 10px;\n\t}\n\t#zekken_number_map{\n\t\twidth: 100%;\n\t\tmargin-bottom: 10px;\n\t}\n\t#map_button{\n\tdisplay: block;\n\twidth: 100%;\n\tfont-size: 24px;\n\t}\n\t#map_button2{\n\tdisplay: block;\n\twidth: 100%;\n\tfont-size: 24px;\n\t}\n\n\t#event_select_map {\n  position: relative;\n  width: 100%;\n\n}\n\t.arrow{\n\t  position: relative;\n\t}\n\t.arrow::after {\n\t\tcolor: #828282;\n\t  position: absolute;\n\t  top:18px; \/* \u77e2\u5370\u306e\u4f4d\u7f6e *\/\n\t  right: 25px; \/* \u77e2\u5370\u306e\u4f4d\u7f6e *\/\n\t  width: 13px; \/* \u77e2\u5370\u306e\u5927\u304d\u3055 *\/\n\t  height: 13px; \/* \u77e2\u5370\u306e\u5927\u304d\u3055 *\/\n\t  border-top: 3px solid #58504A; \/* \u77e2\u5370\u306e\u7dda *\/\n\t  border-right: 3px solid #58504A; \/* \u77e2\u5370\u306e\u7dda *\/\n\t  -webkit-transform: rotate(135deg); \/* \u77e2\u5370\u306e\u50be\u304d *\/\n\t  transform: rotate(135deg); \/* \u77e2\u5370\u306e\u50be\u304d *\/\n\t  pointer-events: none; \/* \u77e2\u5370\u90e8\u5206\u3082\u30af\u30ea\u30c3\u30af\u53ef\u80fd\u306b\u3059\u308b *\/\n\t  content: \"\";\n\t\tborder-color: #828282;\n  }\n\t.arrow1{\n\t  position: relative;\n\n\t}\n\t.arrow1::after {\n\t    display: block;\n\t\tcolor: #828282;\n\t  position: absolute;\ntop:83px; \/* \u77e2\u5370\u306e\u4f4d\u7f6e *\/\n\t  right: 25px; \/* \u77e2\u5370\u306e\u4f4d\u7f6e *\/\n\t  width: 13px; \/* \u77e2\u5370\u306e\u5927\u304d\u3055 *\/\n\t  height: 13px; \/* \u77e2\u5370\u306e\u5927\u304d\u3055 *\/\n\t  border-top: 3px solid #58504A; \/* \u77e2\u5370\u306e\u7dda *\/\n\t  border-right: 3px solid #58504A; \/* \u77e2\u5370\u306e\u7dda *\/\n\t  -webkit-transform: rotate(135deg); \/* \u77e2\u5370\u306e\u50be\u304d *\/\n\t  transform: rotate(135deg); \/* \u77e2\u5370\u306e\u50be\u304d *\/\n\t  pointer-events: none; \/* \u77e2\u5370\u90e8\u5206\u3082\u30af\u30ea\u30c3\u30af\u53ef\u80fd\u306b\u3059\u308b *\/\n\t  content: \"\";\n\t\tborder-color: #828282;\n  }\n\n\n\n\tselect{\n\t\tappearance: none; \/* \u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u77e2\u5370\u3092\u6d88\u3059 *\/\n\t\tmargin-top: 30px;\n\t\twidth: 300px;\n\t}\n\t.wrapper {\n\t\tdisplay: block;\nwidth: 100%;\nmax-width:330px;\nmargin: 0 auto;\n}\n\t#map{\n\t\twidth: 100%;\n\t\tmax-width:340px;\n\t}\n\n.button4{\nwidth: 100%;\n\tfont-size: 24px;\n\tmargin: -5px 0px 20px 0px;\n\ttext-align: center;\n\tfont-weight: normal;\n\n}\nh1{\n\twidth: 100%;\n\tpadding:  10px 10px 0px 50px;\n\tmargin-bottom: -20px;\n}\n#showAllRoutesButton{\n    background-color: #4CAF50; \/* \u7dd1\u8272\u306e\u80cc\u666f *\/\n    color: white; \/* \u30c6\u30ad\u30b9\u30c8\u8272 *\/\n    padding: 10px 20px; \/* \u4e0a\u4e0b\u306e\u30d1\u30c7\u30a3\u30f3\u30b0\u3068\u5de6\u53f3\u306e\u30d1\u30c7\u30a3\u30f3\u30b0 *\/\n    border: none;\n    border-radius: 5px; \/* \u30dc\u30fc\u30c0\u30fc\u306e\u89d2\u3092\u4e38\u304f *\/\n    cursor: pointer; \/* \u30db\u30d0\u30fc\u6642\u306b\u30ab\u30fc\u30bd\u30eb\u3092\u30dd\u30a4\u30f3\u30bf\u306b *\/\n    transition-duration: 0.4s; \/* \u30db\u30d0\u30fc\u6642\u306e\u9077\u79fb\u6642\u9593 *\/\n  }\n\n  #showAllRoutesButton:hover{\n    background-color: #45a049; \/* \u30db\u30d0\u30fc\u6642\u306e\u80cc\u666f\u8272\u3092\u5c11\u3057\u6697\u304f *\/\n  }\n\n  #clearRoutesButton {\n    background-color: #f44336; \/* \u8d64\u8272\u306e\u80cc\u666f *\/\n    color: white; \/* \u30c6\u30ad\u30b9\u30c8\u8272 *\/\n    padding: 10px 20px; \/* \u4e0a\u4e0b\u306e\u30d1\u30c7\u30a3\u30f3\u30b0\u3068\u5de6\u53f3\u306e\u30d1\u30c7\u30a3\u30f3\u30b0 *\/\n    border: none;\n    border-radius: 5px; \/* \u30dc\u30fc\u30c0\u30fc\u306e\u89d2\u3092\u4e38\u304f *\/\n    cursor: pointer; \/* \u30db\u30d0\u30fc\u6642\u306b\u30ab\u30fc\u30bd\u30eb\u3092\u30dd\u30a4\u30f3\u30bf\u306b *\/\n    transition-duration: 0.4s; \/* \u30db\u30d0\u30fc\u6642\u306e\u9077\u79fb\u6642\u9593 *\/\n  }\n\n  #clearRoutesButton:hover {\n    background-color: #da3a2b; \/* \u30db\u30d0\u30fc\u6642\u306e\u80cc\u666f\u8272\u3092\u5c11\u3057\u6697\u304f *\/\n  }\n  \n  #time-slider-container {\n    width: 80%;\n    margin: 20px auto;\n}\n\n#time-slider {\n    width: 100%;\n}\n\n  <\/style>\n<\/head>\n<body>\n    \n<div class=\"japan-time\"><p id=\"japanTime\">\u8aad\u307f\u8fbc\u307f\u4e2d...<\/p><\/div>\n\t<div class=\"flex-slave\">\n\t\t<br>\n\t\t<div class=\"wrap3\">\n\t\t\t<!-- <h1>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30e2\u30cb\u30bf\u30fc<\/h1> -->\n            <button id=\"defaultBehaviorButton\">\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8868\u793a<\/button>\n            <button id=\"overrideBehaviorButton\">\u30e6\u30fc\u30b6\u30fc\u3054\u3068\u306e\u7d4c\u8def\u8868\u793a<\/button>\n\n            \n\n\t\t<\/div>\n\t\t<div class=\"wap\" style=\"display: none;\">\n            <div><span id=\"time-display\">0<\/span> \u5206\u524d<\/div>\n            <div id=\"time-slider-container\">\n                <input type=\"range\" id=\"time-slider\" min=\"0\" max=\"100\" value=\"100\" step=\"1\">\n            <\/div>\n            <form>\n                <div class=\"arrow\">\n                    <select id=\"event_select_map\">\n                        <option disabled value=\"\">\u30a4\u30d9\u30f3\u30c8\u4e00\u89a7<\/option>\n                        <option selected value=\"\u63d6\u6590\u5ddd\">\u63d6\u6590\u5ddd\u30fb\u6c60\u7530\u30fb\u5927\u91ce\u30fb\u795e\u6238<\/option>\n                        <option value=\"\u95a2\u30b1\u539f2412\">\u95a2\u30b1\u539f-2024\u5e7412\u6708<\/option>\n                        <option value=\"\u990a\u80012412\">\u990a\u8001-2024\u5e7412\u6708<\/option>\n                        <option value=\"\u5927\u57a32412\">\u5927\u57a3-2024\u5e7412\u6708<\/option>\n                        <option value=\"\u5404\u52d9\u539f2412\">\u5404\u52d9\u539f-2024\u5e7412\u6708<\/option>\n                        <option value=\"\u591a\u6cbb\u898b2412\">\u591a\u6cbb\u898b-2024\u5e7412\u6708<\/option>\n                        <option value=\"\u7f8e\u6fc3\u52a0\u83022412\">\u7f8e\u6fc3\u52a0\u8302-2024\u5e7412\u6708<\/option>\n                        <option value=\"\u4e0b\u54422412\">\u4e0b\u5442-2024\u5e7412\u6708<\/option>\n                        <option value=\"\u90e1\u4e0a2412\">\u90e1\u4e0a-2024\u5e7412\u6708<\/option>\n                        <option value=\"\u9ad8\u5c712412\">\u9ad8\u5c71-2024\u5e7412\u6708<\/option>\n                        <option value=\"FC\u5c90\u961c\">with FC\u5c90\u961c<\/option>\n<!--\n                        <option value=\"\u95a2\u30b1\u539f2410\">\u95a2\u30b1\u539f-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u990a\u80012410\">\u990a\u8001-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u5927\u57a32410\">\u5927\u57a3-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u5404\u52d9\u539f2410\">\u5404\u52d9\u539f-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u591a\u6cbb\u898b2410\">\u591a\u6cbb\u898b-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u7f8e\u6fc3\u52a0\u83022410\">\u7f8e\u6fc3\u52a0\u8302-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u4e0b\u54422410\">\u4e0b\u5442-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u90e1\u4e0a2410\">\u90e1\u4e0a-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u9ad8\u5c712410\">\u9ad8\u5c71-2024\u5e7410\u6708<\/option>\n\n                        <option value=\"\u95a2\u30b1\u539f2409\">\u95a2\u30b1\u539f-2024\u5e749\u6708<\/option>\n\n                        <option value=\"\u990a\u80012409\">\u990a\u8001-2024\u5e749\u6708<\/option>\n                        <option value=\"\u5927\u57a32409\">\u5927\u57a3-2024\u5e749\u6708<\/option>\n                        <option value=\"\u5404\u52d9\u539f2409\">\u5404\u52d9\u539f-2024\u5e749\u6708<\/option>\n                        <option value=\"\u591a\u6cbb\u898b2409\">\u591a\u6cbb\u898b-2024\u5e749\u6708<\/option>\n                        <option value=\"\u7f8e\u6fc3\u52a0\u83022409\">\u7f8e\u6fc3\u52a0\u8302-2024\u5e749\u6708<\/option>\n                        <option value=\"\u4e0b\u54422409\">\u4e0b\u5442-2024\u5e749\u6708<\/option>\n                        <option value=\"\u90e1\u4e0a2409\">\u90e1\u4e0a-2024\u5e749\u6708<\/option>\n                        <option value=\"\u9ad8\u5c712409\">\u9ad8\u5c71-2024\u5e749\u6708<\/option>\n-->\n\n                        <option value=\"\u7f8e\u6fc3\u52a0\u8302\">\u5c90\u961c\u30ed\u30b2in\u7f8e\u6fc3\u52a0\u8302<\/option>\n                        <option value=\"\u990a\u8001\u30ed\u30b2\">\u990a\u8001\u753a<\/option>\n                        <option value=\"\u5c90\u961c\u5e02\">\u5c90\u961c\u5e02<\/option>\n                        <option value=\"\u5927\u57a3\uff12\">\u5c90\u961c\u30ed\u30b2in\u5927\u57a3@\u30a4\u30aa\u30f3<\/option>\n                        <option value=\"\u5927\u57a3\">\u5c90\u961c\u30ed\u30b2in\u5927\u57a3<\/option>\n                        <option value=\"\u591a\u6cbb\u898b\">\u5c90\u961c\u30ed\u30b2in\u591a\u6cbb\u898b<\/option>\n                        <option value=\"\u5404\u52d9\u539f\">\u5c90\u961c\u30ed\u30b2in\u5404\u52d9\u539f<\/option>\n                        <option value=\"\u4e0b\u5442\">\u5c90\u961c\u30ed\u30b2in\u4e0b\u5442\u6e29\u6cc9<\/option>\n                        <option value=\"\u90e1\u4e0a\">\u5c90\u961c\u30ed\u30b2in\u90e1\u4e0a<\/option>\n                        <option value=\"\u9ad8\u5c71\">\u5c90\u961c\u30ed\u30b2in\u9ad8\u5c71<\/option>\n                    <\/select>\n                <\/div>\n            <\/form>\n            <form>\n                <div class=\"arrow1\">\n                    <select id=\"map_select\">\n                        <option selected value=\"\u5168\u3066\">\u5168\u3066<\/option>\n                        <option value=\"3\u6642\u9593\u4e00\u822c\">3\u6642\u9593\u4e00\u822c<\/option>\n                        <option value=\"3\u6642\u9593\u30d5\u30a1\u30df\u30ea\u30fc\">3\u6642\u9593\u30d5\u30a1\u30df\u30ea\u30fc<\/option>\n                        <option value=\"3\u6642\u9593\u81ea\u8ee2\u8eca\">3\u6642\u9593\u81ea\u8ee2\u8eca<\/option>\n                        <option value=\"3\u6642\u9593\u30bd\u30ed\u7537\u5b50\">3\u6642\u9593\u30bd\u30ed\u7537\u5b50<\/option>\n                        <option value=\"3\u6642\u9593\u30bd\u30ed\u5973\u5b50\">3\u6642\u9593\u30bd\u30ed\u5973\u5b50<\/option>\n                        <option value=\"3\u6642\u9593\u30d1\u30e9\u30ed\u30b2\">3\u6642\u9593\u30d1\u30e9\u30ed\u30b2<\/option>\n                        <option value=\"3\u6642\u9593\u7121\u6599\">3\u6642\u9593\u7121\u6599<\/option>\n                        <option value=\"5\u6642\u9593\u4e00\u822c\">5\u6642\u9593\u4e00\u822c<\/option>\n                        <option value=\"5\u6642\u9593\u30d5\u30a1\u30df\u30ea\u30fc\">5\u6642\u9593\u30d5\u30a1\u30df\u30ea\u30fc<\/option>\n                        <option value=\"5\u6642\u9593\u81ea\u8ee2\u8eca\">5\u6642\u9593\u81ea\u8ee2\u8eca<\/option>\n                        <option value=\"5\u6642\u9593\u30bd\u30ed\u7537\u5b50\">5\u6642\u9593\u30bd\u30ed\u7537\u5b50<\/option>\n                        <option value=\"5\u6642\u9593\u30bd\u30ed\u5973\u5b50\">5\u6642\u9593\u30bd\u30ed\u5973\u5b50<\/option>\n                    <\/select>\n                    <button type=\"button\" id=\"map_button\">\u30b9\u30bf\u30fc\u30c8<\/button>\n                <\/div>\n            <\/form>\n\t\t<\/div>\n        \n\t\t<div class=\"wap2\" style=\"display: none;\">\n            <form>\n                <div class=\"arrow3\">\n                    <select id=\"event_select_for_user_narrow\">\n                        <option disabled value=\"\">\u30a4\u30d9\u30f3\u30c8\u4e00\u89a7<\/option>\n                        <option value=\"FC\u5c90\u961c\">with FC\u5c90\u961c<\/option>\n<!--\n                        <option value=\"\u95a2\u30b1\u539f2410\">\u95a2\u30b1\u539f-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u990a\u80012410\">\u990a\u8001-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u5927\u57a32410\">\u5927\u57a3-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u5404\u52d9\u539f2410\">\u5404\u52d9\u539f-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u591a\u6cbb\u898b2410\">\u591a\u6cbb\u898b-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u7f8e\u6fc3\u52a0\u83022410\">\u7f8e\u6fc3\u52a0\u8302-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u4e0b\u54422410\">\u4e0b\u5442-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u90e1\u4e0a2410\">\u90e1\u4e0a-2024\u5e7410\u6708<\/option>\n                        <option value=\"\u9ad8\u5c712410\">\u9ad8\u5c71-2024\u5e7410\u6708<\/option>\n\n                        <option value=\"\u95a2\u30b1\u539f2409\">\u95a2\u30b1\u539f-2024\u5e749\u6708<\/option>\n                        <option value=\"\u990a\u80012409\">\u990a\u8001-2024\u5e749\u6708<\/option>\n                        <option value=\"\u5927\u57a32409\">\u5927\u57a3-2024\u5e749\u6708<\/option>\n                        <option value=\"\u5404\u52d9\u539f2409\">\u5404\u52d9\u539f-2024\u5e749\u6708<\/option>\n                        <option value=\"\u591a\u6cbb\u898b2409\">\u591a\u6cbb\u898b-2024\u5e749\u6708<\/option>\n                        <option value=\"\u7f8e\u6fc3\u52a0\u83022409\">\u7f8e\u6fc3\u52a0\u8302-2024\u5e749\u6708<\/option>\n                        <option value=\"\u4e0b\u54422409\">\u4e0b\u5442-2024\u5e749\u6708<\/option>\n                        <option value=\"\u90e1\u4e0a2409\">\u90e1\u4e0a-2024\u5e749\u6708<\/option>\n                        <option value=\"\u9ad8\u5c712409\">\u9ad8\u5c71-2024\u5e749\u6708<\/option>\n-->\n\n                        <option value=\"\u7f8e\u6fc3\u52a0\u8302\">\u5c90\u961c\u30ed\u30b2in\u7f8e\u6fc3\u52a0\u8302<\/option>\n                        <option value=\"\u990a\u8001\u30ed\u30b2\">\u990a\u8001\u753a<\/option>\n                        <option value=\"\u5c90\u961c\u5e02\">\u5c90\u961c\u5e02<\/option>\n                        <option value=\"\u5927\u57a3\uff12\">\u5c90\u961c\u30ed\u30b2in\u5927\u57a3@\u30a4\u30aa\u30f3<\/option>\n                        <option value=\"\u5927\u57a3\">\u5c90\u961c\u30ed\u30b2in\u5927\u57a3<\/option>\n                        <option value=\"\u591a\u6cbb\u898b\">\u5c90\u961c\u30ed\u30b2in\u591a\u6cbb\u898b<\/option>\n                        <option value=\"\u5404\u52d9\u539f\">\u5c90\u961c\u30ed\u30b2in\u5404\u52d9\u539f<\/option>\n                        <option value=\"\u4e0b\u5442\">\u5c90\u961c\u30ed\u30b2in\u4e0b\u5442\u6e29\u6cc9<\/option>\n                        <option value=\"\u90e1\u4e0a\">\u5c90\u961c\u30ed\u30b2in\u90e1\u4e0a<\/option>\n                        <option value=\"\u9ad8\u5c71\">\u5c90\u961c\u30ed\u30b2in\u9ad8\u5c71<\/option>\n                    <\/select>\n                <\/div>\n            <\/form>\n            \n            <form>\n                <input placeholder=\"\u30bc\u30c3\u30b1\u30f3\u756a\u53f7\u3067\u7d5e\u308a\u8fbc\u307f\" id = 'zekken_number_map'>\n                <button type=\"button\" id=\"map_button2\">click<\/button>\n            <\/form>\n        <\/div>\n        \n\t\t<input type='hidden' id='map_narrow_flag' value='class'>\n\t\t<div class=\"wrapper\">\n\t\t<div id=\"map\"><\/div>\n\t<\/div><\/div>\n    <p>\u3053\u306e\u30a2\u30d7\u30ea\u306f\u5c90\u961c\u770cDX\u88dc\u52a9\u91d1\u4e8b\u696d\u3067\u958b\u767a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n\n<script>\n\/\/ \u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306e\u5b9a\u7fa9\nconst URL_base = 'https:\/\/rogaining.sumasen.net\/gifuroge';\nconst URL = URL_base + '\/realtimeMonitor';\nconst URL2 = URL_base + '\/getRoute';\nconst URL3 = URL_base + '\/realtimeMonitor_zekken_narrow';\nconst URL4 = URL_base + '\/getStartPoint';\nconst interval = 1; \/\/ \u5206\u3067\u6307\u5b9a\nconst class_name = document.getElementById('map_select');\nconst zekken_number = document.getElementById('zekken_number_map');\nconst map_narrow_flag = document.getElementById('map_narrow_flag');\nconst event_select_map = document.getElementById('event_select_map');\nconst event_select_for_user_narrow = document.getElementById('event_select_for_user_narrow');\nconst R = Math.PI \/ 180;\n\nvar event_memory = \"\";\nvar polyline;\nvar map;\nvar tiles;\nvar marker = {};\nvar popUp_memory = {};\nvar flag_memory = {};\nvar url = \"\";\nvar allPolylines = [];\nvar allRoutesData = allRoutesData || {}; \/\/ \u3053\u308c\u306b\u3088\u308a allRoutesData \u304c\u672a\u5b9a\u7fa9\u306e\u5834\u5408\u306b\u7a7a\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u521d\u671f\u5316\u3055\u308c\u307e\u3059\nvar latestCreateTime = null; \/\/ \u6700\u65b0\u306e create_at \u6642\u523b\u3092\u8a18\u9332\u3059\u308b\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\nvar slider = document.getElementById(\"time-slider\");\nvar sliderTimeDisplay = document.getElementById(\"slider-time-display\");\nvar maxTimeDiffMinutes = 60; \/\/ \u6700\u5927\u8868\u793a\u6642\u9593\u5dee\uff08\u5206\uff09\nvar allMarkers = []; \/\/ \u5168\u3066\u306e\u30de\u30fc\u30ab\u30fc\u3092\u683c\u7d0d\u3059\u308b\u305f\u3081\u306e\u914d\u5217\n\n\/\/ \u521d\u671f\u5316\u3068\u8a2d\u5b9a\nfunction initializeMap() {\n    map = L.map('map', {\n        center: [35.39111, 136.72222],\n        zoom: 10,\n        doubleClickZoom: false\n    });\n\n    tiles = L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n        maxZoom: 19,\n        attribution: '&copy; <a href=\"http:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>'\n    }).addTo(map);\n}\n\nfunction setupEventListeners() {\n    document.getElementById('time-slider').addEventListener('input', function() {\n        var minutesAgo = this.value;\n        updateRoutesDisplay(minutesAgo);\n    });\n\n    document.getElementById('map_button').onclick = narrow_class;\n    document.getElementById('map_button2').onclick = narrow_zekken;\n\n    \/\/ \u30b7\u30fc\u30af\u30d0\u30fc\u306e\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u8a2d\u5b9a\u3092\u3053\u3053\u306b\u7d71\u5408\n    document.getElementById('time-slider').addEventListener('input', function() {\n        var minutesAgo = this.value;\n        updateRoutesDisplay(minutesAgo);\n    });\n}\n\nfunction loadAllRoutes() {\n    var eventCode = document.getElementById('event_select_map').value;\n    var classSelect = document.getElementById('map_select').value; \/\/ map_select \u304b\u3089 class_name \u306e\u9078\u629e\u3092\u53d6\u5f97\n    var urlAllRoutes = URL_base + \"\/getAllRoutes?event_code=\" + eventCode;\n    \n    \/\/ classSelect \u304c \"\u5168\u3066\" \u4ee5\u5916\u306e\u5834\u5408\u3001URL \u306b class_name \u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u8ffd\u52a0\n    if (classSelect !== \"\u5168\u3066\") {\n        urlAllRoutes += \"&class_name=\" + encodeURIComponent(classSelect);\n    }\n    console.log(urlAllRoutes)\n    var request = new XMLHttpRequest();\n    request.open('GET', urlAllRoutes, true);\n    request.onload = function () {\n        var data = JSON.parse(this.response);\n        console.log(data);\n        if (data.status == \"ERROR\") {\n            alert('\u30eb\u30fc\u30c8\u60c5\u5831\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f');\n        } else {\n            var updatedDetail = {};\n            Object.keys(data.detail).forEach(function(zekken) {\n                var routeData = data.detail[zekken];\n                if (!routeData || routeData.length === 0) {\n                    return;\n                }\n\n                var newKey = routeData[0].team_name || zekken; \/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30ad\u30fc\u3092zekken\u306b\u8a2d\u5b9a\n                updatedDetail[newKey] = routeData;\n\n                var lastCreateTime = routeData[routeData.length - 1].create_at;\n                if (!latestCreateTime || parseDateTime(lastCreateTime) > parseDateTime(latestCreateTime)) {\n                    latestCreateTime = lastCreateTime;\n                }\n            });\n\n            allRoutesData = updatedDetail; \/\/ \u66f4\u65b0\u3055\u308c\u305fdetail\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067allRoutesData\u3092\u66f4\u65b0\n\n            document.getElementById('time-slider').max = 300;\n            document.getElementById('time-slider').value = 0;\n            updateRoutesDisplay(0); \/\/ \u30eb\u30fc\u30c8\u306e\u8868\u793a\u3092\u66f4\u65b0\n        }\n    };\n    request.send();\n}\n\n\n\n\/* \/\/ \u30e1\u30a4\u30f3\u306e\u95a2\u6570\nfunction loadAllRoutes() {\n    var urlAllRoutes = URL_base + \"\/getAllRoutes?event_code=\" + document.getElementById('event_select_map').value;\n    var request = new XMLHttpRequest();\n    request.open('GET', urlAllRoutes, true);\n    request.onload = function () {\n        var data = JSON.parse(this.response);\n        console.log(data)\n        if (data.status == \"ERROR\") {\n            alert('\u30eb\u30fc\u30c8\u60c5\u5831\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f');\n        } else {\n            Object.keys(data.detail).forEach(function(zekken) {\n                var routeData = data.detail[zekken];\n                if (!routeData || routeData.length === 0) {\n                    return;\n                }\n\n                routeData.sort(function(a, b) {\n                    return parseDateTime(a.create_at) - parseDateTime(b.create_at);\n                });\n                allRoutesData[zekken] = routeData;\n\n                \/\/ \u6700\u65b0\u306e create_at \u6642\u523b\u3092\u66f4\u65b0\n                var lastCreateTime = routeData[routeData.length - 1].create_at;\n                if (!latestCreateTime || parseDateTime(lastCreateTime) > parseDateTime(latestCreateTime)) {\n                    latestCreateTime = lastCreateTime;\n                }\n            });\n\n           \/\/ var maxMinutesAgo = calculateMaxMinutesAgo();\n            var maxMinutesAgo = 300;\n            document.getElementById('time-slider').max = maxMinutesAgo;\n            document.getElementById('time-slider').value = 0;\n            console.log(maxMinutesAgo)\n            updateRoutesDisplay(0);\n        }\n    };\n    request.send();\n} *\/\n\n\nfunction reload() {\n  var request = new XMLHttpRequest();\n  var showMarkers = false; \/\/ \u30ea\u30ed\u30fc\u30c9\u6642\u306b\u30de\u30fc\u30ab\u30fc\u3092\u8868\u793a\u3057\u306a\u3044\n\n  if (map_narrow_flag.value == \"class\") {\n    if (class_name.value == \"\u5168\u3066\") {\n      url = URL + '?event_code=' + event_select_map.value;\n    } else {\n      url = URL + '?event_code=' + event_select_map.value + \"&class=\" + class_name.value;\n      for (let key in marker) {\n        marker[key].remove();\n        delete marker[key];\n      }\n    };\n  } else {\n    url = URL3 + '?event_code=' + event_select_map.value + \"&zekken=\" + zekken_number.value;\n    console.log(url)\n    for (let key in marker) {\n      marker[key].remove();\n      delete marker[key];\n    }\n  };\n\n  \n\n  \n  request.open('GET', url, true);\n\n  request.onload = function () {\n    var data = JSON.parse(this.response);\n    showMarkers = true\n    if (showMarkers) { \/\/ \u3053\u306e\u6761\u4ef6\u306b\u3088\u308a\u3001showMarkers\u304ctrue\u306e\u5834\u5408\u306e\u307f\u30de\u30fc\u30ab\u30fc\u3092\u8868\u793a\n      data.forEach(function(element) {\n        popUp_memory[element.team_name] = \"\u30c1\u30fc\u30e0\u540d\uff1a\" + element.team_name + \"<br \/>\u30bc\u30c3\u30b1\u30f3\u756a\u53f7\uff1a\" + element.zekken_number + \"<br \/>\u901a\u904e\u30c1\u30a7\u30c3\u30af\u30dd\u30a4\u30f3\u30c8\u6570\uff1a\" + element.cp_count + \"<br \/>\u5408\u8a08\u5f97\u70b9\uff1a\" + element.point + \"<br \/>\u5185\u6e1b\u70b9\uff1a\" + element.late_point;\n        flag_memory[element.team_name] = element.agent_flag;\n        if (element.team_name in marker) {\n         console.log(\"ok\")\n          marker[element.team_name].setLatLng([element.latitude, element.longitude]);\n          marker[element.team_name].bindPopup(\"<p>\" + popUp_memory[element.team_name] + \"<\/p>\");\n          marker[element.team_name].on('dblclick', onMarkerdbClick);\n        } else {\n            console.log(\"not ok\")\n          marker[element.team_name] = L.marker([element.latitude, element.longitude]).addTo(map);\n          marker[element.team_name].bindPopup(\"<p>\" + popUp_memory[element.team_name] + \"<\/p>\");\n          marker[element.team_name].on('dblclick', onMarkerdbClick);\n        }\n      });\n    }\n\n   \/\/ marker[element.team_name].on('dblclick', onMarkerdbClick);\n  };\n\n  request.onerror = function() {\n  console.log(\"Request failed\");\n};\n\n  request.send();\n  \/\/ \u30ea\u30ed\u30fc\u30c9\u6642\u306b\u5168\u30e6\u30fc\u30b6\u30fc\u306e\u30eb\u30fc\u30c8\u3092\u8aad\u307f\u8fbc\u3080\n  loadAllRoutes();\n}\n\nfunction reload_for_user_narrow() {\n  var request = new XMLHttpRequest();\n  var showMarkers = false; \/\/ \u30ea\u30ed\u30fc\u30c9\u6642\u306b\u30de\u30fc\u30ab\u30fc\u3092\u8868\u793a\u3057\u306a\u3044\n  map_narrow_flag.value = 'user_narrow'\n  if (map_narrow_flag.value == \"class\") {\n    if (class_name.value == \"\u5168\u3066\") {\n      url = URL + '?event_code=' + event_select_for_user_narrow.value;\n    } else {\n      url = URL + '?event_code=' + event_select_for_user_narrow.value + \"&class=\" + class_name.value;\n      for (let key in marker) {\n        marker[key].remove();\n        delete marker[key];\n      }\n    };\n  } else {\n    url = URL3 + '?event_code=' + event_select_for_user_narrow.value + \"&zekken=\" + zekken_number.value;\n    console.log(url)\n    for (let key in marker) {\n      marker[key].remove();\n      delete marker[key];\n    }\n  };\n\n  \n\n  \n  request.open('GET', url, true);\n\n  request.onload = function () {\n    var data = JSON.parse(this.response);\n\n    \/\/ \u8d64\u8272\u306e\u30de\u30fc\u30ab\u30fc\u30a2\u30a4\u30b3\u30f3\u3092\u5b9a\u7fa9\n    var redIcon = new L.Icon({\n        iconUrl: 'https:\/\/raw.githubusercontent.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x-red.png',\n        shadowUrl: 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/0.7.7\/images\/marker-shadow.png',\n        iconSize: [25, 41], \/\/ \u30a2\u30a4\u30b3\u30f3\u306e\u30b5\u30a4\u30ba\n        iconAnchor: [12, 41], \/\/ \u30a2\u30a4\u30b3\u30f3\u306e\u30a2\u30f3\u30ab\u30fc\u30dd\u30a4\u30f3\u30c8\n        popupAnchor: [1, -34], \/\/ \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306e\u30a2\u30f3\u30ab\u30fc\u30dd\u30a4\u30f3\u30c8\n        shadowSize: [41, 41] \/\/ \u5f71\u306e\u30b5\u30a4\u30ba\n    });\n\n    showMarkers = true\n    if (showMarkers) { \/\/ \u3053\u306e\u6761\u4ef6\u306b\u3088\u308a\u3001showMarkers\u304ctrue\u306e\u5834\u5408\u306e\u307f\u30de\u30fc\u30ab\u30fc\u3092\u8868\u793a\n      data.forEach(function(element) {\n        popUp_memory[element.team_name] = \"\u30c1\u30fc\u30e0\u540d\uff1a\" + element.team_name + \"<br \/>\u30bc\u30c3\u30b1\u30f3\u756a\u53f7\uff1a\" + element.zekken_number + \"<br \/>\u901a\u904e\u30c1\u30a7\u30c3\u30af\u30dd\u30a4\u30f3\u30c8\u6570\uff1a\" + element.cp_count + \"<br \/>\u5408\u8a08\u5f97\u70b9\uff1a\" + element.point + \"<br \/>\u5185\u6e1b\u70b9\uff1a\" + element.late_point;\n        flag_memory[element.team_name] = element.agent_flag;\n        if (element.team_name in marker) {\n         console.log(\"ok\")\n          marker[element.team_name].setLatLng([element.latitude, element.longitude]);\n          marker[element.team_name].setIcon(redIcon); \/\/ \u30a2\u30a4\u30b3\u30f3\u3092\u8d64\u8272\u306b\u8a2d\u5b9a\n          marker[element.team_name].bindPopup(\"<p>\" + popUp_memory[element.team_name] + \"<\/p>\");\n          marker[element.team_name].on('dblclick', onMarkerdbClick);\n          marker[element.team_name].setZIndexOffset(1000); \/\/ \u30de\u30fc\u30ab\u30fc\u3092\u6700\u524d\u9762\u306b\u8868\u793a\n        } else {\n            console.log(\"not ok\")\n          marker[element.team_name] = L.marker([element.latitude, element.longitude]).addTo(map);\n          marker[element.team_name].bindPopup(\"<p>\" + popUp_memory[element.team_name] + \"<\/p>\");\n          marker[element.team_name].setIcon(redIcon); \/\/ \u30a2\u30a4\u30b3\u30f3\u3092\u8d64\u8272\u306b\u8a2d\u5b9a\n          marker[element.team_name].on('dblclick', onMarkerdbClick);\n          marker[element.team_name].setZIndexOffset(1000); \/\/ \u30de\u30fc\u30ab\u30fc\u3092\u6700\u524d\u9762\u306b\u8868\u793a\n        }\n      });\n    }\n\n   \/\/ marker[element.team_name].on('dblclick', onMarkerdbClick);\n  };\n\n  request.onerror = function() {\n  console.log(\"Request failed\");\n};\n\n  request.send();\n  \/\/ \u30ea\u30ed\u30fc\u30c9\u6642\u306b\u5168\u30e6\u30fc\u30b6\u30fc\u306e\u30eb\u30fc\u30c8\u3092\u8aad\u307f\u8fbc\u3080\n  loadAllRoutes();\n}\n\nfunction narrow_class() {\n\tif (polyline) {\n\t\tpolyline.remove()\n\t}\n\tmap_narrow_flag.value = 'class'\n\tcheckEventMemory()\n\treload_for_user_narrow()\n}\n\nfunction narrow_zekken() {\n\tif (polyline) {\n\t\tpolyline.remove()\n\t}\n\tmap_narrow_flag.value = 'zekken'\n\tcheckEventMemory()\n\treload_for_user_narrow()\n}\n\nfunction checkEventMemory() {\n    const event_select_for_user_narrow = document.getElementById('event_select_for_user_narrow');\n    console.log(event_select_for_user_narrow.value)\n\n\tif (event_select_for_user_narrow.value != event_memory) {\n\t\tvar request = new XMLHttpRequest();\n\n\t\turl = URL4 + '?event=' + event_select_for_user_narrow.value\n        console.log(url)\n\t \trequest.open('GET', url, true);\n\n\t\trequest.onload = function () {\n\t\t\tvar data = JSON.parse(this.response);\n\t\t\tvar record = data.record\n\t\t\tmap.flyTo([record.latitude, record.longitude], 12);\n\t\t\tevent_memory = event_select_for_user_narrow.value;\n\t\t}\n\n\t\trequest.send();\n\t}\n}\n\nfunction onMarkerdbClick(e) {\n    console.log(\"\u30c0\u30d6\u30eb\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u767a\u751f\");\n    if (polyline) {\n        polyline.remove();\n    }\n    console.log(\"\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306e\u5185\u5bb9:\", e.target.getPopup()._content);\n    team_name = e.target.getPopup()._content.match(\/\u30c1\u30fc\u30e0\u540d\uff1a(.*?)<br \\\/>\/)\n    \n    \/\/\u30a4\u30d9\u30f3\u30c8\u4e2d\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u6642\u306f\u990a\u8001\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3046\u307e\u304f\u3044\u304f\u3002\u305f\u3060\u5c90\u961c\u5e02\u306e\u30a2\u30cb\u30e1\u3092\u6d41\u3057\u306a\u304c\u3089\u30c0\u30d6\u30eb\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u5931\u6557\u3059\u308b\u3002\n    \/\/event_select_for_user_narrow\u306e\u5024\u304c\u990a\u8001\u306b\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u3066\u5909\u66f4\u3067\u304d\u306a\u3044\u305f\u3081\u3002\u30a4\u30d9\u30f3\u30c8\u5f8c\u4fee\u6b63\u3002\n    \/\/event_select_for_user_narrow\u306e\u521d\u671f\u5024\u3092\u7a7a\u306a\u3069\u306b\u3057\u3066\u3001\u5224\u5b9a\u3057\u3001event_select\u306e\u5024\u3092\u6301\u3063\u3066\u304f\u308b\u3088\u3046\u306b\u3059\u308b\u306a\u3069\u3002\n    \/\/\u305d\u308c\u304b\u30bc\u30c3\u30b1\u30f3\u756a\u53f7\u3067\u3001DB\u304b\u3089\u6301\u3063\u3066\u304f\u308b\u3068\u304b\uff1f\n\n    event_name = document.getElementById('event_select_for_user_narrow').value\n    console.log(event_name);\n    var request2 = new XMLHttpRequest();\n\n\turl2 = URL2 + \"?team=\" + team_name[1].replace('&','%26') + '&event_code=' + event_name\n    console.log(url2)\n\trequest2.open('GET', url2, true);\n\n\trequest2.onload = function () {\n\t\tvar data = JSON.parse(this.response);\n\t\tif (data.status == \"ERROR\") {\n\t\t\talert('\u30bc\u30c3\u30b1\u30f3\u756a\u53f7\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f')\n\t\t} else {\n\t\t\tvar latlngs = []\n\t\t\tvar time = []\n\t\t\tdata.detail.forEach(function(element) {\n\t\t\t\tlatlngs.push([element.latitude, element.longitude])\n\t\t\t\ttime.push(element.create_at)\n\t\t\t});\n\t\t}\n\t\tpolyline = L.polyline(latlngs, {color: 'blue'}).addTo(map);\n\n\t\t\/\/ distance\n\t\tall_distance = 0\n\t\tfor (let i = 1; i < latlngs.length; i++) {\n\t\t\tall_distance += distance(latlngs[i-1][0], latlngs[i-1][1], latlngs[i][0], latlngs[i][1]);\n\t\t}\n\t\t\/\/ time\n\t\tstart_time = new Date(time[0].replace(\/\\-\/, \"\/\").replace(\/\\-\/, \"\/\"));\n\t\tend_time_set = time.pop().replace(\/\\-\/, \"\/\").replace(\/\\-\/, \"\/\")\n\t\tend_time = new Date(end_time_set);\n\t\tgetTime = (end_time - start_time)\/60\/1000\n\n\t\t\/\/ speed\n\n\t\tspeed = all_distance \/ getTime\n\n\t\tif (flag_memory[team_name[1]] == \"no agent\") {\n\t\t\tvar popUp = popUp_memory[team_name[1]] + \"<br \/>\u8ddd\u96e2\uff1a\" + orgRound(all_distance,100) + \"km<br \/>\u6642\u9593\uff1a\" + orgRound(getTime,100) + \"\u5206<br \/>\u5e73\u5747\u901f\u5ea6\uff1a\" + orgRound(speed,100) + \"km\/min\"\n\t\t} else {\n\t\t\tvar popUp = popUp_memory[team_name[1]] + \"<br \/>\u8ddd\u96e2\uff1a\" + orgRound(all_distance,100) + \"km<br \/>\u6642\u9593\uff1a\uff08\u4ee3\u7406\u5165\u529b\u306e\u305f\u3081\u4e0d\u660e\uff09<br \/>\u5e73\u5747\u901f\u5ea6\uff1a\uff08\u4ee3\u7406\u5165\u529b\u306e\u305f\u3081\u7b97\u51fa\u51fa\u6765\u305a\uff09\"\n\t\t};\n\t\tmarker[team_name[1]].bindPopup(\"<p>\" + popUp + \"<\/p>\").openPopup();\n\t}\n\trequest2.send();\n\n}\n\nfunction clearPolylines() {\n    allPolylines.forEach(function(polyline) {\n        map.removeLayer(polyline); \/\/ \u30de\u30c3\u30d7\u304b\u3089\u30dd\u30ea\u30e9\u30a4\u30f3\u3092\u524a\u9664\n    });\n    allPolylines = []; \/\/ \u914d\u5217\u3092\u7a7a\u306b\u3059\u308b\n}\n\nfunction startSliderCountdown() {\n    var slider = document.getElementById(\"time-slider\");\n    var countdownInterval; \/\/ \u30ab\u30a6\u30f3\u30c8\u30c0\u30a6\u30f3\u7528\u306e\u5909\u6570\u3092\u30b0\u30ed\u30fc\u30d0\u30eb\u306b\u4fdd\u6301\n\n    function countdown() {\n        \/\/ \u65e2\u5b58\u306e\u30ab\u30a6\u30f3\u30c8\u30c0\u30a6\u30f3\u304c\u3042\u308c\u3070\u30af\u30ea\u30a2\n        if (countdownInterval) clearInterval(countdownInterval);\n\n        slider.value = 45; \/\/ \u30ab\u30a6\u30f3\u30c8\u30c0\u30a6\u30f3\u958b\u59cb\u5024\u3092\u8a2d\u5b9a\n        countdownInterval = setInterval(function() {\n            slider.value--;\n            updateRoutesDisplay(slider.value);\n\n            if (slider.value <= 0) {\n                clearInterval(countdownInterval); \/\/ \u30ab\u30a6\u30f3\u30c8\u30c0\u30a6\u30f3\u3092\u505c\u6b62\n                loadAllRoutes(); \/\/ \u30c7\u30fc\u30bf\u3092\u30ea\u30ed\u30fc\u30c9\n                setTimeout(countdown, 15000); \/\/ 15\u79d2\u5f8c\u306b\u30ab\u30a6\u30f3\u30c8\u30c0\u30a6\u30f3\u518d\u958b\n            }\n        }, 1000); \/\/ 1\u79d2\u3054\u3068\u306b\u66f4\u65b0\n    }\n\n    setTimeout(countdown, 15000); \/\/ \u521d\u56de\u306e\u30ab\u30a6\u30f3\u30c8\u30c0\u30a6\u30f3\u309215\u79d2\u5f8c\u306b\u958b\u59cb\n}\n\n\/\/ \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u95a2\u6570\n\/\/ \u6307\u5b9a\u3055\u308c\u305f\u6642\u9593\u5dee\u306b\u57fa\u3065\u3044\u3066\u30eb\u30fc\u30c8\u3092\u30de\u30c3\u30d7\u4e0a\u306b\u63cf\u753b\n\/* function updateRoutesDisplay(minutesAgo) {\n    console.log(minutesAgo)\n\t\/\/ \u5e74\u6708\u65e5\u306e\u60c5\u5831\uff08\u30a4\u30d9\u30f3\u30c8\u306e\u65e5\u4ed8\u3084\u73fe\u5728\u306e\u65e5\u4ed8\u306a\u3069\uff09\n\t\tvar year = 2024;\n\t\tvar month = 0; \/\/ JavaScript\u306e\u6708\u306f0\u304b\u3089\u59cb\u307e\u308b\u305f\u3081\u30012\u6708\u306f1\u3068\u306a\u308a\u307e\u3059\n\t\tvar day = 20;\n        var endDate = new Date(2024, 0, 20, 16, 0, 0); \/\/ 1\u670820\u65e5\u306e16:00\n\t\/\/ \u6700\u65b0\u306ecreate_at\u6642\u523b\u3092\u683c\u7d0d\u3059\u308b\u5909\u6570\u3092\u521d\u671f\u5316\u3057\u307e\u3059\n    var latestCreateTime = new Date(0); \/\/ \u975e\u5e38\u306b\u53e4\u3044\u65e5\u4ed8\u3067\u521d\u671f\u5316\n\n    var cutoffTime = new Date(endDate.getTime() - minutesAgo * 60000);\n\t\/\/ \u3055\u3089\u306b20\u5206\u9061\u3063\u305f\u6642\u523b\u3092\u8a08\u7b97\n    var startTime = new Date(cutoffTime.getTime() - 30 * 60000);\n\n\t\/\/ console.log(cutoffTime)\n    document.getElementById('time-display').textContent = minutesAgo;\n\n    Object.keys(allRoutesData).forEach(function(zekken) {\n        var routeData = allRoutesData[zekken];\n        if (!allPolylines[zekken]) {\n            allPolylines[zekken] = [];\n        }\n\n        \/\/ \u65e2\u5b58\u306e\u30dd\u30ea\u30e9\u30a4\u30f3\u3092\u30de\u30c3\u30d7\u304b\u3089\u524a\u9664\n        allPolylines[zekken].forEach(function(polyline) {\n            map.removeLayer(polyline);\n        });\n        allPolylines[zekken] = [];\n\n\t\tvar filteredData = routeData.filter(function(point) {\n            var pointTime = point.create_at.includes('-') ? \n                new Date(point.create_at) : \n                new Date(year, month, day, ...point.create_at.split(\":\").map(Number));\n\t\t\t\t\/\/ startTime \u4ee5\u964d\u3001cutoffTime \u4ee5\u524d\u306e\u30c7\u30fc\u30bf\u3092\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\n            return pointTime >= startTime && pointTime <= cutoffTime;\n        });\n\n        \/\/ \u6700\u65b0\u306e\u30b9\u30dd\u30c3\u30c8\u3092\u898b\u3064\u3051\u307e\u3059\n        if (filteredData.length > 0) {\n\t\t\tvar latestSpot = filteredData[filteredData.length - 1]; \/\/ \u6700\u65b0\u306e\u30b9\u30dd\u30c3\u30c8\n            updateMarker(zekken, latestSpot); \/\/ \u30de\u30fc\u30ab\u30fc\u3092\u66f4\u65b0\u307e\u305f\u306f\u4f5c\u6210\n\n            var latlngs = filteredData.map(function(element) {\n                return [element.latitude, element.longitude];\n            });\n\n\n            \/\/ \u30bc\u30c3\u30b1\u30f3\u756a\u53f7\u306b\u5bfe\u5fdc\u3059\u308b\u8272\u3092\u53d6\u5f97\n            var color = getColorForZekken(zekken);\n\n            \/\/ \u8272\u3092\u6307\u5b9a\u3057\u3066\u30dd\u30ea\u30e9\u30a4\u30f3\uff08\u30eb\u30fc\u30c8\uff09\u3092\u4f5c\u6210\u3057\u3001\u5730\u56f3\u306b\u8ffd\u52a0\n            var polyline = L.polyline(latlngs, { color: color }).addTo(map);\n            allPolylines[zekken].push(polyline);\n        } else {\n            \/\/ \u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u3055\u308c\u305f\u30c7\u30fc\u30bf\u304c\u306a\u3044\u5834\u5408\u3001\u65e2\u5b58\u306e\u30de\u30fc\u30ab\u30fc\u3092\u524a\u9664\n            removeMarker(zekken);\n        }\n    });\n    \/\/ console.log(allPolylines);\n} *\/\n\n\/\/\u5f53\u65e5\u7528\u307e\u305f\u306f\u8fd1\u3044\u65e5\u306e\u30c7\u30d0\u30c3\u30b0\u7528\n\/\/\/\u5f53\u65e5\u7528\nfunction updateRoutesDisplay(minutesAgo) {\n    console.log(minutesAgo);\n\n    \/\/ \u73fe\u5728\u306e\u65e5\u6642\u304b\u3089\u5e74\u3001\u6708\u3001\u65e5\u3092\u53d6\u5f97\n     var currentDate = new Date(); \/\/ UTC\u6642\u523b\u306b\u57fa\u3065\u3044\u305f\u73fe\u5728\u6642\u523b\n    var year = currentDate.getFullYear();\n    var month = currentDate.getMonth(); \/\/ JavaScript\u306e\u6708\u306f0\u304b\u3089\u59cb\u307e\u308b\u305f\u3081\u30011\u6708\u306f0\u3068\u306a\u308a\u307e\u3059\n    var day = currentDate.getDate();\n    var hours = currentDate.getHours();\n    var minutes = currentDate.getMinutes();\n    var seconds = currentDate.getSeconds();\n\n    \/\/ \u30a4\u30d9\u30f3\u30c8\u306e\u7d42\u4e86\u6642\u523b\u3092\u8a2d\u5b9a\uff08\u4f8b\uff1a16:00\u3092\u7d42\u4e86\u6642\u523b\u3068\u3059\u308b\uff09\n    \/\/var endDate = new Date(year, month, day, 16, 20, 0); \/\/ \u5f53\u65e5\u306e16:00\n    \/\/ \u6700\u65b0\u306ecreate_at\u6642\u523b\u3092\u683c\u7d0d\u3059\u308b\u5909\u6570\u3092\u521d\u671f\u5316\n    var latestCreateTime = new Date(0); \/\/ \u975e\u5e38\u306b\u53e4\u3044\u65e5\u4ed8\u3067\u521d\u671f\u5316\n\n    \/\/var cutoffTime = new Date(endDate.getTime() - minutesAgo * 60000);\n    var cutoffTime = new Date(year, month, day, hours, minutes - minutesAgo, seconds);\n    \/\/ \u3055\u3089\u306b20\u5206\u9061\u3063\u305f\u6642\u523b\u3092\u8a08\u7b97\n    var startTime = new Date(cutoffTime.getTime() - 20 * 60000);\n\n    document.getElementById('time-display').textContent = minutesAgo;\n\n    Object.keys(allRoutesData).forEach(function(zekken) {\n        var routeData = allRoutesData[zekken];\n        if (!allPolylines[zekken]) {\n            allPolylines[zekken] = [];\n        }\n\n        \/\/ \u65e2\u5b58\u306e\u30dd\u30ea\u30e9\u30a4\u30f3\u3092\u30de\u30c3\u30d7\u304b\u3089\u524a\u9664\n        allPolylines[zekken].forEach(function(polyline) {\n            map.removeLayer(polyline);\n        });\n        allPolylines[zekken] = [];\n\n        var filteredData = routeData.filter(function(point) {\n            var pointTime = point.create_at.includes('-') ? \n                new Date(point.create_at) : \n                new Date(year, month, day, ...point.create_at.split(\":\").map(Number));\n            \/\/ startTime \u4ee5\u964d\u3001cutoffTime \u4ee5\u524d\u306e\u30c7\u30fc\u30bf\u3092\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\n            return pointTime >= startTime && pointTime <= cutoffTime;\n        });\n\n        \/\/ \u6700\u65b0\u306e\u30b9\u30dd\u30c3\u30c8\u3092\u898b\u3064\u3051\u307e\u3059\n        if (filteredData.length > 0) {\n            var latestSpot = filteredData[filteredData.length - 1]; \/\/ \u6700\u65b0\u306e\u30b9\u30dd\u30c3\u30c8\n            updateMarker(zekken, latestSpot); \/\/ \u30de\u30fc\u30ab\u30fc\u3092\u66f4\u65b0\u307e\u305f\u306f\u4f5c\u6210\n\n            var latlngs = filteredData.map(function(element) {\n                return [element.latitude, element.longitude];\n            });\n\n            \/\/ \u30bc\u30c3\u30b1\u30f3\u756a\u53f7\u306b\u5bfe\u5fdc\u3059\u308b\u8272\u3092\u53d6\u5f97\n            var color = getColorForZekken(zekken);\n\n            \/\/ \u8272\u3092\u6307\u5b9a\u3057\u3066\u30dd\u30ea\u30e9\u30a4\u30f3\uff08\u30eb\u30fc\u30c8\uff09\u3092\u4f5c\u6210\u3057\u3001\u5730\u56f3\u306b\u8ffd\u52a0\n            var polyline = L.polyline(latlngs, { color: color }).addTo(map);\n            allPolylines[zekken].push(polyline);\n        } else {\n            \/\/ \u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u3055\u308c\u305f\u30c7\u30fc\u30bf\u304c\u306a\u3044\u5834\u5408\u3001\u65e2\u5b58\u306e\u30de\u30fc\u30ab\u30fc\u3092\u524a\u9664\n            removeMarker(zekken);\n        }\n    });\n}\n\n\n\n\/\/ \u30de\u30fc\u30ab\u30fc\u3092\u66f4\u65b0\u307e\u305f\u306f\u4f5c\u6210\u3059\u308b\u95a2\u6570\nfunction updateMarker(zekken, spot) {\n    var popupContent = \"\u30c1\u30fc\u30e0\u540d\uff1a\" + zekken + \"<br \/>\u7def\u5ea6\uff1a\" + spot.latitude + \"<br \/>\u7d4c\u5ea6\uff1a\" + spot.longitude;\n    if (marker[zekken]) {\n        marker[zekken].setLatLng([spot.latitude, spot.longitude]).setPopupContent(popupContent);\n    } else {\n        marker[zekken] = L.marker([spot.latitude, spot.longitude]).addTo(map).bindPopup(popupContent);\n    }\n    \/\/ \u30c0\u30d6\u30eb\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u30de\u30fc\u30ab\u30fc\u306b\u8ffd\u52a0\n    marker[zekken].on('dblclick', onMarkerdbClick);\n}\n\n\/\/ \u65e2\u5b58\u306e\u30de\u30fc\u30ab\u30fc\u3092\u524a\u9664\u3059\u308b\u95a2\u6570\nfunction removeMarker(zekken) {\n    if (marker[zekken]) {\n        marker[zekken].remove();\n        delete marker[zekken];\n    }\n}\n\nfunction calculateTimeRange() {\n    var maxMinutesAgo = 300; \/\/ 300\u5206\u524d\u3092\u6700\u5927\u306e\u7bc4\u56f2\u3068\u3059\u308b\n    var slider = document.getElementById(\"time-slider\");\n    slider.min = 0; \/\/ \u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u6700\u5c0f\u5024\n    slider.max = maxMinutesAgo; \/\/ \u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u6700\u5927\u5024\u3092300\u5206\u524d\u306b\u8a2d\u5b9a\n    slider.value = slider.max; \/\/ \u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u5024\u3092\u6700\u5927\u5024\uff08\u300c0\u5206\u524d\u300d\u306b\u76f8\u5f53\uff09\u306b\u8a2d\u5b9a\n    console.log(0)\n    updateRoutesDisplay(0); \/\/ \u300c0\u5206\u524d\u300d\u306e\u72b6\u614b\u3067\u30eb\u30fc\u30c8\u3092\u66f4\u65b0\u3059\u308b\n}\n\n\nfunction parseDateTime(dateTimeStr) {\n    \/\/ \u4f8b\u3048\u3070\u3001\"2024-01-18 11:57:08\" \u3068 \"20:42:1\" \u306e\u3088\u3046\u306a\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3092\u51e6\u7406\n    if (dateTimeStr.includes('-')) {\n        \/\/ \"2024-01-18 11:57:08\" \u306e\u3088\u3046\u306a\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\n        return new Date(dateTimeStr.replace(' ', 'T') + 'Z'); \/\/ ISO 8601\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u306b\u5909\u63db\n    } else {\n        \/\/ \"20:42:1\" \u306e\u3088\u3046\u306a\u6642\u523b\u3060\u3051\u306e\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\n        \/\/ \u4eca\u65e5\u306e\u65e5\u4ed8\u306b\u6642\u523b\u3092\u8ffd\u52a0\u3059\u308b\u306a\u3069\u3001\u9069\u5b9c\u51e6\u7406\u3092\u884c\u3046\n        let today = new Date().toISOString().slice(0, 10); \/\/ YYYY-MM-DD\n        return new Date(today + 'T' + dateTimeStr + 'Z');\n    }\n}\n\n\/\/ \u7def\u5ea6\u7d4c\u5ea6\u304b\u3089\u8ddd\u96e2\u3092\u6c42\u3081\u308b\u95a2\u6570\n\/\/ \u53c2\u8003\uff1ahttps:\/\/qiita.com\/kawanet\/items\/a2e111b17b8eb5ac859a\nfunction distance(lat1, lng1, lat2, lng2) {\n  lat1 *= R;\n  lng1 *= R;\n  lat2 *= R;\n  lng2 *= R;\n  return 6371 * Math.acos(Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) + Math.sin(lat1) * Math.sin(lat2));\n}\n\n\/\/ \u5c0f\u6570\u70b9\u4ee5\u4e0b\u3092\u56db\u6368\u4e94\u5165\u3059\u308b\u95a2\u6570\u3000\u6841\u6570\u306f10,100\u306e\u3088\u3046\u306a\u5f62\u3067\u6307\u5b9a\u3059\u308b\uff08\u5c0f\u6570\u70b9\u7b2c\u4e00\u4f4d\u306a\u308910,\u5c0f\u6570\u70b9\u7b2c\u4e8c\u4f4d\u306a\u3089100\uff09\n\/\/ \u53c2\u8003\uff1ahttps:\/\/qiita.com\/nagito25\/items\/0293bc317067d9e6c560 (\u305f\u3060\u3057\u8aac\u660e\u304c\u9593\u9055\u3048\u3066\u3044\u308b)\nfunction orgRound(value, base) {\n  return Math.round(value * base) \/ base;\n}\n\nfunction showTimeInJapan() {\n            \/\/ \u73fe\u5728\u306e\u65e5\u6642\u3092UTC\u3068\u3057\u3066\u53d6\u5f97\n            const now = new Date();\n            \n            \/\/ \u65e5\u672c\u306e\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u30aa\u30d5\u30bb\u30c3\u30c8\u3092\u53d6\u5f97\uff08UTC+9\u3068\u4eee\u5b9a\uff09\n            const japanTimezoneOffset = 9 * 60 * 60 * 1000; \/\/ 9\u6642\u9593\u3092\u30df\u30ea\u79d2\u306b\u5909\u63db\n            \n            \/\/ UTC\u304b\u3089\u65e5\u672c\u306e\u6642\u5dee\u3092\u52a0\u7b97\u3057\u3066\u3001\u65e5\u672c\u306e\u6642\u523b\u3092\u53d6\u5f97\n            const timeInJapan = new Date(now.getTime() + japanTimezoneOffset);\n            \n            \/\/ \u6642\u9593\u3001\u5206\u3001\u79d2\u3092\u53d6\u5f97\n            const hours = timeInJapan.getUTCHours();\n            const minutes = timeInJapan.getUTCMinutes();\n            const seconds = timeInJapan.getUTCSeconds();\n            \n            \/\/ \u6642\u523b\u3092 '\u6642:\u5206:\u79d2' \u306e\u5f62\u5f0f\u3067\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\n            const formattedTime = [\n                hours.toString().padStart(2, '0'),\n                minutes.toString().padStart(2, '0'),\n                seconds.toString().padStart(2, '0')\n            ].join(':');\n            \n            \/\/ HTML\u5185\u306e\u6307\u5b9a\u3055\u308c\u305f\u8981\u7d20\u306b\u6642\u523b\u3092\u8a2d\u5b9a\n            document.getElementById('japanTime').textContent = formattedTime;\n        }\n\n        \/\/ \u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u6642\u30681\u79d2\u3054\u3068\u306b\u6642\u523b\u3092\u66f4\u65b0\n        window.onload = function() {\n            showTimeInJapan();\n            setInterval(showTimeInJapan, 1000); \/\/ 1000\u30df\u30ea\u79d2\uff081\u79d2\uff09\u3054\u3068\u306b\u66f4\u65b0\n        }\n    \n\n\/\/ \u8272\u306b\u95a2\u3059\u308b\u30b3\u30fc\u30c9\u3092\u8272\u7ba1\u7406\u95a2\u9023\u306e\u95a2\u6570\u3068\u3057\u3066\u6574\u7406\nfunction initializeColors() {\n    \/\/ 50\u8272\u306e\u8272\u76f8\u30ea\u30b9\u30c8\u3092\u751f\u6210\n    var colors = [];\n    for (var i = 0; i < 50; i++) {\n        var hue = (360 \/ 50) * i; \/\/ \u8272\u76f8\u3092\u8a08\u7b97\n        colors.push('hsl(' + hue + ', 100%, 50%)'); \/\/ \u5f69\u5ea6100%\u3001\u8f1d\u5ea650%\u3067\u8272\u3092\u8ffd\u52a0\n    }\n    var currentColorIndex = 0; \/\/ \u73fe\u5728\u306e\u8272\u306e\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\n\n    window.getNextColor = function() {\n        var color = colors[currentColorIndex]; \/\/ \u73fe\u5728\u306e\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u306e\u8272\u3092\u53d6\u5f97\n        currentColorIndex++; \/\/ \u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3092\u30a4\u30f3\u30af\u30ea\u30e1\u30f3\u30c8\n        if (currentColorIndex >= colors.length) {\n            currentColorIndex = 0; \/\/ \u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u304c\u914d\u5217\u306e\u9577\u3055\u4ee5\u4e0a\u306b\u306a\u3063\u305f\u30890\u306b\u30ea\u30bb\u30c3\u30c8\n        }\n        return color;\n    };\n\n    window.zekkenColors = {}; \/\/ \u30bc\u30c3\u30b1\u30f3\u756a\u53f7\u3054\u3068\u306e\u8272\u3092\u683c\u7d0d\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\n}\n\nfunction getColorForZekken(zekken) {\n    \/\/ \u3059\u3067\u306b\u3053\u306e\u30bc\u30c3\u30b1\u30f3\u756a\u53f7\u306b\u8272\u304c\u5272\u308a\u5f53\u3066\u3089\u308c\u3066\u3044\u308b\u5834\u5408\u306f\u305d\u308c\u3092\u4f7f\u7528\n    if (zekkenColors[zekken]) {\n        return zekkenColors[zekken];\n    }\n    \/\/ \u65b0\u3057\u3044\u8272\u3092\u5272\u308a\u5f53\u3066\n    var color = getNextColor();\n    zekkenColors[zekken] = color; \/\/ zekkenColors\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u8272\u3092\u8ffd\u52a0\n    return color;\n}\n\nfunction fetchUserLocations() {\n  const eventCode = document.getElementById('event_select_for_user_narrow').value;\n  const zekkenNumber = document.getElementById('zekken_number_map').value;\n\n  \/\/ API\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306eURL\u3092\u69cb\u7bc9\n  const url = URL_base + `\/fetchUserLocations?zekken_number=${zekkenNumber}&event_code=${eventCode}`;\n\n  \/\/ fetch\u3092\u4f7f\u7528\u3057\u3066\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\n  fetch(url)\n    .then(response => {\n      if (!response.ok) {\n        throw new Error('Network response was not ok');\n      }\n      return response.json();\n    })\n    .then(data => {\n      \/\/ \u5730\u56f3\u4e0a\u306b\u30de\u30fc\u30ab\u30fc\u3092\u914d\u7f6e\u3059\u308b\u51e6\u7406\n      console.log(data)\n      addMarkersToMap(data);\n    })\n    .catch(error => {\n      console.error('There has been a problem with your fetch operation:', error);\n    });\n}\n\n\/\/ \u5730\u56f3\u4e0a\u306b\u30de\u30fc\u30ab\u30fc\u3092\u914d\u7f6e\u3057\u3001\u65e2\u5b58\u306e\u30de\u30fc\u30ab\u30fc\u3092\u53d6\u308a\u9664\u304f\u95a2\u6570\nfunction addMarkersToMap(data) {\n  \/\/ \u307e\u305a\u3001\u65e2\u5b58\u306e\u30de\u30fc\u30ab\u30fc\u3092\u5730\u56f3\u304b\u3089\u5168\u3066\u524a\u9664\n  allMarkers.forEach(marker => {\n    map.removeLayer(marker);\n  });\n\n  \/\/ \u914d\u5217\u3092\u30af\u30ea\u30a2\n  allMarkers = [];\n\n  \/\/ \u65b0\u3057\u3044\u30c7\u30fc\u30bf\u3067\u30de\u30fc\u30ab\u30fc\u3092\u4f5c\u6210\n  data.forEach(location => {\n    const { latitude, longitude, cp_name: cpName, cp_number: cpNumber, create_at: createdAt } = location;\n    const marker = L.marker([latitude, longitude]).addTo(map);\n    \/\/ \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306b\u30c1\u30a7\u30c3\u30af\u30dd\u30a4\u30f3\u30c8\u756a\u53f7\u3001\u30c1\u30a7\u30c3\u30af\u30dd\u30a4\u30f3\u30c8\u540d\u3001\u7def\u5ea6\u3001\u7d4c\u5ea6\u3001\u4f5c\u6210\u65e5\u6642\u3092\u8868\u793a\n    marker.bindPopup(`<b>CP No: ${cpNumber}<\/b><br><b>CP Name: ${cpName}<\/b><br>Latitude: ${latitude}<br>Longitude: ${longitude}`);\n\n    \/\/ \u65b0\u3057\u3044\u30de\u30fc\u30ab\u30fc\u3092\u914d\u5217\u306b\u8ffd\u52a0\n    allMarkers.push(marker);\n  });\n}\n\n\n\n\n\ndocument.addEventListener('DOMContentLoaded', function() {\n    var defaultBtn = document.getElementById('defaultBehaviorButton');\n    var overrideBtn = document.getElementById('overrideBehaviorButton');\n    var mapButton = document.getElementById('map_button');\n\n    var zekken_number_in_input_area = document.getElementById('zekken_number_map');\n    zekken_number_in_input_area.addEventListener('keydown', function(event) {\n        if (event.key === 'Enter') {\n            event.preventDefault(); \/\/ \u30a8\u30f3\u30bf\u30fc\u30ad\u30fc\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u52d5\u4f5c\u3092\u9632\u6b62\n            \/\/ \u5fc5\u8981\u306a\u3089\u3053\u3053\u3067\u30ab\u30b9\u30bf\u30e0\u52d5\u4f5c\u3092\u5b9f\u884c\n            console.log('\u30a8\u30f3\u30bf\u30fc\u30ad\u30fc\u304c\u62bc\u3055\u308c\u307e\u3057\u305f\u304c\u3001\u30d5\u30a9\u30fc\u30e0\u306f\u9001\u4fe1\u3055\u308c\u307e\u305b\u3093\u3002');\n        }\n    });\n\n    initializeMap();\n    setupEventListeners();\n    \n    \/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u6319\u52d5\u3092\u8a2d\u5b9a\u3059\u308b\u30dc\u30bf\u30f3\u306e\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\n    document.getElementById('defaultBehaviorButton').addEventListener('click', function() {\n        document.querySelector('.wap').style.display = 'block'; \/\/ wap \u3092\u8868\u793a\n        document.querySelector('.wap2').style.display = 'none'; \/\/ wap2 \u3092\u975e\u8868\u793a\n        \n        \n        \/\/ \u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u30dc\u30bf\u30f3\u3092\u6d3b\u6027\u5316\u3057\u3001\u81ea\u8eab\u3092\u975e\u6d3b\u6027\u5316\n        document.getElementById('overrideBehaviorButton').disabled = false;\n        this.disabled = true;\n        overrideBtn.style.display = 'none';\n    });\n\n    \/\/ click \u30dc\u30bf\u30f3\uff08map_button\uff09\u306e\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\n    mapButton.addEventListener('click', function() {\n        \/\/ \u8a2d\u5b9a\u3092\u9069\u7528\u3057\u3066API\u3092\u547c\u3073\u51fa\u3059\n        initializeColors();\n        loadAllRoutes();\n        startSliderCountdown();\n        mapButton.style.display = 'none';\n    });\n\n    \/\/ \u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u306e\u6319\u52d5\u3092\u8a2d\u5b9a\u3059\u308b\u30dc\u30bf\u30f3\u306e\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\n    document.getElementById('overrideBehaviorButton').addEventListener('click', function() {\n        document.querySelector('.wap').style.display = 'none'; \/\/ wap \u3092\u975e\u8868\u793a\n        document.querySelector('.wap2').style.display = 'flex'; \/\/ wap2 \u3092\u8868\u793a\n        \n        \/\/ loadAllRoutes\u95a2\u6570\u3092\u65b0\u3057\u3044\u6319\u52d5\u306b\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\n        loadAllRoutes = function() {\n            console.log('\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u3055\u308c\u305f loadAllRoutes \u95a2\u6570\u304c\u5b9f\u884c\u3055\u308c\u307e\u3057\u305f');\n            \/\/ \u65b0\u3057\u3044\u51e6\u7406\u3092\u3053\u3053\u306b\u66f8\u304f\n            const eventSelect = document.getElementById('event_select_for_user_narrow').value;\n            const zekkenNumber = document.getElementById('zekken_number_map').value;\n\n            \/\/ \u53d6\u5f97\u3057\u305f\u5024\u3092\u4f7f\u7528\u3057\u3066\u4f55\u3089\u304b\u306e\u51e6\u7406\u3092\u5b9f\u884c\n            \/\/ \u4f8b\u3048\u3070\u3001\u3053\u308c\u3089\u306e\u5024\u3092\u4f7f\u3063\u3066API\u3092\u547c\u3073\u51fa\u3059\u306a\u3069\n            console.log('\u9078\u629e\u3055\u308c\u305f\u30a4\u30d9\u30f3\u30c8:', eventSelect);\n            console.log('\u5165\u529b\u3055\u308c\u305f\u30bc\u30c3\u30b1\u30f3\u756a\u53f7:', zekkenNumber);\n            fetchUserLocations(zekkenNumber, eventSelect)\n        };\n\n        \/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u30dc\u30bf\u30f3\u3092\u6d3b\u6027\u5316\u3057\u3001\u81ea\u8eab\u3092\u975e\u6d3b\u6027\u5316\n        document.getElementById('defaultBehaviorButton').disabled = false;\n        this.disabled = true;\n        defaultBtn.style.display = 'none';\n\n        \n    });\n});\n\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-71746e1\" data-id=\"71746e1\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8666dbc elementor-widget elementor-widget-html\" data-id=\"8666dbc\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n    <title>\u30e9\u30f3\u30ad\u30f3\u30b0<\/title>\n    <style>\n        .box2 { margin: 10px; padding: 10px; border: 1px solid #ccc; }\n        .best3 { margin: 5px 0; padding: 5px; }\n        .span2 { margin-left: 20px; }\n        .span3 { font-weight: bold; }\n        .span6 { display: inline-block; width: 30px; }\n        .black { background-color: #f0f0f0; padding: 10px; margin-bottom: 20px; }\n        .arrow { margin: 10px 0; }\n        .arrow2 { margin: 10px 0; }\n        .disqualified { color: #999; }\n        .status { \n            display: inline-block;\n            padding: 2px 6px;\n            border-radius: 3px;\n            font-size: 0.9em;\n            margin-left: 8px;\n        }\n        .status-retired {\n            background-color: #ffebee;\n            color: #c62828;\n        }\n        .status-finished {\n            background-color: #e8f5e9;\n            color: #2e7d32;\n        }\n        .status-running {\n            background-color: #e3f2fd;\n            color: #1565c0;\n        }\n        select {\n            padding: 8px;\n            margin: 5px 0;\n            min-width: 200px;\n        }\n        button {\n            padding: 8px 16px;\n            margin: 10px 0;\n            background-color: #4a90e2;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n        }\n        button:hover {\n            background-color: #357abd;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div id=\"ranking\">\n        <div class=\"black\">\n            <span class=\"span3\"><\/span>\n            <span style=\"font-size: 24px\">\u30e9\u30f3\u30ad\u30f3\u30b0<\/span>\n        <\/div>\n\n        <div class=\"arrow\">\n            <div>\u30a4\u30d9\u30f3\u30c8\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/div>\n            <select id=\"eventSelect\">\n                <option value=\"\">\u30a4\u30d9\u30f3\u30c8\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/option>\n            <\/select>\n        <\/div>\n\n        <div class=\"arrow2\">\n            <div>\u30af\u30e9\u30b9\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/div>\n            <select id=\"classSelect\" disabled>\n                <option value=\"\">\u30af\u30e9\u30b9\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/option>\n            <\/select>\n        <\/div>\n\n        <button id=\"toggleButton\" onclick=\"toggleView()\">TOP3\u8868\u793a<\/button>\n\n        <div id=\"normalRanking\">\n            <div id=\"teamList\"><\/div>\n        <\/div>\n\n        <div id=\"top3Ranking\" style=\"display: none;\">\n            <div id=\"top3List\"><\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        const API_BASE_URL = 'https:\/\/rogaining.sumasen.net';\n        let showTop3 = false;\n        \n        \/\/ \u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u6642\u306b\u30a4\u30d9\u30f3\u30c8\u4e00\u89a7\u3092\u53d6\u5f97\n        document.addEventListener('DOMContentLoaded', async () => {\n            await loadEvents();\n            setupEventListeners();\n        });\n\n        \/\/ \u65e5\u6642\u306e\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\n        function formatDateTime(dateStr) {\n            if (!dateStr) return '\u672a\u30b4\u30fc\u30eb';\n            const date = new Date(dateStr);\n            return date.toLocaleString('ja-JP', {\n                month: '2-digit',\n                day: '2-digit',\n                hour: '2-digit',\n                minute: '2-digit'\n            });\n        }\n\n        \/\/ \u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u306e\u8a2d\u5b9a\n        function setupEventListeners() {\n            document.getElementById('eventSelect').addEventListener('change', async function() {\n                const eventCode = this.value;\n                if (eventCode) {\n                    await loadClasses(eventCode);\n                    await updateRankings();\n                }\n            });\n\n            document.getElementById('classSelect').addEventListener('change', async function() {\n                await updateRankings();\n            });\n        }\n\n        \/\/ \u30a4\u30d9\u30f3\u30c8\u4e00\u89a7\u306e\u53d6\u5f97\u3068\u8868\u793a\n        async function loadEvents() {\n            try {\n                const response = await fetch(`${API_BASE_URL}\/api\/newevent2\/`, {\n                    method: 'GET',\n                    headers: {\n                        'Accept': 'application\/json',\n                        'Content-Type': 'application\/json',\n                        'X-Requested-With': 'XMLHttpRequest',\n                    },\n                    mode: 'cors'\n                });\n                console.info('event=',response);\n                const events = await response.json();\n                const select = document.getElementById('eventSelect');\n                \n                events.filter(event => event.public).forEach(event => {\n                    const option = document.createElement('option');\n                    option.value = event.event_name;\n                    option.textContent = event.event_name;\n                    select.appendChild(option);\n                });\n            } catch (error) {\n                console.error('\u30a4\u30d9\u30f3\u30c8\u4e00\u89a7\u306e\u53d6\u5f97\u306b\u5931\u6557:', error);\n            }\n        }\n\n        \/\/ \u30af\u30e9\u30b9\u4e00\u89a7\u306e\u53d6\u5f97\u3068\u8868\u793a\n        async function loadClasses(eventCode) {\n            try {\n                \/*\n                const response = await fetch(`${API_BASE_URL}\/api\/categories\/${eventCode}\/`, {\n                    method: 'GET',\n                    headers: {\n                        'Accept': 'application\/json',\n                        'Content-Type': 'application\/json',\n                        'X-Requested-With': 'XMLHttpRequest',\n                    },\n                    mode: 'cors'\n                });\n                *\/\n                const response = await fetch(`${API_BASE_URL}\/api\/categories\/`, {\n                    method: 'GET',\n                    headers: {\n                        'Accept': 'application\/json',\n                        'Content-Type': 'application\/json',\n                        'X-Requested-With': 'XMLHttpRequest',\n                    },\n                    mode: 'cors'\n                });                const classes = await response.json();\n                const select = document.getElementById('classSelect');\n                \n                select.innerHTML = '<option value=\"\">\u30af\u30e9\u30b9\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/option>';\n                select.disabled = false;\n\n                classes.forEach(cls => {\n                    const option = document.createElement('option');\n                    option.value = cls.category_name;\n                    option.textContent = cls.category_name;\n                    select.appendChild(option);\n                });\n            } catch (error) {\n                console.error('\u30af\u30e9\u30b9\u4e00\u89a7\u306e\u53d6\u5f97\u306b\u5931\u6557:', error);\n            }\n        }\n\n        \/\/ \u30e9\u30f3\u30ad\u30f3\u30b0\u306e\u66f4\u65b0\n        async function updateRankings() {\n            const eventCode = document.getElementById('eventSelect').value;\n            if (!eventCode) return;\n\n            try {\n                if (showTop3) {\n                    await loadTop3Rankings(eventCode);\n                } else {\n                    const classCode = document.getElementById('classSelect').value;\n                    if (classCode) {\n                        await loadClassRankings(eventCode, classCode);\n                    }\n                }\n            } catch (error) {\n                console.error('\u30e9\u30f3\u30ad\u30f3\u30b0\u306e\u53d6\u5f97\u306b\u5931\u6557:', error);\n            }\n        }\n\n        \/\/ \u30af\u30e9\u30b9\u5225\u30e9\u30f3\u30ad\u30f3\u30b0\u306e\u8868\u793a\n        async function loadClassRankings(eventCode, classCode) {\n            const response = await fetch(`${API_BASE_URL}\/api\/rankings\/${eventCode}\/${classCode}\/`, {\n                method: 'GET',\n                headers: {\n                    'Accept': 'application\/json',\n                    'Content-Type': 'application\/json',\n                    'X-Requested-With': 'XMLHttpRequest',\n                },\n                mode: 'cors'\n            });\n            const rankingData = await response.json();\n            displayNormalRankings(rankingData);\n        }\n\n        \/\/ TOP3\u30e9\u30f3\u30ad\u30f3\u30b0\u306e\u8868\u793a\n        async function loadTop3Rankings(eventCode) {\n            const response = await fetch(`${API_BASE_URL}\/api\/rankings\/top3\/${eventCode}\/`, {\n                method: 'GET',\n                headers: {\n                    'Accept': 'application\/json',\n                    'Content-Type': 'application\/json',\n                    'X-Requested-With': 'XMLHttpRequest',\n                },\n                mode: 'cors'\n            });\n            const rankingData = await response.json();\n            displayTop3Rankings(rankingData);\n        }\n\n        \/\/ \u901a\u5e38\u30e9\u30f3\u30ad\u30f3\u30b0\u306e\u8868\u793a\u51e6\u7406\n        function displayNormalRankings(rankingData) {\n            const container = document.getElementById('teamList');\n            container.innerHTML = '';\n\n            \/\/ \u6709\u52b9\u306a\u30e9\u30f3\u30ad\u30f3\u30b0\u306e\u8868\u793a\n            rankingData.rankings.forEach((team, index) => {\n                const div = document.createElement('div');\n                div.className = 'best';\n                const statusClass = team.status === '\u68c4\u6a29' ? 'status-retired' : \n                                  team.status === '\u30b4\u30fc\u30eb' ? 'status-finished' : 'status-running';\n                div.innerHTML = `\n                    ${index + 1}. ${team.team_name} (${team.zekken_number})\n                    <span class=\"span2\">\u5408\u8a08\u5f97\u70b9:${team.final_point}<\/span>\n                    <span class=\"span2\">\u7372\u5f97\u30dd\u30a4\u30f3\u30c8:${team.point}<\/span>\n                    <span class=\"span2\">\u9045\u523b\u6e1b\u70b9: ${team.late_point}<\/span>\n                    <span class=\"span2\">\u6700\u7d42\u66f4\u65b0: ${formatDateTime(team.last_checkin)}<\/span>\n                    <span class=\"status ${statusClass}\">(${team.status})<\/span>\n                `;\n                container.appendChild(div);\n            });\n\n            \/\/ \u5931\u683c\u30c1\u30fc\u30e0\u306e\u8868\u793a\n            if (rankingData.disqualified && rankingData.disqualified.length > 0) {\n                const disqHeader = document.createElement('div');\n                disqHeader.className = 'disqualified-header';\n                disqHeader.innerHTML = '<h3>\u5931\u683c\u30c1\u30fc\u30e0<\/h3>';\n                container.appendChild(disqHeader);\n\n                rankingData.disqualified.forEach(team => {\n                    const div = document.createElement('div');\n                    div.className = 'best disqualified';\n                    const statusClass = team.status === '\u68c4\u6a29' ? 'status-retired' : \n                                      team.status === '\u30b4\u30fc\u30eb' ? 'status-finished' : 'status-running';\n                    div.innerHTML = `\n                        ${team.team_name} (${team.zekken_number})\n                        <span class=\"span2\">\u7372\u5f97\u30dd\u30a4\u30f3\u30c8:${team.point}<\/span>\n                        <span class=\"span2\">\u7406\u7531: ${team.reason}<\/span>\n                        <span class=\"span2\">\u6700\u7d42\u66f4\u65b0: ${formatDateTime(team.last_checkin)}<\/span>\n                        <span class=\"status ${statusClass}\">(${team.status})<\/span>\n                    `;\n                    container.appendChild(div);\n                });\n            }\n        }\n\n        \/\/ TOP3\u30e9\u30f3\u30ad\u30f3\u30b0\u306e\u8868\u793a\u51e6\u7406\n        function displayTop3Rankings(rankingData) {\n            const container = document.getElementById('top3List');\n            container.innerHTML = '';\n\n            Object.entries(rankingData).forEach(([category, data]) => {\n                const categoryDiv = document.createElement('div');\n                categoryDiv.className = 'box2';\n                \n                const categoryHeader = document.createElement('h3');\n                categoryHeader.textContent = category;\n                categoryDiv.appendChild(categoryHeader);\n\n                \/\/ \u6709\u52b9\u306a\u30e9\u30f3\u30ad\u30f3\u30b0\u306e\u8868\u793a\n                data.rankings.forEach((team, index) => {\n                    const teamDiv = document.createElement('div');\n                    teamDiv.className = 'best3';\n                    const statusClass = team.status === '\u68c4\u6a29' ? 'status-retired' : \n                                      team.status === '\u30b4\u30fc\u30eb' ? 'status-finished' : 'status-running';\n                    teamDiv.innerHTML = `\n                        <span class=\"span6\">${index + 1}<\/span>\n                        ${team.team_name} (${team.zekken_number}) \n                        <span class=\"status ${statusClass}\">(${team.status})<\/span><br>\n                        \u5408\u8a08\u5f97\u70b9:${team.final_point} (\u7372\u5f97:${team.point} \u6e1b\u70b9:${team.late_point})<br>\n                        \u6700\u7d42\u66f4\u65b0: ${formatDateTime(team.last_checkin)}\n                    `;\n                    categoryDiv.appendChild(teamDiv);\n                });\n\n                \/\/ \u5931\u683c\u30c1\u30fc\u30e0\u306e\u8868\u793a\n                if (data.disqualified && data.disqualified.length > 0) {\n                    const disqHeader = document.createElement('div');\n                    disqHeader.className = 'disqualified-header';\n                    disqHeader.innerHTML = '<h4>\u5931\u683c\u30c1\u30fc\u30e0<\/h4>';\n                    categoryDiv.appendChild(disqHeader);\n\n                    data.disqualified.forEach(team => {\n                        const teamDiv = document.createElement('div');\n                        teamDiv.className = 'best3 disqualified';\n                        const statusClass = team.status === '\u68c4\u6a29' ? 'status-retired' : \n                                          team.status === '\u30b4\u30fc\u30eb' ? 'status-finished' : 'status-running';\n                        teamDiv.innerHTML = `\n                            ${team.team_name} (${team.zekken_number})<br>\n                            \u7372\u5f97\u30dd\u30a4\u30f3\u30c8:${team.point} \u7406\u7531:${team.reason}<br>\n                            \u6700\u7d42\u66f4\u65b0: ${formatDateTime(team.last_checkin)}\n                            <span class=\"status ${statusClass}\">(${team.status})<\/span>\n                        `;\n                        categoryDiv.appendChild(teamDiv);\n                    });\n                }\n\n                container.appendChild(categoryDiv);\n            });\n        }\n\n        \/\/ \u8868\u793a\u30e2\u30fc\u30c9\u306e\u5207\u308a\u66ff\u3048\n        function toggleView() {\n            showTop3 = !showTop3;\n            const button = document.getElementById('toggleButton');\n            const normalRanking = document.getElementById('normalRanking');\n            const top3Ranking = document.getElementById('top3Ranking');\n            const classSelect = document.getElementById('classSelect');\n\n            button.textContent = showTop3 ? '\u30af\u30e9\u30b9\u5225\u30e9\u30f3\u30ad\u30f3\u30b0' : 'TOP3\u8868\u793a';\n            normalRanking.style.display = showTop3 ? 'none' : 'block';\n            top3Ranking.style.display = showTop3 ? 'block' : 'none';\n            classSelect.disabled = showTop3;\n\n            updateRankings();\n        }\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5987162 elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5987162\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9db43ab\" data-id=\"9db43ab\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5847be8 elementor-widget elementor-widget-text-editor\" data-id=\"5847be8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #ffffff;\">\u30de\u30fc\u30ab\u30fc\u3092\u30c0\u30d6\u30eb\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u8d70\u884c\u5c65\u6b74\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30e2\u30cb\u30bf\u30fc \u8aad\u307f\u8fbc\u307f\u4e2d&#8230; \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8868\u793a \u30e6\u30fc\u30b6\u30fc\u3054\u3068\u306e\u7d4c\u8def\u8868\u793a 0 \u5206\u524d \u30a4\u30d9\u30f3\u30c8\u4e00\u89a7\u63d6\u6590\u5ddd\u30fb\u6c60\u7530\u30fb\u5927\u91ce\u30fb\u795e\u6238\u95a2\u30b1\u539f-2024\u5e7412\u6708\u990a\u8001-2024\u5e7412\u6708\u5927\u57a3-2024\u5e7412\u6708\u5404\u52d9\u539f-202 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.gifuai.net\/?page_id=33377\" class=\"more-link\">\u7d9a\u304d\u3092\u8aad\u3080<span class=\"screen-reader-text\"> &#8220;\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30e2\u30cb\u30bf\u30fc&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-33377","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.gifuai.net\/index.php?rest_route=\/wp\/v2\/pages\/33377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gifuai.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.gifuai.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.gifuai.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gifuai.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=33377"}],"version-history":[{"count":1500,"href":"https:\/\/www.gifuai.net\/index.php?rest_route=\/wp\/v2\/pages\/33377\/revisions"}],"predecessor-version":[{"id":60935,"href":"https:\/\/www.gifuai.net\/index.php?rest_route=\/wp\/v2\/pages\/33377\/revisions\/60935"}],"wp:attachment":[{"href":"https:\/\/www.gifuai.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=33377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}