WYSIWYG環境が不安定な「最新版エディタ」/ アメブロ24時

Chromeのブログ編集画面に異変 

ブログ編集画面上の表示が、その記事をアップロードしたブログ画面と一致する事は、大きな価値です。 アメーバの最新版エディタ（標準）は「デザイン幅で表示」という編集画面をブログ表示に近づけるWYSIWYG的機能を持っていますが、この機能がなにかと不安定な状態になりがちです。

 

PCのブログ編集画面をアレンジするユーザーはそう多くはなく、今回の変化に気付く人は少ないかも知れません。 しかし水面下でシステムは揺れ、一般の一部ユーザーにも影響が出ていると思われます。

 

私は「Stylus」を使った「Ameblo Writer」というスタイルで、編集画面をアレンジしていますが、昨日、Chromeで最新版エディタを開くと何やら尋常ではなく、「編集枠」内の表示が従来と色々と様変わりしていました。

 

下は赤で以前と変わった部分を示していますが、他にも色々とあります。

 

 

この事態は、Firefoxで以前に経験があります。 編集枠は「iframe」という嵌め込み合成の様な特殊な範囲で、「Stylus」のこの範囲のアレンジが無効になる場合があり、今回の問題も明らかにその状態です。

 

以下は、私が「Stylus」でアレンジしている内容をまとめたものですが、編集画面の「WYSIWYG環境」を目的としたアレンジ（太字項目）は最も必要です。

 

〔Ameblo Writer による指定〕
　　編集枠の余白の色
　　スクロールバーの配色
　　本文フォントと基本フォントサイズ指定
　　アメーバ絵文字の位置調整
　　文字列の反転選択・画像等のホバー時表示

〔ローカルスタイルによる個人的な指定〕
　　Font Awesomeの表示
　　h2 h3 h4の太字指定
　　PRE枠内のフォント指定
　　リンク文字列のカラー
　　YouTube動画の配置と再生可能指定
　　本文上へのドラッグ禁止指定

 

上記項目の前半は「Ameblo Writer」を利用しているユーザーに影響します。 私自身にとっては後半の指定の無効化も大変ですが、前半の問題は放置できません。

 

今回の様に「Stylus」のCSS修飾が無効になるのは、クロスドメインの問題がからんでいる可能性が大です。「ブラウザ」もしくは「アメーバのシステム」で何かの変更があり、「iframe内のCSS修飾」を可能にしていた「Stylus」の機能が無効化されたと推測されます。

 

ここで、他のブラウザの状態も確認しました。

 

 

 

Edgeでは別問題も生じていた 

下は Edgeの同じ編集画面で、Chromeと同じ問題が生じ、それに加えて、本文のフォント指定が「MS Pゴシック」に変わっています。

 

 

ブログスキンの「本文フォントの指定」を編集枠内にも反映する機能が、編集画面のシステム（デザイン幅で表示）に組み込まれています。 これは「WYSIWYG」上で最重要な部分ですが、この編集中のブログスキンでは、本文フォントは「メイリオ」の指定なのに、これがEdgeでは正常に取り込まれていません。

 

Chromeはこれは正常に機能し、「Ameblo Writer」のフォント指定は無効になっていても、編集画面は問題なく「メイリオ」で表示されています。 なぜ、Edgeが駄目で Chromeは問題ないのか、色々と調べましたが判りません。

 

今回判った事ですが、

▪「Edge」ユーザー

▪「CSS編集用デザイン」のスキンで本文フォントを「MS Pゴシック」以外に指定

 

の条件に該当するユーザーは、以前はブログ表示の通りのフォントで編集が可能だったのが、それができなくなっているはずです。 アメーバはこの問題に気付いている？

 

〔追記〕2021.07.18

Edgeで、CSS編集用デザインによる本文フォントの「メイリオ」指定が取り込まれなかったのは、過去にデフォルトの「MS Pゴシック」の指定を保存した Cookieが更新されずに残っていたためでした。 Edgeが編集画面で使用する「Cookie」を手動で削除することで、「メイリオ」指定が取り込まれました。

 

 

フォント等の取得機能の詳細を次のページに纏めます。

 

 

 

問題の多かった Firefoxが現在は最も良い状態 

Firefoxは、「Stylus」で「iframe」内のCSS修飾が出来ない時期がありました。 またブラウザセキュリティの仕様で編集画面の問題を生じる事が多かったのですが、今回調べると「Stylus」の修飾が従来通り機能し、最も理想的で問題の無い状態です。

 

 

唯一、スクロールバーのアレンジが無効ですが、これはそもそもFirefoxに効かない指定を使っているので、問題ではありません。

 

 

 

対策 

今回の最もネックになっている点は、ChromeとEdgeで「Stylus」が「iframe」内の修飾を出来なくなった事です。 これが復帰すれば、Edgeがスキンのフォント指定を取得できない問題は「Ameblo Writer」がカバーできます。

 

これは、もしかしたら少しの期間の後に改善されるかも知れません。 また、そうならないかも知れません。 もともと「iframe」はCSS修飾が困難なエリアです。

 

今回、ひとつのアイデアがあります。 編集枠内 / 編集枠外のアレンジを統合した「Ameblo Writer」は、最も纏まったスタイル配布の方法ですが、今回の様な問題が今後もありうる様な気がします。 一方、「Tampermonkey」を使ったJavaScriptを作れば、「iframe内のCSS修飾」が安定して可能になり、これは「Stylus」の苦手な所を補えます。

 

今回のCSS修飾無効の状態が続くなら、そういったツールを製作すれば無敵です。 以前は Firefoxで試した経緯があり、そう難しいツールではないので、少し様子を見て考えたいと思います。

 

以下は、過去にFirefoxで問題が生じた時の記事です。