Merge pull request #63 from YuukiToriyama/release/v0.1.0-alpha.6

release/v0.1.0-alpha.6をmainブランチにマージ
YuukiToriyama · Dec 21, 2023 · 390fa82 · 390fa82
2 parents be10478 + db20dbc
commit 390fa82
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 17 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,13 +1,14 @@
 [package]
 name = "japanese-address-parser"
-version = "0.1.0-alpha.5"
+version = "0.1.0-alpha.6"
 edition = "2021"
 description = "日本の住所を都道府県/市区町村/町名/その他に分割するライブラリです"
 authors = ["Yuuki Toriyama <github@toriyama.dev>"]
 repository = "https://github.com/YuukiToriyama/japanese-address-parser"
 license = "MIT"
 exclude = [
     "public/*",
+    "tests/*",
     ".github/*",
 ]
 

diff --git a/public/index.html b/public/index.html
@@ -3,28 +3,40 @@
 <head>
     <meta charset="UTF-8">
     <title>Demo | japanese-address-parser</title>
+    <link rel="stylesheet" href="./style.css" type="text/css">
 </head>
 <body>
 <h2>YuukiToriyama/japanese-address-parser</h2>
 <p>Rust製の住所パーサーです</p>
-<table>
+
+<h3>住所を入力してください</h3>
+<div class="input">
+    <input class="address" id="input" type="text" placeholder="例) 東京都中央区日本橋一丁目1-1"/>
+    <button class="button" id="exec">パースを実行</button>
+</div>
+
+<h3>処理結果</h3>
+<table class="output">
     <thead>
     <tr>
-        <th>住所(文字列)</th>
-        <th></th>
-        <th>住所(JSON)</th>
+        <th>入力値</th>
+        <th>ステータス</th>
+        <th>address.prefecture</th>
+        <th>address.city</th>
+        <th>address.town</th>
+        <th>address.rest</th>
+        <th>JSON</th>
     </tr>
     </thead>
-    <tbody>
+    <tbody id="result">
     <tr>
-        <td>
-            <textarea id="input"></textarea>
-        </td>
-        <td>
-            <button id="exec">パース</button>
-        </td>
-        <td>
-            <textarea id="output"></textarea>
+        <td><p>東京都中央区日本橋一丁目1-1</p></td>
+        <td><p>成功</p></td>
+        <td><p>東京都</p></td>
+        <td><p>中央区</p></td>
+        <td><p>日本橋一丁目</p></td>
+        <td><p>1-1</p></td>
+        <td><code>{"address":{"prefecture":"東京都","city":"中央区","town":"日本橋一丁目","rest":"1-1"}}</code>
         </td>
     </tr>
     </tbody>

diff --git a/public/main.js b/public/main.js
@@ -1,15 +1,43 @@
 import init, {Parser} from "../pkg/japanese_address_parser.js"
 
 const inputTextArea = document.getElementById("input")
-const outputTextArea = document.getElementById("output")
 
 init().then(() => {
     document.getElementById("exec").addEventListener("click", () => {
         const input = inputTextArea.value
         alert("input: " + input)
         const parser = new Parser()
         parser.parse(input).then(result => {
-            outputTextArea.value = JSON.stringify(result, null, "\t")
+            document.getElementById("result").appendChild(
+                createRow(input, result)
+            )
         })
     })
-})
+})
+
+const createRow = (input, parseResult) => {
+    const tr = document.createElement("tr")
+    tr.appendChild(createCell(`<p>${input}</p>`))
+    if (parseResult.error === undefined) {
+        tr.appendChild(createCell("<p>成功</p>"))
+    } else {
+        tr.appendChild(createCell("<p>失敗</p>"))
+    }
+    tr.appendChild(createCell(`<p>${parseResult.address.prefecture}</p>`))
+    tr.appendChild(createCell(`<p>${parseResult.address.city}</p>`))
+    tr.appendChild(createCell(`<p>${parseResult.address.town}</p>`))
+    tr.appendChild(createCell(`<p>${parseResult.address.rest}</p>`))
+    tr.appendChild(createCell(`<code>${JSON.stringify(parseResult, null, null)}</code>`))
+    return tr
+}
+
+const createCell = (innerHtml) => {
+    const td = document.createElement("td")
+    td.innerHTML = innerHtml
+    td.addEventListener("click", () => {
+        navigator.clipboard.writeText(td.innerText).then(() => {
+            console.log(td.innerText)
+        })
+    })
+    return td
+}
diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,51 @@
+.input {
+    display: flex;
+}
+
+.address {
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding-left: 1em;
+    padding-right: 1em;
+    height: 48px;
+    flex: 1;
+    width: 300px;
+    max-width: 410px;
+    background: #eaedf2;
+    font-size: 18px;
+    margin-right: 10px;
+}
+
+.button {
+    border-radius: 6px;
+    height: 48px;
+    width: 180px;
+    display: block;
+    letter-spacing: 0.05em;
+    background: #5bc8ac;
+    color: #fff;
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.button:hover {
+    background: #82dcc4;
+}
+
+.output thead {
+    background: #5bc8ac;
+}
+
+.output thead tr th {
+    font-weight: bold;
+    padding: 12px 30px 12px 42px;
+}
+
+.output tbody tr td {
+    background: #eaedf2;
+    padding: 15px 10px;
+}
+
+.output tbody tr td:hover {
+    background: #8eeacd;
+}