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で、インデックスが作成されます。

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