カシンです。これは、アタシ(50代・男)が気がついたことを書くブログです。


今週は、アメブロアプリの不具合と、アタシの回避策について書いています。たいへん技術的な内容となっています。


前回は、アメブロアプリが期待する HTML 形式についてでした。


おおざっぱに書くと。HTML では、文書は「要素」の集まりで。要素は、先頭に「開始タグ」、末尾に終了タグ、その間に「内容」があります。


「段落」は p要素で、「<p>内容</p>」という形式で。「箇条書きの項目」なら li要素で「<li>内容</li>」といった形式です。


「内容」という段落を「内」と「要」の 2段落にわけるなら、間に「終了タグ」「開始タグ」を挿入して、「<p></p><p></p>」とします。


これで「<p></p>」と「<p></p>」の 2つの段落になりました。


要素を 2つに分けるには。分けたい要素に応じて、適切なタグを挿入する必要があります。


タグは、文書の装飾にも使われます。そのため、一般にタグは入れ子になっていて、適切なタグを補う処理は、なかなかややこしいです。


例えば、段落の中の太字の部分の途中で段落分けをするなら。太字を終了、段落を終了、段落を開始、太字を開始、みたいにタグを挿入する必要があります。

* * *


Android アメブロアプリの記事編集機能では、通常のキーボード入力での段落分けは、正しく機能するように作られてます。


一方で、「貼り付け」で「改行」を挿入しようとすると。キーボード入力と同様な効果を期待したくなりますが、そうはなってません。


何か技術的理由があるのでしょうか。今年 4月頃から、アメブロアプリでは、貼り付ける文字列中の「改行文字」が、一律に「br 要素」<br> に置換されるようになりました。


この br 要素、というのは、他の要素の内容に「改行」を入れるための裏技みたいなものです。


上では段落を 2つに分けた例「<p></p><p></p>」を紹介しましたが。これを br 要素を使うと、「<p><br></p>」。1つの段落なんだけど、「内」と「容」の間に改行がある、と書けて。表示したときの見た目はだいたい同じです。


これは、違う要素や入れ子になってる場合でも、いつでも <br> を挿入するだけなので。改行挿入時の処理は簡単になります。


その代わり、要素の編集時の処理は、要素の途中に改行がある場合もあるのを考慮しないといけなくて、そちらではややこしくなります。

* * *


アメブロアプリに新規記事を作って、空 (から)の記事に

第1段落。


第2段落。

という、改行文字が 2 つ入った文字列をコピペすると。


記事の HTML は、この記事の後の方に載せる動画にあるように、

「第1段落。<br><br>第2段落。」

になります。1つ目の <br> は、第1段落末の改行、2つ目は、続く空行の改行です。


これは、貼り付けた文字列を「要素に変換」することを考えずに、単純に挿入してしまった結果、「開始タグ」「終了タグ」のない HTML 片になってしまっています。


編集機能がそういう事態に対応していれば、大きな問題はないはずですが。アメブロアプリでは、そこの対応がちぐはぐで。「開始タグ、終了タグがない場合」に、動作がおかしくなります。


具体的には、こういうタグなしの文字列の途中の文字を削除しようとすると。削除しようとした文字じゃなくて、その行末の文字が削除されます。


文字で説明するより、見た方が早いと思うので、実際の挙動を録画した動画を載せます。撮影用に、文字サイズをうんと大きくしてます。行の途中の文字を消そうとすると、なぜか行末の文字が消える例です。



つづく

* * *


お読みくださりありがとうございました。