やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

はてなブログの予約投稿で日付UIを来月にするとクラッシュする(日付が見切れる)

 ずっと気になってる件。未だに修正されない。私の環境だけ?

症状

 問題が二つある。

  1. 日付UIで日にちが見切れて見えない(年と月までは見える)
  2. 日付UIを来月にするとクラッシュする

 昔のアプデでUI変更されてからこの不具合が発生するようになった。

再現手順

 まずは問題の日付UIを表示させる。

  1. はてなブログにログインする
  2. 記事の管理画面にアクセスする
  3. 記事を書くボタンを押す
  4. 画面右のサイドバーを開閉するボタンを押して開く
  5. 画面右の設定オプションボタンを押す
  6. 投稿日時のUIがある

1. 日にちが見切れる

  1. 投稿日時の日付UIでカレンダーアイコンを押す
  2. 日付ダイアログの右下にある今日リンクを押す
  3. 日にちが見切れて見えない(年と月までは見える)

 上記画像では2025/03/30を入力した。が、日にちの30が見切れて見れない……。

 ブラウザのズームも100%なのでズレる原因はないはず。謎。

2. 来月にするとクラッシュする

  1. 投稿日時の日付UI右端のカレンダーアイコンを押す
  2. 日付ダイアログの右上にある↓ボタンを押す
  3. ブラウザがフリーズし、クラッシュする

 意味不明。日付UIはHTML標準機能のはず。クラッシュするようなお粗末なものとは思えないのだが? はてなが何かの処理を埋め込んでクラッシュさせているのか?

回避策

  1. 日付UIの↑や↓を押さないように注意する
  2. 日付ダイアログの今日ボタンを押す
  3. 日付UIに年月日が入力されるので、キーボードで入力する
    1. タブキーで年月日をフォーカスする
    2. 上下キーで値を変更する。または直接数字キーで入力する
  4. 日付UIのカレンダーアイコンを押して正しいか確認する
    1. 日にちは見切れて見えないので、ダイアログ表示しないと確認できない…

 面倒。昔はちゃんと日にちまで見えて楽だったのに……。治してはてなさん。

原因不明

 原因を特定するためにデベロッパーツールを起動したが、エラー表示されなかった。なのにフリーズしてクラッシュする。謎。

 日付UIを右クリックしてメニューから検証をクリックする。

 日付UIのHTML要素コードが表示される。右クリックしてCopy→outerHTMLでコードをコピーしたのが以下。

<div class="datetime-input"><input max="9999-12-31" type="date" class="datetime-input-date" data-testid="date-input" value=""><div class="datetime-input-time-wrapper" style="display: inline-block;"><span class="AutoComplete"><input type="text" class="datetime-input-time" autocomplete="off" placeholder="00:00" pattern="\d{2}:\d{2}(:\d{2})?" data-testid="autocomplete-input" value=""></span></div></div>

 このうちクラッシュするのは以下日付UI。

<input max="9999-12-31" type="date" class="datetime-input-date" data-testid="date-input" value="">

 まずはこれを以下のように要点だけ絞ったコードにする。

<input type="date">

 それをindex.htmlファイルにして、ブラウザ起動し、↓ボタンを押す。

 すると、ちゃんと正常に動作した。

 つまりHTML標準機能だけならフリーズもクラッシュもしない。はてなブログが何らかの機能を実装したせいでクラッシュしているものと思われる。たぶんaddEventListener()メソッドで処理を挿入しているのでは? そこまでコードを追跡できてないから知らんけど。

 ネットでググっても誰も何も言っていないので、私の環境だけかもしれない。

 OSはRaspberry PI OS、ブラウザはChromium 92。古いのでそのせいかもしれない。

 でも日付が見切れるのはどうかと思う。流石にそれくらいは古い版とか関係ないのでは?

 はてなさん治して!