1class ChatbotForm { 2 constructor(config = {}) { 3 this.config = { 4 title: config.title || 'æ³äººåãèè³ ã¢ã¯ãã»ã¦ã£ã«', 5 subtitle: config.subtitle || 'ãç³ãè¾¼ã¿ã»ãååãã¯ãã¡ã', 6 position: config.position || 'bottom-right', 7 primaryColor: config.primaryColor || '#1E88E5', 8 botIcon: config.botIcon || 'https://actwill.co.jp/wp/wp-content/themes/story_tcd041-child/bot_mail/img/women3_new.png', 9 defaultTrigger: config.defaultTrigger !== false, 10 ...config 11 }; 12 13 this.questions = [ 14 15 { 16 type: 'message', 17 message: '', 18 image: 'https://actwill.co.jp/wp/wp-content/themes/story_tcd041-child/bot_mail/img/5cefa38d3aaa2.png' 19 }, 20 { 21 type: 'message', 22 message: '', 23 image: 'https://actwill.co.jp/wp/wp-content/themes/story_tcd041-child/bot_mail/img/5f0d28e42bd1b.png' 24 }, 25 { 26 id: 'inquiry_type', 27 type: 'buttons', 28 message: 'ã¾ãã¯ããã«ããåãåããé ç®ãæãã¦ããã ãã¾ããï¼<br>注â»ãåµæ¥èè³ãã¯è¡ã£ã¦ããã¾ããã', 29 title: 'ãåãåããé ç®', 30 options: [ 31 { value: 'ãç³è¾¼ã¿', label: 'ãç³è¾¼ã¿', className: 'cta-chat-application' }, 32 { value: 'ãåãåãã', label: 'ãåãåãã', className: 'cta-chat-contact' } 33 ] 34 }, 35 { 36 type: 'message', 37 condition: { 38 inquiry_type: 'ãç³è¾¼ã¿' 39 }, 40 message: 'ããç³è¾¼ã¿ãã§ããã<br>ãããã¾ãã¾ããã' 41 }, 42 { 43 type: 'message', 44 condition: { 45 inquiry_type: 'ãåãåãã' 46 }, 47 message: 'ããåãåãããã§ããã<br>æ¿ç¥ãããã¾ããã' 48 }, 49 { 50 id: 'annual_sales', 51 type: 'text', 52 message: '次ã«å¹´åã®éé¡ãæãã¦ãã ããã', 53 title: 'å¹´å', 54 placeholder: '', 55 numberOnly: true, // æ°å¤ã®ã¿è¨±å¯ 56 unit: 'ä¸å' // åä½ãæå® 57 }, 58 { 59 id: 'annual_revenue', 60 type: 'text', 61 message: '次ã«èè³ã®ãå¸æéé¡ãæãã¦ãã ããã', 62 title: 'å¸æéé¡ ', 63 placeholder: '', 64 numberOnly: true, // æ°å¤ã®ã¿è¨±å¯ 65 unit: 'ä¸å' // åä½ãæå® 66 }, 67 { 68 id: 'company_name', 69 type: 'text', 70 message: '次ã«ãä¼ç¤¾åãæãã¦ãã ãã', 71 title: 'ä¼ç¤¾å', 72 placeholder: 'ä¾ï¼ã¢ã¯ãã»ã¦ã£ã«æ ªå¼ä¼ç¤¾' 73 }, 74 { 75 type: 'message', 76 message: answer => `ã${answer.company_name}ãæ§ã§ããã<br>ãããã¨ããããã¾ãã` 77 }, 78 { 79 id: 'address_group', 80 type: 'form_group', 81 message: 'ãä½æãæãã¦ãã ããã', 82 fields: [ 83 { 84 id: 'postal_code', 85 type: 'text', 86 label: 'éµä¾¿çªå·', 87 placeholder: 'ä¾ï¼1234567', 88 maxLength: 7, 89 pattern: '^[0-9]{7}$' 90 }, 91 { 92 id: 'prefecture', 93 type: 'select', 94 label: 'é½éåºç', 95 placeholder: 'ä¾ï¼åæµ·é', 96 options: [ 97 { value: '', label: 'é¸æãã¦ãã ãã' }, 98 { value: 'åæµ·é', label: 'åæµ·é' }, 99 { value: 'é森ç', label: 'é森ç' }, 100 { value: '岩æç', label: '岩æç' }, 101 { value: 'å®®åç', label: 'å®®åç' }, 102 { value: 'ç§ç°ç', label: 'ç§ç°ç' }, 103 { value: '山形ç', label: '山形ç' }, 104 { value: 'ç¦å³¶ç', label: 'ç¦å³¶ç' }, 105 { value: 'è¨åç', label: 'è¨åç' }, 106 { value: 'æ æ¨ç', label: 'æ æ¨ç' }, 107 { value: '群馬ç', label: '群馬ç' }, 108 { value: 'å¼çç', label: 'å¼çç' }, 109 { value: 'åèç', label: 'åèç' }, 110 { value: 'æ±äº¬é½', label: 'æ±äº¬é½' }, 111 { value: 'ç¥å¥å·ç', label: 'ç¥å¥å·ç' }, 112 { value: 'æ°æ½ç', label: 'æ°æ½ç' }, 113 { value: 'å¯å±±ç', label: 'å¯å±±ç' }, 114 { value: 'ç³å·ç', label: 'ç³å·ç' }, 115 { value: 'ç¦äºç', label: 'ç¦äºç' }, 116 { value: '山梨ç', label: '山梨ç' }, 117 { value: 'é·éç', label: 'é·éç' }, 118 { value: 'å²éç', label: 'å²éç' }, 119 { value: 'é岡ç', label: 'é岡ç' }, 120 { value: 'æç¥ç', label: 'æç¥ç' }, 121 { value: 'ä¸éç', label: 'ä¸éç' }, 122 { value: 'æ»è³ç', label: 'æ»è³ç' }, 123 { value: '京é½åº', label: '京é½åº' }, 124 { value: '大éªåº', label: '大éªåº' }, 125 { value: 'å µåº«ç', label: 'å µåº«ç' }, 126 { value: 'å¥è¯ç', label: 'å¥è¯ç' }, 127 { value: 'åæå±±ç', label: 'åæå±±ç' }, 128 { value: 'é³¥åç', label: 'é³¥åç' }, 129 { value: 'å³¶æ ¹ç', label: 'å³¶æ ¹ç' }, 130 { value: '岡山ç', label: '岡山ç' }, 131 { value: 'åºå³¶ç', label: 'åºå³¶ç' }, 132 { value: 'å±±å£ç', label: 'å±±å£ç' }, 133 { value: '徳島ç', label: '徳島ç' }, 134 { value: 'é¦å·ç', label: 'é¦å·ç' }, 135 { value: 'æåªç', label: 'æåªç' }, 136 { value: 'é«ç¥ç', label: 'é«ç¥ç' }, 137 { value: 'ç¦å²¡ç', label: 'ç¦å²¡ç' }, 138 { value: 'ä½è³ç', label: 'ä½è³ç' }, 139 { value: 'é·å´ç', label: 'é·å´ç' }, 140 { value: 'çæ¬ç', label: 'çæ¬ç' }, 141 { value: '大åç', label: '大åç' }, 142 { value: 'å®®å´ç', label: 'å®®å´ç' }, 143 { value: '鹿å 島ç', label: '鹿å 島ç' }, 144 { value: 'æ²ç¸ç', label: 'æ²ç¸ç' } 145 146 147 ] 148 }, 149 { 150 id: 'city', 151 type: 'text', 152 label: 'å¸åºçºæ', 153 placeholder: 'ä¾ï¼è±å³¶åºæ±æ± è¢' 154 }, 155 { 156 id: 'street', 157 type: 'text', 158 label: 'çªå°', 159 placeholder: 'ä¾ï¼3-11-9' 160 }, 161 { 162 id: 'building', 163 type: 'text', 164 label: '建ç©å', 165 placeholder: 'ä¾ï¼ãããã«2F', 166 required: false 167 } 168 ] 169 }, 170 { 171 id: 'representative_name', 172 type: 'text', 173 message: '次ã«ã代表è æ§ã®ãååããè¨å ¥ãã ããã', 174 label: '代表è å',
175 placeholder: 'ä¾ï¼å±±ç° 太é' 176 }, 177 { 178 id: 'contact_group', 179 type: 'form_group', 180 message: 'ç¶ãã¦ããé£çµ¡å æ å ±ãã伺ããã¾ãã<br>ãé»è©±çªå·ã¨ã¡ã¼ã«ã¢ãã¬ã¹ããå ¥åãã ããã', 181 fields: [ 182 { 183 id: 'office_telephone_number', 184 type: 'tel', 185 label: 'ä¼ç¤¾é»è©±çªå·', 186 placeholder: 'ä¾ï¼0312345678', 187 }, 188 { 189 id: 'mobile_telephone_number', 190 type: 'tel', 191 label: 'æºå¸¯é»è©±çªå·', 192 placeholder: 'ä¾ï¼09012345678', 193 } 194 ] 195 }, 196 { 197 id: 'email', 198 type: 'email', 199 skipBotMessage: true, 200 label: 'ã¡ã¼ã«ã¢ãã¬ã¹', 201 placeholder: '[email protected]' 202 }, 203 { 204 id: 'remarks', 205 type: 'textarea', 206 message: 'ãã®ä»ãæè¦ã»ã質åçããããã¾ãããããè¨å ¥ãã ããã', 207 label: 'åèæ¬ â»ç©ºæ¬ã§ãå¯', 208 placeholder: 'ãèªç±ã«ãè¨å ¥ãã ãã' 209 }, 210 { 211 type: 'message', 212 message: 'æå¾ã«ãå ¥åãã¦ããã ããå 容ãã確èªãã ããã<br>ã¾ãå½ç¤¾ã®ãå人æ å ±ä¿è·æ¹éãããèªã¿ã«ãªããåæãã¦ããã ãã¾ãããä¸è¨ãã¿ã³ããæ å ±ãéä¿¡ãã¦ãã ããã' 213 }, 214 { 215 id: 'confirmation', 216 type: 'confirmation', 217 message: '', 218 skipBotMessage: true 219 } 220 ]; 221 222 this.currentQuestionIndex = -1; 223 this.answers = {}; 224 this.isOpen = false; 225 this.triggerElements = new Set(); 226 227 this.init(); 228 } 229 230 init() { 231 this.createStyles(); 232 this.createHTML(); 233 this.attachEventListeners(); 234 this.showNextQuestion(); 235 } 236 237 // æ¡ä»¶ãã§ãã¯ã®ã¡ã½ããã追å 238 checkCondition(condition) { 239 if (!condition) return true; 240 241 return Object.entries(condition).every(([key, value]) => { 242 // é åã®å ´åã¯ãããããã®å¤ã«ããããããç¢ºèª 243 if (Array.isArray(value)) { 244 return value.includes(this.answers[key]); 245 } 246 // æååã¾ãã¯æ°å¤ã®å ´åã¯å®å ¨ä¸è´ã§ç¢ºèª 247 return this.answers[key] == value; 248 }); 249 } 250 251 // 次ã®è¡¨ç¤ºå¯è½ãªè³ªå/ã¡ãã»ã¼ã¸ã®ã¤ã³ããã¯ã¹ãåå¾ 252 getNextValidIndex() { 253 let index = this.currentQuestionIndex + 1; 254 while (index < this.questions.length) { 255 const question = this.questions[index]; 256 if (!question.condition || this.checkCondition(question.condition)) { 257 return index; 258 } 259 index++; 260 } 261 return index; 262 } 263 264 createStyles() { 265 const styles = ` 266 input[type=text], select, textarea { 267 font-family: 'Hiragino Sans', 'ãã©ã®ãè§ã´ Pro W3', 'Hiragino Kaku Gothic Pro', ã¡ã¤ãªãª, Meiryo, 'ï¼ï¼³ ï¼°ã´ã·ãã¯', 'MS PGothic', sans-serif; 268 font-size: 13px; 269 font-weight: 400; 270 letter-spacing: normal; 271 padding: 8px; 272 height: 36px; 273 } 274 275 .chatbot-container { 276 position: fixed; 277 z-index: 9999; 278 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 279 } 280 281 .chatbot-container.bottom-right { 282 right: 20px; 283 bottom: 20px; 284 } 285 286 .chatbot-trigger { 287 display: flex; 288 width: 360px; 289 height: 66px; 290 align-items: center; 291 background: linear-gradient(to right, ${this.config.primaryColor}, #2196F3); 292 border-radius: 60px; 293 cursor: pointer; 294 color: white; 295 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); 296 transition: transform 0.2s; 297 } 298 299 .chatbot-trigger-head{ 300 background-color: #fff; 301 color: #000; 302 font-size: 15px; 303 line-height: 44px; 304 width: 238px; 305 margin-left: 12px; 306 padding: 0 10px; 307 border-radius: 20px; 308 } 309 310 .trigger-icon-head { 311 position: absolute; 312 right: 8px; 313 } 314 315 .trigger-icon-head img {
316 width: 20px; 317 height: 20px; 318 } 319 320 .trigger-icon-head-2 { 321 position: absolute; 322 top: 30px; 323 right: 8px; 324 } 325 326 .trigger-icon-head-2 img { 327 transform: rotate(180deg); 328 width: 20px; 329 height: 20px; 330 } 331 332 .bot-icon-head { 333 width: 50px; 334 height: 50px; 335 margin: 0 4px; 336 border-radius: 50%; 337 overflow: hidden; 338 flex-shrink: 0; 339 } 340 341 .bot-icon-head img { 342 width: 100%; 343 height: 100%; 344 object-fit: cover; 345 } 346 347 .chatbot-window { 348 position: absolute; 349 bottom: calc(100% + 20px); 350 right: 0; 351 width: 370px; 352 background: white; 353 border-radius: 16px; 354 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); 355 display: none; 356 overflow: hidden; 357 opacity: 0; 358 transform: translateY(20px); 359 transition: opacity 0.3s, transform 0.3s; 360 } 361 362 .chatbot-window.open { 363 display: block; 364 opacity: 1; 365 transform: translateY(0); 366 } 367 368 .chatbot-header { 369 padding: 10px; 370 background: linear-gradient(to right, ${this.config.primaryColor}, #2196F3); 371 color: white; 372 } 373 374 .chatbot-header-box { 375 display: flex; 376 } 377 378 .chatbot-header-title-box { 379 padding: 0 10px; 380 display: flex; 381 flex-direction: column; 382 justify-content: center; 383 } 384 385 .chatbot-title { 386 font-size: 16px; 387 font-weight: bold; 388 margin: 0; 389 } 390 391 .chatbot-title-sub { 392 font-size: 16px; 393 margin: 0; 394 } 395 396 .chatbot-progress { 397 font-size: 14px; 398 margin-top: 4px; 399 opacity: 0.8; 400 } 401 402 .chatbot-close { 403 /* position: absolute; 404 right: 16px; 405 top: 16px; 406 color: white; 407 cursor: pointer; 408 font-size: 20px; */ 409 } 410 411 .chatbot-content { 412 padding: 20px; 413 height: 400px; 414 overflow-y: auto; 415 background: #d6e0f0; 416 } 417 418 .chat-message { 419 margin-bottom: 20px; 420 display: flex; 421 flex-direction: column; 422 max-width: 100%; 423 } 424 425 .chat-message.bot { 426 align-items: flex-start; 427 } 428 429 .chat-message.user { 430 align-items: flex-end; 431 margin-left: auto; 432 } 433 434 .message-content-wrapper { 435 display: flex; 436 align-items: flex-start; 437 gap: 8px; 438 } 439 440 .bot-icon { 441 width: 36px; 442 height: 36px; 443 border-radius: 50%; 444 overflow: hidden; 445 flex-shrink: 0; 446 } 447 448 .bot-icon img { 449 width: 100%; 450 height: 100%; 451 object-fit: cover; 452 } 453 454 .message-label { 455 font-size: 12px; 456 color: #666; 457 margin-bottom: 4px; 458 margin-left: 44px; 459 /* ã¢ã¤ã³ã³ã®å¹ + gap */ 460 } 461 462 .chat-message-content { 463 background: white; 464 padding: 12px 16px; 465 border-radius: 12px; 466 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); 467 position: relative; 468 /* font-size: 13px; */ 469 font-size: 16px; 470 font-weight: 400; 471 } 472 473 .chat-message.bot .chat-message-content { 474 border-top-left-radius: 4px; 475 background-color: #3bacef; 476 color: #fff; 477 padding: 10px; 478 line-height: initial; 479 } 480 481 /* ã¹ã¿ã¤ã«ãæ¶ãã¯ã©ã¹ */ 482 .chat-message-content.no-style { 483 background: none; 484 box-shadow: none; 485 padding: 0; 486 } 487 488 .chat-message.bot .chat-message-content.no-style { 489 background: none; 490 color: inherit; 491 } 492 493 .message-image { 494 margin-top: 8px; 495 border-radius: 8px; 496 overflow: hidden; 497 } 498 499 .message-image img { 500 max-width: 100%; 501 height: auto; 502 display: block; 503 } 504
505 /* no-styleã®å ´åãç»åã®ãã¼ã¸ã³ãèª¿æ´ */ 506 .chat-message-content.no-style .message-image { 507 margin-top: 0; 508 } 509 510 .chat-message.user .chat-message-content { 511 background: ${this.config.primaryColor}; 512 color: white; 513 border-top-right-radius: 4px; 514 width: 90%; 515 max-width: 630px; 516 } 517 518 .chat-message.user .chat-message-content.form { 519 background: white; 520 color: #333; 521 padding: 10px; 522 margin-bottom: 30px; 523 } 524 525 .button-options { 526 display: grid; 527 gap: 8px; 528 } 529 530 .button-option { 531 padding: 10px; 532 background: none; 533 border: 1px solid ${this.config.primaryColor}; 534 border-radius: 6px; 535 cursor: pointer; 536 color: ${this.config.primaryColor}; 537 font-size: 14px; 538 transition: all 0.2s; 539 width: 100%; 540 text-align: center; 541 } 542 543 .button-option:hover { 544 background: ${this.config.primaryColor}10; 545 } 546 547 .button-option.selected { 548 background: ${this.config.primaryColor}; 549 color: white; 550 pointer-events: none; 551 } 552 553 .text-input { 554 width: 100%; 555 padding: 8px 12px; 556 border: 1px solid #ddd !important; 557 border-radius: 6px; 558 font-size: 16px; 559 margin-bottom: 8px; 560 } 561 562 .text-input:focus { 563 outline: none; 564 border-color: ${this.config.primaryColor}; 565 } 566 567 .submit-button { 568 background: ${this.config.primaryColor}; 569 color: white; 570 border: none; 571 border-radius: 6px; 572 cursor: pointer; 573 font-size: 16px; 574 display: block; 575 margin: 0px auto; 576 } 577 578 .button-size-1{ 579 width: 118px; 580 height: 42px; 581 padding: 8px; 582 } 583 584 .button-size-2{ 585 width: 172px; 586 height: 42px; 587 padding: 8px 14px; 588 } 589 590 .input-preview { 591 color: #666; 592 font-size: 14px; 593 margin-top: 8px; 594 } 595 596 .input-preview.has-value { 597 color: #333; 598 font-weight: 500; 599 } 600 601 .form-group { 602 display: grid; 603 gap: 12px; 604 } 605 606 .form-field { 607 display: grid; 608 gap: 4px; 609 } 610 611 .form-field label { 612 font-size: 14px; 613 color: #666; 614 } 615 616 .form-field select { 617 width: 100%; 618 padding: 8px 12px; 619 border: 1px solid #ddd; 620 border-radius: 6px; 621 font-size: 14px; 622 background-color: white; 623 } 624 625 .form-field select:focus { 626 outline: none; 627 border-color: ${this.config.primaryColor}; 628 } 629 630 631 /* ãã£ããã¡ãã»ã¼ã¸ã®ã¢ãã¡ã¼ã·ã§ã³ */ 632 .chat-message { 633 opacity: 0; 634 transform: translateY(10px); 635 animation: messageAppear 0.3s ease forwards; 636 } 637 638 @keyframes messageAppear { 639 to { 640 opacity: 1; 641 transform: translateY(0); 642 } 643 } 644 645 646 .form-title { 647 font-size: 16px; 648 font-weight: 400; 649 color: #333; 650 margin-bottom: 12px; 651 padding-bottom: 8px; 652 border-bottom: 1px solid #eee; 653 } 654 655 .field-label { 656 font-size: 16px; 657 font-weight: 400; 658 color: #333; 659 margin-bottom: 12px; 660 padding-bottom: 8px; 661 border-bottom: 1px solid #eee; 662 padding-left: 0; 663 } 664 665 .form-field { 666 margin-bottom: 12px; 667 } 668 669 .text-input { 670 margin-top: 4px; 671 } 672 673 .input-container { 674 position: relative; 675 display: flex; 676 align-items: center; 677 } 678 679 .input-container.has-unit .text-input { 680 padding-right: 4em; 681 } 682 683 .input-unit { 684 position: absolute; 685 right: 12px; 686 color: #666; 687 font-size: 14px; 688 } 689 690 .validation-message { 691 color: #dc3545; 692 font-size: 12px; 693 margin-top: 4px; 694 display: none; 695 } 696 697 .text-input.invalid { 698 border-color: #dc3545; 699 } 700 701 .text-input.invalid:focus { 702 border-color: #dc3545; 703 box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25); 704 } 705 706 .text-input.textarea { 707 resize: vertical; 708 min-height: 100px; 709 max-height: 300px; 710 line-height: 1.5; 711 padding: 12px; 712 resize: none; 713 } 714 715 .confirmation-section, 716 .privacy-policy-section { 717 background: white; 718 // padding: 15px; 719 padding-bottom: 20px; 720 border-radius: 8px; 721 // margin-bottom: 15px; 722 } 723 724 .confirmation-summary { 725 max-height: 210px; 726 overflow-y: auto; 727 // white-space: pre-line; 728 line-height: 18px; 729 font-size: 16px; 730 border: 1px solid #ddd; 731 padding: 8px; 732 } 733 734 .privacy-policy-content { 735 max-height: 210px; 736 overflow-y: auto; 737 padding: 10px; 738 border: 1px solid #ddd; 739 border-radius: 4px; 740 margin: 10px 0; 741 font-size: 16px; 742 line-height: 1.6; 743 } 744 745 .agreement-section { 746 display: flex; 747 align-items: center; 748 gap: 8px; 749 // margin: 15px 0; 750 margin-bottom: 15px; 751 } 752 753 .agreement-section input[type="checkbox"] { 754 width: 18px;
755 height: 18px; 756 } 757 758 .agreement-section label { 759 font-size: 14px; 760 color: #333; 761 padding-left: 0; 762 } 763 764 /* ç¡å¹åãããå ¥åæ¬ã®ã¹ã¿ã¤ã« */ 765 .text-input:disabled { 766 cursor: pointer; 767 background-color: #f8f9fa; 768 opacity: 0.8; 769 } 770 771 .text-input:disabled:hover { 772 background-color: #e9ecef; 773 } 774 775 /* ãã¿ã³ã®ç¡å¹åç¶æ ã®ã¹ã¿ã¤ã« */ 776 .button-option:disabled { 777 cursor: pointer; 778 } 779 780 @media (max-width: 768px) { 781 .chatbot-container { 782 right: 10px !important; 783 bottom: 10px !important; 784 } 785 786 .chatbot-trigger { 787 width: 270px; 788 height: 44px; 789 } 790 791 .chatbot-trigger-head{ 792 overflow: hidden; 793 white-space: nowrap; 794 text-overflow: ellipsis; 795 line-height: 30px; 796 width: 178px; 797 margin-left: 12px; 798 padding: 0 10px; 799 border-radius: 20px; 800 } 801 .bot-icon-head { 802 width: 38px; 803 height: 38px; 804 } 805 806 .bot-icon-head img { 807 } 808 809 .trigger-icon-head { 810 position: absolute; 811 right: 8px; 812 } 813 814 .trigger-icon-head img { 815 width: 20px; 816 height: 20px; 817 } 818 819 .chatbot-window { 820 position: fixed; 821 top: 0; 822 left: 0; 823 right: 0; 824 bottom: 0; 825 width: 100%; 826 height: 100%; 827 border-radius: 0; 828 } 829 830 .chatbot-content { 831 height: calc(100% - 60px); 832 } 833 } 834 835 /* 20260521 CSS追å */ 836 .titlebold { 837 font-weight: bold; 838 } 839 `; 840 841 const styleSheet = document.createElement('style'); 842 styleSheet.textContent = styles; 843 document.head.appendChild(styleSheet); 844 } 845 846 createHTML() { 847 const container = document.createElement('div'); 848 container.className = `chatbot-container ${this.config.position}`; 849 850 // ããã©ã«ãããªã¬ã¼ãæå¹ãªå ´åã®ã¿è¿½å 851 if (this.config.defaultTrigger) { 852 container.innerHTML = ` 853 <div class="chatbot-trigger"> 854 <div class="bot-icon-head"> 855 <img src="${this.config.botIcon}" alt="Bot Icon"> 856 </div> 857 <div class="chatbot-trigger-head"> 858 ${this.config.subtitle} 859 </div> 860 <div class="trigger-icon-head"> 861 <img src="https://actwill.co.jp/wp/wp-content/themes/story_tcd041-child/bot_mail/img/header_arrow.png" alt="Bot Icon"> 862 </div> 863 </div> 864 `; 865 } 866 867 container.innerHTML += ` 868 <div class="chatbot-window"> 869 <div class="chatbot-header"> 870 <div class="chatbot-header-box"> 871 <div class="bot-icon-head"> 872 <img src="${this.config.botIcon}" alt="Bot Icon"> 873 </div> 874 <div class="chatbot-header-title-box"> 875 <div class="chatbot-title-sub titlebold">${this.config.title}</div> 876 <div class="chatbot-title">ãç³è¾¼ã¿ã»ãåãåããã¯ãã¡ã</div> 877 </div> 878 </div> 879 <div class="chatbot-progress"></div> 880 <span class="chatbot-close trigger-icon-head-2"><img src="https://actwill.co.jp/wp/wp-content/themes/story_tcd041-child/bot_mail/img/header_arrow.png" alt="Bot Icon"></span> 881 </div> 882 883 <div class="chatbot-content"></div> 884 </div> 885 `; 886 887 document.body.appendChild(container); 888 889 this.elements = { 890 container, 891 trigger: container.querySelector('.chatbot-trigger'), 892 window: container.querySelector('.chatbot-window'), 893 content: container.querySelector('.chatbot-content'), 894 close: container.querySelector('.chatbot-close'), 895 progress: container.querySelector('.chatbot-progress') 896 };
897 if (this.config.defaultTrigger) { 898 this.elements.trigger = container.querySelector('.chatbot-trigger'); 899 this.addTriggerElement(this.elements.trigger); 900 } 901 } 902 // æ°è¦ã¡ã½ãã: ããªã¬ã¼è¦ç´ ã追å 903 addTrigger(element) { 904 if (element) { 905 this.addTriggerElement(element); 906 } 907 return this; // ã¡ã½ãããã§ã¼ã³ç¨ 908 } 909 910 // æ°è¦ã¡ã½ãã: è¤æ°ã®ããªã¬ã¼è¦ç´ ãä¸åº¦ã«è¿½å 911 addTriggers(elements) { 912 if (Array.isArray(elements)) { 913 elements.forEach(element => this.addTriggerElement(element)); 914 } else if (typeof elements === 'string') { 915 // ã»ã¬ã¯ã¿æååã®å ´å 916 document.querySelectorAll(elements).forEach(element => this.addTriggerElement(element)); 917 } 918 return this; // ã¡ã½ãããã§ã¼ã³ç¨ 919 } 920 921 // æ°è¦ã¡ã½ãã: ããªã¬ã¼è¦ç´ ã®å¦ç 922 addTriggerElement(element) { 923 if (element && !this.triggerElements.has(element)) { 924 element.addEventListener('click', () => this.toggle()); 925 this.triggerElements.add(element); 926 } 927 } 928 929 // æ°è¦ã¡ã½ãã: ããªã¬ã¼è¦ç´ ãåé¤ 930 removeTrigger(element) { 931 if (this.triggerElements.has(element)) { 932 element.removeEventListener('click', () => this.toggle()); 933 this.triggerElements.delete(element); 934 } 935 return this; // ã¡ã½ãããã§ã¼ã³ç¨ 936 } 937 938 939 940 attachEventListeners() { 941 this.elements.close.addEventListener('click', () => this.close()); 942 } 943 944 toggle() { 945 this.isOpen = !this.isOpen; 946 this.elements.window.classList.toggle('open', this.isOpen); 947 } 948 949 close() { 950 this.isOpen = false; 951 this.elements.window.classList.remove('open'); 952 } 953 954 addBotMessage(message, options = {}) { 955 return new Promise(resolve => { 956 const messageDiv = document.createElement('div'); 957 messageDiv.className = 'chat-message bot'; 958 959 // ã¡ãã»ã¼ã¸ãé¢æ°ã®å ´åãanswers ã渡ãã¦å®è¡ 960 let messageContent = typeof message === 'function' 961 ? message(this.answers) 962 : message; 963 let messageContentClass = 'chat-message-content'; 964 965 // ç»åã®ã¿ã®å ´åãã¾ãã¯æ示çã«ã¹ã¿ã¤ã«ãæ¶ãæå®ãããå ´å 966 if (options.removeStyle || (options.image && !message.trim())) { 967 messageContentClass += ' no-style'; 968 } 969 970 if (options.image) { 971 messageContent += ` 972 <div class="message-image"> 973 <img src="${options.image}" alt="Message Image"> 974 </div> 975 `; 976 } 977 978 messageDiv.innerHTML = ` 979 <div class="message-label"></div> 980 <div class="message-content-wrapper"> 981 <div class="bot-icon"> 982 <img src="${this.config.botIcon}" alt="Bot Icon"> 983 </div> 984 <div class="${messageContentClass}">${messageContent}</div> 985 </div> 986 `; 987 988 this.elements.content.appendChild(messageDiv); 989 this.elements.content.scrollTop = this.elements.content.scrollHeight; 990 991 setTimeout(resolve, 500); 992 }); 993 } 994 995 // é£ç¶ã¡ãã»ã¼ã¸éä¿¡ã¡ã½ãã 996 async sendSequentialMessages(messages) { 997 for (const message of messages) { 998 if (typeof message === 'string') { 999 await this.addBotMessage(message); 1000 } else { 1001 await this.addBotMessage(message.text, { 1002 image: message.image 1003 }); 1004 } 1005 // ã¡ãã»ã¼ã¸éã«é©åº¦ãªéãè¨ãã 1006 await new Promise(resolve => setTimeout(resolve, 800)); 1007 } 1008 } 1009 1010 addUserForm(question) { 1011 const messageDiv = document.createElement('div'); 1012 messageDiv.className = 'chat-message user'; 1013 1014 const formContent = document.createElement('div'); 1015 formContent.className = 'chat-message-content form'; 1016 1017 if (question.title) { 1018 const titleDiv = document.createElement('div'); 1019 titleDiv.className = 'form-title'; 1020 titleDiv.textContent = question.title; 1021 formContent.appendChild(titleDiv); 1022 } 1023 1024 if (question.type === 'buttons') { 1025 const buttonsDiv = document.createElement('div'); 1026 buttonsDiv.className = 'button-options'; 1027 1028 question.options.forEach(option => { 1029 const button = document.createElement('button'); 1030 button.className = 'button-option'; 1031 if (option.className) button.classList.add(option.className); 1032 button.textContent = option.label; 1033 button.addEventListener('click', () => { 1034 button.classList.add('selected'); 1035 buttonsDiv.querySelectorAll('.button-option').forEach(btn => { 1036 if (btn !== button) { 1037 btn.disabled = true; 1038 btn.style.opacity = '0.5'; 1039 } 1040 }); 1041 this.handleAnswer(question.id, option.value, option.label); 1042 }); 1043 buttonsDiv.appendChild(button); 1044 }); 1045 1046 formContent.appendChild(buttonsDiv); 1047 } else if (question.type === 'form_group') { 1048 const form = document.createElement('form'); 1049 form.className = 'form-group'; 1050 1051 const formFields = {}; 1052 1053 question.fields.forEach(field => { 1054 const fieldContainer = document.createElement('div'); 1055 fieldContainer.className = 'form-field'; 1056 1057 const label = document.createElement('label'); 1058 label.textContent = field.label; 1059 label.className = 'field-label'; 1060 fieldContainer.appendChild(label); 1061 1062 let input; 1063 if (field.type === 'select') { 1064 input = document.createElement('select'); 1065 field.options.forEach(option => { 1066 const optionElement = document.createElement('option'); 1067 optionElement.value = option.value; 1068 optionElement.textContent = option.label; 1069 input.appendChild(optionElement); 1070 }); 1071 } else { 1072 input = document.createElement('input'); 1073 input.type = field.type; 1074 input.placeholder = field.placeholder; 1075 } 1076 1077 input.className = 'text-input'; 1078 input.required = field.required !== false; 1079 if (field.maxLength) input.maxLength = field.maxLength; 1080 if (field.pattern) input.pattern = field.pattern; 1081 1082 fieldContainer.appendChild(input); 1083 form.appendChild(fieldContainer); 1084 formFields[field.id] = input; 1085 1086 }); 1087 1088 // éµä¾¿çªå·ã®èªåå ¥åæ©è½ 1089 if (formFields.postal_code) { 1090 formFields.postal_code.addEventListener('input', async (e) => { 1091 const value = e.target.value.replace(/[^0-9]/g, ''); 1092 if (value.length === 7) { 1093 try { 1094 const response = await fetch(`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${value}`); 1095 const data = await response.json(); 1096 if (data.results) { 1097 const address = data.results[0]; 1098 if (formFields.prefecture) { 1099 formFields.prefecture.value = address.address1; 1100 } 1101 if (formFields.city) { 1102 formFields.city.value = address.address2 + address.address3; 1103 } 1104 } 1105 } catch (error) { 1106 console.error('éµä¾¿çªå·æ¤ç´¢ã¨ã©ã¼:', error); 1107 } 1108 } 1109 }); 1110 } 1111 1112 const submitButton = document.createElement('button'); 1113 submitButton.type = 'submit'; 1114 submitButton.className = 'submit-button button-size-1'; 1115 submitButton.textContent = '次ã¸'; 1116 form.appendChild(submitButton); 1117 1118 form.addEventListener('submit', (e) => { 1119 e.preventDefault(); 1120 // ãã¹ã¦ã®å ¥åãã£ã¼ã«ããç¡å¹å
1121 Object.values(formFields).forEach(input => { 1122 input.disabled = true; 1123 }); 1124 // éä¿¡ãã¿ã³ãç¡å¹å 1125 submitButton.disabled = true; 1126 submitButton.style.opacity = '0.5'; 1127 1128 const formData = {}; 1129 question.fields.forEach(field => { 1130 formData[field.id] = formFields[field.id].value; 1131 1132 }); 1133 this.handleAnswer(question.id, formData, JSON.stringify(formData)); 1134 }); 1135 1136 formContent.appendChild(form); 1137 } else if (question.type === 'confirmation') { 1138 const form = document.createElement('form'); 1139 1140 // å ¥åå 容確èªã»ã¯ã·ã§ã³ 1141 const confirmationSection = document.createElement('div'); 1142 confirmationSection.className = 'confirmation-section'; 1143 1144 const confirmTitle = document.createElement('div'); 1145 confirmTitle.className = 'form-title'; 1146 confirmTitle.textContent = 'å 容確èª'; 1147 confirmationSection.appendChild(confirmTitle); 1148 1149 // å ¥åå 容ã®ãµããªã¼ãä½æ 1150 const summary = document.createElement('div'); 1151 summary.className = 'confirmation-summary'; 1152 1153 // åä»å 容 1154 let summaryHTML = ` 1155 âåä»å 容<br> 1156 ããåãåããé ç®ã<br> 1157 ${this.answers.inquiry_type}<br> 1158 ãå¸æéé¡ã<br> 1159 ${this.answers.annual_revenue}ä¸å<br><br> 1160 âã客æ§æ å ±<br> 1161 ãä¼ç¤¾åã<br> 1162 ${this.answers.company_name}<br> 1163 ãä¼ç¤¾ä½æã<br> 1164 ã 1165 ${this.answers.address_group.postal_code} 1166 ${this.answers.address_group.prefecture} 1167 ${this.answers.address_group.city} 1168 ${this.answers.address_group.street} 1169 ${this.answers.address_group.building}<br> 1170 ã代表è åã<br> 1171 ${this.answers.representative_name}<br> 1172 ãä¼ç¤¾é»è©±çªå·ã<br> 1173 ${this.answers.contact_group.office_telephone_number}<br> 1174 ãæºå¸¯é»è©±çªå·ã<br> 1175 ${this.answers.contact_group.mobile_telephone_number}<br> 1176 ãã¡ã¼ã«ã¢ãã¬ã¹ã<br> 1177 ${this.answers.email}<br> 1178 ãå¹´åã<br> 1179 ${this.answers.annual_sales}ä¸å<br> 1180 ãåèæ¬ã<br> 1181 ${this.answers.remarks} 1182 `; 1183 1184 summary.innerHTML = summaryHTML; 1185 confirmationSection.appendChild(summary); 1186 form.appendChild(confirmationSection); 1187 1188 // ãã©ã¤ãã·ã¼ããªã·ã¼ 1189 const policySection = document.createElement('div'); 1190 policySection.className = 'privacy-policy-section'; 1191
1192 const policyTitle = document.createElement('div'); 1193 policyTitle.className = 'form-title'; 1194 policyTitle.textContent = 'å人æ å ±ä¿è·æ¹é'; 1195 policySection.appendChild(policyTitle); 1196 1197 const policyContent = document.createElement('div'); 1198 policyContent.className = 'privacy-policy-content'; 1199 policyContent.innerHTML = ` 1200â å½ç¤¾ã®å人æ å ±ä¿è·ã«é¢ããåºæ¬æ¹é<br> 1201ã¢ã¯ãã»ã¦ã£ã«æ ªå¼ä¼ç¤¾ã¯ãå½ç¤¾ã®ãå°åã®ä¸å°ä¼æ¥æ´»æ§åãã社ä¼è²¢ç®ããããã¨ããçµå¶ç念ã«åºã¥ãã社ä¼ç責任ã®éè¦æ§ãååã«èªèãã¦ã社ä¼ã«è²¢ç®ãã¦ãããã¨ãç®æãã¦ããã¾ãã å½ç¤¾ã¯ã以ä¸ã®æ¡é ãéµå®ããã客æ§ããåå¾ããå人æ å ±ã®ä¿è·ã«ä¸å ¨ãå°½ããã¦ã¾ããã¾ãã å½ç¤¾ã¯ãå人æ å ±ã®ä¿è·ã«é¢ããæ³å¾ï¼å¹³æ15å¹´5æ30æ¥æ³å¾ç¬¬57å·ï¼ãã®ä»é¢ä¿æ³ä»¤ãéµå®ãããã¾ãã 1202<br><br> 12031.å½ç¤¾ã¯ãå人æ å ±ã®ä¿è·ã«é¢ããæ³å¾ï¼å¹³æ15å¹´5æ30æ¥æ³å¾ç¬¬57å·ï¼ãã®ä»é¢ä¿æ³ä»¤ãéµå®ãããã¾ãã<br> 12042.å½ç¤¾ã¯ãå人æ å ±ä¿è·ã«é¢ããã³ã³ãã©ã¤ã¢ã³ã¹ã»ããã°ã©ã åã³å人æ å ±ä¿è·è¦ç¨ãå®ããç¶ç¶çã«è¦ç´ããæ¹åã«åªãã¦ã¾ããã¾ãã<br> 12053.å½ç¤¾ã¯ãåå¾ããå人æ å ±ã®åæ±ãã«å½ãã£ã¦ã¯ããã®å©ç¨ç®çãæ確ã«ãããã®ç®çã®ç¯å²å ã§å©ç¨ãããã¾ãã<br> 12064.å½ç¤¾ã¯ãåéããå人æ å ±ã®ä¿è·ã«é¢ããå®å ¨ç®¡çè¦ç¨ãå®ããä¸æ£ã¢ã¯ã»ã¹ãå人æ å ±ã®ç´å¤±ãç ´å£ãæ¹ããåã³æ¼ãããªã©ã®äºé²ã«åªããã¨ã¨ãã«ãè¦ç¨ã®ç¶ç¶çãªè¦ç´ãåã³æ¹åã«åªãã¦ã¾ããã¾ãã<br> 12075.å½ç¤¾ã¯ãå人æ å ±ã®åå¾ãå©ç¨åã³æä¾ã«é¢ããç£æ»ãå®æçã«è¡ãããã®å®£è¨å 容ã®é©åãªå®è·µã«ä¸å ¨ãå°½ããã¾ãã<br> 1208<br> 1209â å人æ å ±ã®åãæ±ãã«é¢ãã宣è¨<br> 1210å½ç¤¾ã¯ãå人æ å ±ã®ä¿è·ã«é¢ããæ³å¾ï¼å¹³æ15å¹´5æ30æ¥æ³å¾ç¬¬57å·ã以ä¸ãå人æ å ±ä¿è·æ³ãã¨ããã¾ããï¼ããã³å½ç¤¾ã®ãå人æ å ±ã®ä¿è·ã«é¢ããå½ç¤¾ã®åºæ¬æ¹éï¼ãã©ã¤ãã·ã¼ããªã·ã¼ï¼ãã®ç念ã«å¾ããã客æ§ããã®å人æ å ±ã«ã¤ãã¦ã以ä¸ã®ã¨ããåå¾ã管çãªã©ãè¡ãã¾ãã 1211<br><br> 1212ã客æ§ã®å人æ å ±ã®å©ç¨ç®ç<br> 1213å½ç¤¾ã¯ãå人æ å ±ã®åå¾ã«ããã£ã¦ã¯ãåå¾ããå人æ å ±ã®å©ç¨ç®çãæ確ã«ãã<br> 1214å©ç¨ç®çã®éæã«å¿ è¦ãªç¯å²å ã§ãå人æ å ±ãå©ç¨ãããã¾ãã<br> 1215<br> 1216å©ç¨ç®çã®ä¾<br> 1217å½ç¤¾ã®å©ç¨ç®çã¯ãä¾ãã°ã以ä¸ã®ã¨ããã§ãã<br> 1218<br> 1219ã客æ§ãç³ãè¾¼ã¾ããå¥ç´ã«ã¤ãã¦å¥ç´ç· çµã®å¯å¦ãªã©ãå¤æãã ç®çï¼ä¸ä¿¡å¤æã®ããï¼<br> 1220ä¸ä¿¡å¾ã®è¿æ¸ã»èè³ãããåãåããã«å¯¾ããå çãªã©ãé©åã«è¡ãç®çï¼åå¼ã«é¢ããè¨é²ä¿åã®ããï¼<br> 1221å½ç¤¾ãã客æ§ã¨ç´æ¥ãèè³ã«ä¿ãå¥ç´ãªã©ãç· çµããéã®å©ç¨ç®ç<br> 1222<br> 1223å©ç¨ç®çã®ä¾<br> 1224å½ç¤¾ã¯ï½¤ã客æ§ã®å人æ å ±ã«ã¤ãã¦æ¬¡ã®å©ç¨ç®çã®ç¯å²å ã§é©æ£ã«å©ç¨ãããã¾ãã<br> 1225å½ç¤¾ã®ä¸ä¿¡å¤æã®ãã<br> 1226(1)å½ç¤¾ã®ä¸ä¿¡ãªãã³ã«ä¸ä¿¡å¾ã®æ¨©å©ã®ä¿åã管çãå¤æ´ããã³æ¨©å©è¡ä½¿ã®ãã<br> 1227(2)ã客æ§ã®æ¬ç±å°ã«é¢ããæ å ±ã«ã¤ãã¦ã¯ãã客æ§ç¢ºèªããã³æå¨ç¢ºèªã®ãã<br> 1228å½ç¤¾ã®ä¸ä¿¡å¾ã®æ¨©å©ã«é¢ããåµæ¨©è²æ¸¡ãªã©ã®å¦åããã³æ ä¿å·®å ¥ããã®ä»ã®åå¼ã®ãã<br> 1229å½ç¤¾ã¨ã客æ§ã¨ã®åå¼ããã³äº¤æ¸çµéãã®ä»ã®äºå®ã«é¢ããè¨é²ä¿åã®ãã<br> 1230å½ç¤¾ã®ä¸ä¿¡ã«ä¿ãååããã³ãµã¼ãã¹ã®ãæ¡å ã®ãã<br> 1231å½ç¤¾å é¨ã«ãããå¸å ´èª¿æ»ããã³åæãªãã³ã«éèååããã³ãµã¼ãã¹ã®ç 究ããã³éçºã®ãã<br> 1232<br> 1233â å人æ å ±ã®å ±åå©ç¨ã«ã¤ãã¦<br> 1234å½ç¤¾ã¯ï½¤ã客æ§ã®å人æ å ±ã«ã¤ãã¦ãåè¨ãå人æ å ±ã®ç¬¬ä¸è ã¸ã®æä¾ã«ã¤ãã¦ããéèååãªã©ããã³ãµã¼ãã¹ã®ãæ¡å ã«ã¤ãã¦ãã®å 容ã«ãããããã以ä¸ã®ç¯å²ã§å ±åå©ç¨ãããã¨ãããã¾ãããªããæ³äººæ å ±ï¼æ³äººåã代表è åãæå¨å°ãé»è©±çªå·çï¼ã«ã¤ãã¦ãåãç¯å²ã§å ±åå©ç¨ãããã¨ãããã¾ãã 1235<br><br> 1236ï¼ãå ±åå©ç¨è ã®å©ç¨ç®ç<br> 1237â åå ±åå©ç¨è ã®äºæ¥è åãèè³ååã»ä¿è¨¼ã®ä¸ä¿¡å¤æã®ãã<br> 1238â¡åå ±åå©ç¨è ã®äºæ¥è åãèè³ååã»ä¿è¨¼ã®ä¸ä¿¡ãªãã³ã«ä¸ä¿¡å¾ã®æ¨©å©ã®ä¿åã管çãå¤æ´ããã³æ¨©å©è¡ä½¿ã®ãã<br> 1239â¢åå ±åå©ç¨è ã®äºæ¥è åãèè³ååã»ä¿è¨¼ã®ä¸ä¿¡å¾ã®æ¨©å©ã«é¢ããåµæ¨©è²æ¸¡çã®å¦åããã³æ ä¿å·®å ¥ããã®ä»ã®åå¼ã®ãã<br> 1240â£åå ±åå©ç¨è ã¨é¢ä¿å½äºè ã¨ã®äºæ¥è åãèè³ååã»ä¿è¨¼ã®åå¼ããã³äº¤æ¸çµéãã®ä»ã®äºå®ã«é¢ããè¨é²ä¿åã®ãã<br> 1241â¤åå ±åå©ç¨è å é¨ã«ãããäºæ¥è åãèè³ååã»ä¿è¨¼ã®å¸å ´èª¿æ»ããã³åæãªãã³ã«éèååããµã¼ãã¹ã®ç 究ãéçºã®ã
1241ã<br> 1242<br> 1243<br> 1244ï¼ãå ±åå©ç¨ãããã¼ã¿é ç®<br> 1245â æ¬äººç¹å®ã«é¢ããæ å ±ï¼æ°åãçå¹´ææ¥ãæ§å¥ãä½æãé»è©±çªå·ãã¡ã¼ã«ã¢ãã¬ã¹ãå¤åå ãå¤åå é»è©±çªå·ã家ææ§æãå± ä½ç¶æ³ããã³é転å 許証çã®è¨å·çªå·çï¼<br> 1246â¡å¥ç´å 容ã«é¢ããæ å ±ï¼å¥ç´ã®ç¨®é¡ãç³è¾¼æ¥ãå¥ç´æ¥ã貸ä»æ¥ãå¥ç´éé¡ããã³è²¸ä»éé¡ã»ä¿è¨¼é¡çï¼<br> 1247â¢è¿æ¸ç¶æ³ã«é¢ããæ å ±ï¼å ¥éæ¥ãå ¥éäºå®æ¥ã貸ä»æ®é«ãå®æ¸æ¥ããã³å»¶æ»çï¼<br> 1248â£åå¼äºå®ã«é¢ããæ å ±ï¼åµæ¨©ååãåµåæ´çãä¿è¨¼å±¥è¡ãå¼·å¶è§£ç´ãç ´ç£ç³ç«ãåµæ¨©è²æ¸¡çï¼<br> 1249â¤ä¸ä¿¡ã«é¢ããæ å ±ï¼åæ¯ãè³ç£ã»è² åµãè·æ´ããã³åå ±åå©ç¨è ã®ä¸ä¿¡è©ä¾¡æ å ±çï¼<br> 1250<br> 1251ï¼ããã¼ã¿ã®ç®¡çã«ã¤ãã¦è²¬ä»»ãæããè ãæ å ±ãåå¾ããåå ±åå©ç¨è <br> 1252åå¾ããå人æ å ±ã®ä¾<br> 1253å½ç¤¾ãåå¾ããã客æ§ã®å人æ å ±ãªã©ã¯ãä¾ãã°ã以ä¸ã®ã¨ããã§ããï¼ä¸é¨ãå人æ å ±ä¿è·æ³ã«å®ããå人æ å ±ã«è©²å½ããªãæ å ±ãå«ã¾ãã¾ããï¼<br> 1254<br> 1255â æ°åãæ§å¥ãçå¹´ææ¥ãä½æãé»è©±çªå·ãæºå¸¯é»è©±çªå·ãå¤åå ã«é¢ããå 容ã家ææ§æã家ææ å ±ãä½å± ç¶æ³ãä¿éºç¨®é¡ãï½ ã¡ã¼ã«ã¢ãã¬ã¹ããã®ä»ãæ¬äººã®ç¹å®ã«é¢ããæ å ±<br> 1256â ã客æ§ããå©ç¨ããã¦ããå¥ç´ã®ç¨®é¡ãç³è¾¼æ¥ãå¥ç´æ¥ãåååãå¥ç´æ¥µåº¦é¡ãå¥ç´éé¡ãå©ç¨æ®é«ãæã ã®è¿æ¸ç¶æ³ããã®ä»åå¼ã«é¢ããæ å ±<br> 1257â» ã客æ§ããã®ãåãåããå 容ãªã©ãæ£ç¢ºã«ææ¡ãã対å¿ã
1257ãã¦ããã ãããã«ãã客æ§ã¨ã®é話ãè¨é²ããã¦ããã ãå ´åããããã¾ãããªãããã®è¨é²ã¯6ã¶æ以å ã«æ¶å»ãããã¾ãã<br> 1258â» ã客æ§ããåºèã«ãæ¥åºãããéã«ãé²ç¯ãããªãªã©ã«ããã客æ§ã®ç»åããã³æ åãè¨é²ããé²ç¯ããã³æ¬äººç¢ºèªã®ç®çã§å©ç¨ãããã¨ãããã¾ãããªãããã®è¨é²ã¯6ã¶æ以å ã«æ¶å»ãããã¾ãã<br> 1259<br> 12602ãå人æ å ±ã®é©æ£ãªåå¾<br> 1261å½ç¤¾ã¯ãé©æ£ãªæ¹æ³ã§å人æ å ±ãåå¾ãããã¾ãã<br> 1262é©æ£ãªåå¾æ¹æ³ã®ä¾<br> 1263å½ç¤¾ã®å人æ å ±ã®åå¾æ¹æ³ã¯ãä¾ãã°ã以ä¸ã®ã¨ããã§ãã<br> 1264â ã客æ§ãå½ç¤¾ã®ç³è¾¼æ¸ã®æ¸é¢ã«å¿ è¦äºé ããè¨å ¥ããã ããã¨ã«ããåå¾ããæ¹æ³<br> 1265â ã客æ§ãã¤ã³ã¿ã¼ããããªã©ã«ã¦ãå½ç¤¾ãã¼ã ãã¼ã¸ã«ã¢ã¯ã»ã¹ããéã«ããæä¾ããã ããã¨ã«ããåå¾ããæ¹æ³<br> 1266â å½ç¤¾ãå®å ±ãＮＴＴä½æã®é»è©±å¸³ãªã©ä¸è¬ã«å ¬éããã¦ããæ å ±åªä½ããåå¾ããæ¹æ³<br> 1267â ã客æ§ããå£é ã«ããå½ç¤¾ã«ãç³ãåºããã ããã¨ã«ããåå¾ããæ¹æ³<br> 1268â»å¥ç´ã®ç· çµã®ææ確èªæãä¿è¨¼å¥ç´ã®ç· çµã®ææ確èªæçãã客æ§ã¨å½ç¤¾ã®ä¼è©±å 容ã¯é²é³ãã¦ããã¾ãã<br> 1269<br> 12703ããã®ä»ã®ä¿æå人ãã¼ã¿ã®å©ç¨ç®ç<br> 1271å½ç¤¾ã«å ¥ç¤¾ï¼æ¡ç¨ï¼ãå¸æãããæ¹ããã³æ¡ç¨è ã®å人æ å ±ã«ã¤ãã¦ã®å©ç¨ç®ç<br> 1272å½ç¤¾ã¯ãå½ç¤¾ã«æ¡ç¨ãå¸æãããæ¹ã®å人æ å ±ã«ã¤ãã¦ä»¥ä¸ã®å©ç¨ç®çã§ä½¿ç¨ãããã¾ãã®ã§å ¬è¡¨ãããã¾ãã<br> 1273â å½ç¤¾ã®æ¡ç¨ã®å¤æã®ãã<br> 1274â å½ç¤¾ã§ã®æ¡ç¨ã決å®ããå ´åã¯ãå¾æ¥å¡ç®¡çã®ãã<br> 1275<br> 12764ãå人æ å ±ã®ç¬¬ä¸è ã¸ã®æä¾ããã³å ±åå©ç¨<br> 1277å½ç¤¾ã¯ãã客æ§ã®äºåã®åæã«åºã¥ããå人æ å ±ãæä¾ãããã¨ãããã¾ãã<br> 1278ã¾ããäºæ¥è åãèè³ååã»ä¿è¨¼ãåæ±ãä¼ç¤¾ã«ããã¦ãå人æ å ±ãå ±åå©ç¨ãããã¨ãããã¾ãã<br> 1279ãªããå½ç¤¾ã¯ãã客æ§ã®åæãå¾ã¦æä¾ããå ´åãæ³ä»¤ãªã©ã«åºã¥ãå ´åããã³ãã®ä»æ£å½ãªäºç±ã«åºã¥ãæä¾ããå ´å以å¤ã«ã¯ãã客æ§ã®å人æ å ±ã第ä¸è ã«æä¾ãããã¾ããã<br> 1280<br>
12815ãå人æ å ±ã®é示ãªã©<br> 1282â ãç¸è«çªå£<br> 1283é示ãªã©ã®ç¸è«çªå£ã¯ä»¥ä¸ã®ã¨ããã§ãã<br> 1284æ±äº¬é½è±å³¶åºæ±æ± è¢3-11-9<br> 1285ã¢ã¯ãã»ã¦ã£ã«æ ªå¼ä¼ç¤¾ãã客æ§ãµã¼ãã¹ã»ã³ã¿ã¼<br> 1286é»è©± ï¼03-5944-9168ï¼åä»æéãå¹³æ¥9ï¼00ï½17ï¼00ï¼<br> 1287<br> 1288âªé示çã®è«æ±ãã§ããè ï¼é示è«æ±æ¨©è ï¼â«<br> 1289ã»æ¬äºº<br> 1290ã»ä»£ç人<br> 1291â é示çè«æ±æ¹æ³<br> 1292ã»å£é ã¾ãã¯å½ç¤¾ãå¿ è¦ã¨èªããå ´åã¯æ¸é¢ã«ããè«æ±ããã ãã¾ãã<br> 1293å¿ è¦é ç®<br> 1294(1) é示ãªã©ãæ±ãããã客æ§æ¬äººãèå¥ãããä¿æå人ãã¼ã¿ï¼å人æ å ±ï¼ã®é ç®ã<br> 1295 (2) ã客æ§ã®ãæ°åãã»ãä½æãã»ãçå¹´ææ¥ãã»ãé»è©±çªå·ï¼æºå¸¯é»è©±å¯ï¼ãã»ãã«ã¼ãçªå·ã<br> 1296 (3) é示è«æ±æ¨©è æ¬äººã確èªã§ããæ¸é¢ã¨ãã¦ãé転å 許証ã¾ãã¯æ å¸ãé示è«æ±è ãå¤å½ç±ã®å ´åã¯å¤å½äººç»é²è¨¼ææ¸ã®åããªã© (4) é示è«æ±æ¨©è ã代ç人ã®å ´åã¯ãä¸è¨ã«å ã代ç権ã証ããæ¸é¢ï¼å§ä»»ç¶ãªã©ï¼ãå°é証ææ¸ ã»ãã®ä»ãç¹ã«é示è«æ±æ¨©è ãæ±ããå½ç¤¾ãæ¿è«¾ããæ¹æ³<br> 1297<br> 1298â é示ãªã©ã«ä¼´ãæ¡ä»¶<br> 1299ã»æå®ã®ãæ¬äººæ§ç¢ºèªã«ãããæ¬äººã¾ãã¯ä»£ç人ã§ãããã¨ã®ç¢ºèªãè¡ãã¾ãã<br> 1300ã»ä»£ç人ãæ£å½ãªä»£ç権ãæã£ã¦ãããå¦ãã®ç¢ºèªãè¡ãã¾ãã<br> 1301â é示ãªã©ã«ä¿ãææ°æ<br> 1302ã»ååã¨ãã¦ç¡æã¨ãã¾ãã<br> 1303ï¼ä½ããé示ãªã©è«æ±å 容ã«ãããå®è²»ç¸å½é¡ï¼éµéè²»ç¨ã調æ»è²»ç¨ãªã©ï¼ãè«æ±ããã¦ããã ãå ´åããããã¾ããï¼<br> 1304â é示çã®æµã<br> 1305é示ãªã©ã®åºæ¬çãªæµãã¯ä»¥ä¸ã®éãã§ãã<br> 1306<br> 1307(1) é示è«æ±<br> 1308ããâ<br> 1309(2) é示æ å½é¨ç½²ã«ã¦åä»<br> 1310ããâ<br> 1311(3) å½ç¤¾ã«ã¦èª¿æ»<br> 1312ããâ<br> 1313(4) é示ãªã©è«æ±è ã¸ã®é示<br> 1314<br> 1315â ãçæç¹<br> 1316â» ã客æ§ã®ãè¦æã«ãããç¹ã«å½ç¤¾ãæ¿è«¾ããå ´åã¯ãä¸è¨ä»¥å¤ã®æ¹æ³ã«ã¦é示ãªã©å¯¾å¿ãããã¨ãããã¾ãã<br> 1317â» é示ãªã©è«æ±æ¨©è ã§ãªããã¨ãå¤æããå ´åãæ£å½ãªä»£ç人ã§ãªãã¨å½ç¤¾ãå¤æããå ´åãã客æ§æ¬äººãèå¥ãããä¿æå人ãã¼ã¿ï¼å人æ å ±ï¼ã®é ç®ä»¥å¤ã®é示ãªã
1317©è«æ±ã®å ´åãªã©ãå½ç¤¾ã®å®ããæ¹æ³ã«ãããªãè«æ±ã®å ´åã¯é示è«æ±ãªã©ãåãä»ãããªããã¨ãã¾ãã¯ãéé示ã¨ãããã¨ãããã¾ãã®ã§ãããããããäºæ¿ãããã¾ãã<br> 1318ãªããä¸è¨ã®å ´åã¯é示ãªã©è«æ±è ã«å¯¾ããã®æ¨ãéç¥ãããã¾ãã<br> 1319â» é示ãªã©è«æ±é ç®ãé示ãªã©ã®éãªã©ã«ããã対å¿ã¾ã§ã«ç¸å½ã®æéãè¦ãããã¨ãããã¾ãã<br> 1320<br> 13216ããåãåããçªå£<br> 1322å人æ å ±ã«ã¤ãã¦ã®è³ªåãªã©ã®ãåãåããã¯ã以ä¸ã®çªå£ã¾ã§ãé¡ããããã¾ãã<br> 1323å人æ å ±ã«é¢ãããç¸è«ãå人æ å ±ã®é示ãè¨æ£ãå©ç¨åæ¢çã®æç¶ãã«ã¤ãã¾ãã¦ã¯ã次ã®å人æ å ±ç¸è«çªå£ã«ãç¸è«ãã ããã<br> 1324<br> 1325âªãç¸è«çªå£â«<br> 1326é示çã®ç¸è«çªå£ã¯ä»¥ä¸ã®ã¨ããã§ãã<br> 1327æ±äº¬é½è±å³¶åºæ±æ± è¢3-11-9<br> 1328ã¢ã¯ãã»ã¦ã£ã«æ ªå¼ä¼ç¤¾ãã客æ§ãµã¼ãã¹ã»ã³ã¿ã¼<br> 1329é»è©± ï¼03-5944-9168ããï¼åä»æéãå¹³æ¥9ï¼00ï½17ï¼00ï¼<br> 1330<br> 13317ãå人æ å ±ã®åãæ±ãã®å§è¨<br> 1332å人æ å ±ä¿è·æ³ã®è¦å®ã«å¾ããå½ç¤¾ã®æ¥åå§è¨å ã«å¯¾ãã¦å人æ å ±ã®åãæ±ããå§è¨ããå ´åããããã¾ãããã®å ´åã«ã¯ãæ¥åå§è¨å ã«ããã¦å人æ å ±ã®ä¿è·ãååã«å³ããã¦ãããã¨ã確èªããä¸ã§ãå人æ å ±ã®ä¿è·ã«é¢ããå¥ç´ãç· çµããå¿ è¦ã«å¿ããç£æ»ãå®æ½ãããªã©ã®é©åãªæªç½®ãè¬ãã¾ãã<br> 1333<br> 13348ãå人æ å ±ã®ç®¡ç<br> 1335å½ç¤¾ã¯ãå人æ å ±ã®åãæ±ãã«é¢ãã¦ç®¡ç責任è ãç½®ããå人æ å ±ä¿è·æ³ãã®ä»é¢ä¿æ³ä»¤ã®éµå®ãå¾¹åºãããã¾ãã<br> 1336<br> 13379ããã¼ã ãã¼ã¸ã®ã»ãã¥ãªãã£ã¼<br> 1338å½ç¤¾ã§ã¯ãPCãµã¤ãã«ããã¦cookieï¼ã¯ããã¼ï¼ãå©ç¨ãã¦ãã¾ããcookieã¨ã¯ãå½ç¤¾ãWebãã©ã¦ã¶ã¼ãéãã¦ã客æ§ã®ã³ã³ãã¥ã¼ã¿ã«ä¸æ¬¡çã«ãã¼ã¿ãæ¸è¾¼ãã§ä¿åããä»çµã¿ã§ããå½ç¤¾ã§ã¯ãcookieãå½ç¤¾ãã¼ã ãã¼ã¸ã®ãµã¼ãã¹åä¸ãå½ç¤¾ãã¼ã ãã¼ã¸ã®å©ç¨ç¶æ³ã®ææ¡ããã¼ã ãã¼ã¸ã®éç¨ã«é¢ããçµ±è¨æ å ±ããã³ä¸æ£ã¢ã¯ã»ã¹ãªã©ã®åå 調æ»ã®ããã«ä½¿ç¨ãã¦ãããã客æ§å人ãç¹å®ã§ããæ å ±ã¯cookieã«å«ã¾ãã¦ãã¾ãããã¾ãã調æ»ã«å½ã£ã¦ã¯ãå½ç¤¾ãã¼ã ãã¼ã¸ã«ã¢ã¯ã»ã¹ãããæ¹ã®æ å ±ãã¢ã¯ã»ã¹ãã°ã¨ããå½¢ã§è¨é²ãã¦ãã¾ããã¢ã¯ã»ã¹ãã°ã«ã¯ã¢ã¯ã»ã¹ãããæ¹ã®ãã¡ã¤ã³åãIPã¢ãã¬ã¹ãã¢ã¯ã»ã¹ãããæ¥ä»ã»æå»ãªã©ãå«ã¾ãã¦ããå½ç¤¾ã®ã客æ§ã«ããã¦ã¯ãå人æ å ±ã¨ç §åãããã¨ãå¯è½ã§ãã ãªããå½ç¤¾ã§ã¯ã¢ã¯ã»ã¹ãã°ãé²è¦§ã»å©ç¨ã§ããè ã社å ã®ç¹å®äººç©ã«éå®ãã¾ãå©ç¨ã§ããå ´æã«ã¤ãã¦ãåæ§ã«éå®ãã¦ããé©åã«å©ç¨ããç°å¢ãæ§ç¯ãã¦ããã¾ãããªããã¢ã¯ã»ã¹ãã°ã第ä¸è ã«é示ã»è²æ¸¡ã¾ãã¯è²©å£²ãããã¨ã¯ããã¾ããã å°ãå½ç¤¾PCãµã¤ãã§ã®ã客æ§ã®å人æ å ±ã¯ã°ãã¼ãã«ãµã¤ã³ã®SSLã«ããä¿è·ãã¦ããã¾ãã<br> 1339<br> 134010ããã¼ã ãã¼ã¸ã®ãå©ç¨ä¸ã®æ³¨æç¹<br> 1341å½ç¤¾ã®ãã¼ã ãã¼ã¸ã¯ãæ¥æ¬å½ã®æ³å¾ã«æºæ ãã¦é©æ£ã«ä½æããã¦ããã¾ãããé²è¦§ãå©ç¨ã«éãã¦ã¯ãããããã次ã®ç¹ããæ¿ç¥ãããã ããã<br> 1342â å½ç¤¾ã®ãã¼ã ãã¼ã¸ã¸ã®ã¢ã¯ã»ã¹ãæµ·å¤ããè¡ãããå ´åã«ãæ¥æ¬å½ã®æ³å¾ãé©ç¨ããããã¨<br> 1343â å½ç¤¾ã®ãã¼ã ãã¼ã¸ä¸ã®æ²è¼ç©ã«ã¤ãã¦ã¯ãã¢ã¯ã»ã¹ãããæ¹ã®å½ã®æ³å¾ã«ç §ããã¦é©åã§ãããã©ããã®è¡¨ç¤ºãè¨è¿°ã¯è¡ã£ã¦ããããå½ç¤¾ã®ãã¼ã ãã¼ã¸ã®é²è¦§ãå©ç¨ã«ä¼´ã責任ã¯ãã¢ã¯ã»ã¹ãããã客æ§ã«ãããã¨<br> 1344å½ç¤¾ã®ãã¼ã ãã¼ã¸ã®é²è¦§ãå©ç¨ã«é¢ãã訴è¨ã«ã¤ãã¦ã¯ãæ±äº¬å°æ¹è£å¤æã第1審ã®å°å±ç®¡è½è£å¤æã¨ãã¾ãã<br> 1345å½ç¤¾ã¯ããå¹³æ26å¹´3æ20æ¥ãããããå½ç¤¾ã®å人æ å ±ä¿è·ã«é¢ããåºæ¬æ¹éï¼ãã©ã¤ãã·ã¼ããªã·ã¼ï¼ãããã³ãã®å®£è¨ãå®æ½ãããã¦ããã¾ãã<br> 1346å½ç¤¾ã¯ãå人æ å ±ä¿è·æ³ããã³ãã®ä»ã®æ³ä»¤ãªã©ã®å¤æ´ã«ä¼´ããå¿ è¦ã«å¿ãã¦ãå½ç¤¾ã®å人æ å ±ä¿è·ã«é¢ããåºæ¬æ¹éï¼ãã©ã¤ãã·ã¼ããªã·ã¼ï¼ãããã³ãã®å®£è¨ã®ä¸é¨ã¾ãã¯å ¨é¨ãæ¹è¨ãããã¨ãããã¾ããã¾ããå½ç¤¾ã®æ¥åå 容ã®å¤åã
1346«ä¼´ãåççãªå¿ è¦ãçããå ´åã«ã¯ãå½ç¤¾ãåå¾ããå人æ å ±ã«ã¤ãã¦ã®å©ç¨ç®çãå¤æ´ããã¦ããã ããã¨ãããã¾ãã<br> 1347ãããã®å¤æ´ã®ãã¡ç¹ã«éè¦ãªå¤æ´ã«ã¤ãã¦ã¯ãå½ç¤¾ãã¼ã ãã¼ã¸ã¾ãã¯æå¯ãã®åºèã«ããã¦ãç¥ãããããã¾ãã®ã§ãå®æçãªã確èªããé¡ããããã¾ãã<br> 1348<br> 1349å¹³æ26å¹´3æ20æ¥ <br> 1350ã¢ã¯ãã»ã¦ã£ã«æ ªå¼ä¼ç¤¾<br> 1351 `; 1352 policySection.appendChild(policyContent); 1353 1354 // åæãã§ãã¯ããã¯ã¹ 1355 const agreementDiv = document.createElement('div'); 1356 agreementDiv.className = 'agreement-section'; 1357 1358 const checkbox = document.createElement('input'); 1359 checkbox.type = 'checkbox'; 1360 checkbox.id = 'agreement'; 1361 checkbox.required = true; 1362 1363 const label = document.createElement('label'); 1364 label.htmlFor = 'agreement'; 1365 label.textContent = 'åæãã'; 1366 1367 agreementDiv.appendChild(checkbox); 1368 agreementDiv.appendChild(label); 1369 form.appendChild(policySection); 1370 form.appendChild(agreementDiv); 1371 1372 // éä¿¡ãã¿ã³ 1373 const submitButton = document.createElement('button'); 1374 submitButton.type = 'submit'; 1375 submitButton.className = 'submit-button button-size-2'; 1376 submitButton.textContent = 'å ¥åå 容ãéä¿¡ãã'; 1377 submitButton.disabled = true; // åæç¶æ ã¯ç¡å¹ 1378 submitButton.style.opacity = '0.5'; // åæç¶æ ã¯ç¡å¹ 1379 1380 // ãã§ãã¯ããã¯ã¹ã®ç¶æ ã«ããéä¿¡ãã¿ã³ã®æå¹/ç¡å¹ãåãæ¿ã 1381 checkbox.addEventListener('change', (e) => { 1382 submitButton.disabled = !e.target.checked; 1383 submitButton.style.opacity = e.target.checked ? '1' : '0.5'; 1384 }); 1385 1386 form.appendChild(submitButton); 1387 form.addEventListener('submit', (e) => { 1388 e.preventDefault(); 1389 this.handleAnswer('confirmation', true, 'confirmed'); 1390 }); 1391 1392 formContent.appendChild(form); 1393 } else { 1394 const form = document.createElement('form'); 1395 1396 if (question.label) { 1397 const label = document.createElement('label'); 1398 label.className = 'field-label'; 1399 label.textContent = question.label; 1400 form.appendChild(label); 1401 } 1402 1403 // å ¥åãã£ã¼ã«ãã®ã³ã³ãããä½æ 1404 const inputContainer = document.createElement('div'); 1405 inputContainer.className = 'input-container'; 1406 if (question.unit) { 1407 inputContainer.classList.add('has-unit'); 1408 } 1409 1410 // å ¥åè¦ç´ ã®ä½æ 1411 let input; 1412 if (question.type === 'textarea') { 1413 input = document.createElement('textarea'); 1414 input.className = 'text-input textarea'; 1415 input.rows = 4; // è¡æ°ãæå® 1416 } else { 1417 input = document.createElement('input'); 1418 input.type = question.type; 1419 input.className = 'text-input'; 1420 } 1421 1422 input.placeholder = question.placeholder; 1423 if (question.id !== 'remarks') { 1424 input.required = true; 1425 } 1426 1427 // éé¡å ¥åã®å ´åã®ã«ã¹ã¿ãã¤ãº 1428 if (question.numberOnly) { 1429 input.pattern = '[0-9]*'; 1430 input.inputMode = 'numeric'; 1431 1432 // ããªãã¼ã·ã§ã³ã¡ãã»ã¼ã¸ç¨ã®div 1433 const validationMessage = document.createElement('div'); 1434 validationMessage.className = 'validation-message'; 1435 validationMessage.style.display = 'none'; 1436 validationMessage.textContent = 'æ°åã§å ¥åãã¦ãã ãã'; 1437 1438 input.addEventListener('input', (e) => { 1439 const value = e.target.value; 1440 const isValid = /^[0-9]*$/.test(value); 1441 1442 if (!isValid) { 1443 validationMessage.style.display = 'block'; 1444 input.classList.add('invalid'); 1445 } else { 1446 validationMessage.style.display = 'none'; 1447 input.classList.remove('invalid'); 1448 } 1449 }); 1450 1451 inputContainer.appendChild(input); 1452 1453 // åä½è¡¨ç¤º 1454 if (question.unit) { 1455 const unitSpan = document.createElement('span'); 1456 unitSpan.className = 'input-unit'; 1457 unitSpan.textContent = question.unit;
1458 inputContainer.appendChild(unitSpan); 1459 } 1460 form.appendChild(inputContainer); 1461 form.appendChild(validationMessage); 1462 } else { 1463 inputContainer.appendChild(input); 1464 form.appendChild(inputContainer); 1465 } 1466 1467 const preview = document.createElement('div'); 1468 preview.className = 'input-preview'; 1469 form.appendChild(preview); 1470 1471 const button = document.createElement('button'); 1472 button.type = 'submit'; 1473 button.className = 'submit-button button-size-1'; 1474 button.textContent = '次ã¸'; 1475 form.appendChild(button); 1476 1477 form.addEventListener('submit', (e) => { 1478 e.preventDefault(); 1479 const value = input.value.trim(); 1480 if (question.id === 'remarks' || (value && (!question.numberOnly || /^[0-9,]+$/.test(value)))) { 1481 input.disabled = true; 1482 button.disabled = true; 1483 button.style.opacity = '0.5'; 1484 const cleanValue = question.numberOnly ? value.replace(/,/g, '') : value; 1485 this.handleAnswer(question.id, cleanValue, value); 1486 } 1487 }); 1488 1489 formContent.appendChild(form); 1490 } 1491 1492 messageDiv.appendChild(formContent); 1493 this.elements.content.appendChild(messageDiv); 1494 this.elements.content.scrollTop = this.elements.content.scrollHeight; 1495 } 1496 1497 async showNextQuestion() { 1498 const nextIndex = this.getNextValidIndex(); 1499 if (nextIndex >= this.questions.length) { 1500 await this.handleFormCompletion(); 1501 return; 1502 } 1503 1504 this.currentQuestionIndex = nextIndex; 1505 const question = this.questions[this.currentQuestionIndex]; 1506 1507 // ã¡ãã»ã¼ã¸å°ç¨ã¿ã¤ãã®å ´å 1508 if (question.type === 'message') { 1509 await this.addBotMessage(question.message, { 1510 image: question.image 1511 }); 1512 // å°ãéãç½®ãã¦æ¬¡ã®ã¡ãã»ã¼ã¸ã¾ãã¯è³ªåã表示 1513 setTimeout(() => this.showNextQuestion(), 800); 1514 return; 1515 } 1516 1517 // é常ã®è³ªåã®å ´åã¯æ®ãã®è³ªåæ°ã表示 1518 const remainingQuestions = this.getRemainingQuestions(); 1519 if (remainingQuestions > 0) { 1520 this.elements.progress.textContent = `ãã¨${remainingQuestions}å`; 1521 } 1522 1523 // 質åã¡ãã»ã¼ã¸ã®è¡¨ç¤º 1524 // await this.addBotMessage(question.message, { 1525 // image: question.image 1526 // }); 1527 1528 // skipBotMessage ã true ã§ãªãå ´åã®ã¿ãããã¡ãã»ã¼ã¸ã表示 1529 if (!question.skipBotMessage) { 1530 await this.addBotMessage(question.message, { 1531 image: question.image 1532 }); 1533 } 1534 1535 // ãã©ã¼ã ã®è¡¨ç¤º 1536 this.addUserForm(question); 1537 } 1538 1539 // æ®ãã®è³ªåæ°ãè¨ç®ï¼æ¡ä»¶ã«åã質åã®ã¿ã«ã¦ã³ãï¼ 1540 getRemainingQuestions() { 1541 let count = 0; 1542 for (let i = this.currentQuestionIndex; i < this.questions.length; i++) { 1543 const question = this.questions[i]; 1544 if (question.type !== 'message' && (!question.condition || this.checkCondition(question.condition))) { 1545 count++; 1546 } 1547 } 1548 return count; 1549 } 1550 1551 handleAnswer(questionId, value, displayValue) { 1552 this.answers[questionId] = value; 1553 setTimeout(() => this.showNextQuestion(), 500); 1554 } 1555 1556 // handleFormCompletion() { 1557 // this.addBotMessage('ãããã¨ããããã¾ããæ å½è ããé£çµ¡ããã¦ããã ãã¾ãã'); 1558 // console.log('Form completed with answers:', this.answers); 1559 // } 1560 async saveDataToJson() { 1561 const date = new Date(); 1562 date.setMinutes(date.getMinutes() - date.getTimezoneOffset()); 1563 const str_date = date.toJSON()?.replace('T', ' ').slice(0, -5); 1564 const mobile_telephone_hyphen = this.answers.contact_group.mobile_telephone_number.length === 11 ? this.answers.contact_group.mobile_telephone_number.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3") : this.answers.contact_group.mobile_telephone_number.replace(/(\d{2})(\d{4})(\d{4})/, "$1-$2-$3"); 1565 const office_telephone_hyphen = this.answers.contact_group.office_telephone_number.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3") 1566 const postalCode1 = this.answers.address_group.postal_code.substring(0, 3); 1567 const postalCode2 = this.answers.address_group.postal_code.substring(3, 7); 1568 // const business_type1 = this.answers.business_type === 'corporation' ? 'æ³äºº' : 'å人äºæ¥ä¸»'; 1569 const currentUrlParam = location.search; 1570 1571 const jsonData = { 1572 nensho: this.answers.annual_sales, 1573 kibokin: this.answers.annual_revenue, 1574 tel_ketai_hy: mobile_telephone_hyphen,
1575 tel_kaisya_hy: office_telephone_hyphen, 1576 address_zip01: postalCode1, 1577 address_zip02: postalCode2, 1578 address_prefectures: this.answers.address_group.prefecture, 1579 address_city: this.answers.address_group.city, 1580 address_tatemono: this.answers.address_group.building, 1581 address_banchi: this.answers.address_group.street, 1582 name_come: this.answers.company_name, 1583 name_daihyo: this.answers.representative_name, 1584 tel_kaisya: this.answers.contact_group.mobile_telephone_number, 1585 tel_ketai: this.answers.contact_group.office_telephone_number, 1586 biko: this.answers.remarks, 1587 email: this.answers.email, 1588 komoku: this.answers.inquiry_type, 1589 // kubun: business_type1, 1590 current_url: location.href, 1591 url: location.href, 1592 current_url_param: currentUrlParam, 1593 // current_url_title: { current_url_title } 1594 // user_id: { user_id } 1595 start_datatime: str_date, 1596 } 1597 console.log(jsonData); 1598 1599 // ã¡ã¼ã«éä¿¡ 1600 try { 1601 const response = await fetch('https://actwill.co.jp/wp/wp-content/themes/story_tcd041-child/bot_mail/mail.php', { 1602 method: 'POST', 1603 headers: { 1604 'Content-Type': 'application/json', 1605 }, 1606 body: JSON.stringify(jsonData), 1607 }); 1608 if (!response.ok) { 1609 throw new Error('ã¡ã¼ã«ã®éä¿¡ã«å¤±æãã¾ããã'); 1610 } 1611 console.log('ã¡ã¼ã«ãæ£å¸¸ã«éä¿¡ãã¾ããã'); 1612 // ã¡ã¼ã«éä¿¡æåæã®å¦ç 1613 window.location.href = 'https://actwill.co.jp/wp/wp-content/themes/story_tcd041-child/bot_mail/thanks.html'; 1614 } catch (error) { 1615 console.error('ã¡ã¼ã«ã®éä¿¡ä¸ã«ã¨ã©ã¼ãçºçãã¾ãã:', error); 1616 } 1617 } 1618 1619 async handleFormCompletion() { 1620 await this.addBotMessage('ãå ¥åãããã¨ããããã¾ããã<br>以ä¸ã§èè³ã®ãç¸è«ã»ãåãåããã®åä»ã¯å®äºã«ãªãã¾ãã'); 1621 await this.addBotMessage('ãç³è¾¼ã¿åä»å¾ãæ å½è ãã詳細ã«ã¤ãã¦ãæ¡å ããã¦ããã ãã¾ã'); 1622 await this.addBotMessage('確èªã®ã¡ã¼ã«ãéä¿¡ãã¦ãã¾ãã®ã§ã確èªãã ããã<br>ãã®åº¦ã¯ã¢ã¯ãã»ã¦ã£ã«ã¸ãåãåããããã ããèª ã«ãããã¨ããããã¾ããã'); 1623 await this.addBotMessage('ç»é¢ãåãæ¿ããã¾ã§ãå¾ ã¡ãã ããã'); 1624 await this.saveDataToJson(); 1625 } 1626}
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.