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

WorkFlowyの左側のスペースって、何かに使いたいですよね。

自分のこれまでのアウトライナー体験から言うと、ここに何かしらのindexがあれば使い勝手が良さそうです。

特にこのincubator項目は縦に長くなっているので一覧性が悪く、しかもそうした項目の中に特別な奴ら（大きなアイデアの核となるような項目）がいくつか存在しているので、そうしたものだけをピックアップしたindexを作れば、「今の自分が抱えているアイデア核の一覧」が作れるんじゃないか。そんなことを思い浮かべました。

幸いブラウザ拡張のTamparmonkeyを使えば、自分が書いたJavaScriptを割り込ませることができます。うまくやれば、実現可能でしょう。

アイデアのネタもと

とは言え、いきなりこういう欲求が出てきたわけではありません。以前、以下のスクリプトを覗いていた経験があったからです。

WorkFlowyの文字数カウントブックマークレット | マロ。 | note

上記はWorkFlowyのテキスト文字数をカウントしてくれるだけなく、それを左部分に埋め込んで表示してくれるという大変ありがたい機能です。で、上記のコードをデコードして自分なりに読んでいて、「WorkFlowyのテキスト全体を扱うこと」「その結果を受けてページに要素を追加すること」ができるんだな、ということ感覚的に理解していました。

あとは、この「WorkFlowyのテキスト全体を扱うこと」を、文字数カウントではなく、一定の検索条件による要素の抽出にすれば、私が望む機能は実装できそうです。

欠けたパーツ

あと必要だったのは、第一にWorkFlowyの全文から特定の条件に合う要素だけを検索する方法。さらに、それぞれの項目はリンクになっていないと意味がないので、項目のリンクを取り出す方法も必要です。逆に言えば、この二つさえわかれば、あとは何とかなるでしょう。

で、探索していくと、ばっちり見つけられてしまうのがインターネットワールドです。

WorkFlowyで文字列置換を行うブックマークレット　ReplaceFlowy | マロ。 | note

WorkFlowyの目次リストをつくるbookmarklet | マロ。 | note

マロ。さんには頭があがりません。特に後者が参考になりました。いや、参考になったというか、このスクリプトで出力される形式をちょこっと変更すれば、ほぼ望みのものが手に入ります。もともとのスクリプトは、'[項目名] URL’の形になっていますが、それをAタグを使って囲む形にすればバッチリです。あとは、表示する項目を頭に特定の文字が付いたものだけにすれば、完璧でしょう。

これは最近覚えた正規表現の^を使えば、ばっりちそうです。

で、その（日曜大工感溢れる）コードをここで公開しようかと思ったのですが、はるかにスマートなコードをまるみ(@marumi_app)さんが書いてくださりました。

WorkFlowyの項目を抽出して、左に表示する

さすが、MemoFlowyやHandyFlowyの開発者さんです。

MemoFlowy
Michinari YAMAMOTO
価格： 0円
posted with sticky on 2017.8.22

HandyFlowy
Michinari YAMAMOTO
価格： 0円
posted with sticky on 2017.8.22

あとは、そのスクリプトを何かしらのトリガーによって発動すればOKで、私はショートカットキーを選択しました。これもJavaScriptで書けます。

たとえば、こんな感じ

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();// 発動させたいファンクション

       }
};

これで、shift+gで、インデックスが作成されます。

その動作を動画でも確認してみましょう。

いやはや、我ながらマニアックですね。

さらにこのindex領域にボタンを付けて、別の抽出条件の結果や、メタ情報の表示を切り替えられるようにすれば、もはやまったく別のツールに生まれ変わるのでは、という予感もしていますが、そんなことをしている間にどんどん原稿を書く時間が削られていくので、カスタマイズはほどほどにしておきましょう。

▼こんな一冊も：

アウトライナー実践入門　～「書く・考える・生活する」創造的アウトライン・プロセッシングの技術～

posted with amazlet at 17.08.22

技術評論社 (2016-07-09)
売り上げランキング: 32,060

Amazon.co.jpで詳細を見る

クラウド時代の思考ツールWorkFlowy入門 (OnDeck Books（NextPublishing）)

posted with amazlet at 17.08.22

インプレスR&D (2016-01-29)
売り上げランキング: 37,336

Amazon.co.jpで詳細を見る

2 thoughts on “WorkFlowyの左部分に特定項目のindexを表示”

洪文泓のコメント:

2017 年 10 月 22 日 1:43 PM

May I ask for the Tampermonkey JavaScript code?? (I couldn’t find it…)

Here it is.

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 &amp;　event.shiftKey === true) {

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

       }

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

        if (keyCode === 72 &amp;　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;amp;/g,&quot;&amp;&quot;).replace(/&amp;nbsp;/g,&quot;&quot;).replace(/&lt;div class=&quot;project/g,'\n&lt;div class=\&quot;project').replace(/&lt;span class=&quot;parentArrow&quot;&gt;/g, '\n&lt;span class=\&quot;parentArrow\&quot;&gt;');
    line = p.split('\n');
    var outtxt=&quot;&quot;;
    for (i = 0; i &lt; line.length; i++) {
        c = line[i];
        if(c!==''){
            switch (true) {
                case /&lt;div class=&quot;project/.test(c):
                    tempX = c.replace(/.*?projectid=&quot;.*?-.*?-.*?-.*?-(.*?)&quot;.*?&lt;div class=&quot;content&quot;.*?&gt;(.*?)&lt;\/div&gt;/g,'$2').replace(/&lt;span class=&quot;contentBold contentItalic contentUnderline&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;span class=&quot;contentBold contentItalic&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;span class=&quot;contentBold contentUnderline&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;span class=&quot;contentItalic contentUnderline&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;span class=&quot;contentBold&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;span class=&quot;contentItalic&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;span class=&quot;contentUnderline&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;a class=&quot;contentLink&quot;.+?&gt;(.+?)&lt;\/a&gt;/g,'$1').replace(/&lt;span class=&quot;contentTag&quot;.+?&gt;.+?&lt;\/span&gt;&lt;\/span&gt;/g, '').replace(/&lt;span class=&quot;contentMatch.+?&gt;(.+?)&lt;\/span&gt;/g,'$1');
                    if  (reg.test(tempX)){
                        outtxt += c.replace(/.*?projectid=&quot;.*?-.*?-.*?-.*?-(.*?)&quot;.*?&lt;div class=&quot;content&quot;.*?&gt;(.*?)&lt;\/div&gt;/g,'&lt;a href=&quot;https://workflowy.com/#/$1&quot;&gt;$2&lt;\/a&gt;').replace(/&lt;span class=&quot;contentBold contentItalic contentUnderline&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;span class=&quot;contentBold contentItalic&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;span class=&quot;contentBold contentUnderline&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;span class=&quot;contentItalic contentUnderline&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;span class=&quot;contentBold&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;span class=&quot;contentItalic&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;span class=&quot;contentUnderline&quot;&gt;(.+?)&lt;\/span&gt;/g, '$1').replace(/&lt;a class=&quot;contentLink&quot;.+?&gt;(.+?)&lt;\/a&gt;/g,'$1').replace(/&lt;span class=&quot;contentTag&quot;.+?&gt;.+?&lt;\/span&gt;&lt;\/span&gt;/g, '').replace(/&lt;span class=&quot;contentMatch.+?&gt;(.+?)&lt;\/span&gt;/g,'$1')+&quot;\n&quot;;
                    }
                break;
                default:
                    break;
            }
        }
    }
    outtxt=outtxt.replace(/\n/g,'&lt;br /&gt;\n');
    var e=document,a=e.getElementById(&quot;_wf_index&quot;);
    a&amp;&amp;e.body.removeChild(a);
    a=e.createElement(&quot;div&quot;);
    a.id=&quot;_wf_index&quot;;
    a.innerHTML=&quot;&lt;p style=\&quot;font-size:12px\&quot;&gt;&quot; + title + &quot;&lt;br /&gt;&quot; + outtxt+ &quot;&lt;/p&gt;&quot;;
    a.setAttribute(&quot;style&quot;,&quot;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&quot;);
    e.body.appendChild(a);

}

コメントは停止中です。