記事一覧

name: tmux-focus description: “tmux ウィンドウの Issue/PR 切替: /tmux-focus [-w|-r] ” tmux-focus スキル 現在の tmux ウィンドウの Issue/PR を切り替えるスキル。 使い方 /tmux-focus <number> — Issue モード Bash で以下を実行: 1 ~/.claude/skills/tmux-focus/scripts/tmux-issue-change.sh <number> ウィンドウ名を issue-<number> に変更し、対応する GitHub Issue をブラウザで開く。 /tmux-focus -w <number> — PR worktree モード gh pr view <number> で PR であることを確認する。PR でなければエラーメッセージを表示して終了。 Bash で以下を実行: 1 ~/.claude/skills/tmux-focus/scripts/tmux-issue-change.sh --pr <number> ウィンドウ名を pr-<number> に変更し、ブラウザで PR を開く。 EnterWorktree ツールで worktree を作成する。 worktree 内で以下を実行: 1 gh pr checkout <number> /tmux-focus -r <number> — PR レビューモード gh pr view <number> で PR であることを確認する。PR でなければエラーメッセージを表示して終了。 Bash で以下を実行: 1 ~/.claude/skills/tmux-focus/scripts/tmux-issue-change.sh --pr <number> ウィンドウ名を pr-<number> に変更し、ブラウザで PR を開く。 worktree 内でなければ EnterWorktree ツールで worktree を作成する。 worktree 内で以下を実行: 1 gh pr checkout <number> PR のコード差分をレビュー開始する（gh pr diff <number> で差分を取得し、変更内容を分析）。 スクリプトが存在しない場合 ~/.claude/skills/tmux-focus/scripts/tmux-issue-change.sh が存在しない場合は、以下の内容で作成して chmod +x する。 ...

CloudWatch Logs のエラーを自動で GitHub Issues に課題化する ECS で稼働するWebアプリケーションのエラーログを自動的に GitHub Issues に報告する仕組みを構築しました。手動でログを監視する必要がなくなり、エラー発生時に即座にチームが認識・対応できるようになります。 背景 マルチテナントの業務システムを ECS Fargate 上で運用しています。アプリケーションは2つあり、それぞれ異なるフレームワークで構築されています。 アプリ フレームワーク 用途 web Laravel (PHP) 業務管理システム api Django (Python) API サーバー これまで CloudWatch Logs にログは収集していたものの、エラーの検知は手動確認に頼っていました。500エラーや例外発生を見逃すリスクがあり、自動検知の仕組みが必要でした。 アーキテクチャ Subscription Filter + Lambda + GitHub Issues API の構成を採用しました。 CloudWatch Logs (/ecs/{prefix}-ecs-{app}) └── Subscription Filter (エラーパターンマッチ) └── Lambda Function (Docker/arm64, Python 3.12) ├── エラー解析 (HTTP 5xx, 例外, スタックトレース) ├── ±5秒のログコンテキスト取得 ├── 既存 Open Issue 検索 └── 新規 Issue 作成 or 既存 Issue にコメント追加 この構成を選んだ理由 方式 リアルタイム性 柔軟性 コスト Subscription Filter + Lambda (採用) 高 高 中 Metric Filter + Alarm + SNS 中 (1分以上遅延) 低 低 CloudWatch Logs Insights (定期実行) 低 高 低 Subscription Filter はログ出力時にほぼリアルタイムで Lambda を起動するため、エラー発生から数秒で Issue が作成されます。 ...

業務フローの設計にPowerPointではなくBPMNを使うべき理由 — Claude Code時代の詳細設計 はじめに 業務システムの設計でSwim Lane（スイムレーン）形式の業務フローを書くとき、多くの現場ではPowerPointやFigmaが使われています。見た目は整えやすく、関係者への説明資料としてはよくできています。 しかし、この「人間が読むための図」を設計の源泉にしてしまうと、あと工程で大きなコストが発生します。特に、Claude CodeのようなAIエージェントを開発に活用する場合、設計成果物のフォーマット選択が開発効率を決定的に左右します。 本記事では、実際にPowerPointのスライドからBPMN 2.0に変換した経験をもとに、BPMNを採用する利点を解説します。 PowerPointの業務フローが抱える問題 PowerPointのスライドに描かれた業務フローは、本質的に「画像」です。 PowerPoint (.pptx) ├── 図形の座標とスタイル情報 ├── テキストボックスの文字列 └── グループ化とレイヤー これは人間が見るには十分ですが、次のような問題があります。 構造情報がない: 「この矢印がどのタスクからどのタスクへ向かっているか」をプログラムが読み取れない アクターの定義が曖昧: レーンの境界が図形の配置で表現されているだけで、意味的な紐付けがない 分岐条件が自然言語: ゲートウェイの条件が図中のテキストに埋め込まれ、機械的に検証できない フロー間の接続が不明確: 複数スライドにまたがるフローの接続点（「次のフローへ」）が視覚的な慣習に依存 BPMN 2.0とは BPMN（Business Process Model and Notation） は、業務プロセスを図式化するための国際標準記法です。OMG（Object Management Group）が策定し、ISO 19510として国際標準化されています。現行バージョンはBPMN 2.0.2です。 BPMNの最大の特徴は、人間が理解できるフロー図と機械が処理できるXMLが一つのファイルに同居している点です。プールとレーン（Swim Lane）でアクターを表現し、タスク・ゲートウェイ・イベントでプロセスの流れを記述します。 BPMN 2.0がもたらす構造化 BPMN 2.0はXML形式で、見た目と意味の両方を持つフォーマットです。 1 2 3 4 5 6 7 8 9 10 11 12 13 <bpmn:process id="Process_1" isExecutable="false"> <bpmn:laneSet id="LaneSet_1"> <bpmn:lane id="Lane_reception" name="太平受付担当"> <bpmn:flowNodeRef>r1</bpmn:flowNodeRef> <bpmn:flowNodeRef>r2</bpmn:flowNodeRef> </bpmn:lane> <bpmn:lane id="Lane_system" name="システム" /> </bpmn:laneSet> <bpmn:task id="r1" name="修理内容の特定" /> <bpmn:exclusiveGateway id="d2" name="保証範囲?" /> <bpmn:sequenceFlow sourceRef="r1" targetRef="d2" /> </bpmn:process> この構造から、以下がプログラム的に読み取れます。 ...

django-oauth-toolkit 2.0 の client_secret ハッシュ化で外部連携が壊れた話 TL;DR django-oauth-toolkit を 1.x から 2.0 にアップグレードすると、Application.client_secret が 平文からハッシュ値に自動変換 される。この変更に気づかず、DB 上のハッシュ値を「シークレット」として外部サービスにコピーすると、二重ハッシュ で認証が通らなくなる。さらに、Application を動的に生成するコードがある場合、バージョンアップ後に平文を返すべき箇所でハッシュ値を返してしまう問題も起きる。 背景 2つの Django サービス間で OAuth2 Client Credentials Grant による認証を行っていた。 サービス 役割 django-oauth-toolkit Service A (リソースサーバー) ファイル配信 API を提供 2.4.0 Service B (クライアント) API からファイルを取得 1.7.1 Service B は Service A の OAuth2 トークンエンドポイントに HTTP Basic Auth で client_id:client_secret を送信し、アクセストークンを取得してからファイルをダウンロードする。 Service B Service A | | |-- POST /o/token/ --------------->| | Authorization: Basic base64( | | client_id:client_secret) | | |-- client_secret をハッシュ化 | |-- DB のハッシュ値と比較 |<-- access_token -----------------| | | |-- GET /api/files/ -------------->| | Authorization: Bearer token | |<-- file data --------------------| このフローは数年間安定稼働していた。 ...

Claude Code スキルで CloudWatch エラーレポートの Issue トリアージを自動化する 背景 本番環境の ECS コンテナで発生したエラーは、CloudWatch Logs → Lambda → GitHub Issue という流れで自動起票される仕組みを運用しています。 タイトルは [prod][myapp] errors detected、ラベルは CloudWatchLog で統一されており、1つの Issue に複数のエラーブロックがまとまって届きます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ## Error Report - 2026-02-12 01:32:28 UTC - **Environment**: prod - **Log Group**: `/ecs/myapp-prod-ecs` - **Error Blocks**: 3 ### [1] 2026-02-12 01:32:26 UTC - `application` （スタックトレース） ### [2] 2026-02-12 01:45:10 UTC - `application` （スタックトレース） ### [3] 2026-02-12 02:01:33 UTC - `application` （スタックトレース） この Issue をそのまま放置すると、異なるエラーが混在したまま溜まっていきます。手作業で分類・個別 Issue 化するのは地味に面倒で、後回しにしがちでした。 ...

iPhone から GitHub Issue を書くだけで Mac の Claude Code が自動実行される仕組みを作った TL;DR GitHub Self-hosted Runner + Claude Code CLI を組み合わせて、iPhone で Issue を作成 → Mac 上の Claude Code が自動で調査・コード修正・PR 作成まで行う仕組みを構築した。2ステージ承認フロー付きで、/claude で調査、/approve で実行という安全な運用が可能。 モチベーション 普段 Mac の前にいないときでも、iPhone からコードの調査や修正を指示したい。GitHub Issue に書くだけで Claude Code が自動的に動いてくれれば、移動中でもコードレビューや修正依頼ができる。 完成した仕組み iPhone GitHub Mac (self-hosted runner) │ │ │ ├─ Issue 作成 ────────────→│ │ │ (claude ラベル付与) │── ワークフロー起動 ─────→│ │ │ ├─ claude -p (読み取り専用) │ │←── 調査結果コメント ──────┤ │ │ + 承認待ちラベル │ │ │ │ ├─ /approve コメント ──────→│ │ │ │── ワークフロー起動 ─────→│ │ │ ├─ claude -p (書き込み許可) │ │←── 実行結果 + PR ────────┤ │ │ - 承認待ちラベル │ トリガー一覧 操作 条件 動作 claude ラベル付き Issue 起票 起票者がリポジトリオーナー Stage 1: 読み取り専用で調査 /claude コメント コメント者がリポジトリオーナー Stage 1: 読み取り専用で調査 /claude --execute コメント コメント者がリポジトリオーナー Stage 1 スキップ、直接実行 /approve コメント コメント者がリポジトリオーナー + 承認待ち ラベル Stage 2: 計画に基づき実行 必要なもの macOS マシン (Apple Silicon / Intel) Claude Code CLI がインストール済み (npm install -g @anthropic-ai/claude-code) Claude Max/Pro プラン (OAuth トークン) または Anthropic API キー GitHub CLI (gh) セットアップ手順 1. Self-hosted Runner のインストール GitHub の個人アカウントでは Runner はリポジトリ単位の登録になる。同一マシンに複数の Runner を並置できる。 ...

ローカルの開発モックを ngrok で公開し、Backlog Wiki を自動更新するシェルスクリプト レビュー担当者にモックアプリを見せたいとき、毎回「URL 変わりました」と連絡するのが面倒になったので、ngrok 起動 → Backlog Wiki 自動更新を1コマンドで済ませるスクリプトを作りました。 背景 社内プロジェクトで React のモックアプリを開発しています。レビュー担当者（非エンジニア）にモック画面を確認してもらう際、以下のような手順を毎回踏んでいました： npm run dev でローカルサーバーを起動 ngrok http 3000 でトンネルを張る 発行された URL をコピー Backlog の Wiki ページを開いて URL を貼り替える レビュー担当者に連絡 ngrok の無料プランでは URL が起動ごとに変わるため、毎回 Wiki を手動更新する必要がありました。これを自動化します。 スクリプトの全体像 ./scripts/serve-public.sh [user:password] 1コマンドで以下が実行されます： Vite dev server 起動 ↓ ngrok トンネル開通（Basic認証付き） ↓ Backlog Wiki に URL を自動反映 ↓ Ctrl+C で全プロセス停止 実装のポイント 1. Vite の起動待ち Vite dev server はバックグラウンドで起動しますが、すぐには HTTP リクエストを受け付けません。ポーリングで起動完了を待ちます： 1 2 3 4 5 6 for i in $(seq 1 15); do if curl -s -o /dev/null http://localhost:$PORT 2>/dev/null; then break fi sleep 1 done 15秒以内に応答がなければエラーとして終了します。 ...

Ghostty + Claude Code 連携ガイド GhosttyとClaude Codeの組み合わせは、多くの開発者が推奨する構成です。主なポイントをまとめます。 すぐに使える機能 Shift+Enter がネイティブ対応 Ghosttyでは Shift+Enter による改行入力がそのまま動作します。他のターミナルでは /terminal-setup で設定が必要ですが、Ghosttyでは不要です。 GPU アクセラレーション Claude Codeの出力が大量になっても、GPUレンダリングのおかげでスムーズにスクロール・表示されます。VS Codeのターミナルでは大量テキストのペースト時にフリーズすることがありますが、Ghosttyではその問題がありません。 おすすめワークフロー 1. スプリットペイン活用（最も人気の構成） Ghosttyのビルトインスプリット機能でClaude Codeと作業画面を並べられます。 # ~/.config/ghostty/config に追加 # スプリット作成 keybind = cmd+d=new_split:right keybind = cmd+shift+d=new_split:down # Vim風のペイン移動 keybind = ctrl+h=goto_split:left keybind = ctrl+j=goto_split:bottom keybind = ctrl+k=goto_split:top keybind = ctrl+l=goto_split:right 典型的な3ペイン構成: 左: Claude Code 右: エディタ (Neovim/Vim等) 下: 通常のターミナル (ビルド・テスト実行用) 2. タブで複数プロジェクト管理 Cmd+数字 でタブ間を素早く切り替えられるので、プロジェクトごとにタブを分けてClaude Codeセッションを使い分けられます。 3. Kitty Graphics Protocol GhosttyはKitty Graphics Protocolに対応しているため、ターミナル内で画像をインライン表示できます。 ...

Azure OpenAI Azure OpenAI Service申請について

CTA ビデオ埋め込み viemoなどiframe配信できるサーバーにホスティングしているビデオが対象 vimeoの muted=1&autoplay=1 でも自動再生はできない (セキュリティ上の問題。自動再生は、ユーザーのトリガーがないとしてくれないケースがある) ショートムービーをアニメーションGIFに変換: 1 ffmpeg -i input.mp4 -r 10 output.gif