WorkFlowy&DeskFlowyで左部分に特定項目のindexを表示

以前、以下の記事を書きました。

WorkFlowyの左部分に特定項目のindexを表示 – R-style

個人的には便利に使っているものの、導入までのステップがちょっと初心者向きではないので、どうしようかな〜と思っていた矢先、DeskFlowyの登場です。

WorkFlowy専用クライアントソフト「DeskFlowy」 – R-style

DeskFlowyでは、何の拡張機能もインストールすることなく、直にJavaScriptでの拡張が可能です。だったら、初心者でもぜんぜんOKですね。というわけで、以前紹介したIndex表示を、DeskFlowyにて実装してみましょう。

Extension Script

使うのは、右側のサイドバーの「Extension Script」です。そこのペンマークをクリックし、テキストエリアを表示させたのち、以下のスクリプトをコピペしてください。

document.onkeydown = function(e) {
    var keyCode = false;
    if (e) event = e;
    if (event) {
        if (event.keyCode) {
            keyCode = event.keyCode;
        } else if (event.which) {
            keyCode = event.which;
        }
    }
    if (keyCode === 71 &　event.shiftKey === true) {

        if(e.preventDefault){
			// デフォルトの動作を無効化する
			e.preventDefault();
		}else{
			// デフォルトの動作を無効化する（非標準）
			return false;
		}
        indexMaker(/^#+? /,'header');

       }

        if (keyCode === 70 &　event.shiftKey === true) {
             if(e.preventDefault){
			// デフォルトの動作を無効化する
			e.preventDefault();
             }else{
			// デフォルトの動作を無効化する（非標準）
			return false;
             }
            indexMaker(/^📙/,'index');
        }

        if (keyCode === 72 &　event.shiftKey === true) {
             if(e.preventDefault){
                 // デフォルトの動作を無効化する
                 e.preventDefault();
             }else{
                 // デフォルトの動作を無効化する（非標準）
                 return false;
             }
            indexMaker(/^📘/,'project');
        }

};

function indexMaker(reg,title){
    p=pageContainer.innerHTML.replace(/\n/g, '%#10').replace(/&amp;/g,"&").replace(/&nbsp;/g,"").replace(/<div class="project/g,'\n<div class=\"project').replace(/<span class="parentArrow">/g, '\n<span class=\"parentArrow\">');
    line = p.split('\n');
    var outtxt="";
    for (i = 0; i < line.length; i++) {
        c = line[i];
        if(c!==''){
            switch (true) {
                case /<div class="project/.test(c):
                    tempX = c.replace(/.*?projectid=".*?-.*?-.*?-.*?-(.*?)".*?<div class="content".*?>(.*?)<\/div>/g,'$2').replace(/<span class="contentBold contentItalic contentUnderline">(.+?)<\/span>/g, '$1').replace(/<span class="contentBold contentItalic">(.+?)<\/span>/g, '$1').replace(/<span class="contentBold contentUnderline">(.+?)<\/span>/g, '$1').replace(/<span class="contentItalic contentUnderline">(.+?)<\/span>/g, '$1').replace(/<span class="contentBold">(.+?)<\/span>/g, '$1').replace(/<span class="contentItalic">(.+?)<\/span>/g, '$1').replace(/<span class="contentUnderline">(.+?)<\/span>/g, '$1').replace(/<a class="contentLink".+?>(.+?)<\/a>/g,'$1').replace(/<span class="contentTag".+?>.+?<\/span><\/span>/g, '').replace(/<span class="contentMatch.+?>(.+?)<\/span>/g,'$1');
                    if  (reg.test(tempX)){
                        outtxt += c.replace(/.*?projectid=".*?-.*?-.*?-.*?-(.*?)".*?<div class="content".*?>(.*?)<\/div>/g,'<a href="https://workflowy.com/#/$1">$2<\/a>').replace(/<span class="contentBold contentItalic contentUnderline">(.+?)<\/span>/g, '$1').replace(/<span class="contentBold contentItalic">(.+?)<\/span>/g, '$1').replace(/<span class="contentBold contentUnderline">(.+?)<\/span>/g, '$1').replace(/<span class="contentItalic contentUnderline">(.+?)<\/span>/g, '$1').replace(/<span class="contentBold">(.+?)<\/span>/g, '$1').replace(/<span class="contentItalic">(.+?)<\/span>/g, '$1').replace(/<span class="contentUnderline">(.+?)<\/span>/g, '$1').replace(/<a class="contentLink".+?>(.+?)<\/a>/g,'$1').replace(/<span class="contentTag".+?>.+?<\/span><\/span>/g, '').replace(/<span class="contentMatch.+?>(.+?)<\/span>/g,'$1')+"\n";
                    }
                break;
                default:
                    break;
            }
        }
    }
    outtxt=outtxt.replace(/\n/g,'<br />\n');
    var e=document,a=e.getElementById("_wf_index");
    a&&e.body.removeChild(a);
    a=e.createElement("div");
    a.id="_wf_index";
    a.innerHTML="<p style=\"font-size:12px\">" + title + "<br />" + outtxt+ "</p>";
    a.setAttribute("style","background-color:#fff;border:1px solid #ccc;opacity:1.0;position:fixed;top:50px;left:10px;z-index:10;width:200px;height:auto;font-size:11px;padding:5px");
    e.body.appendChild(a);
}

その後、フロッピーディスクっぽい保存ボタンを押して、再生っぽい実行ボタンを押します。これで準備OK.

３つの表示

スクリプトがうまく動いているならば、３つのショートカットキーが使えるようになります。

shift + f

行頭に📙がある項目を拾ってindexを作成します。私は、企画案の卵（あるいは核）のような項目にこの絵文字をつけています。

shift + g

行頭に#が一つ以上ついた、いわゆるマークダウン的な見出しの項目を拾ってindexを作成します。構造的文章を書くときに便利です。

shift + h

行頭に📘がある項目を拾ってindexを作成します。私は、プロジェクトの項目にこの絵文字をつけています。

絵文字などについては、コピペしたコードの中の対応する部分を置き換えれば、別の絵文字や記号にすることも可能です。その辺はお好みでどうぞ。

あと、一度表示させたindexを削除する、という機能はありませんので、うっとうしければリロードで消してください。

まとめ

上記のように、DeskFlowyのおかげで、拡張のためのJavaScriptを気楽に紹介できるようになったのですが、そもそも優れたブックマーク機能が標準装備されているので、のindexいらなくね？　みたいな疑問もないではありません。まあ、# を拾って見出しを表示されるやつは、結構便利です。WokrFlowyで文章を書いている人なんかは、一応頭に入れておくとよいかもしれません。

▼こんな一冊も：