赤とグレーのコンビネーション。
【Textwell】ReLineのデザインもフラットしてみました
iOS7風を考えたけど、なんか違うかも。行編集アクションのReLine。前のデザインだとゴツゴツとしていたのでペラペラにしてみました。オマケで機能強化してます。相変わらず行儀悪いスクリプトですけど。ソ...
エディタは文字単位で編集するものですが、それだと木を見て森を見ず。森を見るのがこのReLineです。Vimの行編集をイメージ。行単位での削除や移動が出来ます。
Textwell 1.1.7
分類: 仕事効率化,ユーティリティ
価格: \300 (Sociomedia)
Textwell 1.1.7ところが、使っていると不満に思う。不自然に感じる部分がありました。LIFO(Last in First out)でスタックするんですが、これが視覚的に分かりにくい。「最後に入れたものが最初に取り出される」。このコンセプトに馴染むデザインを試行錯誤で探しています。
<style> body{ background:#eee; word-wrap:break-word; margin:0; } hr{ border:1px #fafafa solid; } table{ width:100%; table-layout:fixed; } td.num{ width:40px; color:white; background:#ff0033; vertical-align:top; text-align:center; } </style> <meta name=viewport content=initial-scale=1,user-scalable=no> <title>ReLine</title> <body id=wine></body> <script> last=0; view=1; stack=new Array(); list=new Array(); list=T.text.split("\n"); Disp(); len=T.text.length; wine.ontouchstart=switchView; T.closelets([{ title:"保存", fn:function(){ s=list.join("\n"); T("replaceRange",{ text:s, replacingRange:{len:len}, selectingRange:{loc:last} })} }]) function Disp(){ s="<hr>"; for(i=0;i<list.length;i++){ content=(view)?list[i]:list[i].replace(/</g,"<"); s+="<table><td class=num onClick=Minus("+i+")>"+("000"+(i+1)).slice(-4)+"</td><td onClick=Plus("+i+")>"+content+"</td></table><hr>\n"; } wine.innerHTML=s; t=stack[stack.length-1] || "ReLine"; T.title(t); } function Minus(x){ s=list[x]; if(s) stack.push(s); list.splice(x,1); Count(x) } function Plus(x){ s=(stack.length)? stack.pop():""; list.splice(x,0,s); Count(x) } function Count(x){ Disp() last=0; for(i=0;i<x;i++)last+=list[i].length+1; } function switchView(e){ if(e.touches.length>1){ view=1-view; Disp(); } } </script>
登録リンクはこちら→ http://tinyurl.com/nyj9ynx
左端の赤帯をタップすると行削除。消えた行はスタックされるのですが、ただ行を消しただけに見えてしまう。それで、スタックをタイトルバーに載せることにしました。
タイトルバーの文字列は、本文側をタップすると排出します。次に何が貼りつくか、少し把握しやすい。ペーストごとに、一つ前のスタックがセットされます。
スタックに何も無い場合は空行挿入。それは悪くない。反対に、空行削除の場合はスタック。考えてみると、こちらは意味がない。不要だから削るのであって、それを再利用することはない。無視していいんじゃないか。今回そこあたりに落ち着きました。
Textwellで段落の順序を入れ替えるアクション Reorder
公式野良アクションです。Textwellの作者ueno氏の新作が来ました。実態はBubblesですね。段落をカード化して並べ替える。DraftPadのときもこれにノックダウンされました。エディタの範疇...
行編集は公式アクションのReorderが秀逸。段落を塊のまま前後に入れ替えることができます。ただし、ソースコードで表示。ReLineのほうはプレビューが基本になってます。ブログではこちらが使いやすいと思うし、その方向で差別化を図るようにしていきたい。