新しいDraftPad用DarkRoomはリアルタイムで文字数が出ます

覚えたてのテクニックを組み込んでみました。

細かな修正ですけど。本文からDarkRoomに移るとき、DarkRoomから本文に戻るとき。これまで選択範囲をリセットしていたのですが、そのまま別アシストで使いたい場合もあるので、保持するように書き換...

DraftPadで文章を書くとき、カーソル移動を韋駄天に変えます。他のエディタ・アプリとは違い、指のスライドに応じてカーソルが動く距離が伸び縮みする。ただ、システムの性格上、キーボードの拡張エリアを消せないし、画面上部のタイトルバーも出たまま。気持ち的にはフルスクリーンで入力に徹したいのですが、そこはままならないもの。
キーボードの拡張エリアはアンドゥ/リドゥの履歴ボタンにしました。この機能はiPod touchで書くとき重宝していて、気に入ってます。次はタイトルバー。ここで何をするか。

DraftPad 1.6.2
分類: 仕事効率化,ユーティリティ
価格: 無料 (Manabu Ueno)

作ってみたスクリプトは以下の通り。登録リンクでDraftPadにインポートされます。

draftpad://self/web?source=<meta name=viewport content=initial-scale=1,maximum-scale=1><script>function main(x){s=%22<body style=margin:0;background:%22+x.bgcolor+%22;><textarea id=wine rows=999 style=\"border:0;width:100%25;background:%22+x.bgcolor+%22;color:%22+x.color+%22;font-size:%22+x.fontsize+%22;font-family:%22+x.font+%22;\" tabindex=2 onkeyup=dispTitle()>%22+x.TEXT.replace(/%26/g,%22%26amp;%22).replace(/>/g,%22%26gt;%22)+%22</textarea><input style=border:0;width:70;background:%22+x.bgcolor+%22; onFocus=document.execCommand(\"undo\") placeholder=取り消す tabindex=1><input style=border:0;width:70;background:%22+x.bgcolor+%22; onFocus=document.execCommand(\"redo\") placeholder=やり直す tabindex=3><scr%22+%22ipt>var p;mode=1;document.ontouchmove=touchMove;document.ontouchstart=touchStart;document.ongesturechange=function(){mode=0};function touchMove(e){t=e.touches[0].pageX;if(t-p>4){wine.setSelectionRange(wine.selectionStart+mode,wine.selectionEnd+1);p=t;}if(p-t>4){wine.setSelectionRange(wine.selectionStart-mode,wine.selectionEnd-1);p=t;}dispTitle();}function dispTitle(){s=(mode)? wine.selectionStart:\"[\"+wine.selectionStart+\" - \"+wine.selectionEnd+\"]\";draftpad.title(s+\" / \"+wine.value.length);}function touchStart(e){p=e.touches[0].pageX;mode=(wine.selectionStart==wine.selectionEnd);dispTitle();}</scr%22+%22ipt></body>%22;document.write(s);wine.selectionStart=x.loc;wine.selectionEnd=Number(x.loc)+Number(x.len);wine.focus();dispTitle();}location.href=%22draftpad:///webdelegate?load=main%26unload=draftpad.replace(wine.value,wine.selectionStart,wine.selectionEnd-wine.selectionStart)%22;</script>&TEXT=<@@>&loc=<#LOC>&len=<#LEN>&font=Hiragino Kaku Gothic ProN&color=lime&bgcolor=black&fontsize=22

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

タイトルバーに二つの数字が並びます。カーソルの位置と全体の文字数を示します。動かしているうちに意味が分かりそうだったので、あえて説明は付けませんでした。画面上を指でスライドすると、それに合わせカーソルが動き、タイトルバーの数字も変わります。これが、初めはスムーズなのですが、途中から表示が止まります。指を離せば位置表示するので、バグでもないようです。将来的にはマグネットコーティングが必要かもしれません。
それとは逆に、タップしてカーソルの位置を変更したとき、数字が変わらない問題あり。もう一度タップしたとき、変更は反映します。Javascriptの仕様のようなので今回は放置。

二本の指でスライドすると、範囲選択になります。このとき、タイトルバーには始点と終点の情報が出るようにしました。選択状態になれば、後は指一本で範囲の伸縮が出来ます。
こちらも、範囲以外の箇所をタップすると選択状態は解除になるのですが、それがタイトルバーに反映しません。もう一度タップすると変わる。変なんですよねえ。使っているselectionStartの性質なんだと思うけど。名称からして選択用だから、違うのがいいのかな。

以前実装した「ピンチインでフォントサイズを変更する機能」は、今回省きました。執筆中にフォントサイズを触ることはあまりない。反対に、範囲選択のとき誤動作になりやすく、無いほうがいいと判断しました。ころころと仕様を変更しますが、ご容赦ください。

(追記) 改良版、出ました。
DraftPad用エディタのDarkRoomをリニューアルしました