(function() { 'use strict'; // セッションストレージのキー const SESSION_STORAGE_KEY = 'doshin_modal_hidden_until_tab_close'; const TEMP_HIDE_KEY = 'doshin_modal_temp_hidden'; // 申し込みボタンクリック状態の管理 let buttonMonitorInterval = null; let applicationButtonClicked = false; // 申し込みボタンが存在するかチェック function findApplicationButton() { // 複数のパターンで申し込みボタンを検索 const selectors = [ '.next-button .next-button__content', '.next-button__content', 'button', '[class*="next-button"] button' ]; for (const selector of selectors) { const buttons = document.querySelectorAll(selector); for (const button of buttons) { const text = button.textContent ? button.textContent.trim() : ''; console.log('Found button with text:', text); // デバッグ用 if (text.includes('申し込み') || text.includes('申込み')) { console.log('Application button found!', button); // デバッグ用 return button; } } } console.log('No application button found'); // デバッグ用 return null; } // URLにmodule/ticketが含まれているかチェック（削除予定） function shouldShowModal() { // 申し込みボタンがクリックされた場合のみモーダルを表示 return applicationButtonClicked; } // accessTokenがローカルストレージに存在するかチェック function hasAccessToken() { return localStorage.getItem('accessToken') !== null; } // セッションストレージでタブを閉じるまで非表示に設定されているかチェック function isHiddenUntilTabClose() { return sessionStorage.getItem(SESSION_STORAGE_KEY) === 'true'; } // 一時的に非表示に設定されているかチェック function isTempHidden() { return sessionStorage.getItem(TEMP_HIDE_KEY) === 'true'; } // タブを閉じるまで非表示に設定 function hideUntilTabClose() { sessionStorage.setItem(SESSION_STORAGE_KEY, 'true'); } // 一時的に非表示に設定 function setTempHidden() { sessionStorage.setItem(TEMP_HIDE_KEY, 'true'); } // 一時的な非表示状態をクリア function clearTempHidden() { sessionStorage.removeItem(TEMP_HIDE_KEY); } // CSSスタイルを動的に追加 function addStyles() { if (document.getElementById('doshin-modal-styles')) { return; // 既に追加済み } const style = document.createElement('style'); style.id = 'doshin-modal-styles'; style.textContent = ` .doshin-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(4px); } .doshin-modal { background: white; border-radius: 8px; padding: 32px; width: 90%; max-width: 450px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); position: relative; animation: doshinModalFadeIn 0.3s ease-out; border: 1px solid #e0e0e0; } @keyframes doshinModalFadeIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .doshin-modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer; color: #666; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s; } .doshin-modal-close:hover { background-color: #f0f0f0; } .doshin-modal-logo { display: block; max-width: 200px; height: auto; margin: 0 auto 16px auto; } .doshin-modal-title { font-size: 16px; font-weight: 500; color: #333; margin-bottom: 20px; text-align: center; line-height: 1.4; } .doshin-modal-content { color: #333; line-height: 1.3; margin-bottom: 28px; text-align: center; font-size: 22px; font-weight: 800; } .doshin-modal-buttons { display: flex; gap: 12px; flex-direction: column; } .doshin-modal-login-btn { background: linear-gradient(135deg, #4285f4 0%, #1976d2 100%); color: white; border: none; padding: 16px 32px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; display: block; text-align: center; width: 100%; box-sizing: border-box; } .doshin-modal-login-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3); } .doshin-modal-register-btn { background: linear-gradient(135deg, #34a853 0%, #137333 100%); color: white; border: none; padding: 16px 32px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; display: block; text-align: center; width: 100%; box-sizing: border-box; } .doshin-modal-register-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52, 168, 83, 0.3); } .doshin-modal-skip-btn { background: #f5f5f5; color: #666; border: 1px solid #ddd; padding: 16px 32px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; display: block; text-align: center; width: 100%; box-sizing: border-box; } .doshin-modal-skip-btn:hover { background: #e8e8e8; border-color: #999; } @media (max-width: 480px) { .doshin-modal { margin: 16px; padding: 24px; } } `; document.head.appendChild(style); } // モーダルHTML要素を作成 function createModalElement() { const overlay = document.createElement('div'); overlay.className = 'doshin-modal-overlay'; const modal = document.createElement('div'); modal.className = 'doshin-modal'; modal.innerHTML = ` `; overlay.appendChild(modal); return overlay; } // モーダルがDOMに存在するかチェック function isModalVisible() { return document.querySelector('.doshin-modal-overlay') !== null; } // モーダルを閉じる function closeModal() { const existingModal = document.querySelector('.doshin-modal-overlay'); if (existingModal) { existingModal.remove(); } } // モーダルを表示 function showModal() { // DOMに既にモーダルが存在する場合は何もしない if (isModalVisible()) { return; } const modalElement = createModalElement(); document.body.appendChild(modalElement); // イベントリスナーを設定 const closeBtn = modalElement.querySelector('.doshin-modal-close'); const skipBtn = modalElement.querySelector('.doshin-modal-skip-btn'); const loginBtn = modalElement.querySelector('.doshin-modal-login-btn'); const registerBtn = modalElement.querySelector('.doshin-modal-register-btn'); // 閉じるボタンのクリックイベント closeBtn.addEventListener('click', function() { setTempHidden(); closeModal(); }); // 登録せずに申し込むボタンのクリックイベント skipBtn.addEventListener('click', function() { setTempHidden(); closeModal(); }); // オーバーレイクリックで閉じる modalElement.addEventListener('click', function(e) { if (e.target === modalElement) { setTempHidden(); closeModal(); } }); // ESCキーで閉じる function handleEscape(e) { if (e.key === 'Escape' && isModalVisible()) { setTempHidden(); closeModal(); document.removeEventListener('keydown', handleEscape); } } document.addEventListener('keydown', handleEscape); // ログインボタンクリック時の処理 loginBtn.addEventListener('click', function() { // モーダルは閉じずにaccessToken監視を開始 startAccessTokenMonitoring(); }); // 新規登録ボタンクリック時の処理 registerBtn.addEventListener('click', function() { // モーダルは閉じない（新規登録後にログインが必要なため） }); } // accessToken監視を開始 function startAccessTokenMonitoring() { const checkInterval = setInterval(() => { if (hasAccessToken()) { clearInterval(checkInterval); // accessTokenが見つかったらページをリロード window.location.reload(); } }, 1000); // 1秒ごとにチェック // 30秒後にタイムアウト（監視を停止） setTimeout(() => { clearInterval(checkInterval); }, 30000); } // 申し込みボタンの監視を開始 function monitorApplicationButton() { const button = findApplicationButton(); if (button && !button.hasAttribute('data-doshin-monitored')) { console.log('Setting up click listener for application button'); // デバッグ用 // 重複監視を防ぐためのマーク button.setAttribute('data-doshin-monitored', 'true'); // 複数の方法でクリックイベントを捕捉 // 方法1: 直接的なイベントリスナー button.addEventListener('click', function(e) { console.log('Direct click event fired!'); // デバッグ用 handleApplicationButtonClick(); }); // 方法2: mousedownイベント button.addEventListener('mousedown', function(e) { console.log('Mousedown event fired!'); // デバッグ用 handleApplicationButtonClick(); }); // 方法3: touchstartイベント（モバイル対応） button.addEventListener('touchstart', function(e) { console.log('Touchstart event fired!'); // デバッグ用 handleApplicationButtonClick(); }); } } // 申し込みボタンクリック時の処理を共通化 function handleApplicationButtonClick() { console.log('Application button clicked!'); // デバッグ用 console.log('Has access token:', hasAccessToken()); // デバッグ用 // accessTokenがない場合のみモーダル表示フラグを設定 if (!hasAccessToken()) { console.log('Setting applicationButtonClicked to true'); // デバッグ用 applicationButtonClicked = true; // 少し遅延してモーダル表示判定を行う setTimeout(checkAndShowModal, 100); } else { console.log('Access token exists, not showing modal'); // デバッグ用 } } // モーダル表示の判定 function checkAndShowModal() { // 既にDOMにモーダルが存在する場合は処理しない if (isModalVisible()) { return; } const shouldShow = shouldShowModal(); const isSessionHidden = isHiddenUntilTabClose(); const isTempHid = isTempHidden(); const hasToken = hasAccessToken(); // accessTokenがある場合はモーダルを表示しない if (shouldShow && !isSessionHidden && !isTempHid && !hasToken) { showModal(); } else if (hasToken) { // accessTokenがある場合はモーダルを閉じる closeModal(); // フラグもリセット applicationButtonClicked = false; } } // 申し込みボタンを監視（1秒ごと） function startButtonMonitoring() { buttonMonitorInterval = setInterval(monitorApplicationButton, 1000); // イベント委譲でdocument全体のクリックを監視 document.addEventListener('click', function(e) { const target = e.target; // クリックされた要素またはその親要素が申し込みボタンかチェック let element = target; for (let i = 0; i < 5; i++) { // 最大5階層まで遡る if (element && element.textContent) { const text = element.textContent.trim(); // 申し込みボタンの特徴をチェック if ((text.includes('申し込み') || text.includes('申込み')) && (element.classList.contains('next-button__content') || element.closest('.next-button'))) { console.log('Application button clicked via event delegation!'); // デバッグ用 handleApplicationButtonClick(); break; } } element = element.parentElement; if (!element) break; } }); } // 初期化 function init() { // スタイルを追加 addStyles(); // 申し込みボタンの監視を開始 startButtonMonitoring(); } // ページアンロード時のクリーンアップ window.addEventListener('beforeunload', function() { if (buttonMonitorInterval) { clearInterval(buttonMonitorInterval); } }); // DOMが読み込まれた後に初期化 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();

来場希望の時間帯