マルチモーダル入出力とファイルプレビュー

概要

Work は多彩なマルチモーダルインタラクションに対応しています。ユーザーは画像、ドキュメント、音声などさまざまな種類のコンテンツを Agent に送信でき、Agent の応答にはコード、ドキュメント、図表など多様な形式の出力を含めることができます。いずれもインラインプレビューと全画面表示に対応しています。

マルチモーダル入力

対応する入力タイプ

コンテンツブロックタイプ	説明	例
`text`	プレーンテキスト	ユーザーメッセージ、コードスニペット
`image`	画像	PNG、JPEG、GIF、WebP（base64 エンコード）
`document`	ドキュメント	PDF ドキュメント（base64 エンコード）
`audio`	音声	音声ファイル
`file_ref`	ファイル参照	ローカルファイルパスの参照

アップロード方法

ドラッグ＆ドロップ — ファイルを入力エリアに直接ドラッグする
クリックアップロード — 入力エリアの添付ボタンをクリックしてファイルを選択する
貼り付け — クリップボードから画像を貼り付ける

マルチモーダル入力-CN

モデル形式の適合

システムは現在使用している LLM プロバイダーに応じて入力形式を自動的に変換します。

プロバイダー	画像	ドキュメント	音声
Anthropic	ネイティブ base64 image ブロック	ネイティブ base64 document ブロック	非対応
OpenAI	image_url（data URI）	テキスト説明にダウングレード	ネイティブ audio ブロック
DeepSeek	非対応	非対応	非対応

システムは resolveCapabilities 関数を通じて現在のモデルのマルチモーダル能力（vision / document / audio）を自動的に検出し、非対応のタイプはユーザーに通知するか、ダウングレード処理を行います。

マルチモーダル出力とプレビュー

9 種類のプレビュータイプ

Agent が出力したファイルは自動的にタイプが識別され、対応するプレビューコンポーネントとしてレンダリングされます。

ファイルタイプ	プレビューコンポーネント	機能ボタン
PDF	PdfPreviewWindow	ズーム（拡大／縮小／幅に合わせる）、ページ送り、ページ番号表示
PPT	PptPreviewWindow	スライドナビゲーション（前へ／次へ）、ズーム
Excel / Word	OfficePreviewWindow	ズーム、ページ送り
コード	CodePreviewWindow	シンタックスハイライト（多言語）、クリップボードへコピー
Markdown	MarkdownPreviewWindow	Markdown レンダリングプレビュー
HTML	HtmlPreviewWindow	埋め込み iframe レンダリング
画像	MediaPreviewWindow	ズーム、ドラッグでパン
動画	MediaPreviewWindow	再生／一時停止、シークバー、音量コントロール
音声	MediaPreviewWindow	再生／一時停止、シークバー

インラインプレビューカード

Agent が出力したファイルは、まず**インラインプレビューカード（InlinePreviewCard）**の形で対話フロー内に表示されます。

インラインプレビューカード-CN

要素	説明
タイトルバー	ファイル名、タイプバッジ、操作ボタン
サムネイルコンテンツ	ファイル内容のプレビュー（折りたたみ状態、下部のグラデーション +「もっと表示」のヒント）
ホバー効果	ハイライトされた枠線 + シャドウの強調

操作ボタン（アイコン + ツールチップ）：

ボタン	機能
展開	全画面プレビューウィンドウ
コピー	内容をクリップボードにコピー
ファイルマネージャー	システムのファイルマネージャーで表示（APP のみ）
外部で開く	既定のアプリで開く（ローカルファイル）またはブラウザで開く（URL）

全画面プレビューウィンドウ

「展開」ボタンをクリックすると全画面プレビューウィンドウに入ります。

全画面プレビューウィンドウ-CN

プレビューツールバー（PreviewToolbar）：

ズームコントロール：拡大 / 縮小 / 幅に合わせる
ページナビゲーション：前へ / 次へ（複数ページのドキュメント）
ページ番号ステータス：現在のページ / 総ページ数

ショートカットキー：

ショートカットキー	機能
`+` または `=`	拡大
`-`	縮小
`0`	ズームをリセット
`Esc`	プレビューウィンドウを閉じる

プレビューレイアウトモード

モード	端末	説明
Overlay（オーバーレイ）	APP 端末の既定	固定配置のオーバーレイウィンドウ
Docked（ドッキング）	Web 端末	WorkPage の右側パネルに埋め込み

Web と APP の機能共有

マルチモーダルプレビューのコアコンポーネントは claw-shared 層で実装されており、Web と APP は同一のコードを共有します。

DocumentPreviewModal — プレビューウィンドウのコンテナ
InlinePreviewCard — インラインプレビューカード
PreviewToolbar — プレビューツールバー
previewUtils.ts — ファイルタイプの識別と読み込みツール

両端末は FileAccess インターフェースを通じてファイルの読み取り方法を抽象化します。

APP 端末：Tauri のローカルファイル API を通じて読み取る
Web 端末：HTTP URL または data URL を通じて読み込む

操作ガイド

画像／ドキュメントを Agent に送信する方法

ドラッグ＆ドロップ：ファイルをデスクトップやファイルマネージャーから Work の入力エリアに直接ドラッグする
クリックアップロード：入力エリア左側の 📎 添付ボタンをクリックしてファイルを選択する
画像を貼り付け：画像をコピーした後、入力エリアで Ctrl+V / Cmd+V で貼り付ける
添付ファイルが入力エリア上部のプレビューバーに表示される
Agent に何をしてほしいかの説明文（例：「この画像を分析して」）を入力し、Enter で送信する

ファイルサイズ制限：Read File ツールは最大 5MB のファイルに対応しています。それより大きなファイルは、まずクラウドストレージにアップロードしてからリンクを提供することをおすすめします。

ファイルプレビューの使い方

Agent の出力にファイルが含まれる場合、対話フロー内にインラインプレビューカードが表示されます
カードにホバーして詳細情報を確認する
展開ボタンをクリックして全画面プレビューに入る
全画面プレビューでツールバーを使って操作する（ズーム、ページ送りなど）
Esc を押すか閉じるボタンをクリックしてプレビューを終了する

よくある質問

画像を送信したのに Agent が分析しないのはなぜですか？

現在のモデルが vision 能力に非対応の可能性があります。モデル設定のモデルに vision 対応のマークが付いているか確認してください。DeepSeek 系列のモデルは画像入力に非対応です。
Claude Sonnet 4 または GPT-4o への切り替えをおすすめします。

PDF を送信すると「非対応」としか返ってこないのはなぜですか？

document 能力は現在、Anthropic 系列モデル（Claude）のみがネイティブに対応しています。OpenAI モデルを使用する場合、PDF はダウングレード処理されます。
代替方法：Agent に Read File ツールを使って PDF ファイルのパスを読み取らせてください。

プレビューウィンドウでファイルの表示が異常です

ファイル形式が正しいか確認してください（例：.xlsx ファイルに .csv 拡張子を付けることはできません）
非常に大きなファイルは読み込みが遅くなる場合があるため、読み込み完了までお待ちください
一部の特殊な形式の Office ファイルは、外部アプリで開く必要がある場合があります