// 重複定義を回避（ページリロード対応） if (typeof window.AccessController === 'undefined') { window.AccessController = class AccessController { constructor(endpoint, apiKey, pollInterval = 60000) { this.endpoint = endpoint; this.apiKey = apiKey; this.pollInterval = pollInterval; this.pollTimer = null; this.accessWindowKey = 'accessWindow'; this.tokenCheckTimer = null; this.isRestricted = false; // 現在制限状態かどうか // 55秒間隔制限の設定（ハードコーディング） this.enableRateLimit = true; // true: 有効, false: 無効 } // 実際のAPIを呼び出す async callApi() { try { console.log(`[API] エンドポイントを呼び出し中: ${this.endpoint}`); const response = await fetch(this.endpoint, { method: 'GET', headers: { 'x-api-key': this.apiKey, 'Content-Type': 'application/json' } }); console.log(`[API] レスポンス: ${response.status} ${response.statusText}`); // レスポンスボディを取得（エラーの場合もJSONを返す可能性があるため） let responseData = null; try { responseData = await response.json(); } catch (e) { console.warn('[API] レスポンスボディの解析に失敗:', e); } return { status: response.status, ok: response.ok, data: responseData }; } catch (error) { console.error('[API] ネットワークエラー:', error); return { status: 0, ok: false, error: error.message }; } } isAccessAllowed() { const accessWindow = localStorage.getItem(this.accessWindowKey); if (!accessWindow) return false; const { start, end } = JSON.parse(accessWindow); const now = Date.now(); return now >= start && now <= end; } // エンドポイントをチェック async checkEndpoint() { // 55秒間隔制限チェック（フラグで制御） if (this.enableRateLimit) { // アクセス許可済みユーザーは55秒制限をスキップ if (this.isAccessAllowed()) { console.log('[Rate Limit] アクセス許可済みのため55秒制限をスキップ'); } else { const lastCall = localStorage.getItem('last_api_call_time'); if (lastCall && (Date.now() - parseInt(lastCall)) < 55000) { const remainingTime = 55 - Math.floor((Date.now() - parseInt(lastCall)) / 1000); console.log(`[Rate Limit] 55秒制限中 (残り${remainingTime}秒)`); // 429エラーと同じ挙動（制限画面表示、既存メッセージ使用） const mockResponse = { status: 429, ok: false, data: null }; this.showWaitingScreen(mockResponse); this.startPolling(); this.isRestricted = true; return false; } } } try { const response = await this.callApi(); // API呼び出し完了時刻を記録（ネットワークエラー以外、フラグで制御） if (this.enableRateLimit && response.status !== 0) { localStorage.setItem('last_api_call_time', Date.now().toString()); } if (response.status === 200 && response.ok) { // アクセス可能期間を設定（現在時刻から30分後まで） const now = Date.now(); const accessWindow = { start: now, end: now + (30 * 60 * 1000) // 30分後 }; localStorage.setItem(this.accessWindowKey, JSON.stringify(accessWindow)); this.stopPolling(); this.isRestricted = false; console.log('[API] アクセス許可されました。30分間有効です。ページをリロードします...'); // 成功時にページをリロード setTimeout(() => { location.reload(); }, 1000); // 1秒後にリロード return true; } else { // 200以外（403, 429, 500など）は全て制限として扱う this.showWaitingScreen(response); this.startPolling(); this.isRestricted = true; console.log(`[API] アクセス制限中 (HTTP ${response.status})`); if (response.data) { console.log('[API] 制限理由:', response.data.message || response.data.reason); } return false; } } catch (error) { console.error('[API] エンドポイントチェックエラー:', error); this.showWaitingScreen(); this.startPolling(); this.isRestricted = true; return false; } } // 待機画面を表示 showWaitingScreen(response = null) { // 既存の要素をすべて非表示/削除 document.body.innerHTML = ''; // エラー情報を取得 let errorMessage = 'サーバーの負荷軽減のため、アクセスを制限しています'; let restrictedUntil = ''; if (response && response.data) { if (response.data.message) { errorMessage = response.data.message; } if (response.data.reason) { errorMessage = response.data.reason; } if (response.data.restrictedUntil) { restrictedUntil = `制限解除予定: ${response.data.restrictedUntil}`; } } // 待機画面のHTML作成 const waitingDiv = document.createElement('div'); waitingDiv.id = 'waiting-screen'; waitingDiv.style.cssText = ` position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #f5f5f5; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: Arial, sans-serif; z-index: 9999; `; waitingDiv.innerHTML = `

しばらくお待ちください

${errorMessage}

${restrictedUntil ? `

${restrictedUntil}

` : ''}

${Math.floor(this.pollInterval / 1000)}秒ごとにアクセスを試みています…

`; // スピナーアニメーション用CSS const style = document.createElement('style'); style.textContent = ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `; document.head.appendChild(style); document.body.appendChild(waitingDiv); } // 通常コンテンツを表示 showNormalContent() { const waitingScreen = document.getElementById('waiting-screen'); if (waitingScreen) { waitingScreen.remove(); } // ここで元のコンテンツを復元または表示 // 実装は既存のアプリケーションに応じて調整してください console.log('通常コンテンツを表示'); } // ポーリング開始 startPolling() { if (this.pollTimer) return; // 既にポーリング中の場合は何もしない this.pollTimer = setInterval(() => { console.log('[API] エンドポイントを再チェック中...'); this.checkEndpoint(); }, this.pollInterval); } // ポーリング停止 stopPolling() { if (this.pollTimer) { clearInterval(this.pollTimer); this.pollTimer = null; } } // 初期化処理 async init() { // まずローカルストレージの有効期間をチェック if (this.isAccessAllowed()) { console.log('有効なアクセス期間内です'); this.showNormalContent(); this.isRestricted = false; return; } // 有効期間外の場合、エンドポイントをチェック console.log('アクセス可能かチェック中...'); await this.checkEndpoint(); } // accessWindowの変化を監視（accessTokenチェックを廃止） startTokenMonitoring() { this.tokenCheckTimer = setInterval(() => { // 定期的にアクセス期間をチェックして期限切れを検出 if (this.isRestricted && !this.isAccessAllowed()) { console.log('[API] アクセス期間が期限切れです'); } }, 1000); // 1秒ごとにチェック } // クリーンアップ（ページ離脱時など） cleanup() { this.stopPolling(); this.stopTokenMonitoring(); } // トークン監視を停止 stopTokenMonitoring() { if (this.tokenCheckTimer) { clearInterval(this.tokenCheckTimer); this.tokenCheckTimer = null; } } }; // class AccessController 終了 } // if文終了 // 使用例：実際のAPIエンドポイントとAPI Keyを設定 // インスタンスの重複作成を回避 if (typeof window.accessController === 'undefined') { window.accessController = new window.AccessController( 'https://d2b6h4tkp8lk58.cloudfront.net', 'gOThXU1YCI51FHX4hfuHnat27hTeJreu1htzNIO0' ); } // デモ用：ストレージクリア（重複定義回避） if (typeof window.demoClear === 'undefined') { window.demoClear = function() { localStorage.removeItem('accessWindow'); localStorage.removeItem('last_api_call_time'); // 55秒制限もクリア console.log('[API] ローカルストレージをクリアしました'); location.reload(); // ページをリロード }; } // Nuxt用：即座に初期化実行（重複実行回避） if (window.accessController && !window.accessController.isInitialized) { window.accessController.init(); window.accessController.startTokenMonitoring(); // 監視開始（期間チェック用） window.accessController.isInitialized = true; // 初期化フラグ } // 手動でアクセスチェックを実行する場合 // window.accessController.checkEndpoint(); // 実際のAPIを使用するためのコマンド： // demoClear() - ローカルストレージクリア & リロード // 55秒制限の有効/無効を変更したい場合： // コンストラクタ内の this.enableRateLimit を true/false に変更してください