1<!DOCTYPE HTML> 2<html lang="ja"> 3<title>éåã®æ¼¢åãéãããï¼</title> 4 5<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> 6 <meta charset="UTF-8" name="viewport" 7 content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 8<!-- This site is hosted on Netlify. Anyone can build and deploy a site 9 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=7b865528-3c12-48be-84ca-1a37bf556834 10 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 12 <meta property="og:title" content="éåã®æ¼¢åãéãããï¼" /> 13 <meta property="og:type" content="website" /> 14 <meta property="og:image" content="https://fish-kanji.netlify.app/images/ogp.jpg" /> 15 <meta name="description" content="éåã®æ¼¢åã¯ããã¤ããããç¥ã£ã¦ãã¾ããï¼çãã¯ã678種é¡ããã¾ãããã®ã¢ããªã¯ãã®éåãéãã¦ã¿ããï¼ã¨ããããã¸ã§ã¯ãã§ãã" /> 16 <meta name="twitter:card" content="summary_large_image"> 17 <meta name="twitter:title" content="éåã®æ¼¢åãéãããï¼" /> 18 <meta name="twitter:image" content="https://fish-kanji.netlify.app/images/ogp.jpg" /> 19 <meta name="author" content="Saito Hitoshi"> 20 <meta name="keywords" content="éå,fish,Fish,é,æ¼¢å" /> 21 <link rel="apple-touch-icon" href="./images/apple-touch-icon.jpg"> 22 <link rel="icon" href="./images/apple-touch-icon.jpg"> 23 24 <!-- tailwind --> 25
25<script src="https://cdn.tailwindcss.com"></script>
25 26 27 <!-- Font Awesome --> 28 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" 29 integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" 30 crossorigin="anonymous" referrerpolicy="no-referrer" /> 31 32
32<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" 33 integrity="sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==" 34 crossorigin="anonymous" referrerpolicy="no-referrer"></script>
34 35 36
36<script src="https://d3js.org/d3.v5.min.js"></script>
36 37 38 <!-- jQuery --> 39
39<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" 40 crossorigin="anonymous"></script>
40 41 42 <style> 43 html { 44 width: 100%; 45 height: 100%; 46 margin: 0; 47 padding: 0; 48 } 49 50 body { 51 background: #ffffff; 52 width: 100%; 53 height: 100%; 54 padding: 0; 55 margin: 0; 56 font-family: "Meiryo", "Hiragino Maru Gothic Pro", sans-serif; 57 58 } 59 60 h1 { 61 color: #ffffff; 62 } 63 64 .header { 65 width: 100%; 66 position: fixed; 67 top: 0; 68 z-index: 5; 69 background: #19448e; 70 } 71 72 .header-area { 73 width: 100%; 74 max-width: 600px; 75 } 76 77 /*.last_update { 78 position: absolute; 79 color: #000000; 80 top: 75px; 81 right: 3px; 82 z-index: 1; 83 cursor: pointer; 84 background: rgba(255, 255, 255, .7); 85 }*/ 86 87 input { 88 color: rgba(0, 119, 184, 0.5); 89 font-size: 1.2em; 90 font-weight: bolder; 91 height: 45px; 92 width: 100%; 93 border-radius: .3em; 94 } 95 96 input::-webkit-input-placeholder { 97 color: rgba(0, 119, 184, 0.5); 98 } 99 100 #text { 101 padding-left: 15px; 102 } 103 104 .count-title, 105 #count { 106 color: #ffffff; 107 } 108 109 .main { 110 position: absolute; 111 margin: 80px 0 0 0; 112 padding: 0 0 70px 0; 113 z-index: 2; 114 width: 90%; 115 max-width: 600px; 116 left: 50%; 117 transform: translate(-50%); 118 } 119 120 .table { 121 position: relative; 122 padding: 10px; 123 margin: 10px 0 10px 0; 124 border: 1px solid #000000; 125 border-radius: .5em; 126 width: 100%; 127 } 128 129 #gpt { 130 color: red; 131 font-weight: bold; 132 } 133 134 #update { 135 right: 5px; 136 bottom: 5px; 137 position: absolute; 138 color: #9fa0a0; 139 } 140 141 #overlay { 142 width: 100%; 143 height: 120vh; 144 position: fixed; 145 top: 0; 146 left: 0; 147 background: rgba(0, 0, 0, .8); 148 display: none; 149 z-index: 10; 150 } 151 152 #beginner, 153 #manual, 154 #post, 155 #data-source, 156 #sns-share { 157 display: none; 158 height: 85%; 159 max-height: 800px; 160 left: 50%; 161 position: fixed; 162 top: 50%; 163 transform: translate(-50%, -50%); 164 width: 95%; 165 max-width: 600px; 166 z-index: 11; 167 background: #ffffff; 168 padding: .3em; 169 border-radius: .3em; 170 } 171 172 .overview { 173 height: 90%; 174 } 175 176 #closed-btn, 177 #closed-btn2, 178 #closed-btn3, 179 #closed-btn4, 180 #closed-btn5 { 181 position: absolute; 182 top: 5px; 183 right: 5px; 184 border-radius: 100%; 185 color: #000000; 186 border: 1px solid #000000; 187 cursor: pointer; 188 width: 30px; 189 height: 30px; 190 text-align: center; 191 } 192 193 #closed-btn:hover, 194 #closed-btn2:hover, 195 #closed-btn3:hover, 196 #closed-btn4:hover, 197 #closed-btn5:hover { 198 background: rgba(0, 0, 0, .5); 199 color: #ffffff; 200 border: 1px solid #ffffff; 201 } 202 203 #manual_h3 { 204 border-bottom: 3px dotted #a0d8ef; 205 padding-bottom: 3px; 206 } 207 208 .beginner-btn, 209 .manual-btn { 210 cursor: pointer; 211 } 212 213 .footer { 214 width: 100%; 215 position: fixed; 216 bottom: 0; 217 z-index: 5; 218 background: #19448e; 219 color: #ffffff; 220 } 221 222 .footer a { 223 border-bottom: 1px dotted #ffffff; 224 } 225 226 .grid a { 227 border-bottom: none; 228 } 229 230 .sns-fb { 231 position: fixed; 232 left: 3px; 233 bottom: 64px; 234 z-index: 5; 235 } 236 237 .item_title { 238 color: #19448e; 239 font-weight: bolder; 240 } 241 242 .pagetop { 243 height: 40px; 244 width: 40px; 245 position: fixed; 246 right: 4px; 247 bottom: 64px; 248 background: rgba(252, 186, 3, .8); 249 border-radius: 50%; 250 display: flex; 251 justify-content: center; 252 align-items: center; 253 z-index: 5; 254 cursor: pointer; 255 } 256 257 .pagetop_arrow { 258 height: 10px; 259 width: 10px; 260 border-top: 3px solid #ffffff; 261 border-right: 3px solid #ffffff; 262 transform: translateY(20%) rotate(-45deg); 263 } 264 265 .area { 266 width: 100%; 267 height: 100vh; 268 position: fixed; 269 z-index: 0; 270 271 } 272 273 .circles { 274 position: absolute; 275 top: 0; 276 left: 0; 277 width: 100%; 278 height: 100%; 279 overflow: hidden; 280 } 281 282 .circles li { 283 position: absolute; 284 display: block; 285 list-style: none;
286 width: 20px; 287 height: 20px; 288 background: rgba(44, 169, 225, .8); 289 animation: animate 25s linear infinite; 290 bottom: -150px; 291 292 } 293 294 .circles li:nth-child(1) { 295 left: 25%; 296 width: 80px; 297 height: 80px; 298 animation-delay: 0s; 299 } 300 301 302 .circles li:nth-child(2) { 303 left: 10%; 304 width: 20px; 305 height: 20px; 306 animation-delay: 2s; 307 animation-duration: 12s; 308 } 309 310 .circles li:nth-child(3) { 311 left: 70%; 312 width: 20px; 313 height: 20px; 314 animation-delay: 4s; 315 } 316 317 .circles li:nth-child(4) { 318 left: 40%; 319 width: 60px; 320 height: 60px; 321 animation-delay: 0s; 322 animation-duration: 18s; 323 } 324 325 .circles li:nth-child(5) { 326 left: 65%; 327 width: 20px; 328 height: 20px; 329 animation-delay: 0s; 330 } 331 332 .circles li:nth-child(6) { 333 left: 75%; 334 width: 110px; 335 height: 110px; 336 animation-delay: 3s; 337 } 338 339 .circles li:nth-child(7) { 340 left: 35%; 341 width: 150px; 342 height: 150px; 343 animation-delay: 7s; 344 } 345 346 .circles li:nth-child(8) { 347 left: 50%; 348 width: 25px; 349 height: 25px; 350 animation-delay: 15s; 351 animation-duration: 45s; 352 } 353 354 .circles li:nth-child(9) { 355 left: 20%; 356 width: 15px; 357 height: 15px; 358 animation-delay: 2s; 359 animation-duration: 35s; 360 } 361 362 .circles li:nth-child(10) { 363 left: 85%; 364 width: 150px; 365 height: 150px; 366 animation-delay: 0s; 367 animation-duration: 11s; 368 } 369 370 @keyframes animate { 371 372 0% { 373 transform: translateY(0) rotate(0deg); 374 opacity: 1; 375 border-radius: 0; 376 } 377 378 100% { 379 transform: translateY(-1000px) rotate(720deg); 380 opacity: 0; 381 border-radius: 50%; 382 } 383 384 } 385 </style> 386 387 <link rel="manifest" href="./manifest.json"> 388
388<script> 389 if ('serviceWorker' in navigator) { 390 navigator.serviceWorker.register('./service-worker.js').then(function () { 391 console.log('Service Worker Registered'); 392 }); 393 } 394 </script>
394 395 396</head> 397 398<body> 399 400 <div class="header p-3"> 401 <center> 402 <div class="flex flex-row items-center header-area"> 403 <div class="basis-3/5"><input type="text" name="text1" id="text" size="15" autocomplete="off" autofocus 404 placeholder="Search" /></div> 405 <div class="basis-2/5 count-title">ç¾å¨ã®æ²è¼æ°<br><span id="count"></span></div> 406 </div> 407 </center> 408 <!--<div class="last_update text-xs px-1"><time datetime="2024-06-03" itemprop="modified">æçµæ´æ°æ¥ï¼2024.06.03</time> ver 409 1.1</div>--> 410 </div> 411 412 <div class="area"> 413 <ul class="circles"> 414 <li></li> 415 <li></li> 416 <li></li> 417 <li></li> 418 <li></li> 419 <li></li> 420 <li></li> 421 <li></li> 422 <li></li> 423 <li></li> 424 </ul> 425 </div> 426 427 <div class="main"> 428 429 <div id="result"></div> 430 431 </div> 432 433 <!-- ãããã¢ããç¨ã®overlay --> 434 <div id="overlay"></div> 435 436 <!-- ä½¿ãæ¹ --> 437 <div id="beginner"><span id="closed-btn">Ã</span> 438 <h3 class="text-2xl text-center"><i class="fa-solid fa-user"></i> ã¯ããã«</h3> 439 440 <div class="overflow-y-scroll overview mt-5 mx-2"> 441 <img src="./images/fish.jpg" width="100%" alt="éã®åç"> 442 443 <h3 class="text-2xl mt-7" id="manual_h3">éåã®æ¼¢åãéãããï¼</h3> 444 445 <p class="mt-5">éåã®æ¼¢åã¯ããã¤ãããããåç¥ã§ããï¼</p> 446 <p class="mt-5">çãã¯ã678種é¡ããã¾ãã</p> 447 <p class="mt-5">å ¨ã¦ã®éåã®æ¼¢åãæ¸ããæ¹ã¯ãããã£ãããã¾ãã§ããããï¼</p> 448 <p class="mt-5">ãªããªãé£ããã¨æãã¾ãã</p> 449 <p class="mt-5">çæAIã«ãèãã¦ã¿ã¾ããã</p> 450 <p class="mt-5">AIã«ããã240種é¡ã¨ã400種é¡ä»¥ä¸ã¨ããæ§ã ãªçããè¿ã£ã¦ãã¾ããã</p> 451 <p class="mt-5">ã§ãã678種é¡ã¨æ£ç¢ºã«çããAIã¯åå¨ãã¾ããã§ããã</p> 452 453 <h3 class="text-2xl mt-7" id="manual_h3">AIãç¥ããªãï¼ã§ã¯ãã©ãããï¼</h3> 454 455 <p class="mt-5">ãããããæ¬é¡ã§ãã</p> 456 <p class="mt-5">AIãçããæã£ã¦ããªã課é¡ã¨ãªãã¾ããã</p> 457 <p class="mt-5">ããªããªããã©ããã£ã¦678種é¡éãã¾ããï¼</p> 458 <p class="mt-5">AIã¸ã®èãæ¹ãå¤ãã¦ã¿ãï¼è¯ãã§ããã</p> 459 <p class="mt-5">峿¸é¤¨ã«è¡ãã寿å¸å±ã«è¡ãï¼ãã®è¡ååã大å¤è¯ãã¨æãã¾ãã</p> 460 <p class="mt-5">ãã®ã¢ããªã®æ¬é«ã¯ããããã«ããã¾ãã</p> 461 462 <h3 class="text-2xl mt-7" id="manual_h3">è¦å¶ã¯ç°¡åãã§ãããã ãã§è¯ãã®ï¼</h3> 463 464 <p class="mt-5">åã®å¦çæä»£ãå çæ¹ããããè¨ããã¾ããã</p> 465 <p class="mt-5">ãé»åè¾æ¸ã¯ä½¿ããªãããã«ï¼ã</p> 466 <p class="mt-5">ãWikiPediaã¯ä½¿ããªãããã«ï¼ã</p> 467 <p class="mt-5">ãã®è¨èã«ã¯ãå çéã®ãæå³ããããã¾ãã</p> 468 <p class="mt-5">é»åè¾æ¸ã§ã¯ããã®åèªå¨è¾ºã®ç¥èãå¾ããã¥ããã</p> 469 <p class="mt-5">WikiPediaãªã©ããããã«è¼ã£ã¦ããæ å ±ã¯å ¨ã¦æ£ããã¨ã¯éããªãã</p> 470 <p class="mt-5">é»åè¾æ¸ãWikiPediaããä»ã¯çæAIã«ä»£ãã£ã¦ããã ãã§ããã£ã¦ãããã¨ã¯å¤ãã£ã¦ããªãã¨æãã¾ãã</p> 471 <p class="mt-5">ã§ããæ¬å½ã«ããã ãã§è¯ãã®ã§ããããï¼</p> 472 473 <h3 class="text-2xl mt-7" id="manual_h3">ã©ããªé¡æãåã©ãéã«æä¾ããã®ãï¼</h3> 474 475 <p class="mt-5">åã¯ãçæAIã¯ã©ãã©ã使ã£ã¦ããã¹ãã¨æã£ã¦ãã¾ãã</p> 476 <p class="mt-5">ããããã®æä»£ã¯ãAIã使ãããªã人éãçãæ®ã£ã¦ããã¨æã£ã¦ããããã§ãã</p> 477 <p class="mt-5">ãããçè§£ãã¦ããªãã¨ãæ¬å½ã«AIã«ä»äºã奪ããã人ãå¢ãã¦ããã¾ãã</p> 478 <p class="mt-5">ã ãããããAIã¨äººéã®å ±çãèãã¦ããããã®ãããªæè²ãå¿ è¦ã¨èãã¾ãã</p> 479 <p class="mt-5">è¦å¶ããã®ã¯ç°¡åã§ããã§ããããã ãã§ã¯å ¨ãè¶³ãã¦ãã¾ããã</p> 480 <p class="mt-5">大äºãªã®ã¯ãAIãç¥ããªããããªèª²é¡ã大人ãèããåã©ãéã«æä¾ãã¦ããã</p> 481 <p class="mt-5">ããã¦ãAIã¨ãã¨ãã¨ãåãåã£ã¦ããããããããç°å¢ãæ´ãããã¨ã</p> 482 <p class="mt-5">ä»ã®æä»£ã®æè²ã®ãæ¬è³ªãã¯ããã«ããã¨æã£ã¦ãã¾ãã</p> 483 <p class="mt-5">éåã®æ¼¢åãä½ç¨®é¡ããã®ããAIã¯ç¥ããªãã£ãã</p> 484 <p class="mt-5">ããã ï¼ã¨æãã¾ããã</p> 485 <p class="mt-5">ã¾ã ã¾ã ãæ¢ãã°è²ããªèª²é¡ãä½ããã¨æãã¾ãã</p> 486 <p class="mt-5">ãã®ã¢ããªãAIã¨äººéã®å ±çãèããããããªæ©ä¼ãä¸ãããããæ¬æã§ãã</p> 487 488 <p class="mt-5">é½è¤ãä»å¿. </p> 489 </div> 490 491 </div> 492 493 <!-- ä½¿ãæ¹ --> 494 <div id="manual"><span id="closed-btn2">
494Ã</span> 495 <h3 class="text-2xl text-center"><i class="fa-solid fa-book-open"></i> ä½¿ãæ¹</h3> 496 497 <div class="overflow-y-scroll overview mt-5 mx-2"> 498 499 <h3 class="text-2xl" id="manual_h3">ã¤ã³ã¹ãã¼ã«æ¹æ³</h3> 500 <p class="mt-5">PWAã«å¯¾å¿ãã¦ããã®ã§ãiPhoneãAndroidã¨ãã«ãWEBãã©ã¦ã¶ã®ããã¼ã ç»é¢ã«è¿½å ãããã¤ã³ã¹ãã¼ã«ã§ãã¾ãã</p> 501 <img src="./images/install.jpg" width="100%" class="mt-5" alt="ã¤ã³ã¹ãã¼ã«æ¹æ³ã®ç»å"> 502 503 <h3 class="text-2xl mt-7" id="manual_h3">ãããããé </h3> 504 <p class="mt-5">éåã®æ¼¢åã¯ãããããé ã«ä¸¦ãã§ãã¾ãã</p> 505 <p class="mt-5">ã©ããªæ¼¢åãããã®ããã¶ã¯ã£ã¨çºãã¦ã¿ã¾ãããï¼</p> 506 <p class="mt-5">çæAIãç¥ã£ã¦ããæ¼¢åã¯â¯ãç¥ããªãã£ãæãã«ã¯Ããã¤ãã¦ãã¾ãã</p> 507 <p class="mt-5">ãã¼ã¿æ´æ°æ¥ã¯çæAIããã®åçãå¾ãããæ¥ã§ãã</p> 508 <p class="mt-5">ãã®æã¯ãçããããªãã¦ããä»ã¯çããããããããã¾ããã</p> 509 510 <h3 class="text-2xl mt-7" id="manual_h3">æ¤ç´¢æ©è½</h3> 511 <p class="mt-5">Searchã®ããã¹ãããã¯ã¹ã«æ¼¢åãããªã¨å ¥ããã¨ãæ¤ç´¢ã§ãã¾ãã</p> 512 <p class="mt-5">ãã®æ¼¢åã¯ç»é²ããã¦ããããªï¼ã¨æã£ãããæ¤ç´¢ãã¦ã¿ã¦ãã ããã</p> 513 514 <h3 class="text-2xl mt-7" id="manual_h3">æç¨¿ããå¾ ã¡ãã¦ãã¾ã</h3> 515 <p class="mt-5">ãããã¢ããªã«ç»é²ããã¦ããªãæ¼¢åãè¦ã¤ããããæç¨¿ããããã¿ã³ãããæ å ±æä¾ããé¡ããã¾ãã</p> 516 <p class="my-5">çãã¾ã®æç¨¿ããå¾ ã¡ãã¦ããã¾ãã</p> 517 518 </div> 519 520 </div> 521 522 523 <!--<div class="sns-fb"> 524 <div class="fb-share-button" data-href="https://fish-kanji.netlify.app/" data-layout="button_count" 525 data-size="small"></div> 526 </div>--> 527 528 <div class="pagetop"> 529 <div class="pagetop_arrow"></div> 530 </div> 531 532 <!-- ããã¿ã¼ --> 533 <div id="footer" class="footer p-2 text-center"> 534 <div class="grid gap-4 grid-cols-3 grid-rows-1"> 535 <div class="beginner-btn"><i class="fa-solid fa-user"></i> ã¯ããã«</div> 536 <div class="manual-btn"><i class="fa-solid fa-book-open"></i> ä½¿ãæ¹</div> 537 <a href="https://forms.gle/teKKGRseRjFs7Jxu9" target="_blank"> 538 <div class="post"><i class="fa-solid fa-envelope"></i> æã稿</div> 539 </a> 540 </div> 541 <p class="text-xs mt-1"> 542 <i class="fa-regular fa-copyright"></i> <a href="https://hitoshi2s.netlify.app/" target="_blank">é½è¤ ä»å¿</a>. ver 543 1.0 544 </p> 545 546 </div> 547 548
548<script type="module"> 549 550 const result = document.querySelector("#result"); 551 const count = document.querySelector("#count"); 552 let gpt; 553 554 result.innerHTML = ""; 555 556 /* æåã®ãã¼ãæ */ 557 onload = async () => { 558 559 const topButton = document.querySelector(".pagetop"); 560 561 topButton.addEventListener("click", () => { 562 563 $('body,html').animate({ scrollTop: 0 }, 1000); 564 return false; 565 566 }); 567 568 const id = "AKfycbw8pOlBgPxDYeYhRqqkp7qJFFK0e456Osr0FSiKvEEtTZHvhEHOuXK82OxB2JfuP7m7"; 569 570 const res = await fetch("https://script.google.com/macros/s/" + id + "/exec"); 571 const data = await res.json(); 572 console.log(data); 573 574 575 //const data = await d3.csv('./data/word.csv'); 576 const max = data.length; 577 578 //data.sort((a, b) => a.yomi.localeCompare(b.yomi), 'ja'); 579 580 count.innerHTML = max + " ä»¶ ï¼ 678 ä»¶" 581 582 for (let i = 0; i < max; i++) { 583 584 /*if (data[i].ai == "y") { 585 gpt = "â¯"; 586 } 587 else { 588 gpt = "Ã"; 589 }*/ 590 591 let dd = new Date(data[i].update); 592 let day = dd.toLocaleDateString(); 593 594 result.innerHTML += '<div class="table grid grid-rows-3 grid-cols-3 grid-flow-col gap-2 items-center"><div class="item_title text-8xl row-span-3">' + data[i].word + '</div><div class="text-lg col-span-3">' + data[i].yomi + '</div><div class="text-sm row-span-1 col-span-3">' + data[i].meaning + " ç»æ°ï¼" + data[i].stroke + "</span><span id='update'>ãã¼ã¿æ´æ°æ¥ï¼" + day + '</span></div>'; 595 596 }; 597 598 }; 599 600 /* æ¤ç´¢ãã¿ã³æ¼ä¸æ */ 601 document.getElementById('text').addEventListener('keyup', 602 603 async () => { 604 605 const id = "AKfycbw8pOlBgPxDYeYhRqqkp7qJFFK0e456Osr0FSiKvEEtTZHvhEHOuXK82OxB2JfuP7m7"; 606 const res = await fetch("https://script.google.com/macros/s/" + id + "/exec"); 607 const data = await res.json(); 608 609 //const data = await d3.csv('./data/word.csv'); 610 const max = data.length; 611 612 //data.sort((a, b) => a.yomi.localeCompare(b.yomi), 'ja'); 613 614 if (text.value != "") { 615 616 result.innerHTML = ""; 617 618 let kensaku = text.value; 619 620 let count = 0; 621 622 for (let j = 0; j < max; j++) { 623 624 if (data[j].word.indexOf(kensaku) != -1 || data[j].yomi.indexOf(kensaku) != -1 || data[j].meaning.indexOf(kensaku) != -1) { 625 626 /*if (data[j].ai == "y") { 627 gpt = "â¯"; 628 } 629 else { 630 gpt = "Ã"; 631 }*/ 632 633 let dd = new Date(data[j].update); 634 let day = dd.toLocaleDateString(); 635 636 result.innerHTML += '<div class="table grid grid-rows-3 grid-cols-3 grid-flow-col gap-2 items-center"><div class="item_title text-8xl row-span-3">' + data[j].word + '</div><div class="text-lg col-span-3">' + data[j].yomi + '</div><div class="text-sm row-span-1 col-span-3">' + data[j].meaning + " ç»æ°ï¼" + data[j].stroke + "</span><span id='update'>ãã¼ã¿æ´æ°æ¥ï¼" + day + '</span></div>'; 637 638 count += 1; 639 640 641 } else { 642 643 }; 644 645 }; 646 647 } else { 648 649 result.innerHTML = ""; 650 651 const id = "AKfycbw8pOlBgPxDYeYhRqqkp7qJFFK0e456Osr0FSiKvEEtTZHvhEHOuXK82OxB2JfuP7m7"; 652 const res = await fetch("https://script.google.com/macros/s/" + id + "/exec"); 653 const data = await res.json(); 654 655 //const data = await d3.csv('./data/word.csv'); 656 const max = data.length; 657 658 //data.sort((a, b) => a.yomi.localeCompare(b.yomi), 'ja'); 659 660 for (let i = 0; i < max; i++) { 661 662 /*if (data[i].ai == "y") { 663 gpt = "â¯"; 664 } 665 else { 666 gpt = "Ã"; 667 }*/ 668 669 result.innerHTML += '<div class="table grid grid-rows-3 grid-cols-3 grid-flow-col gap-2 items-center"><div class="item_title text-8xl row-span-3">' + data[i].word + '</div><div class="text-lg col-span-3">' + data[i].yomi + '</div><div class="text-sm row-span-1 col-span-3">' + data[i].meaning + " ç»æ°ï¼" + data[i].stroke + "</span><span id='update'>ãã¼ã¿æ´æ°æ¥ï¼" + data[i].update + '</span></div>'; 670 671 }; 672 673 }; 674 675 } 676 677 ); 678 679 /* ä½¿ãæ¹ã®ãããã¢ãã表示 */ 680 const beginner_btn = document.querySelector('.beginner-btn'); 681 const manual_btn = document.querySelector('.manual-btn');
682 const overlay = document.querySelector('#overlay'); 683 684 beginner_btn.addEventListener('click', () => { 685 $('#overlay').fadeIn(); 686 $('#beginner').fadeIn(); 687 }); 688 689 manual_btn.addEventListener('click', () => { 690 $('#overlay').fadeIn(); 691 $('#manual').fadeIn(); 692 }); 693 694 overlay.addEventListener('click', () => { 695 $('#overlay').fadeOut(); 696 $('#beginner').fadeOut(); 697 $('#manual').fadeOut(); 698 }); 699 700 const closed_btn = document.querySelector("#closed-btn"); 701 const closed_btn2 = document.querySelector("#closed-btn2"); 702 703 closed_btn.addEventListener('click', () => { 704 $('#overlay').fadeOut(); 705 $('#beginner').fadeOut(); 706 }); 707 708 closed_btn2.addEventListener('click', () => { 709 $('#overlay').fadeOut(); 710 $('#manual').fadeOut(); 711 }); 712 713 </script>
713 714 715 <!-- Facebookã·ã§ã¢ãã¿ã³ 716 <div id="fb-root"></div> 717
717<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v19.0" 718 nonce="Pm3nh7PB"></script>
718--> 719 720 <!-- Google tag (gtag.js) -->
vendor: 66 bytes, lines 720-721
720 721 <script async src="https://www.googletagmanager.com/gtag/js?id=
721G-MPP84V2NHB
vendor: 14 bytes, lines 721-722
721"></script> 722
722<script> 723
vendor: 143 bytes, lines 723-727
723window.dataLayer = window.dataLayer || []; 724 function gtag() { dataLayer.push(arguments); } 725 gtag('js', new Date()); 726 727 gtag('config', '
727G-MPP84V2NHB
vendor: 6 bytes, lines 727-728
727'); 728
728</script>
728 729 730</body> 731 732</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.