以前、以下の記事を書きました。
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(/&/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); }
その後、フロッピーディスクっぽい保存ボタンを押して、再生っぽい実行ボタンを押します。これで準備OK.
3つの表示
スクリプトがうまく動いているならば、3つのショートカットキーが使えるようになります。
shift + f
行頭に📙がある項目を拾ってindexを作成します。私は、企画案の卵(あるいは核)のような項目にこの絵文字をつけています。
shift + g
行頭に#が一つ以上ついた、いわゆるマークダウン的な見出しの項目を拾ってindexを作成します。構造的文章を書くときに便利です。
shift + h
行頭に📘がある項目を拾ってindexを作成します。私は、プロジェクトの項目にこの絵文字をつけています。
絵文字などについては、コピペしたコードの中の対応する部分を置き換えれば、別の絵文字や記号にすることも可能です。その辺はお好みでどうぞ。
あと、一度表示させたindexを削除する、という機能はありませんので、うっとうしければリロードで消してください。
まとめ
上記のように、DeskFlowyのおかげで、拡張のためのJavaScriptを気楽に紹介できるようになったのですが、そもそも優れたブックマーク機能が標準装備されているので、のindexいらなくね? みたいな疑問もないではありません。まあ、# を拾って見出しを表示されるやつは、結構便利です。WokrFlowyで文章を書いている人なんかは、一応頭に入れておくとよいかもしれません。
▼こんな一冊も:
売り上げランキング: 47,657
売り上げランキング: 52,493
コメントを残す