昨今の QNAP には Container Station というコンテナイメージを実行するためのオフィシャルなアプリケーションが提供されている。これを使えば特にQNAP用というわけではないコンテナイメージも自由に動かせて嬉しい。

例えば VOICEVOX のAPIを自宅内で自由に使えたらな～ と思うと、サーバとして常時動いていて、CPU的にも比較的遊びのある QNAP で動かせると嬉しい。HTTP リクエストさえできれば自宅内の Raspberry PI だろうがなんだろうが低スペPCからも音声合成ができる。

https://hub.docker.com/r/voicevox/voicevox_engine

Docker Hub にオフィシャルなイメージがあるので、これを pull する

Create Container で Publish New Port して 50021 を指定する。これで 192.168.5.250:50021 でアクセス可能になる。これだけ

 curl -X 'GET' \
   'http://192.168.0.177:50021/speakers' \
   -H 'accept: application/json'
   
   [
     {
       "name": "四国めたん",
       "speaker_uuid": "7ffcb7ce-00ec-4bdc-82cd-45a8889e43ff",
       "styles": [
         {
           "name": "ノーマル",
           "id": 2,
           "type": "talk"
         },
         {
           "name": "あまあま",
           "id": 0,
           "type": "talk"
         },
         {
           "name": "ツンツン",
           "id": 6,
           "type": "talk"
         },
         {
           "name": "セクシー",
           "id": 4,
           "type": "talk"
         },
         {
           "name": "ささやき",
           "id": 36,
           "type": "talk"
         },
         {
           "name": "ヒソヒソ",
           "id": 37,
           "type": "talk"
         }
       ],
       "version": "0.15.9",
       "supported_features": {
         "permitted_synthesis_morphing": "SELF_ONLY"
       }
     },
     {
         "name": "ずんだもん",
         "speaker_uuid": "388f246b-8c41-4ac1-8e2d-5d79f3ff56d9",
         "styles": [
           {
             "name": "ノーマル",
             "id": 3,
             "type": "talk"
           },
           {
             "name": "あまあま",
             "id": 1,
             "type": "talk"
           },
           {
             "name": "ツンツン",
             "id": 7,
             "type": "talk"
           },
           {
             "name": "セクシー",
             "id": 5,
             "type": "talk"
           },
           {
             "name": "ささやき",
             "id": 22,
             "type": "talk"
           },
           {
             "name": "ヒソヒソ",
             "id": 38,
             "type": "talk"
           },
           {
             "name": "ヘロヘロ",
             "id": 75,
             "type": "talk"
           },
           {
             "name": "なみだめ",
             "id": 76,
             "type": "talk"
           }
         ],
         "version": "0.15.9",
         "supported_features": {
           "permitted_synthesis_morphing": "SELF_ONLY"
         }
       },

1. トップ
2. tech
3. QNAP を VOICEVOX 音声合成サーバにする

こういうのが500円で売っている。なんとなく買ってみた。

設定ツール (MINI KeyBoard.exe) が Google Drive で共有されて、そのQRコードがマニュアルにはってある。どう考えても実行するのは怖いので、まずは解析して設定ツールを自分で書くところからはじめる。

まぁそもそも、信頼できないデバイスをUSBで繋ぐなというのが正論だと思うが……

1. トップ
2. tech
3. Aliexpress で買ったミニキーボードを WebHID で設定する

UHS-II 対応で USB 3.2 Gen1 接続し、最大 200MB/s ぐらいの読み込み速度が出るはずなのに、速度が出ないときの原因

1. トップ
2. tech
3. SDカードリーダーの速度が出ないときの挙動チェックリスト

5Gbps / 10Gbps 対応の通信用ケーブルは購入したら必ずベンチをとるべき。

というのも粗悪品であっても再送制御などで実行速度が下がるだけで通信できることが多いため、気付きにくいから。

1GB/s で読める SSD なのに、400MB/s でしか読めないということが起こりうる (10Gbps でリンクできず、5Gbpsにフォールバックしている)。一見動いてしまうので気付きにくいが実行速度が半分以下なのは相当信号状態が悪い。まずできるだけ短くて信頼できるメーカーの通信ケーブルを買うべき。

ケーブルやコネクタの見た目がよくても騙されてはいけない。うちでいろいろ検証した結果、エレコムの見た目しょぼいケーブルのほうが一番まともだった。

1. トップ
2. tech
3. 粗悪品のUSBケーブルが多いので買ったら必ずベンチをとるべき

https://www.uwe-sieber.de/usbtreeview_e.html USB Device Tree Viewer を使うのが早い。Windows 標準機能ではわからない。クソ (macOS のあなたは「システム情報」→「ハードウェア」→「USB」でわかります。良かったですね)

USB Device Tree Viewer の表示もそれほど分かりやすいとはいえない。以下が頭に入ってないといけない。

• Low Speed = 1.5 Mbps (USB 1.0+)
• Full Speed = 12 Mbps (USB 1.1+)
• High Speed = 480 Mbps (USB 2.0)
• SuperSpeed = 5 Gbps (USB 3.0 = USB 3.1 Gen1 = USB 3.2 Gen1)
• SuperSpeed+ = 10 Gbps (USB 3.1 Gen2 = USB 3.2 Gen2)

アイコンにSがついてればSuperSpeed以上、HはHigh Speed、F は Full Speed

そして USB3系と USB2系は完全に別レイヤーで二重になっているという点を理解している必要がある。例えば USB3 のハブを繋いだら、必ず USB3 のハブと USB2 のハブが2つ表示され、ポートもそれぞれ別々に表示される。

       ========================== Summary =========================
 Vendor ID                : 0x05E3 (Genesys Logic, Inc.)
 Product ID               : 0x0625
 USB Version              : 3.2 Gen 2
 Port maximum Speed       : SuperSpeedPlus or higher
 Device maximum Speed     : SuperSpeedPlus or higher
 Device Connection Speed  : SuperSpeedPlus or higher
 Self powered             : yes
 Demanded Current         : 0 mA
 Used Endpoints           : 2

       ========================== Summary =========================
 Vendor ID                : 0x1397 (Behringer Spezielle Studiotechnik GmbH)
 Product ID               : 0x0507
 USB Version              : 2.0
 Port maximum Speed       : High-Speed (Companion Port 1-20-4 is doing the SuperSpeed and SuperSpeedPlus or higher)
 Device maximum Speed     : High-Speed
 Device Connection Speed  : High-Speed
 Self powered             : no
 Demanded Current         : 500 mA
 Used Endpoints           : 1

       ========================== Summary =========================
 Vendor ID                : 0x045E (Microsoft Corporation)
 Product ID               : 0x07A5
 USB Version              : 2.0 -> but Device is Full-Speed only
 Port maximum Speed       : High-Speed
 Device maximum Speed     : Full-Speed
 Device Connection Speed  : Full-Speed
 Self powered             : no
 Demanded Current         : 100 mA
 Used Endpoints           : 4

1. トップ
2. tech
3. WindowsでのUSBリンクスピード

• https://cho45.stfuawsc.com/ticker-generator/

文字スクロール動画ジェネレーターというのを作った。

別のプロジェクトでffmpeg.wasmを使ってて面白かったので、もうちょっとわかりやすい応用を作ってみようという感じ。

Twitter はほぼそのまま再生されるけど、 Bluesky だとフレームレートが低くなっちゃうっぽい?

https://t.co/cekOpmGBTd pic.twitter.com/afsMpJ6StQ

— ショ糖 (@cho45) July 15, 2025

1. トップ
2. tech
3. 文字スクロール動画ジェネレーター

Wikipedia の LDPC の項だけ読むとそんな難しくなさそうに見えるけど、実際に実装しようと思うと、むちゃくちゃ難しい。

1. トップ
2. tech
3. LDPC難しすぎる

performance.now() が monotonic (単調増加) なことを利用すると、システム時計の変化を比較的高精度に得られるなと思ったので、以下のようなClockMonitorクラスを作ってみた。

// ClockMonitor: システム時計の大幅な変更（NTP補正・手動変更等）を検知し、イベントを発行するクラス
// WebAudioやperformance.now()はmonotonicな経過時間だが、絶対時刻（Date.now()）はシステム時計依存でジャンプすることがある
// そのため、performance.timeOrigin+performance.now()で絶対時刻を計算している場合、
// システム時計が変化しても自動で補正されない（ズレたままになる）
// このクラスは、定期的にDate.now()とperformance.timeOrigin+performance.now()の差分を監視し、
// 一定以上の差分が発生した場合に"clockchange"イベントを発行することで、
// 利用側がoffset等を補正できるようにする
class ClockMonitor extends EventTarget {
	constructor({ threshold = 2000, interval = 1000 } = {}) {
		super();
		this.threshold = threshold; // 何ms以上の差分で検知するか
		this.interval = interval;   // 監視間隔（ms）
		this.offset = performance.timeOrigin || 0; // performance.now()の起点（初期化時の絶対時刻）
		this._timer = null;
	}

	start() {
		if (this._timer) return;
		this._timer = setInterval(() => {
			const perfNow = performance.now();
			const now = Date.now();
			// 現在の絶対時刻の期待値（初期offset+経過時間）
			const expected = this.offset + perfNow;
			const diff = now - expected;
			// threshold以上の差分が出たらシステム時計変更とみなす
			if (Math.abs(diff) > this.threshold) {
				// offsetを補正し、イベント発行
				this.offset += diff;
				this.dispatchEvent(new CustomEvent("clockchange", {
					detail: { offset: this.offset, diff }
				}));
			}
		}, this.interval);
	}

	stop() {
		if (this._timer) {
			clearInterval(this._timer);
			this._timer = null;
		}
	}
}

1. トップ
2. tech
3. JSでシステム時計の変化(時刻変更、NTP同期)を検知する

micro-template.js という2012年に作った embed JS 的なテンプレート処理ライブラリがある。コピペできるぐらい小さくて、早いことがコンセプト。

完全に放置してたけど、ちょっと手を入れはじめたらいろいろやりたくなってしまったので、だいぶ改修をいれてしまった。

• ESMに
  • ブラウザも node も環境がととのってきたのでESMだけでいいと思う
• node:test を使うように
  • 昔はなかった……
• replace ではなく split で処理するように
  • かなりマジカルな正規表現を使っていたので、久しぶりに見ると難しすぎた
• `with` を使うのをやめた
  • デフォルトの状態でパフォーマンスがイマイチな状態だった
• demo ページ
• ペライチ
• ベンチマーク
• ESM を静的に吐くCLI

1. トップ
2. tech
3. micro-template.js を13年ぶりにいろいろいじった

いきなりトランスパイルの環境作って常時ビルドツールを動かして開発するのがいまいち性にあわず、いまだにそういうことをしないようにしてる。小さいプロジェクトだと管理が面倒くさい。

Vue3 はなんかいろいろさらに面倒になっており、公式のクイックスタートが全然クイックじゃねーよと思っていた。さらにクイックな方法を試行錯誤してたけど、現状の最小限サンプルを作っておくことにした。追記: 公式にも最小限サンプルあるわ……

最近のブラウザは ESM の import に対応しており、これ前提なら変なこと(ビルド)しなくても、このままに動く。ただブラウザで開くだけで良い。開発開始には十分だし、余計なことを考える必要はない。

一応ファイルを分けてるけど、app.js の内容は index.html に埋めこんでも良い。

「バニラJSだと面倒くさいUI状態があるが、いっぱいビルドとかはしたくない」みたいなことは多い。

以下は template 要素を使っている。template 要素を div 要素にして createApp に template を指定しなくても、mount("#app") でもいける。けど、template じゃない場合、table の td tr などで要素が消滅してハマることがある。

// app.js
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
	data() {
		return {
			counter: 0,
		}
	},
	mounted() {
		console.log('App mounted');
	},
	template: document.querySelector('#app').innerHTML
}).mount(document.body);

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hello</title>
	<script type="module" src="./app.js" defer></script>
</head>
<body>
	<template id="app">
		<h1>Hello</h1>
		<button @click="counter++">Click me</button>
		<p>Counter: {{ counter }}</p>
	</template>
</body>
</html>

petite-vue はメンテされてるのだろうか。どこかのタイミングでVue3の機能やらビルドをしたくなったときのことを考えると Vue3 そのまま使ってもいいと思う。

1. トップ
2. tech
3. 一瞬で開発開始するための Vue3 無トランスパイル環境