1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" /> 6 <link 7 rel="stylesheet" 8 href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css" 9 /> 10 11 <title>ã¢ãã¡è¦è´</title> 12 </head> 13 <body> 14
14<script 15 src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" 16 integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" 17 crossorigin="anonymous" 18 ></script>
18 19 <label for="label1">åºæ¬æ å ±</label> 20 <input 21 type="checkbox" 22 id="label1" 23 onchange="toggleAcc(this)" 24 data-target="base-info" 25 /> 26 <div id="base-info" style="display: none"> 27 <p> 28 <label for="name">ååï¼</label 29 ><input type="text" id="name" value="ã²ã" /> 30 </p> 31 <p> 32 <label for="age">å¹´é½¢ï¼</label 33 ><input type="text" id="age" value="ããã" /> 34 </p> 35 <p> 36 <label for="work">è·æ¥ï¼</label 37 ><input type="text" id="work" value="ããã°ã©ã" /> 38 </p> 39 <p> 40 <label for="live">ä½å¦ï¼</label 41 ><input type="text" id="live" value="åè" /> 42 </p> 43 <p> 44 <label for="qualification1">ã¹ãã«1ï¼</label 45 ><input type="text" id="qualification1" value="DBã¹ãã·ã£ãªã¹ã" /> 46 </p> 47 <p> 48 <label for="qualification2">ã¹ãã«2ï¼</label 49 ><input type="text" id="qualification2" value="å¿ç¨æ å ±" /> 50 </p> 51 <p> 52 <label for="qualification2">ã¹ãã«3ï¼</label 53 ><input type="text" id="qualification3" value="èªåè»å 許" /> 54 </p> 55 <p> 56 <label for="parsonality">æ§æ ¼</label 57 ><textarea id="parsonality" rows="2" cols="32" style="resize: none"> 58 ã³ãã¥é 59 è² ããå«ã</textarea 60 > 61 </p> 62 <p><label for="image">ç»å</label><input type="file" id="image" /></p> 63 </div> 64 <label for="label2">ã¬ã¼ãã¼ãã£ã¼ã</label> 65 <input 66 type="checkbox" 67 id="label2" 68 onchange="toggleAcc(this)" 69 data-target="radar-info" 70 /> 71 <div id="radar-info" style="display: none"> 72 <p> 73 <label for="front">ããã³ãï¼</label 74 ><input type="number" id="front" value="1" max="5" min="1" /> 75 </p> 76 <p> 77 <label for="back">ããã¯ï¼</label 78 ><input type="number" id="back" value="1" max="5" min="1" /> 79 </p> 80 <p> 81 <label for="infra">ã¤ã³ãã©ï¼</label 82 ><input type="number" id="infra" value="1" max="5" min="1" /> 83 </p> 84 <p> 85 <label for="db">DBï¼</label 86 ><input type="number" id="db" value="1" max="5" min="1" /> 87 </p> 88 <p> 89 <label for="security">ã»ãã¥ãªãã£ï¼</label 90 ><input type="number" id="security" value="1" max="5" min="1" /> 91 </p> 92 <p> 93 <label for="management">ããã¸ã¡ã³ãï¼</label 94 ><input type="number" id="management" value="1" max="5" min="1" /> 95 </p> 96 <p> 97 <label for="free_skill_name">ããªã¼ï¼</label 98 ><input type="text" id="free_skill_name" />ï¼<input 99 type="number" 100 id="free_skill_value" 101 max="5" 102 min="1" 103 /> 104 </p> 105 </div> 106 <label for="label3">è¨èª</label> 107 <input 108 type="checkbox" 109 id="label3" 110 onchange="toggleAcc(this)" 111 data-target="lang-info" 112 /> 113 <div id="lang-info" style="display: none"> 114 <p> 115 <label for="">Cï¼</label 116 ><input type="number" id="lang1" value="0" max="100" min="0" /> 117 </p> 118 <p> 119 <label for="">C++ï¼</label 120 ><input type="number" id="lang2" value="0" max="100" min="0" /> 121 </p> 122 <p> 123 <label for="">C#ï¼</label 124 ><input type="number" id="lang3" value="0" max="100" min="0" /> 125 </p> 126 <p> 127 <label for="">PHPï¼</label 128 ><input type="number" id="lang4" value="0" max="100" min="0" /> 129 </p> 130 <p> 131 <label for="">Javaï¼</label 132 ><input type="number" id="lang5" value="0" max="100" min="0" /> 133 </p> 134 <p> 135 <label for="">Kotlinï¼</label 136 ><input type="number" id="lang6" value="0" max="100" min="0" /> 137 </p> 138 <p> 139 <label for="">Rubyï¼</label 140 ><input type="number" id="lang7" value="0" max="100" min="0" /> 141 </p> 142 <p> 143 <label for="">Pythonï¼</label 144 ><input type="number" id="lang8" value="0" max="100" min="0" /> 145 </p> 146 <p> 147 <label for="">Swiftï¼</label 148 >
148<input type="number" id="lang9" value="0" max="100" min="0" /> 149 </p> 150 <p> 151 <label for="">Haskellï¼</label 152 ><input type="number" id="lang10" value="0" max="100" min="0" /> 153 </p> 154 <p> 155 <label for="">Scalaï¼</label 156 ><input type="number" id="lang11" value="0" max="100" min="0" /> 157 </p> 158 <p> 159 <label for="">Erlangï¼</label 160 ><input type="number" id="lang12" value="0" max="100" min="0" /> 161 </p> 162 <p> 163 <label for="">Goï¼</label 164 ><input type="number" id="lang13" value="0" max="100" min="0" /> 165 </p> 166 <p> 167 <label for="">JavaScriptï¼</label 168 ><input type="number" id="lang14" value="0" max="100" min="0" /> 169 </p> 170 <p> 171 <label for="">HTML5+CSS3ï¼</label 172 ><input type="number" id="lang15" value="0" max="100" min="0" /> 173 </p> 174 <p> 175 <label for="">Sassï¼</label 176 ><input type="number" id="lang16" value="0" max="100" min="0" /> 177 </p> 178 <p> 179 <label for="">COBOLï¼</label 180 ><input type="number" id="lang17" value="0" max="100" min="0" /> 181 </p> 182 <p> 183 <label for="">Rustï¼</label 184 ><input type="number" id="lang18" value="0" max="100" min="0" /> 185 </p> 186 <p> 187 <label for="">Clojureï¼</label 188 ><input type="number" id="lang19" value="0" max="100" min="0" /> 189 </p> 190 </div> 191 <label for="label4">ãã¬ã¼ã ã¯ã¼ã¯</label> 192 <input 193 type="checkbox" 194 id="label4" 195 onchange="toggleAcc(this)" 196 data-target="frame-info" 197 /> 198 <div id="frame-info" style="display: none"> 199 <p> 200 <label for="">Springï¼</label 201 ><input type="number" id="frame1" value="0" max="100" min="0" /> 202 </p> 203 <p> 204 <label for="">Jakarta EEï¼</label 205 ><input type="number" id="frame2" value="0" max="100" min="0" /> 206 </p> 207 <p> 208 <label for="">CakePHPï¼</label 209 ><input type="number" id="frame3" value="0" max="100" min="0" /> 210 </p> 211 <p> 212 <label for="">Symfonyï¼</label 213 ><input type="number" id="frame4" value="0" max="100" min="0" /> 214 </p> 215 <p> 216 <label for="">Laravelï¼</label 217 ><input type="number" id="frame5" value="0" max="100" min="0" /> 218 </p> 219 <p> 220 <label for="">Ruby on Railsï¼</label 221 ><input type="number" id="frame6" value="0" max="100" min="0" /> 222 </p> 223 <p> 224 <label for="">Djangoï¼</label 225 ><input type="number" id="frame7" value="0" max="100" min="0" /> 226 </p> 227 <p> 228 <label for="">Play Frameworkï¼</label 229 ><input type="number" id="frame8" value="0" max="100" min="0" /> 230 </p> 231 <p> 232 <label for="">.NET Frameworkï¼</label 233 >
233<input type="number" id="frame9" value="0" max="100" min="0" /> 234 </p> 235 <p> 236 <label for="">Reactï¼</label 237 ><input type="number" id="frame10" value="0" max="100" min="0" /> 238 </p> 239 <p> 240 <label for="">Vue.jsï¼</label 241 ><input type="number" id="frame11" value="0" max="100" min="0" /> 242 </p> 243 </div> 244 <label for="label5">ã¤ã³ãã©</label> 245 <input 246 type="checkbox" 247 id="label5" 248 onchange="toggleAcc(this)" 249 data-target="infra-info" 250 /> 251 <div id="infra-info" style="display: none"> 252 <p> 253 <label for="">AWSï¼</label 254 ><input type="number" id="infra1" value="0" max="100" min="0" /> 255 </p> 256 <p> 257 <label for="">GCPï¼</label 258 ><input type="number" id="infra2" value="0" max="100" min="0" /> 259 </p> 260 <p> 261 <label for="">UNIXï¼</label 262 ><input type="number" id="infra3" value="0" max="100" min="0" /> 263 </p> 264 <p> 265 <label for="">Windows Serverï¼</label 266 >
266<input type="number" id="infra4" value="0" max="100" min="0" /> 267 </p> 268 <p> 269 <label for="">Apacheï¼</label 270 ><input type="number" id="infra5" value="0" max="100" min="0" /> 271 </p> 272 <p> 273 <label for="">Tomcatï¼</label 274 ><input type="number" id="infra6" value="0" max="100" min="0" /> 275 </p> 276 <p> 277 <label for="">nginxï¼</label 278 ><input type="number" id="infra7" value="0" max="100" min="0" /> 279 </p> 280 </div> 281 282 <label for="label6">ãã®ä»</label> 283 <input 284 type="checkbox" 285 id="label6" 286 onchange="toggleAcc(this)" 287 data-target="other-info" 288 /> 289 <div id="other-info" style="display: none"> 290 <p> 291 <label for="past">ç¥æ´</label 292 ><textarea id="past" rows="4" cols="56" style="resize: none"> 293 SIerã§5å¹´éãéèç³»ã·ã¹ãã ãªã©ã®åºå¹¹ã·ã¹ãã ã«æºããã 294 主ã«Javaã使ããWebãµã¼ãã¹ãå®è£ ã 295 èªç¤¾ãµã¼ãã¹ã«é¢ããããã¨æã転è·ãã¦ä»ã«è³ãã</textarea 296 > 297 </p> 298 <p> 299 <label for="hobby">趣å³</label 300 ><input type="text" id="hobby" value="TRPG, ä¸äººã«ã©ãªã±" /> 301 </p> 302 <p> 303 <label for="sp_skill">ç¹æ</label 304 ><input type="text" id="sp_skill" value="ç¸è·³ã³" /> 305 </p> 306 </div> 307 308 <button id="draw" onclick="draw()" style="display: none">æç»</button> 309 <button id="download" onclick="download()" style="display: none"> 310 download 311 </button> 312 <canvas 313 id="myChart" 314 width="250" 315 height="250" 316 style="display: none" 317 ></canvas> 318 319 <canvas 320 id="canvas" 321 width="870" 322 height="1200" 323 style="display: none" 324 ></canvas> 325 <canvas 326 id="image-canvas" 327 width="200" 328 height="200" 329 style="display: none" 330 ></canvas> 331 </body> 332</html> 333
334<script> 335 var file = document.getElementById("image"); 336 var image_canvas = document.getElementById("image-canvas"); 337 var canvasWidth = 200; 338 var canvasHeight = 200; 339 var uploadImgSrc; 340 341 // Canvasã®æºå 342 image_canvas.width = canvasWidth; 343 image_canvas.height = canvasHeight; 344 var image_ctx = image_canvas.getContext("2d"); 345 346 const chara = new Image(); 347 chara.src = "image0.png"; // ç»åã®URLãæå® 348 let chara_width = 0; 349 let chara_height = 0; 350 chara.onload = function (event) { 351 chara_width = this.width; 352 chara_height = this.height; 353 document.getElementById("draw").style = "display: inline-block;"; 354 document.getElementById("download").style = "display: inline-block;"; 355 }; 356 357 function loadLocalImage(e) { 358 // ãã¡ã¤ã«æ å ±ãåå¾ 359 var fileData = e.target.files[0]; 360 361 // ç»åãã¡ã¤ã«ä»¥å¤ã¯å¦çãæ¢ãã 362 if (!fileData.type.match("image.*")) { 363 alert("ç»åãé¸æãã¦ãã ãã"); 364 return; 365 } 366 367 // FileReaderãªãã¸ã§ã¯ãã使ã£ã¦ãã¡ã¤ã«èªã¿è¾¼ã¿ 368 var reader = new FileReader(); 369 // ãã¡ã¤ã«èªã¿è¾¼ã¿ã«æåããã¨ãã®å¦ç 370 reader.onload = function () { 371 // Canvasä¸ã«è¡¨ç¤ºãã 372 uploadImgSrc = reader.result; 373 canvasDraw(); 374 }; 375 // ãã¡ã¤ã«èªã¿è¾¼ã¿ãå®è¡ 376 reader.readAsDataURL(fileData); 377 } 378 379 // ãã¡ã¤ã«ãæå®ãããæã«loadLocalImage()ãå®è¡ 380 file.addEventListener("change", loadLocalImage, false); 381 382 // Canvasä¸ã«ç»åã表示ãã 383 function canvasDraw() { 384 // canvaså ã®è¦ç´ ãã¯ãªã¢ãã 385 image_ctx.clearRect(0, 0, canvasWidth, canvasHeight); 386 387 // Canvasä¸ã«ç»åã表示 388 var img = new Image(); 389 img.src = uploadImgSrc; 390 img.onload = function () { 391 image_ctx.drawImage( 392 img, 393 0, 394 0, 395 canvasWidth, 396 this.height * (canvasWidth / this.width) 397 ); 398 }; 399 } 400 401 function toggleAcc(ele) { 402 target = ele.getAttribute("data-target"); 403 document.getElementById(target).style = ele.checked 404 ? "display: block;" 405 : "display: none;"; 406 } 407 408 function check() { 409 const messages = []; 410 checkRaderMax("front", "ããã³ã", messages); 411 checkRaderMax("back", "ããã¯", messages); 412 checkRaderMax("infra", "ã¤ã³ãã©", messages); 413 checkRaderMax("db", "DB", messages); 414 checkRaderMax("security", "ã»ãã¥ãªãã£", messages); 415 checkRaderMax("management", "ããã¸ã¡ã³ã", messages); 416 checkRaderMin("front", "ããã³ã", messages); 417 checkRaderMin("back", "ããã¯", messages); 418 checkRaderMin("infra", "ã¤ã³ãã©", messages); 419 checkRaderMin("db", "DB", messages); 420 checkRaderMin("security", "ã»ãã¥ãªãã£", messages); 421 checkRaderMin("management", "ããã¸ã¡ã³ã", messages); 422 } 423 424 function checkRaderMax(id, name, messages) { 425 if (document.getElementById(id).value > 5) { 426 messages.push(`${name}ã¯5以ä¸ã§å ¥åãã¦ãã ãã`); 427 } 428 } 429 function checkRaderMin(id, name, messages) { 430 if (document.getElementById(id).value < 1) { 431 messages.push(`${name}ã¯1以ä¸ã§å ¥åãã¦ãã ãã`); 432 } 433 } 434 435 function draw() { 436 const canvas = document.getElementById("canvas"); 437 const ctx = document.getElementById("canvas").getContext("2d"); 438 ctx.clearRect(0, 0, canvas.width, canvas.height); 439 const dstWidth = chara_width * 0.3; 440 const dstHeight = chara_height * 0.3; 441 ctx.drawImage( 442 chara, 443 0, 444 0, 445 chara_width, 446 chara_height, 447 0, 448 0, 449 dstWidth, 450 dstHeight 451 ); 452 ctx.lineJoin = "miter"; 453 ctx.miterLimit = "1"; 454 drawTextBase(ctx, document.getElementById("name").value, 180, 40, 40); 455 drawTextBase(ctx, document.getElementById("age").value, 750, 50, 30); 456 drawTextBase(ctx, document.getElementById("work").value, 400, 80, 20); 457 drawTextBase(ctx, document.getElementById("live").value, 400, 110, 20); 458 drawTextBase( 459 ctx, 460 document.getElementById("qualification1").value, 461 400, 462 140, 463 20 464 ); 465 drawTextBase( 466 ctx, 467 document.getElementById("qualification2").value, 468 400, 469 170, 470 20 471 ); 472 drawTextBase( 473 ctx, 474 document.getElementById("qualification3").value, 475 400, 476 200, 477 20 478 ); 479 480 drawTextArea(ctx, "parsonality", 280, 260); 481 482 Array.prototype.forEach.call( 483 document.getElementById("lang-info").children, 484 (element, index) => { 485 drawTextBase( 486 ctx, 487 element.lastElementChild.value, 488 330, 489 380 + index * 29 + index / 5, 490 20 491 ); 492 } 493 ); 494 Array.prototype.forEach.call( 495 document.getElementById("frame-info").children, 496 (element, index) => { 497 drawTextBase( 498 ctx, 499 element.lastElementChild.value, 500 800, 501 380 + index * 29 + index / 5, 502 20 503 ); 504 } 505 ); 506 Array.prototype.forEach.call( 507 document.getElementById("infra-info").children, 508 (element, index) => { 509 drawTextBase( 510 ctx, 511 element.lastElementChild.value, 512 800, 513 760 + index * 29 + index / 5, 514 20 515 ); 516 } 517 ); 518 519 drawTextArea(ctx, "past", 20, 1070); 520 drawTextBase(ctx, document.getElementById("hobby").value, 650, 1070, 20); 521 drawTextBase(ctx, document.getElementById("sp_skill").value, 650, 1170, 20); 522 523 const chartElement = drawChart(); 524 ctx.drawImage(image_canvas, 25, 70); 525 ctx.drawImage(chartElement, 610, 50); 526 chartElement.getContext("2d").clearRect(0, 0, canvas.width, canvas.height); 527 canvas.style = "display: block;"; 528 } 529 530 function drawTextArea(ctx, id, x, base_y) { 531 var text = document 532 .getElementById(id) 533 .value.replace(/\r\n|\r/g, "\n") 534 .split("\n"); 535 for (var i = 0; i < text.length; i++) { 536 if (text[i] == "") { 537 continue; 538 } 539 540 drawTextBase(ctx, text[i], x, base_y + i * 30, 20); 541 } 542 } 543 544 function drawTextBase(ctx, text, x, y, size) { 545 ctx.font = `bold ${size}px serif`; 546 ctx.lineWidth = 3; 547 ctx.strokeStyle = "#FFF"; 548 ctx.strokeText(text, x, y); 549 ctx.fillStyle = "#000"; 550 ctx.fillText(text, x, y); 551 } 552 553 function download() { 554 draw();
555 let canvas = document.getElementById("canvas"); 556 557 let link = document.createElement("a"); 558 link.href = canvas.toDataURL(); 559 link.download = `${document.getElementById("name").value}_skill_sheet.png`; 560 link.click(); 561 } 562 563 function drawChart() { 564 var ctx = document.getElementById("myChart").getContext("2d"); 565 const labels = [ 566 "ããã³ã", 567 "ããã¯", 568 "ã¤ã³ãã©", 569 "ããã¸ã¡ã³ã", 570 "DB", 571 "ã»ãã¥ãªãã£", 572 ]; 573 const data = [ 574 document.getElementById("front").value, 575 document.getElementById("back").value, 576 document.getElementById("infra").value, 577 document.getElementById("db").value, 578 document.getElementById("security").value, 579 document.getElementById("management").value, 580 ]; 581 if ( 582 document.getElementById("free_skill_name").value && 583 document.getElementById("free_skill_value").value 584 ) { 585 labels.push(document.getElementById("free_skill_name").value); 586 data.push(document.getElementById("free_skill_value").value); 587 } 588 var myChart = new Chart(ctx, { 589 type: "radar", 590 data: { 591 labels: labels, 592 datasets: [ 593 { 594 label: "", 595 data: data, 596 backgroundColor: "RGBA(225,95,150, 0.5)", 597 borderColor: "RGBA(225,95,150, 1)", 598 borderWidth: 1,
599 pointBackgroundColor: "RGB(46,106,177)", 600 }, 601 ], 602 }, 603 options: { 604 responsive: false, 605 maintainAspectRatio: false, 606 animation: false, 607 legend: { 608 display: false, 609 }, 610 scale: { 611 ticks: { 612 suggestedMin: 0, 613 suggestedMax: 5, 614 stepSize: 1, 615 callback: function (value, index, values) { 616 return value; 617 }, 618 }, 619 }, 620 }, 621 }); 622 return document.getElementById("myChart"); 623 } 624</script>
vendor: 1 bytes, line 624
624
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.