2022-08-24

代替テキストが指定されていないimg要素をハイライトするブックマークレット

技術

……というものを書いたので、どうぞご利用ください。

let.hatelabo.jp

(() => {
  const highlight = (element) => {
    element.querySelectorAll("img").forEach((img) => {
      // alt属性が指定されていたら緑の線、指定されていないなら赤線で囲まれる
      img.style.outline = img.getAttribute('alt') !== null ? "1px solid green" : "2px solid red"
    })
  }
  highlight(document.body)
  const observer = new MutationObserver((ms) => {
    ms.forEach((m) => {
      m.addedNodes.forEach((node) => {
        if (!(node instanceof HTMLElement)) {
          return
        }
        highlight(node)
      })
    })
  })
  observer.observe(document.body, { childList: true, subtree: true })
})()

2022/8/24 11:25 追記: 普通のページでは実行した瞬間にハイライトされるほうが明らかに便利なので、そのように修正しました。

みどころ

MutationObserver を使っているので、いちどブックマークレットを実行すれば、同じページ内で要素が動的に増えてもハイライトされます。シングルページアプリケーションの動作確認にも使えます。

展望

こういう機能を持ったブラウザ拡張があったらいい気がする。というか既にあるのでは？？知ってる方がいれば教えてください。

2022/8/24 11:45 追記: 他の手段

id:nanto_vi さんにCSSを使って検査する方法について教えてもらいました。「alt 属性が指定されていない」という条件であればCSSセレクタで表現できるので、こっちのほうがリーズナブルでよさそうですね。

img[alt] {
  border: 1px solid green;
}

img:not([alt]) {
  border: 2px solid red;
}

digiper.com

www.mitsue.co.jp

2022-08-23

コミケの出展に備えて買ったもの

個人サークルで参加するのは初めてで、なにも持っていないのでひと通り買った。

ホワイトボードノート

値段や休憩しているかどうかなどを書くのに便利だと思う。それはそれとしてPOPも作ったほうがよさそう。

POPスタンド

ホワイトボードノートを置くのに使う。見本誌も展示したいので2つ買ってもよかったかもしれない。

養生テープ

見本にベタッと貼って目印を付ける用。まあ普段の生活にあっても困らないと思う。

金庫

お金をそのまま置くのは気が引けるので買った。持ち運びまくると金庫の中で小銭がグシャグシャになる。

名札

自分自身が顔と名前がなかなか一致しないタイプだし、とくに初対面の人が多くなると思うので、名前が分かったほうがいいと思って買った。買ったけどとくに使ってない。

かばん

引っ越しのときにエコバックを捨てたので、大きめのかばんが欲しくなっていた。ちょうどいいので普段づかいにもなりそうなものを探して買った。思ったよりは小さかったけど荷物はなんとか入った。もっと大きくてもよいかもしれない……。

布

布は東急ハンズで見つけられなかったので、あの布屋というところで買った。サイズ指定とか分からないので面倒だったけど、最初から目的が決まっている布なら話は早い。

コイントレー

感染対策。

2022-08-23

TODOコメントを列挙して棚卸しする行い

技術

表題のような活動をやった。今あるTODOコメントを全部抜き出して、Scrapboxのページに並べた上でコメントしていく。すでに解決しているもの・今のうちに対応を考えておくべきもの・まだ前提が揃っていないものなどいろいろあると思うけど、現状どうなっているのかを眺めて議論できるのがいいと思う。

gitを使っているなら、以下のようなコマンドで簡単にTODOコメントを列挙できる。ファイル名だけでなく行番号も入っているほうが見やすいと思ったので含めてみている。

$ git grep -niE '\btodo\b'

これぐらいのコマンドで眺められるので、ちょっと手があいたときにやってみるとよさそう。fixme xxx hack みたいな語でgrepしても面白いかも？

スペイン語には todo という単語があるので、引っかかった場合はうまく除外してください。ローカライズ文言に含まれていたので手でちまちま除外していた……。

2022-08-22

自分の言葉で書き残しておくこと

過去にあった出来事を振り返ってみると、自分はなぜあのときこうしたのか、他にもっとよい方法がなかったのか、と思い悩むことがある。そのとき何を考えていたのか、他に選択肢があったのかどうか、思い出せない場合はそれ以上掘り下げるのが難しくなる。記録が残っていたら、それらをもとに状況を思い起こせるようになるはず。自分の手元に写真も残っていない時期に、自分が何を考えてどう行動したのか、はっきりと思い出せなくて苦しくなることがまれによくある。気持ちよく忘れるために書き残しているのではないだろうか。

仕事をするにあたっては、いろいろな解決策やトレードオフがあって、そのときそのときに応じた判断を迫られることがある。何が起こっていて、どういったことを調べたり考えたりして、最終的にこうやって実現した、ということはできるだけ書き残すようにしている。書き残しておけば、あとで見返したときに本当によかったのか、いまいちだったのか、もっといい方法があるのか振り返ることができるはず。後から評価可能であるかどうか、が自分の行動基準の1つになっているのかもしれない。これを生活に置き換えると、もっと日記を書いたらいいということになりそう。

今この瞬間はこういうことを考えて、キーボードを叩かずにはいられなかった、ということもここに記録されて気持ちよく忘れられることになる。