Textwellの移動アクションJumperに検索機能を付けてみました

飛びます飛びます。


Textwellで目次を表示しそこまで飛べるアクション Jumper
モバイルで長文を書くための必需品。テキストから章立てを抜き出し、その場所まで移動するアクション。長い文章を書いていると全体の把握がしづらく、別の箇所を修正しようとするときスクロールがもどかしい。パソコ...
長文執筆で段落移動をするアクション。実はそんなに出番がない。ブログの下書きくらいならスクロールで済むからです。もっと長い文章を書くときには役立つけど、そういう機会もそうあるでなし。そんなわけで、別の用途も見つけてあげようと思いました。

<meta name=viewport content=initial-scale=1,user-scalable=no>
<style>
  body{
    background:white;
    word-wrap:break-word;
    margin:0;
  }
  hr{
    border:1px #f4f4f4 solid;
  }
  table{
    width:100%;
    table-layout:fixed;
  }
  td.num{
    width:32px;
    color:white;
    background:blue;
    vertical-align:top;
    text-align:center;
  }
  td.end{
    width:32px;
    color:white;
    background:red;
    vertical-align:top;
    text-align:center;
  }
</style>
<body id=wine>
<script>
word="";
list=new Array();
text=T.text;
list=text.split("\n");
Disp();
document.ontouchstart=Search;

function Disp(){
  mode=(word)? 0:1;
  s="<hr>";
  for(i=0;i<list.length;i++){
    t=list[i];
    if(t){
      if(mode || (word && t.match(word))){
        content=t.replace(/</g,"&lt;").substr(0,160)+((t.length<160)? "":"(...)");
        s+="<table><td class=num onClick=Jump("+i+")>"+("000"+(i+1)).slice(-4)+"</td><td onClick=Jump("+i+")> "+content+"</td></table><hr>\n";
        mode=0;
      }
    }else{
      mode=(word)? 0:1;
    }
  }
  s+="<table><td class=end onClick=Jump("+i+")>"+("000"+i).slice(-4)+"</td><td onClick=Jump("+i+")> (end)</td></table><hr>\n";
  wine.innerHTML=s;
  s=(word)? "[ "+word+" ]":"Jumper";
  T.title(s);
}

function Jump(x){
  last=0;
  for(i=0;i<x;i++) last+=list[i].length+1;
    T("replaceRange",{
      text:text,
      replacingRange:{len:text.length},
      selectingRange:{loc:last}
   })
}

function Search(e){
  if(e.touches.length>1){
    word=prompt("キーワードは？",word);
    Disp();
  }
}
</script>
</body>

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



普通に起動すると、空行の次に来る段落を一覧表示します。いずれかの段落をタップすればそこにカーソルが移動して本文に戻る。これが基本機能です。



で、二本指で画面をスワイプするとダイアログボックスが出るようにしました。ここに検索したいキーワードを書き込み「改行」を押すと・・・。



その単語が含まれる行をリストアップする。タップすればカーソル移動。


実はWebページのソースからidを調べる目的で作ったのですが、それだとあまりに場面が限られている。そこでJumperに統合してみました。汎用性がアップしたんじゃないかな。DOSで使っていた grep をイメージしながら、少し現代風に翻案した感触です。・・・あ、じゃあ次は正規表現に対応させればそれっぽくなるんだ。いいかも。