Blog

ftdv紹介

Sat, 24 Jan 2026 00:00:00 +0000

以前自分がせっせこ作っていたTUIツールになります。

サイト	URL
GitHub	https://github.com/wtnqk/ftdv
crates.io	https://crates.io/crates/ftdv

ftdv (File Tree Diff Viewer) は、diffnav と lazygit にインスパイアされたターミナルベースのdiffビューアで、Rustの ratatui で構築されています。 diffnavの直感的なファイルナビゲーションとlazygitの柔軟なdiffツール設定システムを組み合わせ、delta、bat、ydiff、difftasticなどの様々なdiffツールをサポートするgit diffの対話的なインターフェースを提供します。

概要

![image][461091774-43ab0c27-0764-4342-a049-fb4930463811.png]

設計思想

ftdvは、対話的なgit統合に焦点を当てたモダンなTUI diffページャーです：

直接的なgit統合: gitオペレーションのネイティブサポート（ftdv branch1 branch2）
ファイル単位のdiff: 選択されたファイルごとに新しいdiffコンテンツ
外部ツール統合: delta、difftastic、bat、ydiffなどの柔軟な設定
対話的なナビゲーション: 永続的な状態を持つファイルツリーインターフェース

機能

ディレクトリ折りたたみ機能を持つ対話的なファイルツリーナビゲーション（diffnavにインスパイア）
テンプレート変数を使用した柔軟なdiffツール設定（lazygitにインスパイア）
複数のdiffツールのサポート：delta、bat、ydiff、difftasticなど
ANSIカラーサポート - カラー出力を自動的に検出してレンダリング
レビュー済みファイルをマークするチェックボックス機能（レビュー追跡）
チェック済みファイルの永続的な状態管理
リアルタイムフィルタリング付き検索機能
Vimスタイルのキーボードナビゲーション
カスタマイズ可能なテーマとカラー
直接的なファイル/ディレクトリ比較サポート
複数の操作モードを持つGit統合

インストール

1
2
3
4
5
6
7


# crates.ioからインストール
cargo install ftdv

# またはソースからクローンしてビルド
git clone https://github.com/wtnqk/ftdv.git
cd ftdv
cargo install --path .

使い方

基本コマンド

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


# 作業ディレクトリの変更を表示（デフォルト）
ftdv

# ステージされた変更を表示
ftdv --cached

# 特定のコミット/ブランチと比較
ftdv main

# 2つのコミット/ブランチを比較
ftdv main feature-branch

# 2つのファイルを比較
ftdv file1.txt file2.txt

# 2つのディレクトリを比較
ftdv dir1/ dir2/

# シェル補完を生成
ftdv completions bash > ftdv.bash

キーボードショートカット

キー	アクション
`j` / `↓`	ファイルリストで下に移動
`k` / `↑`	ファイルリストで上に移動
`g`	ファイルリストの最上部へジャンプ
`G`	ファイルリストの最下部へジャンプ

Diffコンテンツスクロール

キー	アクション
`h` / `←`	diff左スクロール（5文字）
`l` / `→`	diff右スクロール（5文字）
`H`	diff左スクロール（20文字）
`L`	diff右スクロール（20文字）
`e` / `J`	diff下スクロール（1行）
`y` / `K`	diff上スクロール（1行）
`d` / `PageDown`	diff下スクロール（10行）
`u` / `PageUp`	diff上スクロール（10行）
`f`	diff下スクロール（20行）
`b`	diff上スクロール（20行）

ファイル操作

キー	アクション
`Enter`	ディレクトリの展開/折りたたみ
`Space`	diffコンテンツの更新
`Tab`	ファイルチェックボックスの切替

検索

キー	アクション
`/`	検索モードに入る
`Enter`	検索確定（検索中）
`Esc`	検索モードを終了
`Backspace`	文字を削除（検索中）

アプリケーション

キー	アクション
`q`	アプリケーションを終了
`Esc`	アプリケーションを終了（検索中でない場合）

設定

ftdvは ~/.config/ftdv/config.yaml にあるYAML設定ファイルを使用します。

webassemblyで画像フィルタをつくる

Mon, 19 Jan 2026 00:00:00 +0000

この記事は以前企業ブログに寄稿したものとなります

リンク

1. WebAssemblyとは何か

── WASMがなぜ使われるのか、どこが嬉しいのか

WebAssembly（WASM）はもう珍しい技術ではなく、すでに普段使用している主要Webサービスの裏側で動いています

Google Meet：背景ぼかし・ノイズ除去
Google Earth Web：3D処理のコア

「JavaScriptじゃ重い画像処理や数学処理を軽くするための技術」…
として広く紹介されていますが、個人的には設計の自由度が上がることにあると考えています

MDNはWebAssemblyを次のように説明しています：

“WebAssembly（Wasm）は、ネイティブに近いパフォーマンスで実行されるコンパクトなバイナリフォーマット”
— https://developer.mozilla.org/ja/docs/WebAssembly

“WebAssembly コードは安全な、サンドボックス化された実行環境で実行される”
— https://developer.mozilla.org/ja/docs/WebAssembly/Concepts

公式仕様書では、以下のように定義されています：

“WebAssembly defines a portable, efficient and safe low-level bytecode.”
— https://webassembly.github.io/spec/core/intro/introduction.html

また、内部実行モデルについて：

“The execution semantics of WebAssembly are defined using a stack machine.”
— https://webassembly.github.io/spec/core/exec/instructions.html

つまりWebAssemblyは、

ブラウザで直接実行される
スタックマシンベースの 仮想命令セット（virtual ISA）
安全なサンドボックス上で動く
コンパクトで高速なバイトコード形式

といった特徴を備えた実行環境です

2. WASMで画像フィルタ

JS→WASM→JSの流れでCanvasに反映します

HTML (UI)
↓
JavaScript (画像読込・Canvas)
↓
WebAssembly (ピクセル処理)
↓
JavaScript (結果描画)

JavaScriptはUI/Canvasのみ担当し、
ピクセル処理はWASMが行うという責務分離が実現します

tmux学習

Wed, 14 Jan 2026 00:00:00 +0000

はじめに

開発作業をしていると、複数のターミナルセッションを効率的に管理したいと思うことはありませんか？SSHで作業中に接続が切れて、実行中のプロセスが止まってしまった経験はないでしょうか？

今回は、そんな悩みを解決してくれるターミナルマルチプレクサ「tmux」の魅力について紹介します。

tmuxとは

tmuxは、1つのターミナルで複数のセッションを管理できるターミナルマルチプレクサです。以下がtmuxの特徴になります。

セッションの永続化: デタッチ・アタッチ機能により、ターミナルを閉じても作業を継続可能
画面分割: 1つの画面を複数のペインに分割して作業効率UP
SSHセッションの保護: 接続が切れても実行中のプロセスは継続

なぜtmuxを選ぶのか

設計思想：「コアは薄く、拡張性は高く」

tmuxの最大の魅力は、必要最小限の機能だけを提供し、ユーザーが自由に拡張できる設計にあります。これにより、“for me"な環境を自分で作る楽しさを体験できます。

プロセスとターミナルの分離

tmuxはクライアント・サーバーアーキテクチャを採用しており、ターミナル（表示）とプロセス（実行）が分離されています。通常のターミナルでは、ターミナルを閉じるとそこで実行中のプロセスも一緒に終了してしまいますが、tmuxではサーバー側でプロセスが動作し続けるため、ターミナルの切断がプロセスに影響しません。

これが特に活きる場面として：

バッチ実行中のSSH切断: 長時間かかるデプロイやビルドの途中でSSH接続が切れても、プロセスはtmuxサーバー上で動き続ける
ネットワーク不安定な環境: 再接続してtmux attachするだけで、作業状態がそのまま復元される
意図的なデタッチ: 重い処理を走らせたままCtrl-b dでデタッチし、別の作業に移れる

nohupやdisown でも同様のことは可能ですが、tmuxなら実行中の出力をいつでも確認でき、対話的な操作も再開できる点が大きな違いです。

豊富なプラグインエコシステム

tmux-pluginsでは、数多くのプラグインが公開されています：

tmux-resurrect: セッションの保存・復元
tmux-continuum: 自動保存機能
tmux-yank: コピー機能の拡張
tmux-fzf: fuzzy finderとの連携

tmuxの基本概念

tmuxは3つの階層で管理されます：

セッション
├── ウィンドウ1（タブのような概念）
│ ├── ペイン1
│ └── ペイン2
└── ウィンドウ2
└── ペイン1

セッション: プロジェクトごとなどの作業単位
ウィンドウ: ブラウザのタブのような概念
ペイン: 画面分割の単位

基本的な使い方

セッション管理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 新規セッション作成
tmux new -s session-name

# セッション一覧
tmux ls

# セッションにアタッチ
tmux attach -t session-name

# セッションからデタッチ
# セッション内で: Ctrl-b d

よく使うキーバインド

デフォルトのプレフィックスキーは Ctrl-b です：

このブログの構成

Mon, 05 Jan 2026 00:00:00 +0000

このブログの技術構成についてまとめる。

概要

Obsidian (執筆)
↓
Hugo (ビルド)
↓
GitHub Actions (CI/CD)
↓
Cloudflare Pages (ホスティング)

インフラ管理にはTerraformを使用している。

静的サイトジェネレーター: Hugo

静的サイトジェネレーターとして Hugo を採用した。

選定理由:

Go製のシングルバイナリで依存関係が少ない
テーマが豊富

テーマは hugo-blog-awesome を使用。ミニマルでかっこいい、ダークモード対応。

記事管理: Obsidian

記事の執筆・管理には Obsidian を使用している。

content/posts ディレクトリをObsidian Vaultとして開くことで、Markdownエディタとして活用できる。Obsidianの利点:

Markdownのプレビューがリアルタイム
内部リンクやバックリンクで記事間の関連を把握できる
プラグインで機能拡張可能

記事のディレクトリ構成

各記事は独立したディレクトリとして管理する。

content/posts/
├── .obsidian/ # Obsidian設定
├── 2026-01-05/
│ ├── index.md # 記事本体
│ └── image.png # 記事に使う画像
└── 2026-01-06/
└── index.md

簡素だがこのようなMakefileを用意した

1
2
3
4
5
6


post: ## Create new post (usage: make post)
 @if [ -z "$(TITLE)" ]; then echo "Usage: make post"; exit 1; fi
 @DIR="content/posts/$$(date +%Y-%m-%d)"; \
 mkdir -p "$$DIR"; \
 hugo new "posts/$$(date +%Y-%m-%d)/index.md"; \
 echo "Created: $$DIR/index.md"

この構成により: