R-style

Sharing is Power! / Create your own way.

Menu
  • ホーム
  • About
  • メルマガ
  • 著作リスト
  • Evernoteの使い方
  • Scrapboxの使い方
  • Tools
  • お問い合わせ
Menu

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

Posted on 2017 年 8 月 22 日 by Rashita

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

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


HandyFlowy

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))
クラウド時代の思考ツール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を表示”

  1. 洪文泓 より:
    2017 年 10 月 22 日 1:43 PM

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

  2. Rashita より:
    2017 年 10 月 22 日 5:44 PM

    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 & 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(/&/g,"&").replace(/ /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);
    
    }
    

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

有料メルマガ配信中!

サークルもやってます

New Book!

すべてはノートからはじまる あなたの人生をひらく記録術

「やること地獄」を終わらせるタスク管理「超」入門 (星海社新書)

オススメ本

→これまでの著作一覧
  • →SNS:
  • rashita2 さんのプロフィールを Twitter で表示
  • rashita さんのプロフィールを GitHub で表示

Hot Books!

→紹介記事

→紹介記事

→紹介記事

最近の投稿

  • ノートがやがてうまく使えなくなる問題
  • ノートで世界を知る、自分を知る
  • 一つの情報に、もう一度触れること
  • 執筆はメモからはじめる
  • ブログ死すとも文章は死せず
  • Heptabaseが示す思考ツールの未来

カテゴリー

  • 0-知的生産の技術 (1,580)
    • BlogArts (121)
    • Evernoteの使い方 (177)
    • Scrapboxの用法 (101)
    • Scrivenerへの散歩道 (22)
    • アウトライナーで遊ぼう (88)
    • プログラミング (11)
    • 執筆法 (45)
    • 断片からの創造 (93)
    • 物書き生活と道具箱 (682)
  • 1-情報ツール考察 (74)
  • 2-社会情報論 (108)
  • 3-叛逆の仕事術 (392)
    • 「タスク」の研究 (260)
  • 4-僕らの生存戦略 (259)
  • 5-創作文 (91)
  • 6-エッセイ (217)
  • 7-本の紹介 (465)
  • コレクション (4)
  • 未分類 (2,832)
    • まとめ記事 (516)
    • 企画 (83)
    • 告知 (261)
    • 感想群 (111)
    • 時事ニュース (1,241)

タグ

#365日の書斎 #AppleScriptでEvernoteを操作する #「目標」の研究 #わりと身も蓋もない話 applescript blog BlogArts CategoryAllegory Dynalist Evernote GTD iPhone・iPad・Mac Scrapbox Scrivener Workflowy 〈学びの土曜日〉 「本」の未来 『「やること地獄」を終わらせるタスク管理「超」入門』 うちあわせCast ささやかな質問 ほぼ日手帳 アウトライナー アナログ道具あそび ショートショート セミナー・オフ会・イベント セルフ・ブランディング タスク管理 ノート ノート術 ポッドキャスト 哲学 思想 思考の技術 情報カード 情報摂取の作法 手帳術 政治・社会 教育 文房具 文章の織り方 新しい時代を生きる力 書評 発想法の探求 経済・金融 電子書籍

アーカイブ

メタ情報

  • ログイン
  • 投稿フィード
  • コメントフィード
  • WordPress.org

My Works

著作リスト

著作リスト

アーカイブ

カテゴリー

アーカイブ

  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年5月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年8月
  • 2015年7月
  • 2015年6月
  • 2015年5月
  • 2015年4月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2014年5月
  • 2014年4月
  • 2014年3月
  • 2014年2月
  • 2014年1月
  • 2013年12月
  • 2013年11月
  • 2013年10月
  • 2013年9月
  • 2013年8月
  • 2013年7月
  • 2013年6月
  • 2013年5月
  • 2013年4月
  • 2013年3月
  • 2013年2月
  • 2013年1月
  • 2012年12月
  • 2012年11月
  • 2012年10月
  • 2012年9月
  • 2012年8月
  • 2012年7月
  • 2012年6月
  • 2012年5月
  • 2012年4月
  • 2012年3月
  • 2012年2月
  • 2012年1月
  • 2011年12月
  • 2011年11月
  • 2011年10月
  • 2011年9月
  • 2011年8月
  • 2011年7月
  • 2011年6月
  • 2011年5月
  • 2011年4月
  • 2011年3月
  • 2011年2月
  • 2011年1月
  • 2010年12月
  • 2010年11月
  • 2010年10月
  • 2010年9月
  • 2010年8月
  • 2010年7月
  • 2010年6月
  • 2010年5月
  • 2010年4月
  • 2010年3月
  • 2010年2月
  • 2010年1月
  • 2009年12月
  • 2009年11月
  • 2009年10月
  • 2009年9月
  • 2009年8月
  • 2009年7月
  • 2009年6月
  • 2009年5月
  • 2009年4月
  • 2009年2月
  • 2009年1月
  • 2008年12月
  • 2008年11月
  • 2008年10月
  • 2008年9月
  • 2008年8月
  • 2008年7月
  • 2008年6月
  • 2008年5月
  • 2008年4月
  • 2008年3月
  • 2008年2月
  • 2008年1月
  • 2007年12月
  • 2007年11月
  • 2007年10月
  • 2007年9月
  • 2007年8月
  • 2007年7月
  • 2007年6月
  • 2007年5月
  • 2007年4月
  • 2007年3月
  • 2007年2月
  • 2007年1月
  • 2006年12月
  • 2006年11月
  • 2006年10月
  • 2006年9月
  • 2006年8月
  • 2006年7月
  • 2006年6月
  • 2006年5月
  • 2006年4月
  • 2006年3月
  • 2006年2月
  • 2006年1月
  • 2005年12月
  • 2005年11月
  • 2005年10月
  • 2005年9月
  • 2005年8月
  • 2005年7月
  • 2005年6月
  • 2005年5月
  • 2005年4月
  • 2005年3月
  • 2005年2月
  • 2005年1月
  • 2004年7月
  • 2004年6月
  • 2004年5月
  • 2004年4月
  • 2004年3月
©2022 R-style | WordPress Theme by Superbthemes.com