一行目から自動的にタイトルを設定する

textLineは、情報カードを意識したので、タイトルと本文が分かれています。メリット、デメリットはあるかと思います。

とりあえず、入力を簡易に行えるように、メモの一行目を自動的にタイトルにするように処理しました。ただ、一行しかないなら、タイトルを空白として、その一行を本文とします。

(こういう感じになります)

なぜこうなっているのかというと、二つの不満がありました。

まず、よくあるメモ送信ツールなどで単行のメモを作成するとこうなってしまいます。

一行目をタイトルとして取得し、本文にもそれが残っています。やや冗長です。本文にボリュームがあるならこれでも構いませんが、一行メモだと若干気になります。

もう一つの不満がアウトライナーで、単行メモと複数行メモを扱うとこのようになります。

「本文」が位置する階層がズレてしまうのです。

一行しかないメモは、それ自身がタイトルであるとも言えますが、むしろ個人的な感覚では本文っぽいのです。すると、上記のアウトラインでは本文が違った階層に並んでいることになります。かといって、階層を揃えるためだけにわざわざ空白の項目を上位に置くのも不自然ですし、そもそも手間です。

よって、textLineではそれを揃えられるようにしてみました。こうすると、視線の動きは縦に真っ直ぐになりますし、情報の重複もなくなります。

JavaScriptのコードは以下のように書きました。

function getTitle(html){
    var t  = html.split(/<br>/);

    if (t.length > 1){
        title = t[0].replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'')
	t.shift(); 
    }else{
	title = ""
    }
	
    body = t.join("<br>");
    return {"title":title,"body":body};
}

htmlを受け取って、brで分割し、もし配列が二個以上の要素を持つなら、一行目を(htmlタグを取った上で)タイトルに設定し、先頭行を削除する。

もい配列が一個しか要素を持たないならば、タイトルは空白にしておく。

で、配列を<br>で連結して本文とし、タイトルと一緒にした連想配列で返すってな感じ。

で、このやり方はFirefoxで試したときはうまくいったんですが、Chromeで試してみたところ不具合が。次回はその修正について。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

ありがとうございます!またのご贔屓を。
3

倉下忠憲

ブラウザで動く知的生産ツールを自作するよ

JavaScriptとかjQueryを使って、Webブラウザで動作する知的生産ツールを作っていきます。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。