カシンです。これは、アタシ(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 片になってしまっています。
編集機能がそういう事態に対応していれば、大きな問題はないはずですが。アメブロアプリでは、そこの対応がちぐはぐで。「開始タグ、終了タグがない場合」に、動作がおかしくなります。
具体的には、こういうタグなしの文字列の途中の文字を削除しようとすると。削除しようとした文字じゃなくて、その行末の文字が削除されます。
文字で説明するより、見た方が早いと思うので、実際の挙動を録画した動画を載せます。撮影用に、文字サイズをうんと大きくしてます。行の途中の文字を消そうとすると、なぜか行末の文字が消える例です。
つづく
* * *
お読みくださりありがとうございました。