新しい取引ナビでメッセージを書いていて、こう感じたことはないでしょうか。
入力欄が狭い。
3行くらい書くと、もう書いている場所が見えなくなります。全体を読み返すには入力欄の中をスクロールすることになり、送信前の確認がしづらくなります。
旧画面では、こうはなりませんでした。文章が長くなれば、その分だけ入力欄が下に伸びていったからです。
気のせいではなく、実際に仕組みが違います
新旧の画面の HTML を読み比べたところ、はっきりした違いがありました。
旧画面の入力欄には、高さを自動調整する仕組みが組み込まれていました。
やり方が少し変わっています。textarea という部品は、本来は高さが固定で、文章が増えても勝手には伸びません。CSS だけでは「いま何行分の高さが必要か」を測ることもできません。
そこで旧画面では、画面外に見えないコピーの入力欄を用意し、そちらに同じ文章を流し込んで実際の高さを測り、その数値を表示中の入力欄に反映するという方法をとっていました。入力するたびにこれが走るので、書けば書くだけ滑らかに伸びていきます。
補足: 使われていたのは react-textarea-autosize という、React 向けの自動リサイズライブラリです。同種の仕組みは多くの Web サービスで採用されています。
新しい取引ナビには、この仕組みがありません。 単純に高さが固定された入力欄になっています。だから何行書いても広がりません。
「使いにくくなった」という感覚は、気のせいでも慣れの問題でもなく、機能が一つ減ったことによるものです。
手動でも広げられません
固定なら手で広げればいい、と思うところですが、それもできません。
textarea には通常、右下に斜線のつまみが表示され、ドラッグで大きさを変えられます。新しい取引ナビでは、この操作も効かない状態になっています。
つまり、長い文章を書くときの選択肢が残されていません。
実務でどう効いてくるか
短い定型文なら困りません。「発送しました」の一言なら3行も要りません。
問題は、丁寧に書く必要がある場面です。
- 商品の状態について、写真では伝わらない部分を説明する
- 発送方法や日程の変更を、事情とあわせて伝える
- クレームに対して、事実関係を整理して返信する
- 同梱やまとめ取引の条件を、金額を含めて案内する
こうした文章は、書いたあとに読み返して整えます。全体が一度に見えないと、この読み返しができません。 入力欄の中を上下にスクロールしながら確認することになり、誤字や重複に気づきにくくなります。
1 日に何件も取引を処理していれば、この差は積み上がります。
AucKit のクラシック表示では、旧来の挙動に戻しています
Chrome 拡張機能 AucKit の「取引ナビ クラシック表示」は、新しい取引ナビの画面を、従来の 1 画面レイアウトに組み立て直す機能です。
このクラシック表示でも、当初はメッセージ欄が固定高さのままでした。旧レイアウトの見た目は再現していたものの、入力欄が伸びるという挙動までは再現できていなかったためです。この点について、以前の書き心地に戻してほしいというご要望をいただいていました。
v0.6.16 で対応しています。
- 入力するたびに必要な高さを測り、その分だけ入力欄が伸びます
- 一定の高さを超えると、それ以上は伸びず入力欄の中でスクロールに切り替わります(長文で画面が埋まるのを防ぐため)
- テンプレートを挿入したときも、内容にあわせて高さが調整されます
- 送信して入力欄が空になると、元の高さに戻ります
- 横方向は手動でのリサイズが可能です
旧画面と同じく、書いた分だけ見える状態で書き進められます。
使い方
拡張機能をインストールすると、取引ナビの画面右上に切り替えボタンが表示されます。「クラシック表示」を押すと、送料表・お支払い情報・お届け先情報・発送連絡ボタン・取引メッセージが縦に並んだ従来のレイアウトになります。
「元の画面」を押せばいつでも戻せるので、両方を使い分けることもできます。
導入手順や、そのほかの対応内容はヤフオクの取引ナビを従来の 1 画面に戻す方法にまとめています。
まとめ
新しい取引ナビでメッセージ欄が狭いのは、旧画面にあった「入力量にあわせて高さを測り直す仕組み」がなくなったためです。手動でのリサイズも効かないため、長文を書く場面では全体を見渡せません。
拡張機能側でこの挙動を戻せば、書き心地は旧画面と同じになります。取引メッセージを丁寧に書く機会が多い方ほど、差を感じやすい部分だと思います。
3 タブ化そのものの経緯についてはヤフオクの取引ナビはなぜ変わったのかをご覧ください。