業務フローの設計に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

Wix 会員登録 Wixでのサイト会員の招待手順は、招待する会員の種類によって異なります。ここでは、主な招待方法を3つご紹介します。 1. サイトの共同編集者として招待する サイトの共同編集者として招待すると、招待されたユーザーはサイトの編集や管理を行うことができます。 手順: Wixアカウントにログインし、サイトダッシュボードを開きます。 左側のメニューから「設定」をクリックします。 「役割・権限」をクリックします。 「共同編集者を招待」をクリックします。 招待するユーザーのメールアドレスを入力し、役割を選択します。 「招待を送信」をクリックします。 2. サイト会員（メンバー）として招待する サイト会員（メンバー）として招待すると、招待されたユーザーはサイトの会員限定コンテンツにアクセスしたり、会員限定の機能を利用したりすることができます。 手順: Wixアカウントにログインし、サイトダッシュボードを開きます。 左側のメニューから「顧客管理」をクリックします。 「連絡先」をクリックします。 「連絡先を追加」をクリックし、招待するユーザーの情報を入力します。 「サイトのメンバーとして招待」にチェックを入れます。 「追加」をクリックします。 3. Wixグループのメンバーとして招待する Wixグループのメンバーとして招待すると、招待されたユーザーはグループ内のコンテンツにアクセスしたり、グループ内で交流したりすることができます。 手順: Wixアカウントにログインし、サイトダッシュボードを開きます。 左側のメニューから「コミュニティ」をクリックします。 「グループ」をクリックします。 招待したいグループを選択します。 「メンバーを招待」をクリックします。 招待するユーザーのメールアドレスを入力するか、連絡先から選択します。 「招待を送信」をクリックします。 補足: 招待されたユーザーは、招待メールに記載されたリンクから登録手続きを行う必要があります。 招待する会員の種類によって、利用できる機能や権限が異なります。 各機能に関してより詳しく知りたい場合はwixのサポートページを参照ください。 役割・権限：サイト所有者向け情報 | サポートセンター | Wix.com Wix グループ：グループにメンバーを追加して管理する | サポートセンター | Wix.com これらの手順を参考に、目的に合った方法でサイト会員を招待してください。 招待した人のみに限定する Wixでサイト会員の登録を招待した人のみに限定することは、いくつかの方法を組み合わせることで可能です。以下に、その方法と注意点をまとめました。 1. サイト会員登録フォームの非表示と招待制の導入 Wix標準の会員登録フォームをサイトから削除または非表示にします。 代わりに、招待メールまたは招待リンクを通じてのみ会員登録を受け付けるようにします。 これにより、招待された人以外は会員登録ページにアクセスできなくなります。 2. 会員限定ページの作成とアクセス制限 会員のみがアクセスできる限定ページを作成します。 ページ設定で「サイト会員のみ」を選択し、アクセスを制限します。 必要に応じて、特定の会員グループやプラン加入者のみにアクセスを許可する設定も可能です。 3. Wixグループ機能の活用 Wixグループを作成し、グループへの参加を招待制にします。 グループ内のコンテンツやディスカッションは、グループメンバーのみが閲覧できます。 グループのプライバシー設定で、承認したメンバーのみが参加できるように設定します。 4. Wixイベント機能の活用 イベントを作成する際に、登録設定で「サイト会員のみ」を選択します。 これにより、サイト会員として登録した人のみがイベントに参加可能となります。 注意点: ...

請求入金 マッチング 文字列の揺らぎがある場合、ベクトルデータを使ったマッチングは非常に有効です。 具体的には、文字列の類似度を計算するために、自然言語処理（NLP）の技術を利用することができます。 以下は、fuzzywuzzyライブラリを使用して文字列の類似度を計算し、マッチングを行うサンプルコードです： まず、必要なライブラリをインストールします： 1 pip install pandas openpyxl fuzzywuzzy 次に、サンプルコードです： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 import pandas as pd from fuzzywuzzy import fuzz # 入金リストと請求明細のファイルパス payments_file = 'payments.xlsx' invoices_file = 'invoices.xlsx' # Excelファイルからデータを読み込む payments_df = pd.read_excel(payments_file) invoices_df = pd.read_excel(invoices_file) # 類似度の閾値を設定 similarity_threshold = 80 # マッチング結果を格納するリスト matched_records = [] # 入金リストと請求明細をマッチングさせる for _, payment in payments_df.iterrows(): for _, invoice in invoices_df.iterrows(): # 金額が一致するか確認 if payment['金額'] == invoice['請求金額']: # 振り込み依頼人と顧客名の類似度を計算 similarity = fuzz.token_sort_ratio(payment['振り込み依頼人'], invoice['顧客名']) if similarity >= similarity_threshold: matched_records.append({ '入金ID': payment['入金ID'], '請求ID': invoice['請求ID'], '金額': payment['金額'], '振り込み依頼人': payment['振り込み依頼人'], '顧客名': invoice['顧客名'], '類似度': similarity }) # マッチング結果をデータフレームに変換 matched_df = pd.DataFrame(matched_records) # マッチング結果を表示 print(matched_df) # マッチング結果を新しいExcelファイルに保存 matched_df.to_excel('matched_results.xlsx', index=False) このコードでは、以下の手順を実行しています： ...