Scrapboxにパンくずリストのようなものを表示するユーザースクリプト

更新履歴

日付をタップすると展開します。


Scrapboxには階層がありませんので、表示されるのは階層ではなくページ遷移履歴です。

↓ こんな感じ

コード

code:script.js
    (function() {
    // このスクリプトをオン・オフする
    const this_script = 'on';
    // 表示する履歴の数
    const history_num = 5;
    // 表示するタイトルの文字数の上限値
    // 制限しない場合は null と記入
    const title_max = 25;
    // 「履歴」、リンク、セパレータの色
    const col_rireki = '#000';
    const col_link = '#4b7ff5';
    const col_separator = '#888';
    
    // SVG home icon by Ivan Boyko(https://www.iconfinder.com/visualpharm)
    const home_icon = '<svg enable-background="new 0 0 24 24" class="svg-home-icon" version="1.0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M20,20v-8h2v0L12,3L2,12v0h2v8c0,0.6,0.4,1,1,1h5v-7h4v7h5C19.6,21,20,20.6,20,20z"/></svg>';
    // SVG search icon by Design Revision(https://www.iconfinder.com/DesignRevision)
    const search_icon = '<svg enable-background="new 0 0 50 50" height="50px" class="svg-search-icon" version="1.1" viewBox="0 0 50 50" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M38.084,7.398c-8.531-8.53-22.36-8.53-30.89,0c-8.53,8.53-8.53,22.36,0,30.89  c7.331,7.33,18.566,8.341,26.998,3.074l8.132,8.13c1.757,1.756,4.604,1.756,6.359,0c1.757-1.757,1.757-4.603,0-6.357l-8.002-8  C46.486,26.63,45.629,14.943,38.084,7.398z M32.632,32.836c-5.518,5.52-14.467,5.52-19.986,0c-5.519-5.519-5.519-14.468,0-19.988  c5.519-5.518,14.468-5.518,19.986,0C38.154,18.368,38.154,27.317,32.632,32.836z" fill="#231F20"/></svg>';
    
    function restrict_char_num(str, num) {
        if (num === null) {
            return str;
        }
        if (str.length > num+1){
            str = str.substr(0, num) + '…';
        }
        return str;
    }
    function main(history) {
        if (!document.getElementById('scraphistory-style')) {
            let inner = '.scraphistory-home { margin: -20px 3px 12px 3px; }';
            inner += '@media (max-width: 767px) { .quick-launch { margin-bottom: 25px !important; } }';
            inner += '.scraphistory-page { margin: -19px 68px 8px 68px; max-width: 960px; }';
            inner += '@media (max-width: 767px) { div.scraphistory-page { margin: -6px 15px 8px 15px; } }';
            inner += '.scraphistory-link::before, .scraphistory-link:last-child::after, .scraphistory-no-history::after { content: ">"; color: ' + col_separator + '; text-decoration: none; display: inline-block; padding: 0 5px; pointer-events:none; }';
            inner += '.svg-home-icon { width: 1.2em; height: 1.2em; position: relative; top: 2px } .svg-home-icon path { fill:' + col_link + '; }';
            inner += '.svg-search-icon { width: 1.1em; height: 1.1em; padding-right: 2px; position: relative; top: 2px } .svg-search-icon path { fill:' + col_link + '; }';
            inner += '.scraphistory-rireki { color: ' + col_rireki + '}';
            inner += '.scraphistory-home a, .scraphistory-page a { color: ' + col_link +'}';
            const style = document.createElement('style');
            style.setAttribute('id', 'scraphistory-style');
            style.innerHTML = inner;
            document.getElementsByTagName('head')[0].appendChild(style);
        }
        const scraphistory = document.getElementById('scraphistory');
        if (scraphistory) {
            scraphistory.parentNode.removeChild(scraphistory);
        }
        const elem_to_insert = document.createElement('div');
        elem_to_insert.setAttribute('id', 'scraphistory');
        if (history.length === 0) {
            elem_to_insert.innerHTML = '<span class="scraphistory-no-history scraphistory-rireki">履歴</span>';
        } else {
            if (history.length > history_num) {
                history = history.slice(-history_num);
            }
            let list = ['<span class="scraphistory-rireki">履歴</span>'];
            history.forEach(function(value) {
                list.push('<a class="scraphistory-link" href="' + value.url + '">' + value.title + '</a>');
            });
            elem_to_insert.innerHTML = list.join('\n');
        }
        let current_url = location.href;
        let title;
        const search_matched = current_url.match(/search\/page\?q=(.+)/);
        if (current_url.replace(/\/$/, '').split('/').length === 4 || search_matched) {
            elem_to_insert.setAttribute('class', 'scraphistory-home');
            const target_elem = document.getElementsByClassName('page-list')[0];
            if (!target_elem) {
                setTimeout(function() {
                    main(history);
                }, 300);
                return;
            }
            target_elem.parentNode.insertBefore(elem_to_insert, target_elem);
            if (search_matched) {
                title = search_icon + restrict_char_num(decodeURIComponent(search_matched[1]), title_max);
            } else {
                title = home_icon;
            }
        } else {
            elem_to_insert.setAttribute('class', 'scraphistory-page');
            const target_elem = document.getElementsByClassName('row-flex')[0];
            if (!target_elem) {
                setTimeout(function() {
                    main(history);
                }, 300);
                return;
            }
            target_elem.parentNode.insertBefore(elem_to_insert, target_elem);
            title = restrict_char_num(decodeURIComponent(current_url.replace(/.+\/(.+)/, '$1')), title_max);
        }
        page_info = {
            url: current_url,
            title: title
        };
        const page_observer = new MutationObserver(function(mutation_records, observer) {
            if (document.getElementsByClassName('cursor')[0].style.display !== 'none') {
                current_url = location.href;
                title = restrict_char_num(decodeURIComponent(current_url.replace(/.+\/(.+)/, '$1')), title_max);
                page_info = {
                    url: current_url,
                    title: title
                };
                return;
            }
            observer.disconnect();
            if (location.href !== current_url) {
                history.push(page_info);
            }
            main(history);
        });
        page_observer.observe(
            document.getElementsByTagName('head')[0].getElementsByTagName('title')[0],
            { childList: true }
        );
    }
    
    if (this_script === 'on') {
        main([]);
    }
    
    })();

スポンサーリンク

導入の手順

  1. ScrapboxのUserScriptの機能を有効にする
    Scrapboxの右上のMenu -> Edit Profile -> Extensionタブ
    と進み、User ScriptのEnabledにチェックを入れる

  2. コードを「自分のページ」に貼り付ける

「自分のページ」って何だ?という方はこちらを参照。
自分のページ - 橋本商会

設定できる項目

コードの先頭あたりにあります。

// このスクリプトをオン・オフする
const this_script = 'on';
// 表示する履歴の数
const history_num = 5;
// 表示するタイトルの文字数の上限値
// 制限しない場合は null と記入
const title_max = 25;
// 「履歴」、リンク、セパレータの色
const col_rireki = '#000';
const col_link = '#4b7ff5';
const col_separator = '#888';


他にこんな記事を書きました。

スポンサーリンク
スポンサーリンク

1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。