MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
https://forums.mozillazine.jp/viewtopic.php?f=2&t=17056		 ページ 1 ／ 2
作成者:  呑兵衛あな [ 2018年5月11日(金) 17:15 ]
記事の件名:  HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
素人で恐縮ですが、報告です。
私は過去記事「Firefoxのバージョン表示の(x64 ja)が(x64 en US)に変わってしまう」を質問させていただいた者です。
viewtopic.php?f=2&t=17021
現在、「Windows 10 April 2018 Update」v1803　OSビルドBuild 17134.48に、Firefox v60.0(64ﾋﾞｯﾄ)の環境です。

ローカルな話題で恐縮ですが、私はlivedoorブログをレンタルして記事を書いているのですが、
Firefox v60.0(64ﾋﾞｯﾄ)になったら、v59.0.2迄はHTML文で『123<br />』と記述されていたのが『<div>123</div><br />』と記述されるようになってしまいました。
なお、Chrome(v66.0.3359.139 64 ビット)やMicrosoft Edge、IE 11は、以前も現在も『123<br />』と記述されます。

前文のとおり、私は「Firefoxのバージョン表示の(x64 ja)が(x64 en US)に変わってしまう」という問題を抱えているため、念の為、
自動アップデートされたFirefox v60.0(x64 en US)を完全にアンインストールの上、再インストールしてみました。これにより現在は(x64 ja)の表示になっています。
しかし、『<div>123</div><br />』と記述される件は解消できませんでした。
細かい話には理解が及びませんが、今後は『<div>123</div><br />』と記述されるのがFirefoxのスタンダードになるのか(?)を知りたいと考え、報告いたします。
作成者:  EarlgreyTea [ 2018年5月11日(金) 22:22 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
呑兵衛あな さんが書きました:
ローカルな話題で恐縮ですが、私はlivedoorブログをレンタルして記事を書いているのですが、
Firefox v60.0(64ﾋﾞｯﾄ)になったら、v59.0.2迄はHTML文で『123<br />』と記述されていたのが『<div>123</div><br />』と記述されるようになってしまいました。
なお、Chrome(v66.0.3359.139 64 ビット)やMicrosoft Edge、IE 11は、以前も現在も『123<br />』と記述されます。

私は livedoorブログを利用したことがありませんので状況がよくわかりません。
ブログの編集画面を見たことがない人でもわかるように、具体的かつ正確にご説明をお願いいたします。

以下、不明点をお尋ねしますのでお答いただけますでしょうか。

「HTML文で『～』と記述」の部分の意味を掴みかねております。

livedoorブログの説明ページを見ますと、ブログ投稿の際の編集画面で、
引用:
見たままに文字装飾や画像貼り付けができるリッチエディタや
HTMLを直接編集できるシンプルエディタを用意。
とあります。

添付ファイル:
livedoorブログエディタ.jpg
livedoorブログエディタ.jpg [ 124.73 KiB | 表示数: 82237 回 ]

  • 質問1：どちらのエディタを使って編集された場合の話でしょうか？
  • 質問2：「記述」の意味するところは、呑兵衛あなさんが『』内のHTMLを入力したということでしょうか？　違いましたら実際に入力したものを教えてください。
  • 質問3：「記述」の意味するところは、ブラウザを使ってブログ編集を行った結果、出来上がったブログ記事のHTMLソースを表示させたら『』内のようになっていたということでしょうか？
  • 質問4：質問3の意味だったとした場合、各ブラウザで編集した結果を見ることはできますか？

ひとまず、livedoorブログに問い合わせをしていただいて、ブラウザの問題なのかの切り分けをしていただいた方がいいのかなと思います。
問い合わせは以下からできるようです。

■質問や要望
livedoor Blogの公式Twitter： https://twitter.com/livedoorblog

■問題報告フォーム
https://contact-cc.line.me/livedoor/
作成者:  Ryo [ 2018年5月12日(土) 07:59 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
これは､以下の変更が関与する件でしょうか?

Firefox 60 for developers - Mozilla | MDN
引用:
HTML

designMode および contenteditable の状況で、ブロックレベルの編集ホストの子であるインライン要素またはテキストノードの内部にキャレットがあるときに Enter キーを押下すると、<div> 要素を挿入するようになりました。以前は、<br> 要素を挿入していました。アプリで以前の動作を望む場合は、document.execCommand() で実現できます。詳しくは マークアップ生成の違い をご覧ください (バグ 1430551)


的外れでしたらスイマセン｡
作成者:  呑兵衛あな [ 2018年5月12日(土) 09:13 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
EarlgreyTea様、Moderator様、レスいただきありがとうございます。

EarlgreyTeaのおっしゃるように具体的に書きたいと思います。
しかし、いかんせん私はこのフォーラムでの画像の張り方などがちんぷんかんぷんです。
また、本日午前中は通院のため、この後の書き込みが遅れてしまいますことを申し上げます。
明日になるかも知れませんが、ご容赦いただけますようにお願いします。
作成者:  呑兵衛あな [ 2018年5月12日(土) 11:33 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
Ryo様。名前を間違えてすみませんでした。
ちなみに、Ryo様の言われるレベルは私には理解が及びません。

EarlgreyTea様の質問にお答えします。
>livedoorブログの説明ページを見ますと、ブログ投稿の際の編集画面で．．．

ついては仰せの通りです。
livedoorブログが提供するWebオーサリングツールを用いた場合に関する事です。livedoorブログでは「シンプルエディタ」と称しており、『改行を反映する…エディタ内での改行を<br />の改行タグとして反映させるため、改行のたびにタグを打つ必要がなくなります。』と説明されています。
livedoorブログでは「シンプルエディタ」と「HTMLエディタ」と称する物が提供されており、何れのエディターを使うかは同じ画面を切り替える事でユーザーが選択できます。
本質問は、「シンプルエディタ」を用いて
123

と記述し、それを「HTMLエディタ」で見た場合、v59.0.2迄は(HTML文で)『123<br />』と記述されていたのが『<div>123</div><br />』と記述されるようになったという事を述べたつもりです。
ということでEarlgreyTea様の逐次の質問に答えたつもりなのですが．．．返事になっていないかもしれません。
いずれにしても
>livedoorブログに問い合わせをしていただいて、ブラウザの問題なのかの切り分けをしていただいた方がいいのかなと思います。
そのようにいたす所存です。お騒がせしました。
作成者:  EarlgreyTea [ 2018年5月12日(土) 13:23 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
Ryo さんが書きました:
これは､以下の変更が関与する件でしょうか?


Firefox 60 for developers - Mozilla | MDN
アドバイスありがとうございます。まさしくその件でしょう。

呑兵衛あな さんが書きました:
本質問は、「シンプルエディタ」を用いて
123


と記述し、それを「HTMLエディタ」で見た場合、
ご返答ありがとうございます。

エディタ内に「123」と入力してEnterキーを押したわけですね。

Ryo さんが提示してくれた件は、WEB上でテキスト編集してる際にEnterキーを押した場合、以前は<br>要素を挿入していたけども、Firefox 60から<div>要素を挿入する仕様になったということです。
実際にどういうHTMLになるかは、本件の場合は livedoorブログのエディタの仕様しだい（この仕様についてはlivedoorブログにお問い合わせください）ということになります。

その結果が
呑兵衛あな さんが書きました:
『123<br />』と記述されていたのが『<div>123</div><br />』と記述されるようになった
ということなのでしょう。

おそらくエディタ側でブラウザ種類を判定して処理分けしていて、<br>要素を挿入して改行するようにしているのでしょう。Firefox側で行を<div>で括り、Firefoxだから<br>入ってるはずだけど入ってなかったからエディタは<br>を入れた…そんなところだろうと推測します。

ちなみに、
マークアップ生成の違い - コンテンツを編集可能にする - HTML | MDN
引用:
幸い、最新のブラウザーではこれらが多少統一されています。Firefox 55 では Chrome、最新の Opera、Edge、Safari に合わせて、<div> 要素で行をくくるように更新しました。

注記: Internet Explorer はもはや開発されておらず、<div> ではなく <p> 要素を使用します。
でありますので、エディタの方でブラウザ種類で処理を変えているだろうということがわかります。
作成者:  呑兵衛あな [ 2018年5月12日(土) 16:24 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
EarlgreyTeaさん
色々と教えていただき、本件は判りました。
しかし、一点だけ


1.本件については、まだlivedoorブログに質問は行っていません。
質問してもブラウザのせいとかでを色々たらい回しされますので、殆どあきらめています。
報告はしますが、回答を期待するものではありません。


2.「マークアップ生成の違い - コンテンツを編集可能にする - HTML | MDN」の記述は先ほど読みました。
それによれば、『Firefox 55が他のブラウザに合わせて、<div> 要素で行をくくるように更新』とのことですが、少なくとも本件を質問した私の環境ではそうではありません。
本件を報告した当初の記事にも書きました通り『Chrome(v66.0.3359.139 64 ビット)やMicrosoft Edge、IE 11は、以前も現在も『123<br />』と記述されます。』ということです。
また『Firefox 59.0.2迄は『<br />[b]要素で行をくくられていた』のが、[/b]Firefox 60.0になってから『[b]<div> 要素で行をくくる』ようになった、ということです。[/b]


ちなみに
>注記: Internet Explorer はもはや開発されておらず、<div> ではなく <p> 要素を使用します。
とのことですが、「はてなプログ」にもlivedoorブログと類似した機能が有りますが、それでは[b]Chrome(v66.0.3359.139 64 ビット)やMicrosoft Edge、IE 11、[/b]Firefox 60.0共に <p> [b]要素で行がくくられます。[/b]<div>要素ではありません。


以上、(1)と(2)を併せて考えますと、livedoorブログに本件を報告しても、解消する見込みは無いだろうと読んでいます。
また、私の環境でのみ発生しているとも考えられますので、本件は報告ということで決了したいと思います。
作成者:  呑兵衛あな [ 2018年5月12日(土) 17:11 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
先の書き込みにて「本件は報告ということで決了したいと思います。」と申しましたが、以下の記事を参考にして念のためFirefoxのバージョンダウンを行ってみました。
以前のバージョンの Firefox をインストールするには | Firefox ヘルプ

これにより現在、Firefox 64bit 版: Firefox 58.0.3 (日本語) にしました。
結果、本記事で報告報告した『123<br />』が『<div>123</div><br />』と記述されるようになった不具合は解消されました。
また、Firefoxのバージョンダウンは単純にDLLして上書きしただけですが、別スレの「Firefoxのバージョン表示の(x64 ja)が(x64 en US)に変わってしまう」件が解消され、(x64 ja)となりました。

以上のことから、「マークアップ生成の違い - コンテンツを編集可能にする - HTML | MDN」にて『<div> 要素で行をくくるように更新しました。』と記載された事は、少なくとも私の環境には当てはまりません。
作成者:  呑兵衛あな [ 2018年5月12日(土) 17:15 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
先の投稿で誤記入がありました。

>これにより現在、Firefox 64bit 版: Firefox 58.0.3 (日本語) にしました。
は、正しくは
Firefox 64bit 版: Firefox 59.0.3 (日本語)
です、
作成者:  EarlgreyTea [ 2018年5月12日(土) 18:20 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
一部、誤解やご理解いただけていない部分があるようです。

呑兵衛あな さんが書きました:
2.「マークアップ生成の違い - コンテンツを編集可能にする - HTML | MDN」の記述は先ほど読みました。

それによれば、『Firefox 55が他のブラウザに合わせて、<div> 要素で行をくくるように更新』とのことですが、少なくとも本件を質問した私の環境ではそうではありません。

１．
「マークアップ生成の違い」から引用した説明にFirefox 55と書かれていたのは開発版なので気にしないでください。
実際に通常版に仕様変更が反映されたのはFirefox 60になります。
＝＞ リッチテキストエディターの改行時の挙動が変更され、<br> の代わりに <div> が生成されます | Firefox サイト互換性情報

２．
引用:
おそらくエディタ側でブラウザ種類を判定して処理分けしていて、<br>要素を挿入して改行するようにしているのでしょう。Firefox側で行を<div>で括り、Firefoxだから<br>入ってるはずだけど入ってなかったからエディタは<br>を入れた
という私の推測について、ご理解いただけていないようです。

ブログのエディタ側でブラウザの種類によって処理を分けて、同じ挙動になるようにケアしているのではないかという推測です。
このことは、Firefoxをアップデートする前は、各主要ブラウザの仕様が異なるにもかかわらず同じ挙動だった、ということが根拠になります。
つまり、エディタはFirefoxなら改行で<br>を入れてくることを期待して、それ用の処理をしているのではないかということです。
しかし、Firefoxの仕様が変わって<div>になったが、エディタ側の処理が同じだったらどうなるか？

その結果が、
コード:
<div>123</div><br />
なのではないかと思っています。

呑兵衛あな さんが書きました:
以上、(1)と(2)を併せて考えますと、livedoorブログに本件を報告しても、解消する見込みは無いだろうと読んでいます。

また、私の環境でのみ発生しているとも考えられますので、本件は報告ということで決了したいと思います。

３．
さきほど、反応していただけるかわかりませんが、公式Twitterに投げておきました。
また、本件は環境依存ではなく、私自身は確認できませんが Firefox 60でlivedoorのエディタなら再現性がある現象、と考えるのが自然かと思われます。
作成者:  呑兵衛あな [ 2018年5月12日(土) 18:43 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
EarlgreyTea様
色々と御配慮いただきありがとうございます。
向後ともよろしくおねがいします
作成者:  偶然的通行人 [ 2018年5月12日(土) 18:54 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
横から失礼します。

深入りする気はありませんが、この件をテストしたいユーザー向けに関連情報を紹介しておこうと思います。

EarlgreyTea さんからご紹介のあったページ
・リッチテキストエディターの改行時の挙動が変更され、<br> の代わりに <div> が生成されます | Firefox サイト互換性情報
www.fxsitecompat.com/ja/docs/2018/rich-text-editor-s-newline-behaviour-has-been-changed-now-generates-div-instead-of-br/
この文書の冒頭部分にある リッチテキストエディター のリンク先ページに "Mozilla におけるリッチテキスト編集 - HTML | MDN" のドキュメントがあります。
そのページの下方に "リソース" の項目があり、"mozilla.org のリッチテキスト編集デモ" のページにアクセスできます。
（参考）
・Mozilla Rich Text Editing Demo
www-archive.mozilla.org/editor/midasdemo/

入力エリアへの文字入力・編集後、下にある [View HTML Source] にチェックを入れると、結果の HTML ソースが表示されます。

ぼくは livedoor Blog を使っていないので、そのブログエディタ（「シンプルエディタ」というのでしょうか？）と個々のブラウザの組み合わせを試すことはできません。
EarlgreyTea さんが書きました:
実際にどういうHTMLになるかは、本件の場合は livedoorブログのエディタの仕様しだい（この仕様についてはlivedoorブログにお問い合わせください）ということになります。

と仰っているように、ブログサイトが提供するエディタの仕様が変われば、結果も変わることがあるとは思います。
なので、だれでもアクセス可能な上記のデモページで、Firefox の異なるバージョン、Google Chrome や Internet Explorer など他のブラウザの編集時の動作を試してみることで、ひとつのエディタでの挙動の変化を客観的に比較できるのではと思います。

Firefox 60 での本件に関する変更をふまえ、呑兵衛あな さんが仰っている動作結果が、（a）意図通りに変更された結果なのか、（b）変更はしたがバグがあって正常に働いていないのか、（c）エディタ側の仕様が影響しているのか等々、そのあたりはぼくには判断できませんが、可能な限り客観性のある比較をしないと、"特定ユーザーがおこなう特定環境での結果" という話で終わってしまいかねません。

とりあえず以上です。役に立たない話だったらすみません。


（おことわり）
現在、健康上の制約により不定期な書き込みしかできなくなっています。すぐに応答できない場面がかなり多くなりますことを、ご容赦ください。
作成者:  呑兵衛あな [ 2018年5月16日(水) 20:20 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
[START]本件と同様の内容について、別のlivedoorブログ利用者がlivedoorブログに質問したところ、『頂いた回答は”Firefox60.0の仕様変更によるものなので別ブラウザをご利用下さい。”とのことでした。』との事です。[/START]
[START]http://blog.livedoor.jp/fs00r612/archives/52080350.html[/START]

[START]そのため重ねて質問いたします。[/START]
[START]以前教えていただいた「Firefox 60 for developers - Mozilla | MDN」によれば、『アプリで以前の動作を望む場合は、document.execCommand() で実現できます。詳しくは マークアップ生成の違い をご覧ください (in release build" rel="noopener">バグ 1430551)。』とのことですが、『document.execCommand() で実現』する方法は難しいのでしょうか??[/START]

[START]私は、まるっきりのド素人です。「about:config」から弄る程度ならば、理解できるかしらん(?)というレベルです。[/START]
[START]「あきらめろ」という回答でも結構ですから教えてください。[/START]
作成者:  EarlgreyTea [ 2018年5月17日(木) 00:48 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
呑兵衛あな さんが書きました:
本件と同様の内容について、別のlivedoorブログ利用者がlivedoorブログに質問したところ、『頂いた回答は”Firefox60.0の仕様変更によるものなので別ブラウザをご利用下さい。”とのことでした。』との事です。
了解です。
livedoorブログではFirefox 60の仕様変更を認識しているが、エディタを改修して対応させる予定はない、ということのようですね。

呑兵衛あな さんが書きました:
『document.execCommand() で実現』する方法は難しいのでしょうか??
あれはエディタアプリを利用する人向けではなくて、エディタアプリを作る人向けの記事なのです。
エディタの利用者がそれでなんとかできるわけではありません。

ところで、私は
引用:
ブログのエディタ側でブラウザの種類によって処理を分けて、同じ挙動になるようにケアしているのではないか
という推測をしました。
そして、
引用:
幸い、最新のブラウザーではこれらが多少統一されています。Firefox 55 では Chrome、最新の Opera、Edge、Safari に合わせて、<div> 要素で行をくくるように更新しました。

私の推測が当たっていたら、ひょっとすると、Firefox 60 で Chrome や Edge のユーザーエージェントに偽装するとうまくいく、かもしれません。

あくまで、ひょっとすると、ですが。

ちなみ、ユーザーエージェントの変更はアドオンを使うと簡単です。
https://addons.mozilla.org/ja/firefox/addon/uaswitcher/
作成者:  Ryo [ 2018年5月17日(木) 03:38 ]
記事の件名:  Re: HTML文で『123<br />』が『<div>123</div><br />』と記述されるようになった
呑兵衛あな さんが書きました:
本件と同様の内容について、別のlivedoorブログ利用者がlivedoorブログに質問したところ、『頂いた回答は”Firefox60.0の仕様変更によるものなので別ブラウザをご利用下さい。”とのことでした。』との事です。

呑兵衛あな さんが書きました:
私は、まるっきりのド素人です。「about:config」から弄る程度ならば、理解できるかしらん(?)というレベルです。


livedoorブログ側が今回のFirefox 60 からの仕様変更に追従しないようであれば､
以前 紹介した Bug 1430551 - Make defaultPargraphSeparater <div> in release build に
記載されている about:config の下記設定を利用すれば Firefox 59 までの挙動に戻せるようです｡

コード:
editor.use_div_for_default_newlines ; false

当方の確認では 上記項目を false に変更すれば大丈夫そうな印象ですが､
livedoorブログで試しているわけではない事をご承知下さい｡

ただ､仮に livedoorブログでの挙動が以前の所望の動作に戻っても､
他のサイトでの挙動は サイト運営者が Webブラウザ や そのバージョンを判定して
動作を切り替えていると想定外の動作になるかもしれませんね...｡
ページ 1 ／ 2 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/