transform scale使用時にオリジナルのボックスサイズを縮小する
css transform scaleとは
cssのtransform: scaleを使うと要素を任意の倍率に縮小・拡大できる
ただしボックスサイズには影響を与えないのでzoomと違って縮小した場合に元のボックスサイズが維持される
前提
縦横サイズが固定などでわかっていること
やり方
対策としては小さくした分マイナスマージンを入れてボックスを小さくしてやる必要がある
<div class="half-container"> <Component /> </div>
.harf-container { /* 要素の大きさを半分に */ transform: scale(0.5); /* 縮小したものを左上に */ transform-origin: top left; /* 右側のspaceを打ち消す */ margin-right: calc(200px * (1 - 0.5) * -1); margin-bottom: calc(200px * (1 - 0.5) * -1); }
ちなみに
ボックスサイズがわかっていないパターン、つまりcalc(100%)でやろうと思ったがうまくやる方法が思いつかなかった…
検索しているとjsでサイズを取ったりするパターンなどもあるみたいだが、そこまで複雑にしたくなかったのでcssだけでできるやり方として上記を使うことにした。
ちなみにサイズに関しては仕事で使っているtailwindだと、themeに定義しているのでtheme()で取り出す事ができるの面白かった
chakra-uiでthemeからカラーコードを取得する
chakra uiのテーマ機能を使用しgray.300のような値を特定のカラーコードに変換できるようになっているが、chakra uiのコンポーネントでは無いものに値を渡すに当たってカラーコードハードコードするのも…と考えていた所、ちゃんとカラー文字列をカラーコードに変換する方法が用意されていた
（ドキュメント見てても全然見つけられなかった…）
chakra uiが用意しているuseTokenを利用する
function Example() { const [gray300] = useToken( 'colors', ['gray.300'] ) return ( <h1 style={{color: gray300}}>hoge</h1> ) }
これでテーマのgray.300を取り出す事ができる
全然関係無いけどtailwindとかだとどうやって取り出すのかちょっと気になった
参考
ラズパイとお別れしてミニPCに置き換えた
学生時代に手に入れたラズパイ2 model bが壊れてしまったので代わりとしてミニPCを買った。ネイビーのやつより黒っぽいグレーの方がいいなと思ってグレーのメモリ8G版を購入した。
外観
商品画像だとグレーっていうよりブラックだと思ってたのに、届いた商品見たらだいぶグレーで全然ブラック感なかったのはちょっと悲しい。画像はiphone7との比較。ラズパイよりは大きいが会社から貸与されてたmac miniよりだいぶ小さいので満足。
性能レビュー
とりあえずラズパイで動かしてたアプリ類を移してみた所、そもそもLANポートが100Mから2.5Gになったのでiphoneとの通信とかその他諸々が爆速になった。有線接続したまともなLANポートのpcで初めてネット速度を測ったら*1、インターネットへの通信が500Mbpsを超えてて自宅のlanそんな早かったのかと驚いた。
sdからssdに変わったのもあってR/Wが安定したのもとても良い。
ubuntuに入れ替える
そもそもこのミニpcにはwin 11 proが入っていたがwinサーバーを運用することは今後仕事でも無さそうだし、いつも通りubuntuをクリーンインストールして使っている。
インストール自体は特につまずく所も無くいつも通りだった。ただ有線が爆速で嬉しくなってて気づいてなかったが、ubuntuにするとこのミニpcに入っているwi-fi 6のモジュールが対応しておらずwifi接続を使うことができない。インストールしたubuntuが22.04 LTSだったので最新にしたら使えるようになるのかと思ったがgihyoの記事を見るに23.04にしても使えないみたい。
感想
最近ラズパイが結構いい値段するので、値段下がらなければ…と考えてたけど結局下がる事はなかった。そんな感じで購入した割にはすごく満足度が高い。元々GPIO使ってなかったし。
ちょっと気になる所としては、主な用途が日次処理で基本何もしてないのだけど、ラズパイに比べると消費電力は大きいはずなので24h/365day動かした場合に電気代どうなるのかはとても気になる。
またこの記事書くためにamazon見たら買ったときにはなかった16GBのグレーが3000円位の差で販売されててそっちがよかったかもしれん…
