新デザイン「新投稿画面」ではコピペでhtmlが取り除かれます

新デザイン「新投稿画面」ではコピペでhtmlが取り除かれます

FC2ブログのあれこれ
2021/05/09
8
vanillaice (Akira)
vanillaice (Akira)
初心者向け新投稿画面

一般的な WYSIWYGエディター(見たままエディター, ビジュアルエディター) というのは コピーされる側のhtml内容が投影される という特徴を有していることが多いのですが、新デザインのFC2ブログ「新投稿画面」はそうではないよ、というのが今回の主旨です。

はじめに

まず、対策のお話ではありません。現状「コピー元のhtmlは踏襲しない」という仕様で確定なので、それをどうにかこうにか、という話ではない。「なんでそうなった?」という方向けに性質と「こう考えたらどうかな」という感じで説明するだけです。

なんのことやら意味がわからんなぁ、という方のために事前説明しますと、PCでよく行われる作業の コピー&ペースト (複製して貼り付け) で、「コピー」というのはマウスで対象範囲を選択して内容を取得しますよね。主にテキストや画像になると思うんですが、コピー動作というのは文章だけを拾っているわけではなく、htmlの一部も取得している という点が重要です。

例えば赤い文字のテキストをコピーしてペーストすると、FC2ブログのエディター(新投稿画面)ではそのテキストが

  • 旧デザイン --- 赤字になる(html付きテキストとして受け付ける)
  • 新デザイン --- 赤字にならない(ただのテキストとして受け付ける)

こういう違いがあります。これに気づいたのは以下の記事を書いたときです。

新投稿画面に「引用」ツールアイコンが追加されました(但しChromium系ブラウザのみ)

新投稿画面に「引用」ツールアイコンが追加されました(但しChromium系ブラウザのみ)

かねてより要望のあった「引用を形成するアイコンの追加」が行われた旨のアナウンスがありました。本記事タイトルにある通り「但し」という条件がありますので説明しようと思います。...

上記記事の「blockquote要素」の章で「blockquoteは扱いづらい、特にWYSIWYGでは」といったことを書いているんだけども、この説明をしようと思って確認をしたところ、新デザイン新投稿画面ではコピーで取得したhtmlが取り除かれることに気が付きました。なので詳しい説明もせずなんとなくモゴモゴした内容になってる(笑)

で、本記事を書くきっかけになったのは、これに関するリクエスト内容を拝見したからです。

リニューアル後の記事作成画面で書式付きのテキストを貼り付けたとき、書式が反映されなくなった

リニューアル後の記事作成画面で書式付きのテキストを貼り付けたとき、書式が反映されなくなった

リニューアル後の記事作成画面(見たまま編集)で書式付きのテキストを貼り付けたとき、書式が反映されなくなりました。 例えば赤い文字をコピーした場合、赤い文字のまま貼り付けになってほしいです。...

「書式」と表現されているのは「html」のことです。もっと深くつっこめば「装飾」のことなので、htmlの「定義」ではなく「見た目」のことを指していると思われます。

こちらを拝見して、あぁ、やはり不便と感じる方がいらっしゃるのだなぁ、と。逆にその方が良い、という方もいるはずです。ただ一般的なWYSIWYGはhtmlがそのまま投影される、という場合が多いのでなんとなく「このタイプのエディターならできて当たり前では?」と考える人がいる、というのは頷けます。

コピー&ペースト サンプル

例えば以下のようなウェブページがあったとします。

全体がセンタリングされていて3行に渡る内容。最後の行はtable要素です。この2行ををドラッグ選択してコピーし、旧デザイン新投稿画面にペーストすると以下のようになります。

実際の投稿でどんな見た目になるかはテンプレートによりますので、ここでは記事作成中のエディターの様子のみ。このようにhtmlの一部がそのまま投影されています。センタリングは取り除かれていますね。そして文章の後ろには緑色の背景色がくっついています。これはコピー元のサイトの背景指定によるものです。あとは「フォント種指定」ですとか、その他諸々、一見しただけではわかりづらい内容がたくさん含まれています。コピー元の htmlの書き方が古ければ古いほど見た目がくっついてくる と思って間違いではありません。htmlで装飾が行われているとこういうことが起こります。
* 現在ではhtmlの属性を用いた装飾は非推奨あるいは廃止になっています。

結局これを「便利」と見るかそれとも「厄介」と見るかなんですよね。赤字になる程度なら看過できても背景まで持ってくるのはどうなの、とか、いやいやその方が親切でしょう、とか。人によって必ず賛否は分かれます。

個人的な是非は語れません。なぜなら私はWYSIWYG(見たまま)モードを利用することがない。なので是とも非とも言えませんが、仮にhtmlモードが無いという条件下であれば、htmlが付いてくるのは困るかな ^^;

引用とコピー&ペーストの関係

みなさんweb上の文章を引用するとき、恐らく殆どの方がコピー&ペーストで行っているのではないでしょうか。中には引用元を見ながらキーボードで打っている、という方も居るかもだけどたぶん少数派ですよね (´・ω・`)

新デザインの新投稿画面には当初「引用」アイコンが無かったのですが追加され、そしてペースト時にhtmlが取り除かれる仕様になった、ということで、もしかしたら関連があるかもしれないしそうでないかもしれませんが、個人的には「引用」を重視するならばhtmlは取り除いたほうが安全だと思います。

まぁ引用だけではないですけどね。WYSIWYG全般で言えることは、コピーで拾ってきた内容をさらに装飾できる状態にあるわけで、いろいろやってるともうめっちゃくちゃのぐっちゃぐちゃになることも。あとそもそも「引用」というのは装飾までも引き継ぐ必要というのは全くないわけです。

既に閉鎖された某ブログサービスのエディターが「完コピ可能エディター」だったんですよね。例えばどこか有名なサイトから全文をコピーでもって自身のブログにペーストすると、その内容は装飾も全て引き継いだ状態、それこそページ送りとかまで付いてて元サイトと全く同じ見た目で投稿できてしまう(しまっていた)。こうなると盗作以外の何者でもないんだけれども(笑)
仮にその内容が blockquote要素としてマークアップされていたとしても(html文法的にかなり無理がありますが)、引用の範疇を逸脱しています。

モラル的な観点から言うとhtmlが取り除かれる、という仕様は決して否定できない。とはいえWYSIWYGってそういうものだけれども(笑)

まとめ

そんなこんなで、前回なんとなく中途半端というかテキトーに流してしまった内容の補足のような記事でございました。

Related post

Comments  8

-
2021/05/09 (Sun) 09:49

管理人のみ閲覧できます

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

-
2021/05/10 (Mon) 10:33

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/05/10 (Mon) 14:33

To 引き継がない方が良い派 内緒さん

こんにちは。

「程度」にもよると思うんですよね。起案者さんは恐らく「一部の文字が赤い」だけだと思うので「引き継げれば便利」となりますが、人によっては(コピー元のhtml内容によっては)それほど単純ではないかもしれない。
運営的には個人でなく全体を見なければいけないので、これは仕方がないことかな、と思います。
メールから一部文章をコピーしたときでも太くなってしまったりフォントが変わってしまったりで「ギャッ!」とかありますよね(笑)

-
2021/05/10 (Mon) 17:00

管理人のみ閲覧できます

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

-
2021/05/24 (Mon) 11:25

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/05/24 (Mon) 17:13

To Macの件 内緒さん

こんにちは。届いたんですね :)
まさかスイッチで(笑)
私も新しいの買うことにしました。というか、長男のを買い取る (;`ー´)o
長男が上のグレードを買いたいので今のを買ってくれ、と。彼は社販の特別価格で買ってるので転売できないんです。なので身内に売りつける(笑)
まぁ今メモリ足りないしいっかー ( ̄∀ ̄;)
ちなみに10万で買います。5万で良いって言ったけど親心で ^^;
しかしやつは上乗せされることを想定して提示したはず(笑)

-
2021/05/25 (Tue) 07:27

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/05/25 (Tue) 17:16

To Macの件 内緒さん

そうなんですよー。macの場合はwinのようにばつ印クリックでアプリ終了、とはならず、画面上部のステータスバーのプルダウンをしないと終了しないのがとっても面倒 ( ̄∀ ̄;)

command + W で終了できる場合もありますよ。ただしブラウザなんかはこれだとアプリの終了ではなくタブを閉じてしまうので注意です。
ブラウザ以外のインストールアプリならこれでほとんどいけると思います。
あとスクリーンショットは
command+ Shift(上向き矢印) + 3
でできます。よく使いそうなtips(笑)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)