iPhone/iPadのWorkFlowyを魔改造するMarkFlowy(2015年末版)
トピック移動の安定化
WorkFlowyのWeb版は使いにくい。トピックの移動が変になります。思ったところに落とせない。理由を探ってみると、トピックを長押ししたとき、別のトピックが選択状態になるからだと気付きました。ドラッグで長押しするから、それを単語の選択だとSafariが勘違い、選択箇所までスクロールを引っ張ります。ドラッグと葛藤を起こすらしい。Textwellでも起きるので、iOS9のWebViewのせいでしょうね。新しい Xcodeでコンパイルされたアプリは全滅と思っていい。すると解決策は、独自WebKitを使うブラウザか、iOS8時代のままのアプリを使うことになります。その線で見繕ってみました。
Shiori
Shiori Webブラウザ 1.3.2ブックマークレットの呼びやすさを優先事項と考え、ShioriをWorkFlowy専用とします。URLアドレスが常時表示されるため執筆面積が減りますが、まあ、許容範囲でしょう。トピックのドラッグも問題なく行えます。左下に出る「＋」がブックマークレット専用メニューです。ここにスクリプトを貯めておけば、いろんな機能拡張が可能になります。
Shioriの良さは、ブックマークレットのインストールが出来ることです。たとえば、WorkFlowyを開くブックマークレットは下記リンクになります。
登録リンクはこちら→ http://tinyurl.com/z8dwb8b
MarkFlowy
様々なエディタを触っていると妄想が弾け出す。「Markdownが使えて、行単位で編集できるエディタは無いかなあ。スライドカーソルで、しかもスクリプトで拡張できるの」。ありそうでなかなか見つからない。個...
スライドカーソルが使えるMarkFlowyは下記スクリプトになります。Safariにも使えます。ブックマークレットとして登録してください。
javascript:(function(){style="#header{background:#000;} #documentView{background:#200;}.page{color:black;background:white;border-radius:5px;}.contentTag{color:orange !important;}.contentUnderline{border-bottom: 2px #00f solid;text-decoration:none;}.contentBold{border-bottom:2px #f00 solid;}.contentItalic{background-color:#bf9;text-style:normal;}.project.selected >.children>div>.name .content{font-weight: bold !important;}.bullet{background-image:none;}.notes>.content{color:blue !important;} .parent>.name>.content{color:darkred;} .highlighted>.highlight{background:white;}.moving>.highlight{background:gray;}.corner,.edge{display:none;}";document.body.appendChild(document.createElement("style")).innerHTML=style;e=document.createElement("script");e.src="https://raw.github.com/chjj/marked/master/lib/marked.js";e.onload=function(){marked.setOptions({breaks:true, langPrefix:""});};document.body.appendChild(e);p=0;document.ontouchstart=Start;document.ontouchmove=Move;logo.ontouchstart=Search;function Search(){s=prompt("All to search:");if(!s) s="last-changed:1d";location="https://workflowy.com/#/?q="+encodeURIComponent(s);}function Start(e){p=e.touches[0].pageX;}function Move(e){f=e.touches.length;a=document.getSelection();if(a.rangeCount){x=e.touches[0].pageX;if(x-p>4){a.modify(((f>1)? "extend":"move"),"right","character");p=x;}if(p-x>4){a.modify(((f>1)? "extend":"move"),"left","character");p=x;}}else{if(f>1){MarkdownStyle="body{font-family:Hiragino Mincho ProN;word-wrap:break-word;}h1,h2,h3{font-family:Hiragino Sans;padding:10px 0 0;border-bottom:1px #eee solid;} blockquote{font-family:Hiragino Sans;font-size:small;margin:0px;border-left:20px #fff groove;} table{border-left:1px gray solid;border-top:1px gray solid;border-spacing:0;} th{background:ivory;border-right:1px gray solid;border-bottom:1px gray solid;} td{border-right:1px gray solid;border-bottom:1px gray solid;} pre{background:#efe;padding:10px} u{border-bottom: 2px #00f solid;text-decoration:none;} strong{border-bottom:2px #f00 solid;} em{background-color:#bf9;} img{max-width:450px;}";p=pageContainer.innerHTML;p=p.replace(/<span class=\"contentUnderline(.+?)>(.+?)<\/span>/g,"<u>$2</u>");p=p.replace(/<span class=\"contentBold(.+?)>(.+?)<\/span>/g,"**$2**");p=p.replace(/<span class=\"contentItalic(.+?)>(.+?)<\/span>/g,"_$2_");p=p.replace(/<span class=\"contentTagText(.+?)>(.+?)<\/span>/g,"$2");p=p.replace(/<span class=\"contentTag(.+?)>(.+?)<\/span>/g,"$2");p=p.replace(/<a class=\"contentLink(.+?)>(.+?)<\/a>/g,"$2");p=p.replace(/<\/div>/g,"").replace(/<span .+?>/g,"").replace(/<\/span>/g,"\n");p=p.replace(/<div class=\"(.+?)\">/g,"\t$1\n").replace(/<div>/g,"").replace(/\n+/g,"\n");p=p.replace(/</g,"<").replace(/>/g,">").replace(/&/g,"&");s="";b=n=0;line=p.split("\n");for(i=0;i<line.length;i++){c=line[i];switch(true){case /^\t(.+?)selected/.test(c):s="";b=1;n=0;break;case /^\tnotes/.test(c):n=1;break;case /^\tchildrenEnd/.test(c):b--;break;case /^\tchildren/.test(c):b++;n=0;break;case /^\t/.test(c):break;case b<1:break;default: if(n){s+="> ";}else{switch(b){case 1:s+="## ";break;case 2:s+="\n### ";break;case 3:s+="\n";break;default:for(j=4;j<b;j++)s+=" ";s+="* ";}}s+=c+"\n";}}s=s.replace(/\n([#\*])(.+?)\n([^\s\*])/g,"\n$1$2\n\n$3");s=marked(s);location.href="data:text/html;charset=UTF-8,<meta name=viewport content=initial-scale=1><style>"+MarkdownStyle+"</style>"+s;}}}})();
登録リンクはこちら→ http://tinyurl.com/prk98dv
使い方
WorkFlowyを起動してから走らせてください。指一本でカーソルが移動できて爽快です。指二本のスライドは、編集モードでは範囲選択、それ以外ではMarkdownプレビューになります。さらに左上のロゴ「workflowy」をタップすると全文検索になります。このとき「キャンセル」を選ぶと最近変更した箇所をピックアップします。また盛りすぎました。
Shioriリンク作成アクション
Textwell 1.5.3ブックマークレット登録リンクはTextwellで作りました。一行目に名前、二行目にスクリプトを置くと、tinyurl.comで短縮URLに変換します。
Import Textwell ActionTinyShiori
まとめ
2015年を振り返ると、MarkdownとWorkFlowyでした。この二つが絡み合うプロセスを追いかけたと言えます。どちらも「テキストの構造とは何か」を突きつけてきました。このテーマは一見シンプルですが、今まで意識せずにいたかもしれません。この文章も、WorkFlowyで配列を入れ替え、行を削除しています。書いた順ではありません。人類の歴史のなかで、テキストは「手書き」でした。「書くときのフィーリング」が構造を与え、「書き手の気持ちを述べよ」と問うことが可能でした。ところがデジタル化したとき、プログラミングの作法がライティングに持ち込まれた。「書くときの気持ち」ではないものが介在し、それが新しく「構造」を生み出すようになったのです。それは何か。
もともと「ワープロ」は「手書き」をモデルとし、その延長を目指してきた。読みやすいフォントで印字するためのものでした。でも、MarkdownやWorkFlowyは違います。文をモジュール化し、再利用できるスクリプトとして扱う。あるのはプログラミングの発想です。デジタルツールに潜在するカラクリを暴露している。
そんなわけで、時代の足音がします。みなさん、良いお年を。
