hsb.horse
ブログ
ブログ
技術メモや開発の知見をまとめた記事一覧です。
ブログタグ- M4 Mac Miniセットアップ
Amazonの謎セールでM4 Mac miniが安くなっていたので貯まっていたポイントも使ってさらに値引きして買ってしまった。NixOSベースの管理も見据えて色々作業した記録をここに残す。
- @hsblabs/web-stream-extras を npm publish するまでに詰まったところ全部
手動 publish から GitHub Actions + npm Trusted Publisher への移行で実際に踏んだ失敗を時系列でまとめた。provenance の 422、tag と version の順序、publish 前検証の整備まで。
- @hsblabs/web-stream-extras をリリースした
ブラウザと Node.js で ReadableStream<Uint8Array> を扱うための小さな TypeScript ユーティリティライブラリ。バイト変換ヘルパー、トランスフォームストリーム、Web Crypto API を使ったストリーム暗号化まで。
- Web Crypto でバイトストリームをブラウザ上で暗号化する
Web Crypto は強力な暗号プリミティブを提供するが、ストリーム向けのインターフェースはない。@hsblabs/web-stream-extras の encryption サブパスを使って ReadableStream<Uint8Array> を暗号化する方法 — ファイル暗号化、ストリームごとの鍵管理、パイプライン合成まで。
- 同じ Web Streams のボイラープレートを書き続けるのに飽きた
何度も書き直していた ReadableStream<Uint8Array> のユーティリティを @hsblabs/web-stream-extras にまとめた理由。繰り返し書いていた3つのパターン、ByteTransformStream 基底クラス、Web Crypto を使ったストリーム暗号化まで。
- AWSクロスリージョンVPCピアリング 失敗ログ
大阪-東京間のVPCピアリング設定でハマった。--peer-region忘れでfailed状態になり、削除もできなくなった件。
- Cache-Control: max-age=3, must-revalidateを自分なりに整理する
マイクロキャッシングと呼ばれるCache-Control設定の挙動を整理。max-age=3とmust-revalidateの組み合わせがもたらす効果、時系列での動作フロー、具体的なユースケースをまとめる。
- Astroプロジェクトに開発専用Liveエディタを実装する
Astroで開発モード限定のブラウザエディタを実装する方法。ViteミドルウェアとReactで、本番ビルドに一切影響を及ぼさずに、開発中のコンテンツ管理を快適にする手順を整理。
- Webエンジニアが考えるモバイルアプリの設定管理：起動時メタデータ取得アプローチ
Webフロントエンドとインフラの経験から、モバイルアプリのドメイン管理やバージョニングの課題を整理。CloudFront+S3による起動時メタデータ取得方式を提案し、Firebase Remote Configなどの既存ソリューションとの比較も交えて考察する。
- Astro + bun dev で /blog が 404 になる原因と解決手順
Astro + bun dev で /blog が 404 になる問題を、リンク確認・ルート生成・配信経路の順で切り分けて、ディレクトリ名衝突が原因であったことを突き止めるまで。
- Codex Cloudでmiseのバージョン固定が効かない時の対処法
Codex Cloudでmise install bunが成功してもcommand not foundになる原因と、setup.shでmise use -gとmise activateを使って解決した手順の記録。
- lefthook導入手順: pre-commitとpre-pushでBiomeを自動実行する
lefthook を使って、コミット時とPush時に Biome のフォーマットとリントを自動実行する導入手順を整理。ADR作成から設定、インストール、動作確認までの流れを1本で追える。
- ビルド成果物に含まれる依存関係を調べる
Goでビルドされたバイナリには、使用された依存関係やビルド設定の情報が埋め込まれている。
- Claude用性格分析スキルpersonality-analyzerを作った話
Claudeとのチャット内容からHEXACO・MBTIスコアをYAML形式で出力するスキルの開発記録。AIとの会話から性格特性を定量化する試み。
- age-tarでディレクトリ単位の暗号化バックアップを自動化する
ageとtarを組み合わせて、サブディレクトリごとに暗号化アーカイブを作るシェルスクリプト。日本語ディレクトリ名を含む運用でもCLI互換性を保てる。
- UUID v7 実装ガイド: JavaScript・Go・Shellで作る
UUID v7 のビット構造、version/variant のビット設定、JavaScript・Go・Shellでの最小実装、実装時のチェック項目、RFCの参照先を1ページで整理。時系列ソートしやすいIDを安全に導入したい開発者向けに、生成ロジックの確認ポイントをまとめた実践ガイド。実装前の確認に使える。
- GlossaryとDictionaryの違いを整理する
Glossary(用語集)とDictionary(辞書)の違いを、対象範囲、目的、掲載される言葉、作成者の観点から比較整理。
- esbuild/ViteでライセンスコメントをバンドルJSから削除する
esbuildやViteでビルドするとき、バンドルファイルに含まれるライセンスコメントを削除してファイルサイズを削減する方法。
- WXTでReact Compilerを有効化する設定手順
WXTフレームワークでReact Compilerを有効化し、自動最適化を行う設定方法。babel-plugin-react-compilerのインストールと設定を整理。
- Cloudflare Workersでサブディレクトリをルーティングする設定方法
Cloudflare Workersでサブディレクトリ配下にAstroプロジェクトをデプロイする際の設定手順。wrangler.jsonとastro.configの調整方法を整理。
- sh -cの挙動とzsh設定ファイルの読み込みルール
sh -cコマンドの挙動、環境変数の継承ルール、shebangの有効性、zsh設定ファイル(.zshrc, .zshenv等)がスクリプト実行時にどう読み込まれるかを整理。
- TypeScriptでCRC32ハッシュを実装する
CRC32ハッシュアルゴリズムをTypeScriptで実装する手順。ルックアップテーブルを使った高速化手法と、実際の使用例を整理。
- Biomeの未使用変数警告をAstro/Vue/Svelteファイルで無効化する
AstroやVue、Svelteファイルで発生するBiomeの未使用インポート・変数警告を、overrides設定で無効化する方法。
- Goの環境構築メモ: WebフレームワークとDev Tools
Goの開発環境構築時に調べたWebフレームワークと開発ツールのメモ。EchoフレームワークとAir(Live Reload)について整理。
- libavifで画像をAVIF形式に変換する
HomebrewでlibavifをインストールしてJPEG/PNGをAVIF形式に変換する方法。シングル変換とバッチ処理に対応。
- macOS Launchdで定期実行スクリプトを動かす
macOS LaunchdでCronのように毎分実行するスクリプトを構築する方法。環境変数の問題を回避し、ログ管理も含めたセットアップ手順。
- zabrzeで始めるシェル略語展開: zsh-abbrよりシンプルな選択肢
シェルの略語展開ツールzabrzeの導入手順と使い方。zsh-abbrの代替として、よりシンプルな設定で効率的なコマンド入力を実現する方法を紹介。
- TransformStreamで行単位のテキスト分割を実装: LineSplitTransform
ストリームから受け取ったバイナリデータを行単位に分割するTransformStream実装。ログファイルやテキストファイルの逐次処理に活用できる手法を整理。
- OffscreenCanvasとWeb Workerで画像処理を実装する
Web Workerとoffscreen Canvasを使って、メインスレッドをブロックせずに画像処理を行う実装方法。WebP変換の実例を整理。
- 値をReadableStreamに変換するTypeScriptユーティリティ関数
StringやオブジェクトなどをReadableStreamに変換するユーティリティ関数。Blob経由ではなく任意の型でストリームを扱う実装を整理。
- TypeScriptでCIDR範囲のIPアドレス判定を実装する
CloudFront Functionなど外部モジュールが使えない環境向けに、CIDR範囲内のIPアドレス判定を自前実装。ビット演算を使ったクラス構文の実装を整理。
- Bun+HonoでビルドしたAPIサーバをAWS Lambdaで動かす方法
BunランタイムでHono APIサーバをAWS Lambda上で動作させる手順。Single File Executableとしてコンパイルし、Lambda Web Adapterで動かす構成を解説。
- generate-project-summary.pyをBun+TypeScriptで再実装した話
Pythonで書かれたプロジェクト構造要約スクリプトを、Bun+TypeScriptで再実装。LLMにリポジトリ全体を読ませるための実行可能バイナリ作成の経緯と実装を紹介。
- メディアファイルを解像度でソートするTypeScript実装
動画や画像の解像度(幅×高さ)でソートする簡潔なTypeScript実装。Twitter動画メディアのソート処理に活用。
- CloudFront + S3でSPAを配信するデプロイスクリプト
CloudFront経由でS3にホストしたSPAを配信する際のデプロイスクリプト。キャッシュコントロール設定、ブルーグリーンデプロイ、切り戻し手順を整理。
- AWS Athenaで空でないデータベースを削除する方法
AWS Athenaで空でないデータベースを削除しようとしてエラーになったときの対処法。DROP DATABASE CASCADEコマンドの使い方。
- TypeScriptでロト6・ロト7の抽選数字を生成する
メルセンヌ・ツイスターを使ってロト6・ロト7の抽選番号を生成するTypeScript実装。疑似乱数生成器の実践例。
- IAM認証有効なAPI GatewayにTypeScriptでリクエストする実装
AWS SDK for JavaScriptのSigV4を使って、IAM認証が有効なAPI Gatewayにローカル環境からTypeScriptでリクエストする実装手順。
- markdown-confluence CLIでMarkdownをConfluenceに同期する運用
Gitリポジトリ内のMarkdownドキュメントをConfluenceに同期する@markdown-confluence/cliの導入と運用方法。ADRやドキュメントをConfluenceで共有する手順を整理。
- Piniaなしでグローバルステートを管理するVue Composable
Piniaを使わずにVueのreactiveとtoRefsでグローバルステート管理を実現する軽量な実装方法。
- Vueでv-ifの分岐が増えたらストラテジーパターンを検討する
v-ifによる条件分岐が3パターン以上になったら、ストラテジーパターンでコンポーネントを動的に切り替える実装を検討。可読性とメンテナンス性の向上。
- HTMLVideoElementから画像を生成するTypeScript実装
CanvasとVideoElementを使って、動画の現在フレームを画像として抽出するTypeScript実装。Promiseベースでblob生成する方法を整理。
- PM2でCronジョブを作成する: launchdの代替として
macOSでlaunchdの代わりにPM2を使ってCronジョブを作成する方法。設定ファイルとBunを使った定期実行の実装例を整理。
- 初めてのViteプラグイン実装: ビルドメタデータを自動生成する
Vite Plugin APIを使ってビルドライフサイクルに独自処理を組み込む方法。時刻ベースのセマンティックバージョンを生成するプラグイン実装を通じて学ぶ。
- starlight-obsidianプラグインでVaultのコピー先をルートに変更する
starlight-obsidianプラグインのデフォルト動作を変更し、Obsidian Vaultをsrc/content/docs直下にコピーする方法。サイドバー階層構造の差異を解消する実装を整理。
- 異体字セレクターを使ったステガノグラフィのTypeScript実装
Unicodeの異体字セレクターを活用して、見た目には見えない秘密の文字列をテキストに埋め込むステガノグラフィ手法のTypeScript実装。
- Twitter動画URLからサイズ情報を抽出するTypeScript実装
Twitter(X)の動画URLに含まれる解像度情報を正規表現で抽出するTypeScript実装。URLパターンの解析とサイズ取得方法を整理。
- ブラウザでGoogle FontsからWOFFファイルを取得しようとして失敗した備忘録
クライアントサイドでGoogle Fontsからttf/otf/woffファイルを取得して@vercel/satoriで使おうとした試行錯誤の記録。User-Agentヘッダー制限とwoff2非対応問題について整理。
- Bitbucket PipelinesでYarn v4 (PnPモード)を動かす設定
Bitbucket PipelinesでYarn v4のPnPモードを使ったプロジェクトをビルドする設定方法。キャッシュ設定とcorepackの有効化手順を整理。
- Pagefind検索がCloudflare Pagesで動かない問題: Rocket Loaderが原因だった
Astro+PagefindをCloudflare Pagesにデプロイした際に検索機能が動作しない問題の原因と解決策。Rocket Loader設定の影響について整理。
- 画像管理アプリEagleを購入して感じたこと
買い切り型の画像管理アプリEagleを購入した理由とレビュー。Mac/Win両対応、ライブラリ管理、ブラウザ拡張機能の使い勝手を紹介。
- SvelteでGoogle Apps Scriptの高機能Webアプリを作る
Google Apps ScriptのWebアプリ公開機能とSvelteを組み合わせて、スプレッドシートをデータベースとする高機能SPAを構築する方法。