「Widget:Custom map」の版間の差分

提供：メタファー リファンタジオ 攻略Wiki
移動先:案内、検索
編集の要約なし
編集の要約なし
27行目: 27行目:


///////////////
///////////////
// loadPinsFromWikiPageのデバッグ用拡張関数
// APIリクエストをトラッキングするデバッグ関数
window.debugLoadPins = function() {
window.debugAPIRequests = function() {
     console.group('=== LoadPinsFromWikiPage Debug ===');
     console.group('=== API Request Tracking ===');
      
      
     // 1. 初期状態の確認
     // オリジナルのjQuery ajaxメソッドを保存
     console.log('1. Initial State Check:');
     const originalAjax = $.ajax;
     console.log('Current drawnItems layer count:', drawnItems.getLayers().length);
      
    console.log('GeoJSON page name:', "<!--{$geojson}-->");
     // ajaxリクエストをインターセプト
    console.log('API Base URL:', API_BASE_URL);
     $.ajax = function(settings) {
 
        const requestUrl = settings.url || '';
     // 2. トークン取得プロセスのデバッグ
        const requestData = settings.data || {};
     console.log('\n2. Starting Token Request...');
          
    getMwToken()
         console.group(`API Request to: ${requestUrl}`);
        .then(function(token) {
        console.log('Request details:', {
            console.log('✅ Token received:', token ? '【トークン文字列は安全のため非表示】' : 'No token received');
            fullUrl: requestUrl,
           
            baseUrl: API_BASE_URL,
            // 3. APIリクエストの詳細をログ
            matchesBaseUrl: requestUrl.startsWith(API_BASE_URL),
            const geojsonPage = "<!--{$geojson}-->";
            method: settings.type || 'GET',
            const url = API_BASE_URL + '/api.php';
             data: requestData
            const params = {
                action: 'query',
                titles: geojsonPage,
                prop: 'revisions',
                rvprop: 'content',
                format: 'json',
                redirects: 0
            };
           
            console.log('\n3. Making API Request:');
            console.log('URL:', url);
            console.log('Parameters:', params);
 
            return $.ajax({
                type: "GET",
                url: url,
                data: params,
                headers: {
                    'Authorization': 'Bearer ' + token
                }
            });
         })
         .then(function(response) {
            console.log('\n4. API Response Received:');
            console.log('Raw response:', response);
 
            try {
                // レスポンスの構造を確認
                if (!response.query) {
                    throw new Error('No query in response');
                }
               
                const pages = response.query.pages;
                const pageId = Object.keys(pages)[0];
               
                console.log('\n5. Page Information:');
                console.log('Page ID:', pageId);
               
                if (pageId === '-1') {
                    console.error('❌ Error: Page does not exist');
                    return;
                }
 
                const page = pages[pageId];
                console.log('Page exists:', !!page);
                console.log('Has revisions:', !!page.revisions);
               
                if (!page.revisions || !page.revisions[0]) {
                    throw new Error('No revisions found');
                }
 
                const content = page.revisions[0]['*'];
                console.log('\n6. Page Content:');
                console.log('Content length:', content ? content.length : 0);
                console.log('Content preview:', content ? content.substring(0, 100) + '...' : 'No content');
 
                try {
                    const geoJSONData = JSON.parse(content);
                    console.log('\n7. GeoJSON Validation:');
                    console.log('Valid JSON:', true);
                    console.log('Type:', geoJSONData.type);
                    console.log('Features count:', geoJSONData.features ? geoJSONData.features.length : 0);
                   
                    // 各フィーチャーの基本情報をログ
                    if (geoJSONData.features) {
                        console.log('\n8. Features Overview:');
                        geoJSONData.features.forEach((feature, index) => {
                            console.log(`Feature ${index + 1}:`, {
                                type: feature.type,
                                geometryType: feature.geometry?.type,
                                hasProperties: !!feature.properties,
                                coordinates: feature.geometry?.coordinates
                            });
                        });
                    }
 
                    // processGeoJSONDataの呼び出しを監視
                    console.log('\n9. Processing GeoJSON...');
                    processGeoJSONData(geoJSONData);
                   
                    // 処理後の状態を確認
                    console.log('\n10. Final State:');
                    console.log('Drawn items after processing:', drawnItems.getLayers().length);
                   
                } catch (jsonError) {
                    console.error('❌ Error parsing GeoJSON:', jsonError);
                    console.log('Raw content causing error:', content);
                }
 
             } catch (error) {
                console.error('❌ Error processing response:', error);
                console.error('Stack trace:', error.stack);
            }
        })
        .catch(function(error) {
            console.error('\n❌ Process Failed:', {
                message: error.message,
                stack: error.stack,
                ajaxError: error.responseText
            });
        })
        .finally(function() {
            console.groupEnd();
         });
         });
};
// processGeoJSONDataのデバッグ拡張
const originalProcessGeoJSONData = processGeoJSONData;
processGeoJSONData = function(geoJSON) {
    console.group('ProcessGeoJSONData Debug');
    try {
        console.log('Starting to process GeoJSON data');
        console.log('Input features count:', geoJSON.features.length);
          
          
         const previousLayers = drawnItems.getLayers().length;
         // URLの構成要素を分析
        drawnItems.clearLayers();
        try {
        console.log('Cleared previous layers:', previousLayers);
            const url = new URL(requestUrl);
       
            console.log('URL analysis:', {
        const addedLayers = [];
                protocol: url.protocol,
       
                hostname: url.hostname,
        // オリジナルの処理を実行
                pathname: url.pathname,
        originalProcessGeoJSONData(geoJSON);
                search: url.search,
       
                expectedHostname: new URL(API_BASE_URL).hostname,
        console.log('Processing complete');
                hostnameMatches: url.hostname === new URL(API_BASE_URL).hostname
         console.log('New layers added:', drawnItems.getLayers().length);
            });
         } catch (e) {
            console.error('URL parsing error:', e);
        }
          
          
         // 追加されたレイヤーの検証
         // スタックトレースを取得して呼び出し元を特定
         drawnItems.eachLayer(layer => {
         const stack = new Error().stack;
            console.log('Layer details:', {
        console.log('Called from:', stack);
                type: layer instanceof L.Marker ? 'Marker' : 'Other',
                hasPopup: !!layer.getPopup(),
                position: layer.getLatLng ? layer.getLatLng() : 'N/A',
                popupContent: layer.getPopup ? layer.getPopup()?.getContent() : 'N/A'
            });
        });
          
          
    } catch (error) {
         // リクエストの実行と結果のログ
        console.error('Error in processGeoJSONData:', error);
         return originalAjax.apply(this, arguments)
        console.error('Stack trace:', error.stack);
             .then(function(response) {
    } finally {
                 console.log('Response received:', {
         console.groupEnd();
                     status: 'success',
    }
                     dataType: typeof response,
};
                     hasData: !!response
 
// ヘルプ機能
window.showLoadPinsHelp = function() {
    console.log(`
LoadPinsFromWikiPage Debugging Help:
---------------------------------
1. Run 'debugLoadPins()' to start debugging
2. Check the console for detailed step-by-step information
3. Look for any red error messages
4. Verify that:
  - Token is received
  - API request is successful
  - Page exists and has content
  - GeoJSON is valid
  - Features are processed correctly
  - Markers are added to the map
 
Common Issues:
------------
1. Page doesn't exist
2. Invalid GeoJSON format
3. Missing or incorrect coordinates
4. Token authentication issues
5. Marker creation failures
 
Additional Commands:
-----------------
- showLoadPinsHelp(): Show this help message
`);
};
 
console.log('Debug tools loaded. Type debugLoadPins() to start debugging or showLoadPinsHelp() for instructions.');
 
// GeoJSONデータの詳細な検証関数
window.debugGeoJSONFeatures = function() {
    const geojsonPage = "<!--{$geojson}-->";
   
    getMwToken()
         .then(function(token) {
            return $.ajax({
                type: "GET",
                url: API_BASE_URL + '/api.php',
                data: {
                    action: 'query',
                    titles: geojsonPage,
                    prop: 'revisions',
                    rvprop: 'content',
                    format: 'json'
                },
                headers: {
                    'Authorization': 'Bearer ' + token
                }
             });
        })
        .then(function(response) {
            const pages = response.query.pages;
            const pageId = Object.keys(pages)[0];
            const content = pages[pageId].revisions[0]['*'];
            const geoJSON = JSON.parse(content);
           
            console.group('=== Detailed GeoJSON Analysis ===');
           
            geoJSON.features.forEach((feature, index) => {
                console.group(`Feature ${index + 1}`);
                 console.log('Raw coordinates:', feature.geometry.coordinates);
                console.log('Properties:', {
                     title: feature.properties.title,
                     content: feature.properties.content,
                     iconType: feature.properties.iconType,
                    tags: feature.properties.tags
                 });
                 });
                  
                 console.groupEnd();
                 // 座標値の検証
                 return response;
                const [lng, lat] = feature.geometry.coordinates;
            })
                 console.log('Coordinate validation:', {
            .catch(function(error) {
                     longitude: lng,
                 console.error('Request failed:', {
                     latitude: lat,
                     status: error.status,
                     isValid: !isNaN(lng) && !isNaN(lat) &&
                     statusText: error.statusText,
                            lng >= 0 && lng <= imageBase.width &&
                     responseText: error.responseText
                            lat >= 0 && lat <= imageBase.height
                 });
                 });
               
                // ポップアップコンテンツの検証
                const popupContent = `<strong>${feature.properties.title}</strong><br>${feature.properties.content}`;
                console.log('Popup content preview:', popupContent.substring(0, 100));
               
                 console.groupEnd();
                 console.groupEnd();
                throw error;
             });
             });
    };
   
    // XMLHttpRequestもモニタリング
    const originalXHR = window.XMLHttpRequest;
    window.XMLHttpRequest = function() {
        const xhr = new originalXHR();
        const originalOpen = xhr.open;
       
        xhr.open = function(method, url) {
            console.group(`XMLHttpRequest to: ${url}`);
            console.log('XHR details:', {
                method: method,
                url: url,
                matchesBaseUrl: url.startsWith(API_BASE_URL)
            });
            console.log('Called from:', new Error().stack);
            console.groupEnd();
              
              
             console.groupEnd();
             return originalOpen.apply(this, arguments);
         })
         };
         .catch(console.error);
          
};
        return xhr;
 
     };
// マーカー位置のデバッグ用ヘルパー関数
window.validateMarkerPositions = function() {
     console.group('=== Marker Position Validation ===');
    console.log('Image bounds:', imageBounds);
      
      
     drawnItems.eachLayer(layer => {
     // API_BASE_URLの変更を監視
         if (layer instanceof L.Marker) {
    let originalAPIBaseURL = API_BASE_URL;
             const pos = layer.getLatLng();
    Object.defineProperty(window, 'API_BASE_URL', {
             console.log('Marker position:', {
         get: function() {
                 lat: pos.lat,
             return originalAPIBaseURL;
                 lng: pos.lng,
        },
                isWithinBounds: imageBounds.contains(pos),
        set: function(newValue) {
                 distanceFromEdges: {
             console.warn('API_BASE_URL modification detected:', {
                    top: pos.lat - imageBounds.getNorth(),
                 oldValue: originalAPIBaseURL,
                    bottom: imageBounds.getSouth() - pos.lat,
                 newValue: newValue,
                    left: pos.lng - imageBounds.getWest(),
                 stack: new Error().stack
                    right: imageBounds.getEast() - pos.lng
                }
             });
             });
            originalAPIBaseURL = newValue;
         }
         }
     });
     });
      
      
    // グローバル変数の監視
    console.log('Current global state:', {
        API_BASE_URL: window.API_BASE_URL,
        definedInWindow: 'API_BASE_URL' in window,
        configurable: Object.getOwnPropertyDescriptor(window, 'API_BASE_URL')?.configurable,
        enumerable: Object.getOwnPropertyDescriptor(window, 'API_BASE_URL')?.enumerable
    });
   
    // APIリクエストのベースURLが変更される可能性のある箇所を検索
    console.log('Searching for potential URL modifications...');
    const scripts = document.getElementsByTagName('script');
    for (let script of scripts) {
        if (script.src) {
            console.log('External script:', script.src);
        }
    }
   
    console.log('Debug tools installed. Monitoring API requests...');
    console.groupEnd();
};
// リクエストURLの分析ヘルパー
window.analyzeRequestURL = function(url) {
    console.group('URL Analysis');
    try {
        const parsedUrl = new URL(url);
        console.log('URL components:', {
            full: url,
            protocol: parsedUrl.protocol,
            hostname: parsedUrl.hostname,
            pathname: parsedUrl.pathname,
            search: parsedUrl.search,
            expectedHostname: new URL(API_BASE_URL).hostname,
            isMatch: parsedUrl.hostname === new URL(API_BASE_URL).hostname
        });
       
        // ドメインの比較
        if (parsedUrl.hostname !== new URL(API_BASE_URL).hostname) {
            console.warn('Domain mismatch detected!');
            console.log('Expected:', new URL(API_BASE_URL).hostname);
            console.log('Actual:', parsedUrl.hostname);
        }
       
    } catch (e) {
        console.error('URL parsing failed:', e);
    }
    console.groupEnd();
};
// 現在のページコンテキストの分析
window.analyzePageContext = function() {
    console.group('Page Context Analysis');
    console.log('Document location:', {
        href: document.location.href,
        protocol: document.location.protocol,
        hostname: document.location.hostname,
        pathname: document.location.pathname
    });
    console.log('Base URL elements:', {
        baseHref: document.querySelector('base')?.href,
        baseURI: document.baseURI,
        documentURI: document.documentURI
    });
    console.log('MediaWiki specific:', {
        wgServer: window.mw?.config?.get('wgServer'),
        wgScriptPath: window.mw?.config?.get('wgScriptPath'),
        wgArticlePath: window.mw?.config?.get('wgArticlePath')
    });
     console.groupEnd();
     console.groupEnd();
};
};

2024年11月10日 (日) 12:55時点における版

「https://www.h1g.jp/metaphor_refantazio/index.php?title=Widget:Custom_map&oldid=4651」から取得