本記事は OpenClaw 入門｜環境構築完全ガイド、および スキル活用事例①｜Obsidian＋Redmine 自動化 の続編です。OpenClaw 本体と業務自動化スキルが稼働している前提で、画像・ブラウザ・Web 検索などのマルチモーダルスキルを統合する実装ノウハウを扱います。
はじめに：テキスト止まりの AI に飽きたら
OpenClaw を社内に立てて、Redmine・Obsidian と連携させると、文字情報のやり取りは大部分が AI で完結します。次に欲しくなるのは、「画像も出してほしい」「Web をブラウザ越しに自分で見て報告してほしい」「Google スライドや動画まで作ってほしい」といったマルチモーダルな業務です。
幸い、いま手に入る AI ツールは API もコマンドも OpenAI 互換のものが多く、「OpenClaw のスキルから 1 枚の SKILL.md で外部 API を叩く」パターンに収まります。本記事では、弊社で実装した 3 つの代表スキルとその統合例を公開します。
- image-gen：社内 NAS に立てた
chatgpt-bridge経由でgpt-image-2を呼ぶ画像生成スキル - browser-use：Browser Use CLI 2.0 で Chromium をエージェントが直接操作
- gsk：Genspark CLI で Web 検索・Gmail・Notion・スライド・動画（Veo / Kling）まで一気通貫
スキルからマルチモーダル API を叩くアーキテクチャ
マルチモーダル系は外部 API や子プロセスへの依存が増えるため、「スキルがどこに何を投げているか」を最初に固めておくのが事故防止になります。弊社の全体図はこんなイメージです。
┌───────────────────────────────────────────────────────────────┐
│ OpenClaw pod (k3s, Pi5) │
│ │
│ ┌─ skills/image-gen/SKILL.md │
│ │ └─ POST http://192.168.11.241:18080/v1/images/... │
│ │ (NAS の chatgpt-bridge / gpt-image-2) │
│ │ │
│ ├─ skills/browser-use/SKILL.md │
│ │ └─ exec browser-use --task "..." --headless │
│ │ └─ Chromium 子プロセスが Web を操作 │
│ │ │
│ ├─ skills/gsk/SKILL.md │
│ │ └─ exec gsk <subcommand> (Genspark Pro CLI) │
│ │ └─ Veo 3.1 / Kling V3 / Gmail / Notion 等 │
│ │ │
│ └─ skills/tvideo/SKILL.md │
│ └─ POST http://192.168.11.242:8001/v1/videos/... │
│ (EVO-X2 / Wan2.2 / LTX-Video, T2V/I2V/V2V) │
│ │
└───────────────────────────────────────────────────────────────┘2 つの呼び出しパターン
| パターン | 例 | 利点 | 欠点 |
|---|---|---|---|
| HTTP API | image-gen / tvideo | 言語非依存、ステートレス、複数 pod で共用 | サーバを別途立てる手間 |
| CLI 子プロセス | browser-use / gsk | 導入が早い、機能が一気に増える | pod に CLI を入れる必要、認証管理 |
「重い計算が走る・複数人が使う」ものは HTTP API、「個別ツールを使いたいだけ」のものは CLI に寄せる、という方針で運用しています。
スキル①：image-gen で社内 gpt-image-2 を呼ぶ
OpenClaw に「この記事のアイキャッチ画像を作って」「資料用のヒーロー画像を作って」と頼むだけで、社内サーバ上で gpt-image-2 が回って PNG が返ってくる──を実現するスキルです。実は本記事の冒頭ヒーロー画像も、このスキルで OpenClaw 経由で生成しています。
接続情報（SKILL.md 抜粋）
---
name: image-gen
description: 社内NASのChatGPT画像生成API（gpt-image-2）を使用した画像生成。
画像の作成・生成リクエスト全般で使用。社内LANまたはVPN接続時のみ利用可能
---
# 画像生成スキル（gpt-image-2）
## 接続情報
- エンドポイント: http://192.168.11.241:18080/v1/images/generations
- 認証: Authorization: Bearer <トークン>
- トークン取得: 環境変数 BRIDGE_API_TOKEN
- ネットワーク: 社内LAN または VPN接続時のみ到達可能
- 互換性: OpenAI SDK 互換呼び出しコード（curl 版）
TOKEN=$BRIDGE_API_TOKEN
curl -X POST http://192.168.11.241:18080/v1/images/generations \
-H "Authorization: Bearer $TOKEN" \
-H 'Content-Type: application/json' \
-d '{
"prompt": "プロンプト内容",
"quality": "high",
"size": "1536x1024"
}' \
| python3 -c "import json,base64,sys; d=json.load(sys.stdin); \
open('output.png','wb').write(base64.b64decode(d['data'][0]['b64_json']))"Python SDK 版（OpenAI 互換のうれしさ）
from openai import OpenAI
import base64, os
client = OpenAI(
base_url="http://192.168.11.241:18080/v1",
api_key=os.environ["BRIDGE_API_TOKEN"],
)
result = client.images.generate(
model="gpt-image-2",
prompt="An illustration of an open-source AI assistant ...",
quality="high",
size="1536x1024",
)
with open("output.png", "wb") as f:
f.write(base64.b64decode(result.data[0].b64_json))エンドポイントが OpenAI 互換なので、Python・Node・curl のどれでも 5 行で叩けます。社内利用者ごとに「公式 OpenAI を直叩きにしたい」「ローカル LLM 経由にしたい」「NAS の bridge にしたい」を切り替えても、コード側は base_url 1 行の差分で済みます。互換性を最優先にプロキシを設計しておくと、後の差し替え自由度が圧倒的に上がります。
なぜ chatgpt-bridge を NAS に立てたのか
「OpenAI を直接叩けばいいじゃないか」と思われるかもしれません。社内 LAN に chatgpt-bridge を立てた理由は次の 4 点です。
- トークンの一元管理：OpenAI API キーを各端末にバラまかず、NAS 上の Bearer トークンだけを発行することで利用者管理を統制
- 監査ログ：誰が・いつ・どんなプロンプトで叩いたかを bridge の access log として一元集約
- レート制限の制御：OpenAI 側の rate limit がチーム全体に効くので、bridge 側で利用者ごとのソフトリミットを入れて事故防止
- 切り替え柔軟性：OpenAI / Azure OpenAI / ローカル LLM のどれにバックエンドを切り替えても、利用者側のコードは無変更で済む
bridge の最小構成（参考）
# docker-compose.yml on NAS
services:
bridge:
image: ghcr.io/<org>/chatgpt-bridge:latest
container_name: chatgpt-bridge
ports: [ "18080:18080" ]
environment:
BRIDGE_API_TOKEN: ${BRIDGE_API_TOKEN}
OPENAI_API_KEY: ${OPENAI_API_KEY}
RATE_LIMIT_RPM: 60
restart: unless-stopped機密文書をそのまま外部に送らないように、bridge 側で「特定パターン（社員番号・電話番号・口座番号など）を含むプロンプトはマスクしてから外部へ送出」のフィルタを入れています。スキル側に書くと AI が無視する可能性があるので、プロキシ層で強制するのが安全です。
スキル②：browser-use で Chromium を直接操作
OpenClaw に「このページのフォームを埋めてくれ」「ログイン後ダッシュボードのスクリーンショットを取って」と頼めるようにするのが browser-use スキルです。Browser Use CLI 2.0 を pod に同梱し、headless Chromium を子プロセスとして起動して LLM がページ要素を操作します。
SKILL.md 抜粋
---
name: browser-use
description: Browser Use CLI 2.0 を使用したブラウザ自動操作。
Webページ閲覧、フォーム入力、スクリーンショット取得、
データ抽出などのブラウザ操作全般で使用
---
## 起動方法
- 基本: browser-use --task "<自然言語タスク>"
- スクショ: browser-use --task "..." --screenshot-dir ./shots
- ヘッドレス: 既定 ON、UI 確認時は --headed
- セッション保持: --session-name <name>使い方の典型例
# 例1: 社内 Redmine の自分のチケット一覧をスクショ
browser-use --task "https://redmine.technosphere.co.jp/issues?assigned_to_id=me に
ログインして、ステータスが完了でないチケットを表形式で抽出してくれ" \
--screenshot-dir /tmp/redmine-shots \
--session-name technosphere
# 例2: 公開ページの動作検証
browser-use --task "https://poc-h.technosphere.jp/caremente-partner/ を開いて
CTA ボタンが SP 表示でも崩れていないか PC と SP 両方で確認、
スクリーンショットを撮って差分があれば指摘してくれ"ログインが必要なページを操作するときは、事前に手動で --headed で 1 回ログイン → セッション保持のパターンが安定します。AI に毎回ログインさせると、2FA や CAPTCHA で詰まることが多いです。弊社では Redmine / GitHub / Google など主要サービスは pod 上の Chromium プロファイルに事前ログイン済みです。
失敗パターンと回避策
- 動的 DOM の同期失敗：SPA のフェッチ完了を待たずに次操作に進んで失敗 → SKILL.md に「画面遷移後 1 秒以上待機」を明記
- iframe 入れ子：Google フォーム等で iframe 内部要素を取れない → Browser Use の
--frameオプションを使うようスキルに明記 - ファイルダウンロード：headless でダウンロードがブロックされる → ダウンロードディレクトリを指定して許可
スキル③：gsk で検索・スライド・動画まで一気通貫
もう 1 つの強力カードが gsk スキルです。Genspark Pro の CLI（80＋ tools）を OpenClaw から叩けるようにしてあり、Web 検索・Gmail・Google Workspace・Notion・GitHub・スライド/ドキュメント生成・動画生成（Veo 3.1 / Kling V3）まで一発で扱えます。
SKILL.md 抜粋（gsk）
---
name: gsk
description: Genspark Tool CLI (gsk) を使った Web 検索 / 動画生成 /
画像生成 / メール / Google ワークスペース / 議事録 /
Notion / GitHub / スライド・ドキュメント生成等 81+ ツールの統合。
---
## よく使うサブコマンド
| 用途 | コマンド例 |
|------------------------|-------------------------------------------|
| Web 検索 | gsk websearch "<query>" |
| Gmail 送信 | gsk gmail send --to ... --subject ... |
| スライド生成 | gsk slides create --title ... --topic ... |
| 動画生成（Veo 3.1） | gsk video create --provider veo3 ... |
| 議事録 | gsk meeting summary --file recording.mp3 |導入時のひと工夫：PVC に npm-global を置く
OpenClaw 公式イメージは npm i -g が pod 再起動で消えます。これを回避するため、PVC 上に npm-global ディレクトリを置き、PATH 環境変数で先頭に通す運用にしました。
# deployment.yaml（抜粋）
env:
- name: PATH
value: /home/node/.openclaw/npm-global/bin:/usr/local/sbin:/usr/local/bin:...
# 初回セットアップ（pod 内で 1 回だけ）
npm config set prefix /home/node/.openclaw/npm-global
npm install -g @genspark/cliこれで pod を再起動しても gsk が PATH に残り、Genspark API トークンも Secret 経由で自動投入されるため、いつでも呼べる状態を維持できます。
スキル横断ワークフロー：実際の業務シナリオ 3 つ
スキルを個別に呼ぶだけでも価値はありますが、本領は 1 つの指示から複数スキルが連鎖するところにあります。弊社で実際に走っている例を 3 つ。
シナリオ A：ブログ記事の準備〜デプロイ
👤 「STM32 の DMA 周辺で新しいブログ記事を書きたい。
最新情報を踏まえつつ、ヒーロー画像も作って」
🤖 OpenClaw:
1. gsk websearch "STM32 DMA 2026" で最新情報を集める
2. 既存記事をリポジトリから読み、構成案を作成
3. image-gen でヒーロー画像（1536x1024）を生成
4. PIL で hero.jpg / og.jpg / webp に変換し
www/assets/img/blog/ に配置
5. PHP テンプレートを既存記事のフォーマットで作成
6. blog/index.php にカードを追加
7. obsidian-log に「作業N: 技術記事追加」を記録
8. redmine-ticket で「ブログ記事追加」チケットを完了化実際にこのシナリオで本記事を含む OpenClaw シリーズ 3 本を 1 セッションで仕上げました。記事構成・画像生成・PHP 作成・index 更新・記録まで AI 1 体で完結します。
シナリオ B：客先打ち合わせ前の準備
👤 「ハッピー様との来週の対面打ち合わせの準備を進めたい」
🤖 OpenClaw:
1. redmine-ticket: ハッピー様関連のチケットを期間絞り込みで一覧化
2. obsidian-log: 直近1ヶ月の作業ログから関連項目を抽出
3. gsk websearch でハッピー社の最新ニュースを取得
4. gsk slides create で打ち合わせ用スライドを下書き
5. image-gen で提案ビジュアル 3 種を生成（採用候補）
6. 打ち合わせ準備のタスクを Obsidian の「今日のタスク」に追加シナリオ C：開発・テスト・スクショ・報告
👤 「caremente-partner の SP 表示で CTA ボタンが崩れてる気がする。
確認して、必要なら修正してプルリク出して」
🤖 OpenClaw:
1. browser-use で PC/SP 両方のスクショを取得
2. スクショを比較、崩れ位置を特定（DOM クラス名まで)
3. SCSS を修正、ビルド
4. browser-use で再確認、修正完了を確認
5. git commit -m "refs #137 CTA ボタン SP表示崩れ修正" → PR 作成
6. redmine-ticket: ステータスを「レビュー依頼中」に
7. obsidian-log に「作業N: CTA ボタン修正」を記録3 つ以上のスキルを連鎖させて使いこなすには、各スキルの description が衝突しないこと、SKILL.md に「他スキルとの組み合わせ例」を明記することが効きます。AI は単独スキルの呼び方は得意でも、組み合わせは事例ベースで判断する傾向があるので、SKILL.md に シナリオを書いておくと採用される確率が上がります。
セキュリティとネットワーク設計の勘どころ
マルチモーダルスキルが増えるほど、AI が触れる外部リソースも増えます。弊社で意識している運用ルールをまとめます。
① 「外に出すもの」と「中に閉じるもの」を分離
| 用途 | 外部 SaaS | 社内閉鎖網 |
|---|---|---|
| 画像生成（gpt-image-2） | — | ○ NAS の chatgpt-bridge |
| 動画生成（社内 GPU） | — | ○ EVO-X2 (Wan2.2 / LTX) |
| Web 検索・ニュース | ○ Genspark | — |
| 営業メール文面生成 | ○ Codex Pro | — |
| 機密文書要約 | — | ○ ローカル Qwen / Gemma |
② 認証トークンは Secret + 環境変数のみ
BRIDGE_API_TOKEN・REDMINE_API_KEY・GSK_API_KEY・X/IG/FB の SNS トークンなど、すべて Kubernetes Secret に集約し、SKILL.md にも Git リポジトリにも実値を書かない。SKILL.md には「環境変数 BRIDGE_API_TOKEN を使う」とだけ書きます。
③ 失敗時の振る舞いを SKILL.md に明記
「API トークンが未設定なら『管理者に依頼してください』と案内」「外部到達できないなら『社内LAN または VPN 接続をお試しください』と案内」のように、失敗時の応答パターンを SKILL.md に書いておくと、ユーザーの自力解決率が一気に上がります。エンジニアがいない打ち合わせ中でも対処できる。
④ 監査ログを取る
画像生成・動画生成・ブラウザ操作・SNS 投稿系は必ず access log を残します。bridge / browser-use / SNS poster の各サービスで OpenClaw 由来のリクエストにユーザーID とセッション ID を付け、誰がいつ叩いたかを後追いできる状態に。
X / Instagram / Facebook など 「世の中に発信される」操作は誤発火のリスクが高いため、OpenClaw 本体とは別の openclaw-sns pod に隔離して、明示的なスキル呼び出し以外で動かないようにしています。本体 pod のセッション暴走で SNS まで巻き込まれない構成です。
まとめ
この記事のまとめ
- OpenClaw のスキルは HTTP API or CLI 子プロセスのいずれかで外部マルチモーダル機能と接続できる
image-genスキルで 社内 chatgpt-bridge 経由の gpt-image-2 画像生成を社内に閉じて運用browser-useスキルで Chromium を AI が直接操作し、フォーム入力・スクショ・動作検証を自動化gskスキルで Genspark CLI を取り込み、Web 検索・スライド・動画・SNS 連携を一気通貫で扱える- 本記事のヒーロー画像も image-gen スキルで生成済み（実運用そのもの）
- スキル横断シナリオ（ブログ記事生成・打ち合わせ準備・テスト＆PR）で 1 発言から十数アクションが走る
- セキュリティは「外と中を分離」「Secret に集約」「失敗時応答を明記」「監査ログ必須」「SNS は別 pod 隔離」の 5 原則で運用
テクノスフィアでは、OpenClaw・Claude Code・Codex などを核に、社内マルチモーダル AI 基盤の構築・スキル設計・社内 API 連携をご支援しています。「画像・動画・ブラウザまで AI に任せて業務を回したい」「社内 LAN に閉じてマルチモーダル AI を運用したい」といったご相談はお気軽にどうぞ。
画像 × AI × ブラウザ操作の業務自動化
現場画像の自動分類・図面読み取り・Web 上の繰り返し作業を、マルチモーダル AI × ブラウザ自動操作で半自動化する PoC を構築します。画像検査 AI の現場導入もご相談ください。