// API呼び出し関数を定義 async function fetchBoothData(booth_list_url) { const queryString = 'category_ids=[]&booth_category_ids=[]&keyword=&type=WordSoundOrder&priority_live_stream_enable=0&page=1&per_page=1000&is_list=1'; const url = `${booth_list_url}?${queryString}`; try { const response = await fetch(url, { method: 'GET', headers: { 'Language': 'jpn' } }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); return data; } catch (error) { console.error('Error fetching booth data:', error); throw error; } } // 配列をシャッフルする関数（Fisher-Yatesアルゴリズム） function shuffleArray(array) { const shuffled = [...array]; for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; } return shuffled; } // 画像パスにドメインを追加する関数 function addDomainToImagePath(imagePath) { if (!imagePath) { return null; } // 既に完全なURLの場合はそのまま返す if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) { return imagePath; } // 相対パスの場合はドメインを追加 const domain = 'https://event.shin-monodukuri-shin-service.jp'; return domain + imagePath; } // localStorageからデータを取得する関数（7日以内かチェック） function getCachedBoothData(storageKey) { try { const cachedData = localStorage.getItem(storageKey); if (!cachedData) { return null; } const parsed = JSON.parse(cachedData); const savedTime = parsed.timestamp; const currentTime = Date.now(); const sevenDaysInMs = 7 * 24 * 60 * 60 * 1000; // 7日間のミリ秒 //const sevenDaysInMs = 30 * 60 * 1000; // 30分のミリ秒 // 7日以内であればキャッシュされたデータを返す if (currentTime - savedTime < sevenDaysInMs) { return parsed.data; } // 7日以上経過していたらnullを返す return null; } catch (error) { console.error('Error reading from localStorage:', error); return null; } } // localStorageにデータを保存する関数 function saveBoothDataToCache(storageKey, data) { try { const cacheData = { timestamp: Date.now(), data: data }; localStorage.setItem(storageKey, JSON.stringify(cacheData)); } catch (error) { console.error('Error saving to localStorage:', error); } } // ブース情報を抽出する関数 function extractBoothInfo(responseData, excludeBoothIds = [], eventId, boothCategoryId, existingBoothIds = []) { if (!responseData || !responseData.data || !responseData.data.data) { return []; } const booths = responseData.data.data; // 除外boothリストと既存のbooth_idを除外 const existingBoothIdsSet = new Set(existingBoothIds); const filteredBooths = booths.filter(booth => !excludeBoothIds.includes(booth.booth_id) && !existingBoothIdsSet.has(booth.booth_id) ); const extractedBooths = []; // 配列をシャッフルしてランダムに並び替え const shuffledBooths = shuffleArray(filteredBooths); // 最大6つまで処理 const maxCount = Math.min(6, shuffledBooths.length); for (let i = 0; i < maxCount; i++) { const booth = shuffledBooths[i]; const boothInfo = { booth_id: booth.booth_id, title: null, main_image: null, booth_url: `https://event.shin-monodukuri-shin-service.jp/event/${eventId}/module/booth/${boothCategoryId}/${booth.booth_id}` }; // items配列からtitleとmain_imageを探す if (booth.items && Array.isArray(booth.items)) { booth.items.forEach(item => { if (item.type === 'title' && item.value) { boothInfo.title = item.value; } if (item.type === 'main_image' && item.path && Array.isArray(item.path) && item.path.length > 0) { boothInfo.main_image = addDomainToImagePath(item.path[0]); } }); } // 画像がnullの場合はデフォルト画像を設定 if (!boothInfo.main_image) { boothInfo.main_image = 'https://event.shin-monodukuri-shin-service.jp/web/_nuxt/img/7931db6.png'; } extractedBooths.push(boothInfo); } return extractedBooths; } // HTMLエスケープ関数 function escapeHtml(text) { if (!text) return ''; const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // ブースカードのHTMLを生成する関数 function createBoothCardHTML(booth) { console.log('[createBoothCardHTML] ブースID:', booth.booth_id, 'タイトル:', booth.title); const escapedTitle = escapeHtml(booth.title || ''); const escapedImageUrl = escapeHtml(booth.main_image || ''); const escapedBoothUrl = escapeHtml(booth.booth_url || '#'); return `

${escapedTitle}

`; } // DOMにブース情報を表示する関数 function renderRecommendedBooths(booths, eventId, boothCategoryId) { console.log('[renderRecommendedBooths] 開始 - ブース数:', booths.length); // URLをチェック const currentUrl = window.location.href; console.log('[renderRecommendedBooths] 現在のURL:', currentUrl); const targetUrlPattern = new RegExp(`/event/${eventId}/module/booth/${boothCategoryId}(\\?|$|#)`); const urlMatch = targetUrlPattern.test(currentUrl); console.log('[renderRecommendedBooths] URLマッチ結果:', urlMatch); if (!urlMatch) { console.log('[renderRecommendedBooths] 対象URLではないため終了'); return false; // 対象URLでない場合はfalseを返す } // booth-card__wrapを探す const boothCardWrap = document.querySelector('.booth-card__wrap'); console.log('[renderRecommendedBooths] booth-card__wrap検索結果:', boothCardWrap ? '見つかった' : '見つからない'); if (!boothCardWrap) { console.log('[renderRecommendedBooths] booth-card__wrapが見つからないため終了'); return false; // 見つからない場合はfalseを返す } console.log('[renderRecommendedBooths] booth-card__wrapの親要素:', boothCardWrap.parentNode); // 既存のお勧めセクションを削除（既に存在する場合） const existingRecommendSection = document.querySelector('.booth-recommend-section'); if (existingRecommendSection) { console.log('[renderRecommendedBooths] 既存のお勧めセクションを削除'); existingRecommendSection.remove(); } // お勧めセクションを作成 console.log('[renderRecommendedBooths] お勧めセクションを作成中...'); const recommendSection = document.createElement('div'); recommendSection.className = 'booth-recommend-section'; const boothCardsHTML = booths.map(booth => createBoothCardHTML(booth)).join(''); console.log('[renderRecommendedBooths] 生成されたブースカードHTMLの長さ:', boothCardsHTML.length); recommendSection.innerHTML = ` `; console.log('[renderRecommendedBooths] お勧めセクションをDOMに挿入中...'); // booth-card__wrapの前に挿入 boothCardWrap.parentNode.insertBefore(recommendSection, boothCardWrap); console.log('[renderRecommendedBooths] お勧めセクションの挿入完了'); console.log('[renderRecommendedBooths] 挿入後のDOM確認:', document.querySelector('.booth-recommend-section') ? '成功' : '失敗'); return true; // 成功した場合はtrueを返す } // DOMを監視してブース情報を表示する関数 function watchAndRenderBooths(booths, eventId, boothCategoryId) { console.log('[watchAndRenderBooths] 開始 - ブース数:', booths.length); console.log('[watchAndRenderBooths] 監視を開始します（1秒ごと）'); // 1秒ごとに監視 const intervalId = setInterval(() => { // 最初にURLをチェック const currentUrl = window.location.href; console.log('[watchAndRenderBooths] 監視実行中... 現在のURL:', currentUrl); const targetUrlPattern = new RegExp(`/event/${eventId}/module/booth/${boothCategoryId}(\\?|$|#)`); const urlMatch = targetUrlPattern.test(currentUrl); console.log('[watchAndRenderBooths] URLマッチ結果:', urlMatch); // URLがマッチしない場合はスキップ if (!urlMatch) { console.log('[watchAndRenderBooths] 対象URLではないためスキップ（継続監視）'); return; } // URLがマッチした場合のみ、おすすめブースを表示 const success = renderRecommendedBooths(booths, eventId, boothCategoryId); console.log('[watchAndRenderBooths] 監視結果:', success ? '成功' : '失敗（継続監視）'); if (success) { // 成功したら監視を停止 console.log('[watchAndRenderBooths] 監視を停止します'); clearInterval(intervalId); } }, 1000); // 初回実行（即座に試行） console.log('[watchAndRenderBooths] 初回実行を試みます'); const currentUrl = window.location.href; const targetUrlPattern = new RegExp(`/event/${eventId}/module/booth/${boothCategoryId}(\\?|$|#)`); const initialUrlMatch = targetUrlPattern.test(currentUrl); if (initialUrlMatch) { const initialSuccess = renderRecommendedBooths(booths, eventId, boothCategoryId); console.log('[watchAndRenderBooths] 初回実行結果:', initialSuccess ? '成功（監視停止）' : '失敗（監視継続）'); if (initialSuccess) { clearInterval(intervalId); } } else { console.log('[watchAndRenderBooths] 初回実行時は対象URLではないためスキップ（監視継続）'); } } // 即時関数で実行 (async () => { // イベントIDとブースカテゴリID（変数化） const eventId = 14374; const boothCategoryId = 368556; const portalId = 1108; // API URL内のポータルID // ブースリストAPIのベースURL（変数から構築） const booth_list_url = `https://event.shin-monodukuri-shin-service.jp/web_api/v2/booth/${portalId}/${eventId}/${boothCategoryId}`; // 除外boothリスト const excludeBoothIds = []; // localStorageのキー名 const storageKey = 'booth_recommend_data_prod'; try { // まずlocalStorageからキャッシュされたデータを確認 let cachedBooths = getCachedBoothData(storageKey); let extractedBooths = []; if (cachedBooths) { // キャッシュから取得したデータから除外boothをフィルタリング extractedBooths = cachedBooths.filter(booth => !excludeBoothIds.includes(booth.booth_id)); console.log('Booth data loaded from cache (after filtering):', extractedBooths.length, 'items'); } // 除外boothを除いた後、6つに足りない場合は再取得 if (extractedBooths.length < 6) { const responseData = await fetchBoothData(booth_list_url); const existingBoothIds = extractedBooths.map(booth => booth.booth_id); const neededCount = 6 - extractedBooths.length; // 既存のbooth_idを除外して新しいブースを取得 const newBooths = extractBoothInfo(responseData, excludeBoothIds, eventId, boothCategoryId, existingBoothIds); // 必要な数だけ追加（最大6つまで） const additionalBooths = newBooths.slice(0, neededCount); // 既存のデータと新しいデータをマージ extractedBooths = [...extractedBooths, ...additionalBooths]; // localStorageに保存（更新） saveBoothDataToCache(storageKey, extractedBooths); console.log('Booth data fetched from API to fill missing items and cached'); } else if (!cachedBooths) { // キャッシュがない、または7日以上経過している場合はAPIから取得 const responseData = await fetchBoothData(booth_list_url); extractedBooths = extractBoothInfo(responseData, excludeBoothIds, eventId, boothCategoryId); // localStorageに保存 saveBoothDataToCache(storageKey, extractedBooths); console.log('Booth data fetched from API and cached'); } console.log('[即時関数] 抽出されたブース情報:', extractedBooths); console.log('[即時関数] 抽出されたブース数:', extractedBooths.length); // DOMに表示（1秒ごとに監視して表示） if (extractedBooths.length > 0) { console.log('[即時関数] watchAndRenderBoothsを呼び出します'); watchAndRenderBooths(extractedBooths, eventId, boothCategoryId); } else { console.log('[即時関数] ブースデータが空のため、watchAndRenderBoothsを呼び出しません'); } } catch (error) { console.error('Error:', error); } })();

おすすめ出展者

出展者一覧