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
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. リモートへ反映
1git push --force --all 2git push --force --tags ケース2：機密文字列（APIキー等）を履歴から削除・置換する 1. ミラークローン
1git clone --mirror REMOTE_URL REPO_NAME.
2025/11/29
学んだこと 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
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.
2025/11/27
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」をインストールする。
1-3. Ubuntu 初回起動 初回起動時に以下を設定：
2025/11/19
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
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.
2025/11/05
学んだこと 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 これにより、関連するコミットを結合し、コミットメッセージを改善することで、よりクリーンな履歴が作成されます。
参考資料 Git ドキュメント - インタラクティブリベース Atlassian Git チュートリアル
2025/11/05
学んだこと Hugo のアーキタイプは、事前に定義されたフロントマターと構造を持つ新しいコンテンツを素早く作成するためのテンプレートファイルです。時間を節約し、コンテンツの一貫性を確保できます。
詳細 Hugo のアーキタイプはコンテンツの設計図のように機能します。hugo new を実行すると、Hugo はコンテンツタイプに一致するアーキタイプファイルを探し、それをテンプレートとして使用します。
例えば、archetypes/til.md に TIL アーキタイプがある場合：
1hugo new content/tils/my-new-til.md --kind til これにより、以下を含む新しいファイルが作成されます：
事前入力されたフロントマター（タイトル、日付、タグ、カテゴリ） テンプレートセクション（What I Learned、Details、References） 適切なマークダウン構造 異なるコンテンツタイプに対してアーキタイプをカスタマイズでき、コンテンツ作成がより速く、より一貫性のあるものになります。
参考資料 Hugo Archetypes Documentation Front Matter in Hugo