日々学んだことの簡潔な記録です。様々な言語や技術について学んだことを短い記事にまとめています。

2026/01/31

ワンオペイベント配信・収録システムの構築

What I Learned

イベント現場において、会場のスクリーン演出と配信・アーカイブ収録を両立させるシステムを構築した。会場進行を絶対に止めない（Main System）と、高品質なアーカイブを残す（Sub System）という異なる要件を、物理的な分離とネットワーク的な統合によって両立できる。SDI による長距離伝送や Bitfocus Companion によるワンボタン制御を取り入れることで、少人数オペレーションでもミスが起きにくい堅牢なシステムとなった。

Details

全体コンセプトと要件

会場演出（スクリーン）と配信・収録の完全分離と連携

会場スクリーンに出す映像（Main）と、アーカイブ/配信用に残す映像（Sub）を物理的に分けつつ、ワンオペレーターで制御可能な環境を構築する。

設計要件

役割の物理的分離（リスク分散）
- Main System (Projector): 会場のスクリーン演出専用。配信側のトラブルが会場進行に影響しない構成
- Sub System (Streaming, Recording): パッケージ映像作成専用。スライドとカメラ映像を合成し、ISO 収録を行う
長距離伝送 (SDI)
- Main 卓と Sub 卓の距離に対応するため、HDMI を SDI に変換（Blackmagic BiDirectional Converter 使用）して伝送
相互監視とリターン
- ATEM Streaming Bridge を使用し、Sub System の映像を Ethernet 経由で Main System の入力 4 へ戻す
- 出演者が収録映像を確認できるようにする

システム構成図

Mermaidソースコード: system-diagram.mmd

セットアップ後の実際の様子

実際のセットアップ

実際のオペレーション環境。左側にPC（ATEM Software Control表示）、中央に2台のATEM Mini Pro、Stream Deck、Loupedeck、右側にオペレーターPC。全ての機材が卓上に集約され、ワンオペレーションで制御可能な配置となっている。

オペレーション構成 (Control & Network)

物理的に分かれたシステムをワンマンで回すための集約設定。

Bitfocus Companion (Stream Deck)

2025/11/30

Git 履歴から機密情報を完全に削除する

What I Learned

誤ってコミットされた機密情報（APIキー、秘密鍵、設定ファイルなど）は、通常の削除では Git の履歴に残り続ける。git filter-repo を使うことで Git の履歴を書き換え、機密情報を完全に削除できる。ただし、履歴から削除しても、すでに漏洩した認証情報が安全になるわけではないため、必ず該当する認証情報は失効・再発行する必要がある。

Details

背景

以前は git filter-branch を用いた方法が紹介されていたが、現在では公式ドキュメントにおいて注意喚起が行われており、新たに手順を作成する場合には git filter-repo の採用が推奨されている。

使用するツール

git
git filter-repo

作業前の注意点

本手順は履歴を書き換える破壊的操作である
共有リポジトリで実施する場合は、事前に関係者へ周知する
作業後は、全利用者に再クローンを依頼する

ケース別手順

ケース1：特定のファイルを履歴から完全に削除する

1. ミラークローン

1git clone --mirror REMOTE_URL REPO_NAME.git
2cd REPO_NAME.git

ミラークローンでは、すべてのブランチ・タグ・参照を含めて取得される。履歴を書き換えた結果をリモートへ正確に反映するため、本手順ではミラークローンを使用する。

2. 機密ファイルを履歴から削除

1git filter-repo \
2  --path SENSITIVE_PATH_1 \
3  --path SENSITIVE_PATH_2 \
4  --invert-paths

SENSITIVE_PATH_n：履歴から削除したいファイルのリポジトリ相対パス（複数指定可能）

3. リモートへ反映

2025/11/29

ブックマークレットで URL パラメータを削除する

学んだこと

URL を他人と共有する際、クエリパラメータやフラグメントが含まれていると URL が長くなり、余計な情報が含まれてしまう。いつもは手動で削除していたが、ブックマークレットと Chrome の検索エンジン機能を組み合わせることで、キーボードショートカットだけで URL をクリーンにできるようになった。

詳細

背景

Web 閲覧中、URL に ?utm_source=... や #section などのパラメータが付いていることがよくある。これらを削除してシンプルな URL にしたい場面は多いが、手動で削除するのは手間である。ブックマークレットを Chrome の検索エンジン機能に登録することで、キーボード操作だけで瞬時にクリーンな URL に変換できる。

1. ブックマークレットコード

以下の JavaScript コードを使用する：

1javascript:void(location.href=location.href.split('?')[0].split('#')[0]);

このコードは現在の URL から ? と # 以降を削除し、ページをリロードする。

2. Chrome での設定手順

2-1. 検索エンジン設定画面を開く

Chrome のアドレスバーに以下を入力：

chrome://settings/searchEngines

2-2. カスタム検索エンジンを追加

「サイト内検索」セクションの横にある「追加」ボタンをクリック
以下の通りに入力：
- 検索エンジン: URLクリーン（任意の名前でOK）
- ショートカット: c（z や del など打ちやすい文字でOK）
- URL: 上記のブックマークレットコードを貼り付け
「追加」をクリック

3. 使い方

Web 閲覧中に URL のパラメータを削除したい場合：

Cmd + L（Mac）/ Ctrl + L（Windows）でアドレスバーを選択
設定したショートカットキー（例：c）を入力
Enter キーを押す

ページがリロードされ、URL がクリーンな状態になる。

2025/11/28

ローカルのみで完結する Git 運用ガイド

What I Learned

Git を初めて使う人や個人開発者向けに、GitHub などのリモートを使わずにローカルだけで Git を完結させる運用方法を整理した。Git は本来ローカルにすべての履歴を持つ仕組みなので、リモートを覚える前にローカル Git を理解した方が扱いやすく、混乱も少ない。ローカル内でもバックアップ（擬似リモート／ミラー）が可能である。

Details

ローカルだけで Git を使うメリット

覚える概念が少なく学習しやすい
他人に迷惑がかからない
Git の本質（変更履歴の管理）に集中できる

1. 基本操作とワークフロー

1-1. リポジトリ作成・状態確認

1git init
2git status

1-2. 変更を記録する流れ

1git add .
2git commit -m "作業内容"

1-3. 状態・履歴の確認

1git diff
2git log --oneline --graph --decorate

1-4. ブランチ操作

1git switch -c feature
2git switch main
3git branch -d feature

2. 過去バージョンに戻す（復旧コマンド）

2-1. ファイルだけ戻す

1git restore ファイル名

2-2. 直前のコミットを取り消す（作業内容は残す）

1git reset --soft HEAD^

2-3. コミットも変更も巻き戻す（破壊的）

1git reset --hard HEAD^

2-4. 特定のコミットに戻る

1git reset --hard <コミットID>

2-5. 履歴を壊さずに取り消す

1git revert <コミットID>

2-6. 過去の状態を参照

1git switch --detach <コミットID>

3. バックアップ（ローカル擬似リモート + ミラー）

Git の “リモート” は URL でなくてもよく、ローカルのフォルダをリモートとして登録できる。

2025/11/27

WSL2 + Ubuntu + Git による開発環境の構築

What I Learned

普段は Mac を使って開発しているが、最近 Windows ユーザーに開発を教える機会が増えた。そこで Windows での開発環境構築手順を整理した。WSL2 + Ubuntu + Git + VS Code の組み合わせで、Mac と同様の快適な Linux 開発環境が Windows 上に構築できる。仮想マシンよりも軽量で、Windows とのファイル共有もスムーズである。

Details

0. 前提条件

Windows 10（21H2 以降）または Windows 11
管理者権限のあるユーザー
BIOS/UEFI で仮想化支援機能（Intel VT-x / AMD-V）が有効
インターネット接続

1. WSL2 のセットアップ

1-1. インストール

PowerShell（管理者）で以下を実行：

1wsl --install

再起動を求められた場合は必ず再起動する。

1-2. Ubuntu のインストール確認

再起動後 PowerShell で：

1wsl -l -v

Ubuntu が表示されない場合は手動インストール：

1wsl --install -d Ubuntu

あるいは Microsoft Store から「Ubuntu」をインストールする。

2025/11/19

GitHub の PR で特定ファイルを誤って変更してしまったときの対処法

What I Learned

Pull Request 内の特定コミットから不要なファイル変更だけを取り除く方法を学んだ。git rebase -i と git commit --amend を組み合わせることで、履歴を綺麗に保ちながら、過去のコミットをピンポイントで修正できる。

Details

問題の状況

PR を作成して diff を確認したところ、あるコミットで意図しないファイルが誤って変更されていた：

D  example/config.yaml    （削除扱い）

特定の設定ファイルやドキュメントなど、関係のないものがコミットに含まれてしまうケースはよくある。このままでは PR が正しくレビューできないため、該当コミットだけを修正する必要があった。

解決方針

今回の目的は以下の通りである：

PR の他の変更部分には影響を与えない
問題のコミット"だけ"内容を修正する
履歴をきれいに保ち、不要な変更をなかったことにする
「削除 → 再追加」のようなノイズを残さない

これを実現するために、git rebase -i を使って該当コミットを直接編集し、git commit --amend で内容を書き換える方法を選んだ。

実際の手順

Step 1: 対象コミットの親から rebase を開始

対象コミット ID を abcd1234 として：

1git rebase -i 'abcd1234^'

rebase 用の画面が開き、次のような行が表示される：

pick abcd1234  Some commit message

これを次のように書き換える：

edit abcd1234  Some commit message

保存すると、abcd1234 のコミットで処理が一旦停止する。

2025/11/10

AI新結合ジェネレーター「ひらめきミキサー」の開発

What I Learned

大学祭展示向けのAI発明生成アプリ「ひらめきミキサー」を開発した。2つのキーワードを組み合わせてAIが新しい発明アイデア（商品名・キャッチコピー・画像）を生成するインタラクティブなWebアプリケーションである。Claude Codeを活用することで、約1日で開発を完了できた。

Details

プロジェクト概要

2つのキーワードから、Google Vertex AIを使って新しい発明アイデアを自動生成する。生成された発明は3D空間のギャラリーで閲覧可能である。

UI

発明生成フロー

トップページから2つのキーワードを入力し、AIが商品名・キャッチコピー・画像を自動生成する様子：

発明生成フロー

ギャラリー表示

生成された発明を3D空間で閲覧できるギャラリー：

ギャラリー

技術スタック

フロントエンド

React + TypeScript + Vite: モダンなSPAの構築
Cloudflare Pages: 静的サイトホスティング
画面構成: カスタムフック（hooks/）とコンポーネント化（screens/）で管理
フロントエンド・バックエンド共通の型定義（types.ts）による型安全性の確保

バックエンド

Cloudflare Workers + Hono: サーバーレスAPIエンドポイント
- サーバーレス環境でのGoogle Cloud API認証（サービスアカウントJSON）
- wrangler secretによる環境変数管理
Google Vertex AI:
- Gemini 1.5 Pro: テキスト生成（商品名・キャッチコピー）、プロンプトエンジニアリング
- Imagen 3.0: 高品質画像生成
- GCP認証フローの実装（lib/auth.ts）
Firebase Firestore: 発明データの永続化
- 複合インデックス: isPublicGallery (ASC), createdAt (DESC)
- Cloudflare Workers環境からの操作
Cloudflare R2: 生成画像のストレージ、Workers APIとの連携

セキュリティ

コードベースのIPホワイトリスト実装
Google OAuth2認証（サービスアカウント）

モノレポ管理

ルートpackage.jsonでの依存関係統合
フロントエンド・バックエンドの独立した開発環境

プロジェクト構造

モノレポ構成で管理：

2025/11/05

Git リベースインタラクティブ

学んだこと

Git のインタラクティブリベース（git rebase -i）は、変更をプッシュする前にコミット履歴をクリーンアップするための強力なツールです。コミットの並び替え、統合、編集、削除が可能です。

詳細

インタラクティブリベースは、コミットとコマンドのリストを含むエディタを開きます：

1git rebase -i HEAD~3

利用可能なコマンド：

pick - コミットをそのまま使用
reword - コミットメッセージを変更
edit - 修正のために停止
squash - 前のコミットと結合
fixup - squash と同様だがコミットメッセージを破棄
drop - コミットを削除

ワークフローの例：

pick abc1234 Add feature X
squash def5678 Fix typo in feature X
reword ghi9012 Update documentation

これにより、関連するコミットを結合し、コミットメッセージを改善することで、よりクリーンな履歴が作成されます。

参考資料

2025/11/05

Hugo アーキタイプの使い方

学んだこと

Hugo のアーキタイプは、事前に定義されたフロントマターと構造を持つ新しいコンテンツを素早く作成するためのテンプレートファイルです。時間を節約し、コンテンツの一貫性を確保できます。

詳細

Hugo のアーキタイプはコンテンツの設計図のように機能します。hugo new を実行すると、Hugo はコンテンツタイプに一致するアーキタイプファイルを探し、それをテンプレートとして使用します。

例えば、archetypes/til.md に TIL アーキタイプがある場合：

1hugo new content/tils/my-new-til.md --kind til

これにより、以下を含む新しいファイルが作成されます：

事前入力されたフロントマター（タイトル、日付、タグ、カテゴリ）
テンプレートセクション（What I Learned、Details、References）
適切なマークダウン構造

異なるコンテンツタイプに対してアーキタイプをカスタマイズでき、コンテンツ作成がより速く、より一貫性のあるものになります。

概要

すべての記事

What I Learned

Details

全体コンセプトと要件

設計要件

システム構成図

セットアップ後の実際の様子

オペレーション構成 (Control & Network)

What I Learned

Details

背景

使用するツール

作業前の注意点

ケース別手順

ケース1：特定のファイルを履歴から完全に削除する

学んだこと

詳細

背景

1. ブックマークレットコード

2. Chrome での設定手順

2-1. 検索エンジン設定画面を開く

2-2. カスタム検索エンジンを追加

3. 使い方

What I Learned

Details

ローカルだけで Git を使うメリット

1. 基本操作とワークフロー

1-1. リポジトリ作成・状態確認

1-2. 変更を記録する流れ

1-3. 状態・履歴の確認

1-4. ブランチ操作

2. 過去バージョンに戻す（復旧コマンド）

2-1. ファイルだけ戻す

2-2. 直前のコミットを取り消す（作業内容は残す）

2-3. コミットも変更も巻き戻す（破壊的）

2-4. 特定のコミットに戻る

2-5. 履歴を壊さずに取り消す

2-6. 過去の状態を参照

3. バックアップ（ローカル擬似リモート + ミラー）

What I Learned

Details

0. 前提条件

1. WSL2 のセットアップ

1-1. インストール

1-2. Ubuntu のインストール確認

What I Learned

Details

問題の状況

解決方針

実際の手順

Step 1: 対象コミットの親から rebase を開始

What I Learned

Details

プロジェクト概要

UI

発明生成フロー

ギャラリー表示

技術スタック

フロントエンド

バックエンド

セキュリティ

モノレポ管理

プロジェクト構造

学んだこと

詳細

参考資料

学んだこと

詳細

参考資料