text.hmsk.me

hmsk.me を更新した

September 20, 2020

code

fontawesome.comのライセンスが切れたようで、各サイトへのリンクに使っていたアイコンが全く出ない奇妙なサイトとなっていたのに気づいてバタバタと修正した。転職活動とまでは行かずとも、テック系の人材採用サービスにレジュメを投げて、市場での給与の感覚を年1度くらいは掴むようにしており、そのタイミングで自分のウェブサイトを久しぶりに見たのであった。

ウェブサイト上で設定をしておくだけで、使用するアイコンに合わせて最適化されたリソースを返してくれるサービスに安易に乗っていた(Kickstarterで応援したときにライセンスを貰った)のだが、今後も外的な要因でこれが起きるのとすぐに気づけないは困るので、アイコンのSVGを落として(これについてはずっとライセンスが有効っぽい)きてSVGスプライトを組み立てて使うように書き換えた。

Elmで外部ファイルのSVGを使うときに、ベタに HTML.nodeAttributes.attribute<svg> タグを吐かせるだけではファイルが読み込まれてくれなくて1時間くらいハマってしまった。elm/svg を使うというのがたどり着いた解決方法で、特定ネームスペースにまつわるタグは nodeNS を通さないと動かないようだった。VirtualDOM -> DOM の処理って最終的 HTML を突っ込んでいるくらいに思っていたけど、DOMのオブジェクトを構築して渡しているのだと考えればそういう普段気にしていないメタ情報が要るのだろう。

外部ファイルの読み込みだから副作用として扱われるから抑制されているんだろうなんて思っていたが見当違いだったみたい。インスペクタから svg のHTMLを差し込んだときには普通に読み込まれたのが混乱した原因で、そういうときはブラウザが勝手にネームスペースの世話とかしてDOMを構築してくれているってことなんだろうなあ。

trustedNode : String -> List (Attribute msg) -> List (Svg msg) -> Svg msg
trustedNode =
  Elm.Kernel.VirtualDom.nodeNS "http://www.w3.org/2000/svg"

svg : List (Html.Attribute msg) -> List (Svg msg) -> Html.Html msg
svg =
  trustedNode "svg"

use : List (Attribute msg) -> List (Svg msg) -> Svg msg
use =
  trustedNode "use"

ついでに表示されるコンテンツを入れ替えたり、サイトを開いたとき(あるいはタブがアクティブになったとき)にリングコマンドが自動的に開かれるようにした。

この記事を出そうとしたら依存しているライブラリがリネームに伴いダウンロードできなくなっており、こちらもこちらでElmのパッケージ群を全部更新するに至った...