# OpenClaw スキル活用事例②｜画像生成・ブラウザ自動操作で広がるマルチモーダル業務自動化｜株式会社テクノスフィア > OpenClaw のスキル機構で gpt-image-2 画像生成・Browser Use 2.0 自動操作・Genspark CLI 検索/スライドを統合した実例。OpenAI 互換 API・社内 chatgpt-bridge・k3s 設計を公開。 URL: https://technosphere.co.jp/blog/openclaw-skills-image-browser ** 目次 1. はじめに：テキスト止まりの AI に飽きたら 2. スキルからマルチモーダル API を叩くアーキテクチャ 3. スキル①：image-gen で社内 gpt-image-2 を呼ぶ 4. なぜ chatgpt-bridge を NAS に立てたのか 5. スキル②：browser-use で Chromium を直接操作 6. スキル③：gsk で検索・スライド・動画まで一気通貫 7. スキル横断ワークフロー：実際の業務シナリオ 3 つ 8. セキュリティとネットワーク設計の勘どころ 9. まとめ ** 本記事のスコープ 本記事は [OpenClaw 入門｜環境構築完全ガイド](https://technosphere.co.jp/blog/openclaw-getting-started)、および [スキル活用事例①｜Obsidian＋Redmine 自動化](https://technosphere.co.jp/blog/openclaw-skills-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 (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 SDK 互換のうれしさ エンドポイントが OpenAI 互換なので、Python・Node・curl のどれでも 5 行で叩けます。社内利用者ごとに「公式 OpenAI を直叩きにしたい」「ローカル LLM 経由にしたい」「NAS の bridge にしたい」を切り替えても、コード側は `base_url` 1 行の差分で済みます。**互換性を最優先にプロキシを設計**しておくと、後の差し替え自由度が圧倒的に上がります。 ## なぜ chatgpt-bridge を NAS に立てたのか 「OpenAI を直接叩けばいいじゃないか」と思われるかもしれません。社内 LAN に `chatgpt-bridge` を立てた理由は次の 4 点です。 1. **トークンの一元管理：**OpenAI API キーを各端末にバラまかず、NAS 上の Bearer トークンだけを発行することで利用者管理を統制 2. **監査ログ：**誰が・いつ・どんなプロンプトで叩いたかを bridge の access log として一元集約 3. **レート制限の制御：**OpenAI 側の rate limit がチーム全体に効くので、bridge 側で**利用者ごとのソフトリミット**を入れて事故防止 4. **切り替え柔軟性：**OpenAI / Azure OpenAI / ローカル LLM のどれにバックエンドを切り替えても、利用者側のコードは無変更で済む ### bridge の最小構成（参考） ``` # docker-compose.yml on NAS services: bridge: image: ghcr.io//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](https://browser-use.com/) を 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 ``` ### 使い方の典型例 ``` # 例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](https://www.genspark.ai/) の 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 "" | | 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 を付け、誰がいつ叩いたかを後追いできる状態に。 ** SNS 自動投稿は別 Pod を立てる 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 を運用したい」といったご相談はお気軽にどうぞ。 ／この内容の受託開発・PoC相談はこちら＼ ### 画像 × AI × ブラウザ操作の業務自動化 現場画像の自動分類・図面読み取り・Web 上の繰り返し作業を、マルチモーダル AI × ブラウザ自動操作で半自動化する PoC を構築します。画像検査 AI の現場導入もご相談ください。 [AI開発サービスを見る](https://technosphere.co.jp/ai-solution) [画像認識AIサービスを見る](https://technosphere.co.jp/vision-system) [マルチモーダルAI業務自動化相談](https://technosphere.co.jp/contact) # OpenClaw # スキル # 画像生成 # gpt-image-2 # Browser Use # マルチモーダル # 業務自動化 # AIエージェント ## 次に読む｜OpenClaw シリーズ - [OpenClaw シリーズ OpenClaw 入門｜OSSのAIアシスタントを社内 Kubernetes で動かす環境構築完全ガイド Docker Compose から k3s 本番運用まで](https://technosphere.co.jp/blog/openclaw-getting-started) - [OpenClaw シリーズ スキル活用事例①｜Obsidian作業ログ＋Redmineチケット運用を完全自動化 SKILL.md / AUTO ゾーン / 三位一体ワークフロー](https://technosphere.co.jp/blog/openclaw-skills-obsidian-redmine) - [関連記事 RAGチャットボットとは？仕組み・メリット・導入方法 スキル設計と相性のよい RAG 基礎](https://technosphere.co.jp/blog/what-is-rag-chatbot) - [サービス AI ソリューション開発 マルチモーダル AI 基盤の構築支援](https://technosphere.co.jp/ai-solution) [技術コラム一覧に戻る](https://technosphere.co.jp/blog/)