Textwellを上下の二画面に割って編集する Twin

マネしてみました。

画面数と作業効率は比例する。Textwellを2画面化！ DualWindow - #ChiroruLab
二つのアプリを使うでも、二つのファイルを使うでもない。もう一つの選択肢。画面の分割。独立した二つの画面、そして、いくつかの視覚効果により大きく作業効率は向上し、ストレスは小さくなります。(たぶん。)ど...

Textwellのアクションにはデジャヴがある。chiroru氏のDualWindowも何だか懐かしく感じます。知ってる人しか知らないと思いますが、MS-DOSのVz-Editorにこのモードがありました。左右に編集画面が表示されるモード。二つの文章を比較しながら編集できる。
そしてもう一つ、Vzには別のモードがあったんです。それが上下に割れる奴。その上下二画面編集モードをTextwellでも表現してみました。実用的になるといいんだけどな。

Textwell 1.1.5
分類: 仕事効率化,ユーティリティ
価格: \300 (Sociomedia)

下記のアクションになります。chiroruさんのに比べると、だいぶ端折ってますが、そこあたりはお好きに拡張してください。左右に爆走するスライドカーソルも付けてます。

<meta name=viewport content=initial-scale=1,maximum-scale=1>
<style>
  textarea {
   color: black;
   font-size: 20px;
   font-weight: bold;
   font-family: Hiragino Kaku Gothic ProN;
   width: 100%; height: 100%; border: 0;
  }
</style>
<title>Twin</title>
<body style=margin:0;>
   <textarea id=side_A style=background:#eeeeee; onFocus=dispTitle()></textarea>
   <hr>
   <textarea id=side_B style=background:#ffffff; onFocus=dispTitle()></textarea>

<script>
   var p, mode, nowEdit,win;

   s = T.text.split("\n\n:dwin\n");
   if(s[1] == null) s[1] = "";
   side_A.value = s[0];
   side_B.value = s[1];
   document.ontouchmove = touchMove;
   document.ontouchstart = touchStart;
 
   function dispTitle(){
     nowEdit = document.activeElement.id;
     T.title("Twin: "+nowEdit);
     win = document.getElementById(nowEdit);
   }
   
   function touchMove(e){
    t = e.touches[0].pageX;
    if(t-p>6){
     win.setSelectionRange(win.selectionStart+mode, win.selectionEnd+1);
     p = t;
    }
    if(p-t>6){
     win.setSelectionRange(win.selectionStart-mode, win.selectionEnd-1);
     p = t;
    }
   }

   function touchStart(e){
    p = e.touches[0].pageX;
    mode = (win.selectionStart == win.selectionEnd);
   }

   T.closelets([
    {title: "side_Aのみ保存",
     fn: function(){ T("replace",{text: side_A.value}) }
    },
    {title: "side_Bのみ保存",
     fn: function(){ T("replace",{text: side_B.value}) }
    },
    {title: "両sideとも保存",
     fn: function(){
      var textAll = side_A.value+"\n\n:dwin\n"+side_B.value;
      T("replace",{text: textAll})}
    }
    ]);
</script>
</body>

登録リンクはこちら→ http://tinyurl.com/n6qxar8

一見すると一つしかないように見えますが、作業画面は二つ。キーボードの左上にある「＜＞」を使って切り替えます。タップすると白紙のページが現れ、タイトルバーに「side_B」と出ます。こちらが新しい編集画面。「＜＞」を使って、二つの画面を行き来します。

保存パターンには「side_Aのみ」「side_Bのみ」「両side」の３通りを用意しました。「side_Aのみ」を作ったのは、side_B側を作業領域にし、side_Aを推敲するケースがありそうに思ったからです。その場合、普段はコピペをside_Bに残しつつ、完成形になったらside_Aだけトリミングするんじゃないかな、と。

セパレータはDualWindowに合わせ「:dwin」にしました。同じテキストをDualWindowでもTwinでも扱え、切り口が増やせます。また、一本の文章を扱うときでも文中に「:dwin」を挟めば、その前後で二つに分割することができます。長文を扱うテクニックですね。

(追記)
あ、うっかりした。インポート用のアクションのソースが「font-weight:normal;」になってます。ここは「font-weight:bold;」のほうがフォントが太字になって読みやすいかも。お好みでどうぞ。