過去記事更新

2020年5月28日 
 
■モバイル版で見る

Blogger:本当にあった「新しいインターフェース」の怖い話@2020年5月


 このブログが使用しているBloggerでは、2020年6月の下旬より「新しいインターフェース」が本実装されると告知されています。
 すでに刷新されたUIは使用可能ですが、いま現在はお試しの状態らしく、未完成なのか仕様なのか判断できない部分も多い印象です。
 これについていくつか文句があるのですが、中にはシャレにならんやつもあったので注意喚起の意味でも記事にしておきます。

*(追記)2020年8月21日時点で、以降に書いた重大な問題は解決済みで、新インターフェース少なくとも従来と同等以上の使い勝手に改☆善されていました。(やったぜ)

(備考)7月中旬から正式に「新しいインターフェース」がデフォルトとなりました。
 また、一時期「旧デザインは8月24日まで使用可能」という通知が出ていましたが、さすがにまずいと思ったのかひっそりと期日表記が消えて「その後も任意で利用可能」に戻っていました。
 まあ致命的なところは直ったのですがしばらくは旧デザインも使えるようです。


*その他の■Blogger関連の記事

The New Blogger Interface 2020

▼ダメなところ ▼いいところ (スクロールします)

(追記)▼正規表現検索


 まず新しいインターフェースですが、現在は試用版となっています。
 2020年5月現在、管理画面の左下に「新しいBloggerを試す」ボタンが表示されており、ここから新旧の画面を切り替えることができます。
 ちなみにいつでも戻せるので、少し試すだけなら心配ありません。

 5月27日ごろから、新たに以下のメッセージも表示されるようになりました。
 これによると、6月下旬より新しいBloggerのインターフェースがデフォルトのインターフェースとなるようです。
 その後も現行のものは使用できるようですが、前にも管理画面の刷新はあったし古いデザインは順次使えなくなっていくものと思われます。

(追記)6月末ごろに、こっそり「6月下旬」→「7月」に訂正されていましたが、以降に書いた重大な問題はだいたいそのままで、あまり状況が変わっていませんでした。

 上記メッセージに「なにか重大な問題が発生した場合は、Google までご報告ください。」との記載があるように、現在は不具合情報を集めている段階なのでしょう。
 報告や要望がある場合、新しい管理画面の右上にある「?」マークをクリック→「フィードバックを送信」で報告フォームが出てきます。
 すでに本記事で触れているものは報告済みですが、他にも気になったことがあればどんどん送りつけると良いと思います。

(黒い「?」は投稿検索用のヘルプ)



◇ここがダメだよ新しいBlogger ▲目次
 ざっと使ってみて思った不満点はこんなところ。

*投稿画面のデフォルトが「作成ビュー」(対応済み)
 新インターフェースでは、初期画面がWordのように「見た目」で画像やフォントを指定するタイプ(作成ビュー)になっています。
 HTMLのド初心者であればアリかもしれませんが、この画面では背景色、CSS宣言したデザイン等が反映されず中途半端だし、将来的にクラスを編集して新旧の記事を調整することもできません。

 そもそも自分の場合テキストエディタで下書き→投稿時にブラウザから貼り付け+微調整でブログを書くのでHTMLで記述する形式(HTMLビュー)がデフォのほうが都合がいい……というか「作成ビュー」とか一切使わないのですが、今のところこれを変更する設定は見当たりませんでした。
 作成ビュー/HTMLビューは、投稿画面右上にある < > ←こんなボタンをクリックすれば切り替えられるのですが、開き直すごとに毎回クリックする必要があり地味に面倒でした。

 一見「まあ切り替えればよくね」程度のことですが、このいったん「作成ビュー」で開くのを避けられないという仕様は後述のタグ不具合の遠因である可能性もあるため意外と致命的かもしれません。

 ↓
(※追記)2020年6月3日時点で、投稿編集画面を開いた際にデフォルトがHTMLビューになっていることを確認しました。(やったぜ)
 とりあえず「開いただけでタグ改変」は無くなりましたが、「うっかりビュー切り替えボタンに触れたらタグ改変」は健在だったので注意。
(保存ボタンのすぐ横、並んだボタンの一番端っていう押しやすいとこにやべーボタンがあるんだよなあ)

 ↓
(※さらに追記)▼後述の仕様変更で「押し間違えそうなボタン」も撤☆廃されました。(やったぜ)

 *

*HTMLビューから画像を追加できない(対応済み)
 これもちょっと意味が分からないのですが、HTMLビューではなぜか画像追加機能が無いようです。(少なくともすぐ見える範囲には無い……)
 え、何? いったんGoogleフォトとかに上げてからタグとかをコピーして持ってこなきゃいけないの? 従来のインターフェースでは普通に投稿できたのに?? という感じで、さすがに「まだ未実装」なだけで仕様ではないだろう(……で、ですよね?)と思いたいです。
 そう言えばYouTubeで最近実装された管理画面(YouTube Studio)でも、本実装前は終了画面や再生リスト関連など「以前使えたあれが無い」みたいな状態から徐々に改善されていったので、まあβ版あるあるなのかなあといったところ。

 なお、一応作成ビューでは「画像を挿入」ボタンがあります。
 しかし、従来のBloggerで可能だったレイアウトやサイズの指定(↓画像)スルーされる(出ない)上に、ブログ上で画像をクリックした際に元サイズではなく、なんか中途半端に縮小されたものが開くという謎仕様モヤモヤ感が半端なかったです。

 最近では◆FF7体験版の画像レビューみたいにむやみやたらに画像を並べる記事を増やそうと思っているのもあって、万一現状のままだとまったく使い物にならないなという印象です。
 まあさすがに? という感じなので、そのうち使いやすい新型画像投稿メニューが実装されるのでしょう。(……されるよね?)

  ↓

(追記)
 なぜか実装が後回しでものすごく不安でしたが、ようやくほぼ従来と同様の画像(+動画)投稿機能が追加されていました。
 これで新エディタのボタンも必要最低限のものが出揃った気がしますが、この感じだと今後もいろいろ増えてきそうな気がします。

 一応確認したところ、パソコンからの複数画像アップロード、従来と同様のサイズ&配置指定可能でした。
 動画(YouTube)の埋め込みも、自分のアカウント/検索動画から貼り付けることができるのと、なにげに画像と同様のサイズ指定が可能なのがありがたいです。
v1.0感ある)

(追記)
動画埋め込み機能なのですが、このブログで使用したところスマホ環境でのみ動画が表示されないという面倒くさい現象が起きていました。
 PCからは普通に表示されていますが、スマホで見ると動画タグが無視されて改行されてるだけという状態でした。
 自分の場合テーマをあちこちいじっているせいかもしれないので何とも言えませんが、気になる人はスマホでの表示も確認したほうが良さそうです。
 この件は調査中で具体的な原因は分かりませんが、とりあえず動画埋め込みタグ内のclass="BLOG_video_class"の部分を削除するとなんかよく分からんが表示されるようになったので参考までに。

 ついでに言うと、動画タイトルをコピペしても目当ての動画が全然出てこないことが多い等、動画埋め込み機能に関しては仕上げの甘さを感じますね。

 実際に使ってみると、これまでの生成タグとは微妙に変わった点がありました(主にAタグ)。(※訂正)
(旧)
<a href="~" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
 ↓
(新)
<a href="~" style="display: block; padding: 1em 0; text-align: center;">

 imageanchorがdisplay:blockになったのはテキストの回り込み、複数画像の並び方に影響しそうなので、複雑なレイアウトを組んでいる場合は注意したほうがよさそう。
 個人的には余白「左右に1文字」から「上下に1文字」に変わったのがちょっと余計な変更でした。
 このあたりはそのうち仕様変更されているかもしれませんが、画像の上下に余白を空けたくない場合はpadding: 1em 0;の1emを消してpadding: 0;とかにすればOKです。

 *

*ページ内検索がくっそ不便(解決)
 これも地味にうっとうしい案件なのですが、新HTMLビューで文字列検索をしたい場合は独自の検索フォームを使用する必要があります。
 検索フォームは虫めがねアイコンをクリックするか、記述エリアにフォーカスがある(テキスト入力できる)状態でCtrl+Fで表示されます。
 ここに文字を打ち込んでEnterで検索することになります。

 なお、ブラウザ側のCtrl+Fで普通にページ内検索した場合はその時点で画面上に表示されていないとヒットしないようです。
 どうも新しい投稿画面の記述エリアは「単純なテキストボックス」ではないらしく、記述エリアをスクロールした後方の文字に対しては検索ワードがヒットしないため「は??」 と思ってしまうかも。
 もちろん現行インターフェースの場合、記述エリアの末尾だろうがブラウザ側のCtrl+F検索で普通にスクロールして探し出すことができます。
 独自の検索フォーム自体はBloggerのテーマ編集画面と同じ仕様なので「まあそういうものか」と思えばいいのですが、今のところ検索の挙動が不完全で「形だけ用意した」ような気配があります。

 たとえば、検索ワードに複数のヒットがある状態でもう1度Enterを押すと当然次を検索する……と思いきやヒットした文字列を消して改行しちゃうあたりがおいと突っ込みたくなるところ。
 また、ヒットがあっても無くてもスッとフォームが消えてしまうため、「次を検索」するには1回ごと虫めがねをクリック(またはCtrl+F)する必要があるのも非常に不便です。
 ちなみにテーマ編集画面では普通にEnter連打で「次を検索」できるし、ヒットが無い場合でも検索ボックスが消えず入力し直せるので、やはり未実装なのかなという印象。
  →これ、実際にはこっちのほうがいいのかも(↓後述)。
(追記)
 「次を検索」はCtrl+G(+Shiftで前を検索)で可能でした。

»正規表現検索について: ▲目次
 検索ボックスの横にUse /re/ syntax for regexp searchという表示があります。
 このregexpというのは正規表現のことで、つまり「/re/構文にて正規表現検索が可能です」という意味です。
 正規表現はちょっと複雑ですが、上手く使えば柔軟かつ非常に高度な検索が可能になります。

 しばらく使い方が分からなかったのですが、検索構文を半角/で囲むことで使うことができます。(そういうことか……)
 とりあえず確認できた正規表現検索構文はこんなところ。
.(半角ピリオド)=「任意の一文字」
.+(半角ピリオド、プラス)=「文字列」
^=行頭、$=行末
(備考)
 \(※エスケープシーケンス)は動作するけど、/ " < >あたりのHTMLタグ関連の記号あってもなくてもヒットするみたい。

 これを踏まえて、すぐ使えそうなものはこんな感じ。
/.しい/ → 「新しい」「優しい」等がヒット
/style=".+"/ → 「style="(任意)"」がヒット
/^<br />/ → 行頭にある<br />(改行タグ)のみヒット
/^<br />$/ → 改行タグのみの行がヒット
/。$/ → 文末のみヒット
/span.+/span/ → SPANタグの範囲がヒット
※同一行に2つSPANタグがある場合は1つ目の開始タグ~2つ目の終了タグがまとめてヒットする

 挙動を見る限り行単位(正確には、改行までの単位)の検索となるようです。
 試したところ*(任意の数の文字列)は反応しませんでしたが、使用例のように.+で代用できます。
 
 個人的には/span.+/span/(↑画像)のような「タグ範囲検索」がめちゃくちゃ便利で、タグの誤入力検知にもかなり役立ちそうです。(辞書登録しとこかな)
 ちなみに1回検索するごとに検索ボックスが閉じるのですが、検索条件は保持されたままになるので新たに該当文字列を入力すると動的にハイライトされるという挙動でした。
 ボックスが閉じる挙動は「文字列を探す」には不便なのですが、入力しつつ特定文字列を検知するという使い方ができるのは良いですね。

 ちなみに正規表現検索→次を検索しようとしてCtrl+Fを押すと現在選択されている文字列が検索ボックスに入るという仕様なので、/ ~ /で入力した内容が消えてしまいます。
 これはいったん矢印キー右とか押してから再度Ctrl+Fを押すと同じ条件で次を検索できます。(ちょっと不便?)

 *

*タグが勝手に書き換えられる(※▼後述の仕様変更で実質的に対応済み
 これが致命的で、例えばこちらの自作した開閉ボタン。

 (←押すと表示)
INPUTテスト

▲CLOSE

 このボタンがある記事を新しいインターフェースで開いて、何も編集せず更新するだけ開閉できなくなることを確認しました。
 ↓こちらは、↑のボタンと同じもの(※IDだけ変更)を新しいインターフェースで更新しただけですが、すでにクリックしても反応しない状態になっています。

 (←押すと表示)
INPUTテスト

▲CLOSE

 当初ブラウザの調子が悪いのかと思ってタブの開き直し→ブラウザ再起動→別のブラウザでも発生……と検証していき、過去記事のボックスは普通に動いている→自分のコピペミス? と疑っていったところでようやく原因が特定できたのですがそんなことあんのかよというレベルだったのでいろいろと想定外でした。
  ※その発想は無かったよ!!

 今回の場合、labelタグに設定してあったfor属性無警告かつ自動的に削除されることが直接の原因でした。
 また、Aタグについてもonclick=が削除されていたので、「リンクをクリックすると動作する」ような仕組みを使っている方は大規模な影響が発生しかねないため注意してください。

 ちょっと調べたところ、たとえばAmazonリンク&amp;になったり、属性の順番が入れ替わったりしていました。
 大げさに言えばリンク改変として正常に動作しないどころか規約違反となる可能性すらあるためよろしくない挙動です。
 もう勝手にタグ改変してんじゃねえよフォントを大にして言いたいのはいったん置いといて、具体的に不具合が起こる可能性がある動作をまとめると以下のようになります。

»特定のタグがある記事を新しいインターフェースで開いて更新する(※対応済み)
 公開/更新ボタン(紙飛行機マーク)をクリックするのはもちろん、入力中のオートセーブが入った時点でアウトです。
 特殊なタグを使用しない人ならあまり気にしなくてもいいかも……と言いたいところですが、HTML5要素とは言えそこまで高度ではないfor属性がダメとなると厳しいです。
(追記)
 その後、さすがにデフォルトがHTMLビューに仕様が変わったらしく「開いただけでタグ改変」は発生しなくなりました。

»作成ビューで開く(※対応済み)
 おそらく根本的な原因作成ビューの仕様にあります。
 たとえば事前に入力内容をコピーしておき、HTMLビューにしてから貼り付ければ問題無く作業できるかもしれません。
 が、たとえ間違ってでもビュー切り替えボタンを押したらその時点でタグが一斉に書き換えられるのを考えるとあぶなっかしいです。
 最低でもHTMLビューをデフォルトにする、できれば作成ビューを無効にする……というのを任意で選べる設定でも無いととても使う勇気が出ないですね。

 ↓
 
*(追記)2020年7月中旬に確認したところ、ついにビュー切り替えボタンが移動&プルダウン式に変更されていました。(やったぜ)
 めちゃくちゃ押し間違えやすそうなとこに居座っていたクッッッソうざいボタンは、ひょっとして「ずっとこのままなん……?」と不安になっていたのですが、常識的な対応が取られたことで一安心。

(やったぜ)

(さらに追記)紙飛行機の「更新」、目の「プレビュー」ボタンはやはり分かりづらく不評だったのか、その後テキスト付きのボタンに変わっていました。
 また、紛らわしい「下書きに戻す」ボタンがプルダウンに格納されたのも良い感じ。

 ビュー切り替えボタンや「作成ビュー」自体は健在で、エディタの左上部にあります。

 さらに、今回の変更で切り替えボタンがプルダウン式になったため、うっかり押してもさらに「作成ビュー」をクリックしない限りは安全です。
 はっきり言って決定的と言っていいほどにめちゃくちゃ安心感が増した……のですが、逆に「作成ビュー」を使いたいという 奇特な 人にとっては手間が増えてしまったかも。
Blogger使いがあんなエディタを使うとも思えないが……)

 なお、現時点でHTMLビューからの画像投稿機能未だに無いし(※実装されました)、検索ボタンの挙動もあやしいままでした。
 しかし一番やべーとこスッキリと納得行く形で対応されたのでじゃあそろそろ使い始めようかなと思います。



 「新しいインターフェース」のダメなところは以上。



◇ここがいいね! 新しいBlogger ▲目次
 欠点だけではなんなので良いところも挙げていきます。

*管理画面が見やすい
 統計画面と同じく、投稿管理画面でもサムネが付いてすっきりしています。
 一画面の情報量はむしろ減っていますが、文字が大きくなったこと、投稿日やステータスが左側に来たことで一覧性も上がっている印象です。

 この管理画面の上部には過去記事検索フォームがあり、Google検索に似たオプション指定も用意されています。
 たとえば「title:ゲーム body:攻略」と検索すると記事タイトルに「ゲーム」、本文に「攻略」が含まれる記事の一覧が表示されます。
 詳しい指定方法は◆こちらの検索ヘルプで。
(ボックス横の黒い「?」マークから開けます)

 面白いのがURL変動式な点で、検索結果が出たページをブックマークしておけば直接検索結果にアクセスすることができます。
 過去記事をよく更新する人はもちろん、下書きに関数やらテンプレートやらを保存して管理するなんて使い方も考えられるしめちゃくちゃ便利そうなので、新インターフェースが落ち着いたら常用したいところです。

(追記)
 管理画面にて新しい記事を作る時は、Googleスプレッドシート等と同じく右下にある「+」ボタンだったのですが、いつの間にか+新しい投稿というボタンに変更されていました。
 どうも「+」ボタン=新規作成というのは直感的ではないし、「新しい記事を作れないよ!!」みたいなクレームが多かったのかも。
 PC画面は検索ページでも文章でも左上から見るし、やはり重要なボタンは左上に配置し、かつテキスト付き誰が見ても分かるのが大切だなと。


*「元に戻す/やり直し」でキャレットが移動するっぽい
 現行のHTMLビューでCtrl+Zを押して編集をロールバックした場合、「どこかが元に戻る」のですがどこが戻ったのか分からないのが地味に短所でした。
 これが新しいHTMLビューの場合直前の編集箇所にスクロールするようになっているようです。
 さらに言えば元に戻すボタン/やり直しボタンが用意されたため、マウスで操作できる点も地味によく効く改善となっています。

 ただちょっとよく分からないのがCtrl+Yの挙動で、これを押すと特定のタグが省略表示になるようです。
 同時に、左側の行数表示部分に展開用らしき三角マークが付くのですが、これをクリックしても展開できる時とできない時がありました。

 そもそも一般的にCtrl+Yは「やり直し」と思ったんですが、どうも謎機能に割り当てられているようです(解除するショートカットは発見できず)。(※追記↓)
 この表示自体は意欲的な新機能と思われますが、まだ細部の実装が甘いような印象。
 もうちょっと本格的に機能追加が進んでキーショートカット一覧とかが分かったらもっと使いこなしたいところです。

(追記)
 になる動作としてCtrl+Iで展開されるみたい。
 つまりCtrl+YorIで全体を省略表示にしたり戻したり……ということが一応可能。

 また、キーボード上ではYとIの間にあるUですが、試した感じだとCtrl+Zと同じ挙動が割り当てられているようです。
 ショートカットとしてはアンドゥ(Undo)の頭文字なので不自然ではありません。
 ついでに「やり直し」(Ctrl+Z操作のキャンセル)はCtrl+Shift+Zで、やはりCtrl+Shift+Uでも可能でした。


 *

*タグの色分け&記述ミス検知
 新しいHTMLビューではHTMLタグが色付けされるようになりました。
 自分が普段使っているフリーのテキストエディタでもこういった機能はありますが、ブラウザ側でも色分けされていれば編集/更新しやすくなるのは間違いありません。
 配色自体もうるさくない好印象です。

 ちなみに使っているのは◆サクラエディタです。
(久々に見たら約2年ぶりに2020年4月版上がっとるやん……)

 うれしい点としてはタグ文法ミスの対策機能も入っており、これはついに来たかという感じ。
 従来の管理画面だと、長文を書いた後に「タグが閉じられていません」「終了タグが開始タグと一致していません」という警告が出ると「何行目のどのあたり」といったヒントが出ないため対応が大変だったし、ひょっとするとそういうクレームに対応した新機能なのかも。

 どうも「基本的な文法を認識している」らしく、たとえば終了タグのみを記述するとタグの文字が赤くハイライトされるため早期に検知しやすくなっていました。

 また、左上に5つ並んでいるうちの右端に「HTMLの書式を設定」というボタンがあります。
 詳しい機能はよく分かりませんが、とりあえず開始タグのみ、たとえば<b>がある状態でこのボタンを押すと</b>補完されるようになっていました。
 なお、孤立した終了タグのようなエラーがある場合に押すとなんか全選択されるだけで何もしない(?)ような挙動でした。
 まあ機械的に直後に配置する程度に感じたので補助的な使いかたになりそうです。
(divタグの内部を字下げする挙動もありました)



*反応、動作が速い
 実際に使ってみると分かるのですが、まず入力が軽いです。
 旧デザインだと日本語変換等でモタつくことがありましたが、新デザインだとローカルのテキストエディタに近い感覚でした。
 また、更新時に画面が切り替わらない(通知が出る)形式なので、あちこち更新したい時に「ちょっとずつ書いて保存」がやりやすくなっています。

 初回の「公開」時は一覧画面に戻るが、「更新」時はそのままという挙動。


 あと、旧デザインではクラス名や属性等についてhrefのような基本構文ですら「文法エラーだよ!」みたいなうっとうしい下線だらけになっていました。
 これが無くなったことで動作だけでなく見た目の印象まで軽くなった気がします。



*(追加)特定タグに「字下げ」が入る
 新エディタだと、DIVタグの内側で改行するか閉じるタグを入力すると行頭に半角スペースが2つ入るようです。
 最初どこで改行してもこうなるのかと思ってフィードバック送っちゃったのですが、どうもボックスタグの字下げらしく、ボックスタグの外では字下げは発生しないみたいです。(なるほど)

 ちなみにTABキーを押すと普通にタブスペースが入力されますが、Shift+矢印(あるいはShift+Page Down)とかで複数行を選択してからTABキーを押すと選択行に対して字下げが行われるのも覚えておくと便利かも。
 また、字下げしている行でShift+TAB字下げを1段階解除することもできました。
 ……みたいなこともあるので、やはり詳細なショートカットキー一覧が欲しいところです。



*(追加)ボックス選択が可能
 いろいろキーボードで試したところ、箱型選択とか矩形選択とか言われるアレが可能でした。
 操作はAlt+ドラッグで、要するに行頭の数文字以降のみを複数行選択することができます。
 ある程度機能性のあるテキストエディタ(サクラエディタとか)ならよくあるやつですが、ブラウザ上でこれができるのは珍しいかも。
(Altを押すとカーソルがになる)

 ただし全角は考慮されていないらしく、タグ(半角文字列)と日本語が混在する環境ではガバガバな挙動でした。
 また、おそらく行頭からの文字数で機械的にカウントしているのか、URL等のある長い行(というか折返しのある行)についても「見た目」とは異なった選択になる場合がありました(まあこれは仕様でもいいかも)。
 ついでに言うと、ボックス選択後にコピーしたものはベタテキストとなり、行の途中や字下げ範囲から貼り付けても普通に改行されます。
 まあ特殊選択ができるだけでも十分なのですが、全角/半角については改善してほしいところです。



*(追加)更新ステータスが分かりやすくなった
 ↓画像のように、編集中はクラウドマークに斜線、更新すると「やったぜ」的なチェックが付くようになっていました。
 初期の新デザインで「更新」ボタンを押すと、通知は出るものの見た目が変わらなかったため更新されたのかが直感的に分かりづらい状態だったのですが、これで一目瞭然になりました。
 自分もフィードバックを送っていた部分だったし、こういう明らかな「ちょっとした改善」が増えてくると信頼感が増しますね。
(すごくいい)




 「新しいインターフェース」の良いところは以上。



 ▲目次に戻る

 以上、そりゃあないぜ素敵やんと思うポイントが混在する新しいBloggerの雑感でした。
 個人的にはフリーのHTML文法チェッカーでも導入しようかと思っていたので、特にタグの配色、エラー検知あたりはとても好印象だし、使えるなら今日から使いたいところです。
 しかし今のところはそれを打ち消して余りあるやべー挙動があるので改善を待ちたいところです。

 その後の機能改善でだいたい解☆決しました。(やったぜ)

 全国に数十人~数億人居るかもしれないBloggerガチ勢の皆さんも、いろいろ試して気付いたことがあれば熱烈なフィードバックを送ってみてください。
 ではまた。

*その他の■Blogger関連の記事


俺は待ってるぜ / 石原裕次郎

0 件のコメント:

 ※コメントは管理人の承認後に表示されます。
 (気づかなくて遅れることが多いです)

コメントを投稿