新投稿画面の特徴

新投稿画面の特徴

FC2ブログのあれこれ
2021/02/07 18
vanillaice (Akira)
vanillaice (Akira)
Education トラブル対処 初心者向け 新投稿画面 旧投稿画面

記事タイトルの付け方が下手 orz =3

えっと、管理画面リニューアルに伴い、新投稿画面利用者の増加 が見込まれます。この点については後述します。その新投稿画面についてこれまでで私が気づいている「特徴」についていくつかお伝えできれば、と思います。

新・旧 投稿画面の違い

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

旧投稿画面 新投稿画面
デフォルトモード 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モード固定」の設定を 新規導入 してもらえると良いかな、と思います。

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

新投稿画面の特徴

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

不具合と思しきもの

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

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

海外ドラマ大好きな「韓ドラおばさん」のドラマレビューです。自分なりのあらすじ(ネタバレ多し)や感想を語りたくてこのブログを始めました。

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

  • 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) =&gt; {

こうなって戻ってきます。勝手にエスケープされている(笑)
これに気づかず再保存してしまうともうこの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押下減らせる(笑)
つまりコーダーが楽を出来る。

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

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

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

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

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

こうではなく

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

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

まとめ

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

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

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

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

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

Enter ではなく Shift + Enter

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

 18

There are no comments yet.
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/02/07 (Sun) 08:40
hige
なるほど合点

合点1:確かに旧投稿画面の改行の扱いの事を勘違いしていました。
合点2:終了タグを省略した時、次の開始タグの直前に終了タグが補完される件も謎が解けました。
合点3:新投稿画面ではpre要素内でのダブルクオーテーションはエスケープ不要。

他、色々わかりやすく解説していただいてありがとうございました。

2021/02/07 (Sun) 09:23
bon

Akiraさん
おはようございます。
詳しい解説ありがとうございます。

私は、Akiraさんが新投稿画面・HTML編集で投稿されていると知ってから、使い慣れた旧投稿画面から新投稿画面に切り替えましたので、もうだいぶになりすっかり慣れましたが、編集モードの切り替えだけはずっと面倒に感じていました。
本文でポチ、追記でポチ…

特に、スマホで記事を編集する場合、FC2ブログスマホ版で記事を更新してしまうと、相変わらずアイキャッチ設定がクリアされてしまう謎仕様(一昨日に確認してもやはりアイキャッチの設定が冒頭画像に置き換わりました)なので、スマホから更新する際はPC画面に切り替えます。となると、スマホ画面でチマチマと小さ〜いモード切り替えボタンを押さねばならず…。
長年耐えてきましたが、この機会にAkiraさんにお尋ねしてみよう!と思った次第です。

※スマホアプリのほうではアイキャッチ設定がクリアされないことに気づいたので、スマホで編集したい時はアプリを使うことにします。以前は、アプリで更新したらつけたタグが消えてしまう症状があったために避けていました。

今回、多くのユーザーが新投稿画面を使用され、同じ要望が多く出ることで便利になりそうで心強いです。

しかし、Akiraさんのブログのほうが公式よりもユーザーフレンドリーですね。いつもありがとうございます。

2021/02/07 (Sun) 09:57
vanillaice (Akira)
Akira
To 新投稿画面の件 内緒さん

こんにちは。

そうですね。補完については気にされなくて良いと思います。意図が反映されないという点では良くないだろうけど、仕様と割り切って差し支えない範疇かな、と個人的に感じています。

* 内容一部削除しました。

2021/02/07 (Sun) 13:40
vanillaice (Akira)
Akira
To higeさん

こんにちは ('0')/

移転ユーザーさんからは敬遠されがちでしたが、旧投稿画面は使い慣れて特徴を理解すればとても使い勝手が良かったですよね。
提供されているうちは使い続けたい、という方もいらっしゃるだろうし、新デザインでは使えないとしても旧デザインとの選択性になっているのが救いかな ^^;

2021/02/07 (Sun) 13:45
vanillaice (Akira)
Akira
To bonさん

こんにちは ('0')/

確かに私も無意識で切り替えていましたが、よく考えたら面倒ですよね(笑)
モバイル版、そういった挙動があったんですね。PC版がリニューアルされたのでモバイル版もされるかもしれませんね。
今のモバイルエディターは旧投稿画面由来で、時代的にはWysiwygに切り替えないといけない時期というか、もう今からじゃ遅いぐらいなので、恐らくそんな方向になるのではないかな、と思います。

2021/02/07 (Sun) 13:48
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/02/07 (Sun) 15:18
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/02/07 (Sun) 15:26
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/02/07 (Sun) 16:43
vanillaice (Akira)
Akira
To 諸々の件 内緒さん

こんばんは。お気遣いありがとうございます。

* 内容一部削除しました。

2021/02/07 (Sun) 21:12
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/02/08 (Mon) 08:11
vanillaice (Akira)
Akira
To 諸々の件 内緒さん

えー!あるんですかー!
いやー、逆に「そんなの聞いたことない」なら「ですよねー」で終わったんだけど(笑)
あるんですね… ( ̄∀ ̄;)

私なんはガーデニングとかホントに苦手で、表(玄関)はなんとか体裁保ってますけど南なんてもうひどいですよ。荒れ放題(笑)
しかもお花の脇にレタスとかしそとかニラとか平気で植えるタイプ ←
(ちなみにニラは匂いが強くて、めっちゃ繁殖したので全部刈りました(汗))

だからいっそ花壇より駐車場にしたほうがよほど見た目が良いはず。
来週また話し合いがあるんだよなぁ。つか、うち関係なくね… ( ̄∀ ̄;)

2021/02/08 (Mon) 16:47
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/02/08 (Mon) 18:18
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/02/13 (Sat) 17:46
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/02/13 (Sat) 17:56
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/02/13 (Sat) 18:26
vanillaice (Akira)
Akira
To 新投稿画面の件 内緒さん

こんばんは。

まず、ページによって記号になったり変換されたり、というのはweb上ではよくあります。例えばFC2では訪問者リストページで訪問者のブログタイトルやハンドルネームに記号がついているとエスケープ表記になります。
それぞれのページの性質で処理するべきものなので、なかなか難しいところですね (´・ω・`)

ダブルクォーテーションの件。
こちら確認しました。以前はならなかった気がするけども、確かにバリデートエラーになりますね。
これは問い合わせ・報告をしようと思います。
またお知らせしますね。よろしくお願いします。

2021/02/14 (Sun) 00:25
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/02/14 (Sun) 11:43

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

FC2ブログのあれこれ