urlクエリパラメータ導入

Mijadaj · Nov 12, 2024 · 5cbff29 · 5cbff29
1 parent 926121b
commit 5cbff29
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 55 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -8,24 +8,10 @@ body {
     padding: 0;
     font-size: medium;
 }
-.headerLink {
-    text-decoration: none;
-    color: inherit;
-}
-header {
-    display: flex;
-    flex-direction: row;
-}
+
 header img {
-    height: 100px;
-}
-header p {
-    display: flex;
-    margin-left: 30px;
-    align-items: center;
-}
-h1 {
-    font-size: 40px;
+    width: 800px;
+    max-width: 100%;
 }
 ul {
     padding-left: 20px;
@@ -44,7 +30,7 @@ li {
 .left {
     width: 50%;
     aspect-ratio: 4 / 3;
-    max-width: 600px;
+    max-width: 800px;
 }
 .right {
     width: 50%;
@@ -67,17 +53,32 @@ li {
 
 }
 
-.head, .head * {
-    font-size: 14px;
+/* すべてのブラウザで一貫したスタイルにするために基本リセット */
+button, select {
     height: 30px;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-color: white;
+    color: black;
+    padding: 0 10px;
+    border-width: thin;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
 }
-
-button {
-    padding: 0 5px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
+select {
+    padding-right: 30px;
 }
+button:hover, select:hover {
+    background-color: white;
+}
+
+button:focus, select:focus {
+    outline: none;
+    box-shadow: 0 0 3px #eee;
+}
+
 table {
     height: min-content;
     border-collapse: collapse;
@@ -91,6 +92,7 @@ th, td {
     padding: 8px 4px;
 }
 th {
+    min-width: 80px;
     background: #ddd;
 }
 .jochome, .jochome * {

diff --git a/conv.html b/conv.html
@@ -2,9 +2,12 @@
 <html lang="ja">
 <head>
     <meta charset="UTF-8">
-    <meta name="twitter:card" content="札幌の住所表記「北X条東Y丁目」を全球的に拡張．">
-    <meta name="twitter:title" content="大札幌座標系">
-    <meta name="twitter:image" content="https://mijadaj.github.io/Sapporo-Coordinate-System/images/hokkaido.webp">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="dajdarabotci">
+    <meta property="og:title" content="大札幌座標系">
+    <meta property="og:description" content="札幌の住所表記「北X条東Y丁目」を全球的に拡張．">
+    <meta property="og:image" content="https://mijadaj.github.io/Sapporo-Coordinate-System/images/hokkaido.webp">
+    <meta property="og:url" content="https://mijadaj.github.io/Sapporo-Coordinate-System/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>計算式 | 大札幌座標系</title>
     <link rel="icon" href="./images/hokkaido.webp"/>
@@ -13,12 +16,9 @@
     <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 </head>
 <body>
-    <a href="./index.html" class="headerLink">
-        <header>
-            <img src="./images/hokkaido.webp" alt="An image of Hokkaido" />
-            <h1>大札幌座標系</h1>
-            <p>札幌の住所表記「北X条東Y丁目」を全球的に拡張．</p>
-        </header>
+    <header>
+        <a href="./" class="headerLink"><img src="./images/header.webp" alt="大札幌座標系" /></a>
+    </header>
     </a>
     <p>以下、道内各市街地の碁盤の目を基準とした測地基準系を <b>HGS</b> (Hokkaido Geodetic Systems) と呼ぶことにする。</p>
     <h2>WGS から HGS への座標変換</h2>

diff --git a/images/header.webp b/images/header.webp
diff --git a/index.html b/index.html
@@ -2,9 +2,12 @@
 <html lang="ja">
 <head>
     <meta charset="UTF-8">
-    <meta name="twitter:card" content="札幌の住所表記「北X条東Y丁目」を全球的に拡張．">
-    <meta name="twitter:title" content="大札幌座標系">
-    <meta name="twitter:image" content="https://mijadaj.github.io/Sapporo-Coordinate-System/images/hokkaido.webp">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="dajdarabotci">
+    <meta property="og:title" content="大札幌座標系">
+    <meta property="og:description" content="札幌の住所表記「北X条東Y丁目」を全球的に拡張．">
+    <meta property="og:image" content="https://mijadaj.github.io/Sapporo-Coordinate-System/images/hokkaido.webp">
+    <meta property="og:url" content="https://mijadaj.github.io/Sapporo-Coordinate-System/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>大札幌座標系</title>
     <link rel="icon" href="./images/hokkaido.webp"/>
@@ -15,15 +18,11 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/decimal.js/10.4.0/decimal.js" integrity="sha512-lzGbD6l9+RZmoajvULoLUeWCIM920sQca6A9rlevEVPtFJgja67/JjKob+REWn2t4B8xdKMvmuA/CSab2K8LKw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
 <body>
-    <a href="./index.html" class="headerLink">
-        <header>
-            <img src="./images/hokkaido.webp" alt="An image of Hokkaido" />
-            <h1>大札幌座標系</h1>
-            <p>札幌の住所表記「北X条東Y丁目」を全球的に拡張．</p>
-        </header>
-    </a>
+    <header>
+        <a href="./" class="headerLink"><img src="./images/header.webp" alt="大札幌座標系" /></a>
+    </header>
     <select class="head" id="selectCoordinateSystem">
-        <option id="initialOption">--座標系を変更--</option>
+        <option id="initialOption" value="">--座標系を変更--</option>
     </select>
     <button class="head" onclick="window.open('./conv.html')">計算式</button>
     <p>大通を赤道、創成川（南6条～北11条間, 真北に対して西に10.6度の傾き）を本初子午線とする座標系をもとに地球上のあらゆる地点を札幌の住所表示に変換します。</p>
@@ -34,7 +33,7 @@ <h1>大札幌座標系</h1>
                 <caption>座標変換</caption>
                 <tr>
                     <th>緯度, 経度（10進法）</th>
-                    <td><input type="text" id="latLng"></td>
+                    <td><input type="text" id="latLng" placeholder="緯度, 経度"></td>
                 </tr>
             </tr>
             <th>条丁目</th>

diff --git a/js/main.js b/js/main.js
@@ -1,5 +1,3 @@
-// HGS (Hokkaido Geodetic Systems) cf. WGS (World Geodetic System)
-
 //座標系のリスト作成
 const selectSystemElement = document.getElementById("selectCoordinateSystem");
 Object.keys(hgsSet).forEach(key => {
@@ -11,14 +9,16 @@ Object.keys(hgsSet).forEach(key => {
 
 //初期表示
 let map, marker;
+let inputLatLng, latLngArray;
 createMap(coordinateSystem);
 createFormatJochome(coordinateSystem);
 updateJochome();
+setSystemFromURL();
 
 //座標系の更新
 selectSystemElement.addEventListener("change", function() {
     //変数の更新
-    coordinateSystem = selectSystemElement.value;
+    updateURL();
     originLat = radians(hgsSet[coordinateSystem].origin[0]);
     originLat1 = atan(sub(1, e2).mul(tan(originLat)))
     originLng = radians(hgsSet[coordinateSystem].origin[1]);
@@ -35,8 +35,47 @@ selectSystemElement.addEventListener("change", function() {
 // 緯度と経度の入力フィールドにイベントリスナーを追加
 document.getElementById("latLng").addEventListener("change", updateMarkerPosition);
 document.getElementById("latLng").addEventListener("change", updateJochome);
+document.getElementById("latLng").addEventListener("change", updateURL);
 document.getElementById("jochome").addEventListener("change", updateLatLngByJochome);
 
+//urlクエリパラメータを代入
+function setInputFromURL() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const lat = urlParams.get('lat');
+    const lng = urlParams.get('lng');
+    if (lat && lng) {
+        latLngArray = [lat, lng]
+        document.getElementById('latLng').value = `${lat}, ${lng}`;
+        document.getElementById("latLng").dispatchEvent(new Event("change"));
+    }
+};
+
+function setSystemFromURL() {
+    const urlParams = new URLSearchParams(window.location.search);
+    coordinateSystem = urlParams.get('coordinateSystem')
+    if (coordinateSystem) {
+        selectSystemElement.value = coordinateSystem
+    };
+};
+
+// inputLatLngの値が変わるたびにURLのクエリパラメータを更新
+function updateURL() {
+    updateLatLng()
+    const lat = latLngArray[0];
+    const lng = latLngArray[1];
+    const newUrl = new URL(window.location.href);
+    coordinateSystem = selectSystemElement.value
+    newUrl.searchParams.set('coordinateSystem', coordinateSystem);
+    if (lat && lng) {
+        newUrl.searchParams.set('lat', lat);
+        newUrl.searchParams.set('lng', lng);
+    } else {
+        newUrl.searchParams.delete('lat');
+        newUrl.searchParams.delete('lng');
+    }
+    history.pushState(null, '', newUrl);
+}
+
 //条丁目の形式を表示
 function createFormatJochome(selectedSystem) {
     deleteOptionJochome();
@@ -168,8 +207,7 @@ function updateJochome() {
 };
 
 function getJochome() {
-    const input = document.getElementById("latLng").value;
-    const latLngArray = input.split(",").map(item => parseFloat(item.trim()));
+    updateLatLng()
     const hgsCoordinates = wgs2hgs(latLngArray[0], latLngArray[1]); //see conv.js
     const blockPosition = getBlockPosition(hgsCoordinates);
     let jo, chome, eastWest, northSouth;
@@ -210,9 +248,7 @@ function getJochome() {
     return format;
 };
 function updateMarkerPosition() {
-    const input = document.getElementById("latLng").value;
-    const latLngArray = input.split(",").map(item => parseFloat(item.trim()));
-
+    updateLatLng()
     const newLat = parseFloat(latLngArray[0]);
     const newLng = parseFloat(latLngArray[1]);
 
@@ -252,3 +288,9 @@ function selectOptionByText(id, text) {
       option.selected = true; // 該当の<option>を選択状態に
     };
 };
+function updateLatLng() {
+    inputLatLng = document.getElementById("latLng").value;
+    latLngArray = inputLatLng.split(",").map(item => parseFloat(item.trim()))
+};
+
+setInputFromURL();