React Transition Group と class の状態

 React Transition Group の CSSTransition はtransitionのためのclassをelementに付与してくれるのだけど、使う機会があるたびにどういう状態があるのか思い出してる気がするので、図にしておくことにした。

Linux/Windowsデュアルブート環境のインストール方針

自分のWindows PCはLinux (Ubuntu) をインストールしてデュアルブートにすることが多い。 端末のタイプによってインストールの仕方が異なり、このやりかたが参考になるかもしれないので書いておく。

1. 空のディスクが複数ある場合→1台ずつWindows, Linuxとインストール
2. 空のディスクが1つのみの場合→Windowsをインストール後空いたところにLinuxをインストール
3. Windowsが入ったディスクがある場合→パーティションを縮小してLinuxをインストール

空のディスクが複数ある場合

複数のディスクがPCに搭載できる／したい場合、それぞれにインストールする。まずWindowsをひとつのディスクにインストールしてから、別のディスクにLinuxをインストールする。 一番無難なかたち。

この場合では、データの受け渡しをするためのNTFSパーティションをLinux側のディスクにちょろっと用意しておくと、Windows側のCドライブをマウントしなくてよくて便利だったりする (NTFSマウントはなんだかんだあることがあるので)

空のディスクが1つのみの場合

ディスクが1つのみの場合、Windowsインストール時に容量を指定して（例えば半分）パーティションを作成し、インストール後、 空いた領域にLinuxをインストールする。 手元にあるPCがこのパターンで、こんな構成。

ディスク /dev/nvme0n1: 931.53 GiB, 1000204886016 バイト, 1953525168 セクタ
Disk model: WDS100T1X0E-00AFY0                      
単位: セクタ (1 * 512 = 512 バイト)
セクタサイズ (論理 / 物理): 512 バイト / 512 バイト
I/O サイズ (最小 / 推奨): 512 バイト / 512 バイト
ディスクラベルのタイプ: gpt
ディスク識別子: B1EA5819-908C-4E4F-8542-CCBD4314BXXX

デバイス        開始位置   最後から    セクタ サイズ タイプ
/dev/nvme0n1p1      2048     206847    204800   100M EFI システム
/dev/nvme0n1p2    206848     239615     32768    16M Microsoft 予約領域
/dev/nvme0n1p3    239616  818331110 818091495 390.1G Microsoft 基本データ
/dev/nvme0n1p4 818331648  819437567   1105920   540M Windows リカバリ環境
/dev/nvme0n1p5 819437568 1600688127 781250560 372.5G Linux ファイルシステム

この順番の理由は、Windowsが作る予約領域をきちんと作成したいというのと、ブートローダ(grub)を持つのはLinuxになるため。

Windowsが入ったディスクがある場合

ノートPCなど、最初からWindowsが入ったディスクの場合、まず回復ディスクを作成し、 その後Windowsのディスクの管理からボリュームを縮小、空のディスクが1つのときと同様に空いた領域にLinuxをインストールする。

Ubuntu + SoftFM でFMステレオを受信する

RTL2832U + R820T2 のDVB-Tチューナを使うと、FMラジオが聞けるらしいということで買ってあったのだけど、久々にFMラジオが聴きたい機会がでてきたのでやってみた。 RTL-SDR についているrtl_fmというツールを使う話はよくあるのだけど、FMステレオ非対応なので、今回はSoftFMというツールを使ってみた。

インストール

依存パッケージをインストールする。

$ apt install build-essential cmake libasound2-dev librtlsdr-dev

/lib/udev/rules.d/60-librtlsdr0.rulesによると、デバイスを差し込むとplugdevというグループで使えるようになるようなので、 ユーザーをplugdevグループに追加する。

$ sudo usermod -aG plugdev foouser

SoftFMを https://github.com/jorisvr/SoftFM からgit cloneしてビルド

$ git clone https://github.com/jorisvr/SoftFM
$ cd SoftFM
$ mkdir build
$ cd build
$ cmake ..
$ make
$ sudo make install

使い方

softfm -f [freq]で受信できる。TOKYO FMならこんなかんじ。

$ softfm -f 80000000

softfm -f 79950000のほうが音質が良かったりするので試してみたほうがいいかも。-Wでファイルに吐けるが時間指定はなさそうなので、指定したければこんなかんじ。

$ timeout 60 softfm -f 80000000 -W tokyofm.wav

Ryzen 5 5600X でPCを組んだ

速いメインPCが欲しくなったのでPCを組んだ。

構成は以下の通り。ハイエンドって言うほどじゃないと思うんだけど、こんな高いPCを組んだのは初めて。

M/B	ASRock B550M-ITX/ac
CPU	AMD Ryzen 5 5600X (6core/12thread)
メモリ	Crucial CT2K16G4DF8832A (UDIMM DDR4-3200 16GBx2)
GPU	ELSA GeForce RTX 3070 S.A.C
SSD	WD BLACK SN850 NVMe SSD 1TB (PCIe Gen4 NVMe SSD)
ケース	Cooler Master MasterBox NR200 Black
電源	Cooler Master V750 SFX Gold MPY7501SFHAGVJP
ケースファン	Cooler Master MasterFan SF120M x2
CPUクーラー	Noctua NH-U9S

sysbenchの出す値が昔と変わってしまったので比較できないのだけど、やっぱり速い。コンパイル速度はDeskMini A300のときの倍くらい。 CPUだけじゃなくて、SSDがPCIe Gen4になったというのも大きそうだけど。

 ワットモニター読みで、回したときに250Wくらい。省エネPCばかり見てるとびっくりする数字。

<List.Item> スタイルのコンポーネントの定義

Reactでリストのコンポーネントを定義するとき、liの持たせ方だったりアイテムのネーミングだったりで作りにちょっと悩んだりするのだが、HogeList / HogeList.Itemの形にするとあまり考えなくてよくなるので便利。

 参考： React で <Stack.Item> みたいな作り方の使い所を考える

ShopifyのものはReact.VFCを使っていないので、使ったもののメモを残しておく。

定義するところ

使うところ

css-loader の camelCase オプションの行方

微妙に違うオプション名が出てくることがあるので調べたらこんな感じらしい。 また調べなくて良いようにメモ。

バージョン	名前	備考
v4.0.0	modules.exportLocalsConvention	README / Release
v3.0.0	localsConvention	README / Release
(v2.1.1とv3.0.0の間)	exportLocalsStyle	README / commit ※1
v1.0.0	camelCase	README / Release
それ以前	camelcase

※1: 「exportLocalsStyle」は気にしなくてもよいはずだが、v3.0.0のBREAKING CHANGESで唐突に「exportLocalsStyle option was remove in favor localsConvention option」と出てくるので「camelCase」とつながらない

node/browser環境での重複確認用ハッシュ文字列生成メモ

emotionのdata-属性で使っているような値が欲しかった。 emotionは@emotion/hashとして持っているものの、内部用かなぁと思うのでmurmurhashを使ってみた。 TextEncoderを使っているので環境によりpolyfillが必要。

import murmurhash from "murmurhash";

function hashString(s) {
    return murmurhash.v3(s).toString(36);
}

console.log(hashString("hfogfffe")); // 6bmwh9

参考

• 高速ハッシュアルゴリズム – YOSBITS

Loqui 0.7.0 リリース

Gtk3に対応したLoqui 0.7.0をリリースしました。 

 https://github.com/sunnyone/loqui/releases 

微妙に見た目が違うのですが、まずは動くのが大事だと思ったのでリリースしました。何かおかしかったら教えてください。 

レポジトリはLaunchPadからGitHubに移動しました。本当はActionsでビルドできるようにしようかなと思ったのですが、結構手間がかかりそうなのでとりあえずパス。 

gtk2から3の変更点はここに書いている通りで、deprecatedを許容すれば、基本的には機械的に変えていけばいいものばかりなんですが、CSSでスタイリングするようになったためなのか、サイズを変えてるような処理のところがちょっと形を変えないといけないかなという感じです。