近い話で落書きをすることも多かった。これは多分結構親は困っていたんじゃないかと思う。好きなやつは、廊下の壁に結構大きく「J5」って落書きで、小さい頃から父親の影響で F1 を見ていたので「Fと1があるならJと5もある*1」という論理で書いたもの。引っ越すまで長らく残っていたはず。他にもテーブルの天板の裏とか、学習机とかに多く落書きが残っていて、どれもそれなりに記憶がある。
*1:ちなみに F1 が一番すごい場所なので J5 は下位リーグという意識だった
冷蔵庫にシールを貼る
小さい頃はシール貼るの好きだったのだけど、今こう見るとさぞ親は大変だったろうと思う。
冷蔵庫やタンス、食器棚に貼りまくっていて、しかし何らかの基準みたいな感覚があり、それに沿って貼っていた覚えがある。あとシールのシートって剥離紙の上に粘着力のある紙が型抜きされている状態なので、実は枠も貼れることに早々に気づき、これは面白いなと型抜きされたシールを全部貼ってから枠も剥がして冷蔵庫に貼る、という行いもしていた。
親は特に剥がすことはしておらず (剥がさないと困るものに貼っていたら剥がしていたとは思う) 、食器棚やタンスは未だに現役なのでシールも残っている。小さい頃の背丈で届く範囲、特に立ったり座ったりしたときの目線の高さに貼られているのが自分で微笑ましい (これは自分が育児をしていないから気楽なだけではある)。
弟もシールを貼るのが好きだったけど、弟はめちゃくちゃ重ね貼りするタイプで、食器棚の扉に厚くなったシールが存在している。貼り方にも個性が出る。
車のガム
スーパーに買い物に行ったところ、復刻パッケージのロッテガムが置いてあった。微妙にテンションが上がり写真がめちゃくちゃ斜めになっている。
こういう自販機を見たことがあるわけではないけど、コイン投入口の傷とか端っこの錆とかが細かくて、こだわりを感じる。
ブルーベリーと梅がめちゃくちゃ懐かしくて、レモンのは知らなかった。ブルーベリーも梅も、よく父親の車のダッシュボードに入っていて、車に乗るたびに喜んでもらっていた (車で酔いまくる子供だったので、その対策でもあった)。スーパーから家に帰ってきてブルーベリーのパッケージをよく眺めたらそういう記憶が蘇ってよかった。梅は売り切れていて無念。また今度。
昔は永遠に味があって永遠に噛んでいたけど、今の鈍感な舌ではすぐに味がなくなった。当時親がすぐ捨てていたのも、今になって頷ける。
昔あったか覚えてないけど、包み紙？銀紙の外の飾り紙？に点線が入っていて、切れば折り紙にできるようだったので、折り鶴にした。折り鶴も小さい頃からよく折っていて、手順は言語にならないが手がなんとなく覚えているという部類の記憶。こないだ新幹線の駅で機嫌の悪い子供に折ってあげようか迷った (スマートEXの乗車記録の紙を正方形に切って折るまでを立ったままやったけど時勢とタイミングが合わなかった)。東京から京都まで鉄道の窓枠を旅した折り鶴が何羽いるか気になる。
祖父母家への帰省はいつも父親の車だったけど、両親家への帰省は新幹線で、しかし着いたときの久々の妙な居心地と帰りの名残惜しさは変わらないものだなと思う。強いて言えば大量に餅を持たされると新幹線では肩にくる。
GitHub ActionsでJestのログに色をつけられる
- Jest は TTY では色つきのログを出すが、そうでないときは色なしになる https://jestjs.io/docs/cli#--colors
--colorsオプションか、環境変数でFORCE_COLOR=trueするととにかく色つきのログを出せる
- GitHub Actions では色つきのログに対応している A better logs experience with GitHub Actions | The GitHub Blog
That’s why we are increasing the color support, including:
https://github.blog/2020-09-23-a-better-logs-experience-with-github-actions/#opening-the-door-to-a-more-colorful-experience
- ANSI colors
- 8-bit colors
- 24-bit colors
ということは、 GitHub Actions で Jest の実行時に色つきログの指定をすれば、色つきで見ることができるようになる。どのテストが落ちているのかとか、ここで落ちましたというコード自体とかが見やすくて便利。
追記
テストが落ちたときのアノテーションを diff の画面につける GitHub Actions Reporter の機能は Jest にもついているので、どこが落ちたか自体はそっちで見れるという話はある https://jestjs.io/blog/2022/04/25/jest-28#github-actions-reporter 。今回書いたのはログ自体を見たいとき便利というくらい。
https://jestjs.io/blog/2022/04/25/jest-28#github-actions-reporter
追記2
興味を持った同僚がどんどん集まって色々見てくれて、
- 内部で使ってる Chalk では GitHub Actions で色つきで出力できるように対応済みっぽい
- Jest は v29.3.1 時点で Chalk v4 を使っている
- Chalk v5 は ESM (！) Release v5.0.0 · chalk/chalk · GitHub
という感じで難しそうな局面だった。どうしても今すぐ Chalk 経由で GitHub Actions 上で色がつくように Jest を対応させたかったら、 Chalk v5.2.0 の色つける変更を Chalk v4 にバックポートするみたいになるのかな……。
拡張機能「twitter画像原寸ボタン」v4.2.0公開
Microsoft Edge 版: twitter画像原寸ボタン - Microsoft Edge Addons
拡張機能「twitter画像原寸ボタン」の v4.2.0 を公開しました (ボタンを押して審査中なので数日くらいで公開されるはず)。 Manifest V2 終了対応の準備リリースで、特に機能は変わりません。 localStorage に設定内容を保存していたのを chrome.storage に移し替える変更で、新しく storage 権限が必要になって追加したので、「エラー」とか出てそれを許可するか聞かれるかも (もし出たら、許可してもらえれば使えます)。
追伸: v4.1.0 の記事書き忘れてた。画像が 4枚ある場合に Original ボタンを押した際、 2枚目と 3枚目の順番が逆だったのを修正しました (Chrome Web Store にフィードバックもらっていたのに見逃していてすみません)。以前はなぜか Twitter 公式 Web の (DOM の) 順番的に 1, 3, 2, 4 となっていたので入れ替えて開いていたんですが、最近ちゃんと公式で 1, 2, 3, 4 に変わったみたいです。尊い変更ですね。
ここから 1〜数ヶ月くらいして大丈夫そうだったら Manifest V3 に更新するかな〜という展開 (前に別の拡張機能で練習は済んでいた *1 けど元気がでなくて置いていた)。ちなみに本当は 2023/1 には MV2 は新規に submit できなくなる予定だったのが、 Service Worker への移行が大変という拡張機能開発者の声によりスケジュール未定 (2023/3 までには何か決めるらしい) となっています。とはいえすでにだいぶサボっていてギリギリではあるので早めにやっておきたい。
For this reason, we’re postponing any January experiments to turn off Manifest V2 in pre-release channels of Chrome and changes to the featured badge in the Chrome Webstore, and we'll be evaluating all downstream milestones as well. Expect to hear more about the updated phase-out plan and schedule by March of 2023.
https://groups.google.com/u/0/a/chromium.org/g/chromium-extensions/c/zQ77HkGmK9E?pli=1
追記: そういえば ESLint と Prettier と TypeScript と Jest の感じがうまくいかなくて厳しかったので、 linter/formatter は Rome にしてしまった。 VSCode 上での format on save も動くし特に困っていない。
aタグで#topにリンクするとページ先頭にスクロールするのは仕様
はてなエンジニア Advent Calendar 2022 - Hatena Developer Blog の 2023/1/5 の記事です。 
id:hogashi です。
3行
- a タグの href 属性に
#topと書くと、クリックしてページの先頭にスクロールできる、という話をしているのを見て、 - それって仕様なんだっけ、と思って調べたところ、
- 仕様でした
仕様を眺める
MDN の a タグのページにちょろっと書いてあって、 HTML の仕様に定義されているよ、とある <a>: The Anchor element - HTML: HyperText Markup Language | MDN 。
Note: You can use
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_pagehref="#top"or the empty fragment (href="#") to link to the top of the current page, as defined in the HTML specification.
リンク先はここ https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier で、 "Scrolling to a fragment" という仕様。パーセントデコードした fragment が top という文字列だったら、 "top of the document" が指定されることになっている。つまり a タグじゃなくても、 URL に #top と書いたらページ先頭にスクロールできる。
追記: ただし id="top" な要素がある場合は、そちらにスクロールされます。これは手順の上で先に採用されるためで、この記事の最後に詳しく追記しました。
If decodedFragment is an ASCII case-insensitive match for the string
https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifiertop, then return the top of the document.
"top of the document" のときどうなるかは https://html.spec.whatwg.org/multipage/browsing-the-web.html#scrolling-to-a-fragment:top-of-the-document に書かれていて、ページの先頭にスクロールするようになっている。
Otherwise, if document's indicated part is top of the document, then:
https://html.spec.whatwg.org/multipage/browsing-the-web.html#scrolling-to-a-fragment:top-of-the-document
Set document's target element to null.
Scroll to the beginning of the document for document. [CSSOMVIEW]
Return.
"Scroll to the beginning of the document" の部分は CSS の仕様 https://drafts.csswg.org/cssom-view/#scroll-to-the-beginning-of-the-document にリンクされていて、その document の viewport のスクロール位置を先頭にするみたいな手順が書かれていて細かくてすごい。その document のということは、 iframe で表示しているときなどは、そのフレーム内の先頭へのスクロールになるわけですね。
ちなみに HTML での #top の挙動で使われる仕様ですみたいなことが端書きされていて丁寧。
Note: This algorithm is used when navigating to the #top fragment identifier, as defined in HTML.
https://drafts.csswg.org/cssom-view/#scroll-to-the-beginning-of-the-document
追記1:
Twitterは知見の塊か…
— 長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro (@hiro_ghap1) 2023年2月4日
aタグで#topにリンクするとページ先頭にスクロールするのは仕様https://t.co/j67qDBUpYg
それ自体は仕様だけど、クリックしてページ先頭へ遷移後に Safari ではフォーカスを失い、Firefox ではフォーカスの移動がなかった(#top が設定されたaタグのままだった)
勉強になった… https://t.co/CaBRTjQyF9
この記事を見てもらっていたようなのですが、確かにフォーカスなど他の挙動は全く見ていませんでした。 #top のときページの先頭にスクロールする仕様自体、古いブラウザの実装を互換性のために HTML の仕様に入れているのでは、という話もあるので、この仕様を積極的に利用していくことはあまり推奨されないかもしれません (つまり先頭に戻る用の要素を別途置くのがよい)。
おまけ
ちなみに 「a top MDN」みたいな検索キーだと、今回の話題が全然ヒットしなくて難しかった (CSS の top とか window.top とかが出てきてしまう) ですが、 a タグは「anchor」にしたり、記号込みで完全一致させるために「"#top"」としたりするとうまいことヒットする感じでした。僕はあんまりうまくいかなくて && a タグのページに記述があるの見逃してて、色々試したら stackoverflow が出てきて MDN へのリンクをゲットできた……(たどり着けているので良い)。
ちなみに2、 window.location.hash が変わったときは hashchange イベントが発火して便利 Window: hashchange event - Web APIs | MDN 。今回の記事の iframe 部分の URL 表示に使って初めて知りました。
追記2: id="top" な要素があるときは？
ブコメで予約語という単語を見て、たしかに id="top" なタグを書くとどうなるのか？？？ と思って glitch で試しました。id="top" なタグにスクロールされます。
これは、仕様でいうところの indicated part を決める手順において、そういう要素が見つかったときはそっちが先に採用されるためです (手順4で終了するパターン。先頭に戻るのは手順9)。上のほうではこの手順のひとつだけを抜粋してしまったので紛らわしかったですね……。
For an HTML document document, the following processing model must be followed to determine its indicated part:
https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier
If fragment is the empty string, then return the special value top of the document.
Let potentialIndicatedElement be the result of finding a potential indicated element given document and fragment.
If potentialIndicatedElement is not null, then return potentialIndicatedElement.
Let fragmentBytes be the result of percent-decoding fragment.
Let decodedFragment be the result of running UTF-8 decode without BOM on fragmentBytes.
Set potentialIndicatedElement to the result of finding a potential indicated element given document and decodedFragment.
If potentialIndicatedElement is not null, then return potentialIndicatedElement.
If decodedFragment is an ASCII case-insensitive match for the string
top, then return the top of the document.Return null.
