新投稿画面の特徴

新・旧 投稿画面の違い

「旧投稿画面」「新投稿画面」の違いをまず説明する必要があります。

	旧投稿画面	新投稿画面
デフォルトモード	HTML	見たまま
改行の扱い設定	あり (HTML)	無し

しごく簡単な表 ^^;

旧投稿画面のデフォルトモードは HTML で、逆に新投稿のデフォルトは 見たまま(Wysiwyg) ということで、真逆 です。

旧投稿画面というのはちょっと特殊でして、通常「HTMLモード」というのは改行したければ <br> と明示する必要があり、それが当たり前なんですが、FC2の旧投稿画面HTMLモードでは Enterキーを押下するだけで改行コード入力とみなす という設定があるんですね。

記事作成ページ下での設定名称は「改行の扱い『自動』」、そして環境設定内では「改行をそのまま反映」となっています。これは実は大変特殊な設定であり、この設定を必要とするのは HTMLモードのみ です。

理屈わかりますでしょうかね。本来のHTMLモードであれば

あいうえお<br>
かきくけこ<br>
さしすせそ

と書かなければいけないところを、旧投稿画面「改行の扱い『自動』」では

あいうえお↩
かきくけこ↩
さしすせそ

* ↩ はEnterキー押下を意味します。
と書くだけで前者のhtmlコードを実現できる、という仕組み。ただしここで注意すべきは Enterキー押下によって補完されるbr要素は目に見えない という点。

記事作成画面中の記述は後者のままだけれども、ブラウザが受け取っている内容というのは前者、<br> がしっかり付いている内容なので、ここを見落としてバリデートエラー(htmlが正統でない)を招くことがあります。この点を知っていれば大丈夫。

で、見たまま編集 (見たままモード, ビジュアルモード, Wysiwyg) というのは元来「Enter押したら下の段へ行く(移動, 繰越)」ことになっています。でないと、記事作成者がhtmlコードを書くわけではないのだから、勝手にそうしてくれないと困りますよね。そして 「下の段へ行く」のであって、「改行される」とは限らない 点に注意。こちらは後述。
というわけでここまでが「改行の扱い」設定というのは「HTMLモード」でのみ必要なんだよ、という説明です。

モードの固定

ここ数日で「新管理画面「新投稿画面」でも「モードの固定」をしたいのに」というご相談というか、そういう設定はあるのか？見落としたか？どうなんだ？といった内容のコメントを数名の方から頂いています。

無いです (´・ω・｀)
これまでもありませんでしたし、旧投稿画面でも無かったはず です。

何故「旧投稿画面では有った、できた」と勘違いするかというと、これが要するに「改行の扱い『自動』」設定のことを指しているからなんですね。モードの固定・モードの切り替え、というのは

• 新投稿画面 --- デフォルト(見たまま) → HTML
• 旧投稿画面 --- デフォルト(HTML) → 見たまま

これのことだよね (´・ω・｀)
旧投稿画面のツール内に

Wのアイコンがありますでしょう。これがモードの切り替え、つまりHTMLから見たままへの切り替えです。そして旧投稿画面に於いても「見たままモード固定」という設定は無いはずです。

ですから皆さんが言う「旧投稿画面ではできた」は実際はできません。できたのは改行の扱いの指定です。そして旧投稿画面はHTMLモードがデフォルトでありながら、見たままモード「ぽい」使い方ができていたためにそう誤認しているということですね。

新投稿画面のHTMLモードはガチのHTML編集モードですから、改行の扱いの指定というのはできません。なので以前から私がしつこく言っているのは「新投稿画面のHTMLモードは中〜上級者向け」ということ。改行の便宜もなければ、リアルタイムプレビューも無いという代物です。

んでもって、新管理画面では 旧投稿画面への切り替え不可 になっているようですね。システム上の都合なのか、旧投稿画面の提供を終了するからなのか、それとも単に「もうええやろ」的判断なのかわかりませんが、とにかく現時点では切り替えが失われているという状態です。となればもう、新投稿画面がデフォルト、ひいては 見たままモードがデフォルト ということになりますので、中〜上級者向けに「HTMLモード固定」の設定を 新規導入 してもらえると良いかな、と思います。

新規よ？もともと新旧両投稿画面に無かった設定ですからこれは新規設定です。

新投稿画面の特徴

新デザインになってからの新投稿画面を触った回数が少なく、検証もできていませんが、内部システムが同じであれば恐らく踏襲されているであろう特徴をいくつか記したいと思います。なので内容が異なっている可能性もあります。申し訳ない。ここからは新投稿画面の説明で、旧投稿画面に関する内容はありません。

不具合と思しきもの

説明の前に、たぶん不具合じゃないかなぁ、と思われるものについて情報が寄せられています。

韓ドラ大好きおばさんの「言いたい放題いわせてヨ！」

海外ドラマ大好きな「韓ドラおばさん」のドラマレビューです。自分なりのあらすじ（ネタバレ多し）や感想を語りたくてこのブログを始めました。 レビューは「フィクション」に対する感想です。どうぞ誤解のなきように

kandoraobasan.com

こんさん、情報提供ありがとうございます :)

• HTMLモードで文章途中に画像を挿入すると、前後の文章を含め p要素 としてマークアップされてしまう。

ツールバー「画像の挿入」を利用した時ですね。例えば

あいうえおかきくけこ

と書いており、「かきくけこ」の後ろに画像を入れると…

<p>あいうえおかきくけこ<img src="" alt=""></p>

こんなふうに勝手にpタグで囲まれてしまう、と。これは予期せぬ挙動のはずなので問い合わせを行いました。「調査・修正」を行う旨の返信を頂いています。なのでこの件については経過観察ということで。

HTMLモードでのダブルクォーテーションはエスケープ必須ではない

旧投稿画面では必須です。例えば旧投稿画面で

<pre><code>&lt;p style="margin: 0"&gt;あいうえお&lt;/p&gt;</code></pre>

pre要素でコード掲載を行った場合、これはバリデートエラーです。理由は「ダブルクォーテーションをエスケープしていないから」です。

新投稿画面ではダブルクォーテーションをエスケープする必要はありません。仮にエスケープしても、編集時にダブルクォーテーションに戻っています。そしてここがポイント。記事保存時と記事編集時が全く同じ状態ではなくなる場合がある という点です。後述。

ブラケットはエスケープされて戻ってくる

「戻ってくる」というのは 記事編集時 のことを指します。例えば

galleryImages.forEach( (item) => {

途中に => という文字列があります。これはJSの「アロー関数」と言いますけれども、もちろんhtmlではありません。JS(JavaScript)です。ブラケットが付いてますので、通常ならば「htmlではないのならばエスケープしろ」とされる場面ですが、JSなのですからエスケープしてしまえば機能しなくなります。

このアロー関数を含むJSを記載して保存し、編集のために再度開いたとします。すると

galleryImages.forEach( (item) => {

こうなって戻ってきます。勝手にエスケープされている(笑)
これに気づかず再保存してしまうともうこのJSは動きません。そのためにエスケープされたブラケットをわざわざ戻さないといけない。

終了タグが補完されて戻ってくる

戻ってくるというのは(ry
htmlには終了タグを省略できるものがいくつかあります。li要素 p要素 など。こうですね ↓

<ul>
<li>あいうえお
<li>かきくけこ
</ul>

<p>あいうえおかきくけこ

また、属性値を含めイコール・ダブルクォーテーションを省略できる場合もあります。↓

<img src="画像アドレス" alt>

<input type="radio" selected>

これらを保存し、編集のために再度開くと…

<ul>
<li>あいうえお
</li><li>かきくけこ
</li></ul>

<p>あいうえおかきくけこ
</p>

<img src="画像アドレス" alt="">

<input type="radio" selected="">

緑部位が勝手に補完されたものです。で、これは個人的には 特に問題とは思わない です。というのは、そもそも何故省略できるかというと ブラウザによる補完が働くから なわけで、そもそもブラウザはこうして読み取っている。何故省略するかというと

• 書く手間を省く
• ファイルサイズをわずかながら減らせる

例えば </li> と記すには単純にキー押下数は「7」ですよね。7押下減らせる(笑)
つまりコーダーが楽を出来る。

戻ってきた内容が意図した定義と異なってしまう、などはありません。もちろん正しく書けていることが大前提です。selected が selected="" となって戻ったからといって何か問題が生じるわけではない。

ただし「ファイルサイズ」の点ではせっかく減らしたものが増えているのでアレですね。といっても長大なhtmlコード、例えばテンプレートhtmlのようなものであればこの省略が割と有効なんですが、記事単位で見ればそう気にするサイズではないと思います。

この件については「気にすんな (o'ω')ﾉ」という回答で(ごめんなさい ^^;)

ついでに、終了タグが補完された場合は、本要素の末尾ではなく後続要素の文頭に付きます。

<li>あいうえお</li>

こうではなく

<li>あいうえお
</li>

こう。これは理にかなっています。htmlコード中ではコード改行が見た目に影響することがありますので、後続文頭が最も適しています。みなさんに「コードを書く時にそうしろ」と言っているわけではないですよ。念の為。余力があるならやっても良いとは思いますが。

まとめ

今思い出せるのはこんなところかな。他にもあったような、無かったような。

新デザインに移行し、これから新投稿画面を利用していく、という方は旧投稿画面の改行の扱い「自動」の概念をいかに払拭するかにかかっているのかも。あと、HTMLモードというのはこういうのは想定していないんですね。

<p>あいうえお</p>
かきくけこさしすせそ
<div style="margin: 0;"></div>

htmlを使ったり使わなかったり。使うなら全ての文章で使う というのがhtmlモードの本来の使い方で、それが最も悩まずに済む方法でもあります。ところどころ使わない、とかやってると、やれ行が段が、と思い通りにいかない場面に遭遇しがち。

最後に見たままモードで「divだらけ」「pだらけ」の方は、意図的に「改行」として行替えしたいならば

Enter ではなく Shift + Enter

押しなはれや！それが正しい「改行」や！ということで終わります (o'ω')ﾉ