「MediaWiki:Common.js」の版間の差分

ナビゲーションに移動 検索に移動
編集の要約なし
(メインページに「最近の更新(7件)」をタイトル+差分リンク付きで表示するための完全版コード)
 
編集の要約なし
タグ: モバイル編集 モバイルウェブ編集
 
(同じ利用者による、間の8版が非表示)
3行目: 3行目:




/* ============================================================
/******************************************************
  メインページに「最近の更新(7件)」を表示するスクリプト
* Timeless 対応:最近の更新ウィジェット(完全版)
  - タイトル+差分リンク付き
******************************************************/
  - localStorage による5分キャッシュ
  - API の maxage/smaxage による HTTP キャッシュ
  - MediaWiki 1.39.3 で動作確認済み
  ============================================================ */


$(function () {
mw.loader.using(['mediawiki.util'], function () {


     // ▼ メインページ以外では実行しない(重要)
     // ▼ 最近の更新を読み込む関数
     if (mw.config.get('wgPageName') !== 'Main_Page' &&
     function loadRecentChanges(container) {
         mw.config.get('wgPageName') !== 'メインページ') {
        var key = 'recentchanges-cache';
         return;
        var keyTime = key + '-time';
    }
        var ttl = 5 * 60 * 1000; // 5分キャッシュ
         var now = Date.now();
 
        var cached = localStorage.getItem(key);
         var cachedTime = localStorage.getItem(keyTime);


    // ▼ localStorage 用のキー
        if (cached && cachedTime && now - cachedTime < ttl) {
    const key = 'recentchanges-cache';
            container.innerHTML = cached;
    const keyTime = key + '-time';
            return;
        }


    // ▼ キャッシュの有効期限(ミリ秒)→ 5分
        $.getJSON(mw.util.wikiScript('api'), {
    const ttl = 5 * 60 * 1000;
            action: 'query',
    const now = Date.now();
            list: 'recentchanges',
            rclimit: 7,
            rcprop: 'title|timestamp|ids',
            rcshow: '!bot',
            format: 'json'
        }, function (data) {


    // ▼ localStorage にキャッシュがあれば利用
            var html = '<ul>';
    const cached = localStorage.getItem(key);
    const cachedTime = localStorage.getItem(keyTime);


    if (cached && cachedTime && now - cachedTime < ttl) {
            data.query.recentchanges.forEach(function (rc) {
        $('#recentchanges-container').html(cached);
                html += '<li>' +
        return; // API を叩かず終了
                    '<a href="/wiki/' + rc.title + '">' + rc.title + '</a>' +
    }
                    ' <span style="color:#666;">(' + rc.timestamp + ')</span>' +
                    '</li>';
            });


    // ▼ MediaWiki API を呼び出して最近の更新を取得
            html += '</ul>';
    $.getJSON(mw.util.wikiScript('api'), {
        action: 'query',
        list: 'recentchanges',
        rclimit: 7,                    // 取得件数
        rcprop: 'title|timestamp|ids',  // タイトル・時刻・差分ID
        rcshow: '!bot',                // Bot 編集を除外(不要なら削除)
        format: 'json',


        // ▼ HTTP キャッシュ(ブラウザ・CDN)
            localStorage.setItem(key, html);
        maxage: 300,   // ブラウザキャッシュ 5分
            localStorage.setItem(keyTime, now);
        smaxage: 300  // CDNキャッシュ 5分
    }, function (data) {


         let html = '<ul>';
            container.innerHTML = html;
         });
    }


         data.query.recentchanges.forEach(rc => {
    // ▼ 要素が出現した瞬間に実行する関数
    function initRecentChanges() {
         var container = document.getElementById('recentchanges-container');
        if (!container) return;


            // ▼ 差分リンクの生成
        if (container.dataset.loaded) return;
            const diffUrl = mw.util.getUrl(rc.title, {
        container.dataset.loaded = "1";
                diff: rc.revid,
                oldid: rc.old_revid
            });


            // ▼ リスト項目の HTML
        loadRecentChanges(container);
            html += `
    }
                <li>
                    <a href="/wiki/${rc.title}">${rc.title}</a>
                    &nbsp;
                    <a href="${diffUrl}">差分</a>
                    &nbsp;
                    (${rc.timestamp})
                </li>
            `;
        });


         html += '</ul>';
    // ▼ Timeless は DOM を後から組み替えるので監視が必須
    var observer = new MutationObserver(function () {
         initRecentChanges();
    });


        // ▼ localStorage にキャッシュ保存
    observer.observe(document.body, { childList: true, subtree: true });
        localStorage.setItem(key, html);
        localStorage.setItem(keyTime, now);


        // ▼ メインページに表示
    // 初回実行
        $('#recentchanges-container').html(html);
    initRecentChanges();
    });
});
});

案内メニュー