Workflowyでアウトラインの最下層のトピックをTodoリストにするbookmarklet

アウトライナーの利用の仕方の一つとしてプロジェクトから「自分が実行する具体的な行動」のレベルまで分解することでタスクを作っていくことがあります。

しかしながら、プロジェクトを細分化しタスクを作る際に必ずしもタスクとなる階層が他の階層と同じくなるとは限りません。

大きなプロジェクトのサブプロジェクトではすぐにタスクがあるが、もう一つのサブプロジェクトにはさらに細分化されたサブプロジェクトがあり、その中にタスクがあるといったようにです。

アウトライナーをつかって直接タスク管理をするということも可能ですが、実行レベルを合わせてフラットなタスクリストとする方が、構成を意識しない分、タスクの実行モードでは使いやすくなります。

また、タスクの実行に関しては必ずしもアウトラインの順番に沿うものではないかもしれません。

そこで、WorkFlowyで作ったプロジェクト〜タスクについて、最下層のトピック(子トピックを持たないトピック)をタスクとし、その親タスクをプロジェクトとしてフラットなTodoリストを作成するブックマークレットをつくりました。

変換したいプロジェクトのアウトラインのExportからopmlを選択します。
次にbookmarkletを起動すると別ウィンドウにTodoリストが出力されます。

あとは、チェックボックスにチェックを入れるなどしてタスクを実行していきます。

開発環境はmac+safariですが、最近のブラウザでは使えるとおもいます。
iPhoneなどのモバイルブラウザ環境ではWorkFlowyのexportが対応していないため使えません。

動作確認環境
mac+safari
mac+firefox
mac+chrome
windows+firefox

誠に申し訳ありませんが、様々な環境での検証などできておりませんので、不具合があるかもしれません。そのため確実な動作については保証しかねます。その点をご理解の上、ご利用ください。

※ 今回のスクリプトは、WorkFlowyのハサミスクリプトの発展版として らしたさん、Tak.さん、彩郎さん、るうさんがtwitter上で話題にしていたものとマロのボトムアップ型タスク管理のアイデアを融合して作成いたしました。

ソースコードは以下になります。

javascript:(function(){var%20a=1,b,c,d='<!DOCTYPE%20html><html%20lang="ja"><head><title>ToDo</title><script%20src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">\x3c/script>\n<script%20src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">\x3c/script>',d=d+'</head><body><div%20id="tasks">',e=window.getSelection().toString(),f=[];e.replace(/[\n\r]/g,"\n");var%20g=[],g=e.split("\n");for(i=6;i<g.length;i+=1)g[i]=g[i].replace(/^[\s\u3000]+/g,""),g[i]=g[i].split('<outline%20text="').join("<h"+a+">").split('<outline%20_complete="true"%20text="').join("<h"+a+">[del]").split("&amp;").join("&").split("&lt;").join("<").split("&gt;").join(">").split("&quot;").join('"'),~g[i].indexOf("</outline>")&&(g[i]=g[i].split("</outline>").join(""),a--),g[i]=g[i].split('"%20/>').join(""),~g[i].indexOf('"%20>')&&(g[i]=g[i].split('"%20>').join(""),a++),g[i]=g[i].split('"%20_note="')[0],g[i]=g[i].split("</opml>").join(""),g[i]=g[i].split("</body>").join("");for(i=6;i<g.length-1;i+=1)b=Number(g[i].substr(2,1)),c=Number(g[i+1].substr(2,1)),""!=b&&isFinite(b)?%22%22!=c?b%3E=c?g[i]=~g[i].indexOf(%22%3E[del]%22)?%22%22:g[i].split(%22%3Ch%22+b+%22%3E%22).join('%3Cdiv%3E%3Cinput%20type=%22checkbox%22%3E['+f+%22]%22)+%22%3C/div%3E%22:(f[b-1]=g[i].split(%22%3Ch%22+b+%22%3E%22).join(%22%22),g[i]=%22%22):g[i]=g[i].split(%22%3Ch%22+b+%22%3E%22).join('%3Cdiv%3E%3Cinput%20type=%22checkbox%22%3E['+f+%22]%22)+%22%3C/div%3E%22:g[i]=%22%22;for(i=6;i%3Cg.length;i+=1)%22%22!=g[i]&&(d=d+g[i]+%22\n%22);d+=%22%3C/div%3E%22;d+=%22%3Cscript%3E$(function(){$('#tasks').sortable();});\x3c/script>";d+='<script>$(":checkbox").click(function()%20{if($(this).is(":checked")){$(this).closest("div").css("text-decoration","line-through");}else{$(this).closest("div").css("text-decoration","none");}});\x3c/script></body></html>';w=window.open("","","width=480,height=480,left="+Number((window.screen.width-480)/2)+",top="+Number((window.screen.height-480)/2)+",resizable=yes,scrollbars=yes");w.document.open();w.document.write(d);w.document.close();})();

iPadで動作確認しながら作成途中のスマホ版も暫定仕様ですがこちらに掲載します。まだ作成途中&動作確認中ですが興味のある方はどうぞ。使い方はブラウザで切り取りたい表示にしたらbookmarkletを起動するだけです。

%22;outtxt+='

javascript:(function(){p=pageContainer.innerHTML;p=p.replace(/\n/g,"").replace(/<div%20class="notes(.*?)%3C\/div%3E%3C\/div%3E/g,%22%22).replace(/%3Cdiv%20class=%22project%20task%20done%20noted(.*?)%3Cdiv%20class=%22content(.*?)%3E(.*?)%3C\/div%3E/g,'%3Cdiv%20class=%22project%20task%20done%20noted$1%3Cdiv%20class=%22content$2%3E$3[del]%3C/div%3E').replace(/%3C\/div%3E/g,%22%22).replace(/%3Cspan%20class=%22contentBold%20contentItalic%20contentUnderline%22%3E(.+?)%3C\/span%3E/g,%22%3Cb%3E%3Ci%3E%3Cu%3E$1%3C/u%3E%3C/i%3E%3C/b%3E%22).replace(/%3Cspan%20class=%22contentBold%20contentItalic%22%3E(.+?)%3C\/span%3E/g,%22%3Cb%3E%3Ci%3E$1%3C/i%3E%3C/b%3E%22).replace(/%3Cspan%20class=%22contentBold%20contentUnderline%22%3E(.+?)%3C\/span%3E/g,%22%3Cb%3E%3Cu%3E$1%3C/u%3E%3C/b%3E%22).replace(/%3Cspan%20class=%22contentItalic%20contentUnderline%22%3E(.+?)%3C\/span%3E/g,%22%3Ci%3E%3Cu%3E$1%3C/u%3E%3C/i%3E%22).replace(/%3Cspan%20class=%22contentBold%22%3E(.+?)%3C\/span%3E/g,%22%3Cb%3E$1%3C/b%3E%22).replace(/%3Cspan%20class=%22contentItalic%22%3E(.+?)%3C\/span%3E/g,%22%3Ci%3E$1%3C/i%3E%22).replace(/%3Cspan%20.+?%3E/g,%22%22).replace(/%3Cspan%20class=%22contentUnderline%22%3E(.+?)%3C\/span%3E/g,%22%3Cu%3E$1%3C/u%3E%22).replace(/%3Ca%20class=%22bullet%22.+?%3C\/a%3E/g,%22%22).replace(/%3Ca%20class=%22contentLink%22.+?%3E(.+?)%3C\/a%3E/g,%22$1%22).replace(/%3C\/span%3E/g,%22\n%22).replace(/%3Cdiv%20class=\%22(.+?)\%22%3E/g,%22\t$1\n%22).replace(/%3Cdiv%3E/g,%22%22).replace(/\n+/g,%22\n%22).replace(/&lt;/g,%22%3C%22).replace(/&gt;/g,%22%3E%22).replace(/&amp;/g,%22&%22);s=%22%22;b=0;line=p.split(%22\n%22);for(i=0;i%3Cline.length;i++)switch(c=line[i],!0){case%20/^\t.+?parent/.test(c):b=0;s=%22%22;break;case%20/^\tchildrenEnd/.test(c):b--;break;case%20/^\tchildren/.test(c):b++;break;case%20/^\t/.test(c):break;case%200%3E=b:break;default:1==b?t=c:s+=%22%3Ch%22+b+%22%3E%22+c+%22\n%22}x=s.split(%22\n%22);level=0;ptxt=[];outtxt='%3C!DOCTYPE%20html%3E%3Chtml%20lang=%22ja%22%3E%3Chead%3E%3Ctitle%3EToDo%3C/title%3E%3Cscript%20src=%22https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js%22%3E\x3c/script%3E\n%3Cscript%20src=%22https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js%22%3E\x3c/script%3E\n%3Cscript%20src=%22https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js%22%3E\x3c/script%3E';outtxt+='%3Cstyle%20type=%22text/css%22%3Ebody{-webkit-text-size-adjust:100%;}%3C/style%3E%3C/head%3E%3Cbody%3E%3Cdiv%20id=%22tasks%22%3E';for(i=0;i%3Cx.length-2;i+=1)h1=Number(x[i].substr(2,1)),h2=Number(x[i+1].substr(2,1)),%22%22!=h2?h1%3E=h2?x[i]=~x[i].indexOf(%22[del]%22)?%22%22:x[i].split(%22%3Ch%22+h1+%22%3E%22).join('%3Cdiv%3E%3Cinput%20type=%22checkbox%22%3E['+ptxt[h1-2]+%22]%22)+%22%3C/div%3E%22:(ptxt[h1-1]=x[i].split(%22%3Ch%22+h1+%22%3E%22).join(%22%22),x[i]=%22%22):x[i]=%22%22;x[x.length-2]=x[x.length-2].split(%22%3Ch%22+Number(x[x.length-2].substr(2,1))+%22%3E%22).join('%3Cdiv%3E%3Cinput%20type=%22checkbox%22%3E['+ptxt[Number(x[x.length-2].substr(2,1))-2]+%22]%22)+%22%3C/div%3E%22;for(i=0;i%3Cx.length-1;i+=1)outtxt+=x[i]+%22\n%22;outtxt+=%22%3C/div%3E%22;outtxt+=%22%3Cscript%3E$(function(){$('#tasks').sortable();});\x3c/script>";outtxt+='<script>!function(a){function%20f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var%20c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in%20document,a.support.touch){var%20e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var%20b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var%20b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var%20b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);\x3c/script>';outtxt+='<script>$(":checkbox").click(function()%20{if($(this).is(":checked")){$(this).closest("div").css("text-decoration","line-through");}else{$(this).closest("div").css("text-decoration","none");}});\x3c/script></body></html>';w=window.open();w.document.open();w.document.write('%3Chead%3E%3Cmeta%20name=%22viewport%22%20content=%22width=device-width%22%3E%3C/head%3E');w.document.write(outtxt);w.document.close();})();

※このページの内容は以上です。「サポート」歓迎しております。いただいたサポートはツールのメンテナンスや要望追加の費用や開発モチベーションに当てさせていただきます。

この続きをみるには

この続き:0文字

Workflowyでアウトラインの最下層のトピックをTodoリストにするbookmarklet

マロ。

100円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

3

マロ。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。