どうも！LSSです！！
突然のテキスト入力欄で失礼^^;
はてなブロガー向けに、「改段落削除ツール」を試しに作ってみました。
なお、HTML編集画面を開く必要があるため、PC専用となります。
用途
はてなブログでブログを書き始めた時に、PCから記事を書いていると、
「適当な位置で改行いれておいた方が読みやすいだろうな」
という配慮から、文の途中でもエンターキーで改行を入れる場合があるかと思います。
ところがその時、PCでみた時の画面幅にあわせて改行していると、スマホから見た場合に画面幅が違うものだから、ヘンなところで改行してしまう。これなら改行入れなきゃよかったー！ってなる場合があると思います^^;
すでに大量に書いた記事を、文章を見ながら手作業で修正していく…というのもなかなか大変なので、１記事ごとに一括修正できる物を作ってみました！
- 「</p>改行コード<p>」を削除します。
- ただし、</p>の前が「。」または「？」または「<p> 」の場合はスルー。
使い方
はてなブログの、修正したい記事の「HTML編集画面」を開きます。
そこに出てくるHTMLコードを全て選択し、クリップボードにコピーします。（「全て選択」は「CTRL＋A」、「コピー」は「CTRL+C」キーでもできます。）
次に、この記事の最初に出てくる入力欄に、コピーしたものを貼り付けます。
↑こんな感じですね。
で、その下にある「変換する」ボタンを押すと、２つめのテキスト入力欄に修正処理済のHTMLコードが入り、かつ選択状態になります。
そこでまたそれを「コピー」し、修正したい記事のHTML編集画面に貼り付ける事で、不要な改行（正確には改段落ですが）が除外されたものになります。
また「変換する」ボタンを押した時点で、さらにその下に修正済のHTMLを表示した場合のサンプルが出てきます。
またその間にあるスライダーで、表示幅を変えた場合の見え方も確認できます！
このツールのコード
一応、晒しておきますね。
<p><textarea id="t1" style="width: 100%;" rows="10"> </textarea></p>
<p><input id="btn" type="button" value="変換する" /></p>
<p><textarea id="t2" style="width: 100%;" rows="10"> </textarea></p>
<p><input id="smplr" style="width: 100%;" max="100" min="0" type="range" value="100" /></p>
<div id="smpl" style="background-color: #dddddd;"> </div>
<script>// <![CDATA[
btn.addEventListener('click',btnclk,false);
smplr.addEventListener('input',function(){smpl.style.width=smplr.value+'%';},false);
function btnclk(){
t2.value=t1.value.replace(/(?<!(。|？|<p> ))<\/p>\n<p>/g,'');
smpl.innerHTML='表示例<br/>'+t2.value;
t2.select();
}
// ]]></script>
.replace(/(?<!(。|？|<p> ))<\/p>\n<p>/g,'');
のあたりが特にわけわかめですが、これは「正規表現」と言われるもので、
「</p>改行コード<p>」を削除します。
ただし、</p>の前が「。」または「？」または「<p> 」の場合はスルー。
の条件を実現した物です。
開発動機
さじさん(id:conasaji)の今日投稿された記事、
を見て、ちょっと作ってみたくなりましたｗ
このツール、１記事あたりの作業量は減りますが、大量の記事を…となるとやはり大変かもですね^^;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
