文書の埋め込み
異なる Office 製品へ編集可能なコンテンツを埋め込みます。
埋め込みブロックは、ある Univer 製品を別の製品の中に配置します。プロジェクト文書で予算とタスクを管理したり、スライドで計算可能な表を確認したり、キャンバスに計画と説明を並べたりできます。子コンテンツは独自のデータモデルとネイティブ編集機能を維持し、有効化するとフォーカスとメニューが切り替わります。
仕組み:ホストと子 Unit
ホスト Unit は位置、サイズ、子 Unit の参照と既定のビューを保存し、子 Unit はセル、段落、レコードなどの実データを保存します。Embed は参照を解決して子 Unit を読み込み、そのエディターをホスト内に配置します。Unit はブック、文書、プレゼンテーション、リレーショナルテーブル、キャンバスなどのコンテンツ単位です。
埋め込み関係と実データは別々に保存します。表のセルを編集すると子 Sheet が更新され、ブロックの移動やサイズ変更はホストのアンカーを更新します。
埋め込み可能な場所
| ホスト製品 | 配置場所 | 代表的な用途 |
|---|---|---|
| Sheet | 浮動オブジェクト、ブックのタブ | 計算モデルの横に説明文書を置き、タスク管理表へ切り替える。 |
| Doc | 本文ブロック | 文章、予算、タスクをプロジェクトページにまとめる。 |
| Slide | 浮動オブジェクト、独立ページ | 編集可能な元データをレビューの結論と並べる。 |
| Relational Table | テーブル一覧の項目 | 業務データベースからプロジェクト文書を開く。 |
| Canvases | キャンバスの浮動オブジェクト | データ、提案、議論を一つの画面にまとめる。 |
5 種類のホストの実例
以下は Facade API で作成し、ブラウザーで撮影した英語の実例です。各例は独立した子 Unit を使用し、内容と数値はすべてデモ用です。
Sheet:計算と意思決定メモ
左側で支出を集計し、右側に Doc 全体を埋め込みます。Launch tracker タブでは Relational Table を開きます。見積もり、業務分析、財務モデルで前提と計算と説明をまとめる用途です。Excel に文書オブジェクトを挿入する操作に近い使い方です。
Doc:予算とタスクを含むプロジェクトページ
本文に予算 Sheet と Relational Tableを順に配置し、文脈を保ったままデータ確認とタスク管理を行います。Notion のインラインデータベースに似た構成ですが、予算には Sheet の数式エンジン、タスクには Relational Table のフィールドとビューが保持されます。
Slide:レビュー画面の元データ
予算 Sheet、タスク Relational Table、数式で更新される指標を同じスライドに配置します。PowerPoint に Excel を埋め込む操作と同様に、結論から編集可能なモデルへ戻れます。画像の予算は $62,100 に更新済みです。
Relational Table:データベース内の説明文書
テーブル一覧に Launch brief の Doc を追加し、タスクと説明を切り替えます。CRM、案件管理、業務データベースに適しています。これは一覧の入口であり、各レコードに文書を自動作成する機能ではありません。
Canvases:議論のためのデータキャンバス
予算 Sheet と提案 Doc を並べ、下部に数式による支出集計を置きます。プロジェクトルーム、レビュー、調査のキャンバスで、元データと文脈を確認しながら議論できます。
数式の連動
埋め込みは表示と編集を、数式参照は計算を担当します。 ブロックを挿入するだけでは集計数式は作成されません。Unit 間参照を設定すると、Sheet のセルや Doc・Slide・Canvases の数式付き Shape から Sheet の範囲や Relational Table のフィールドを読み取れます。Relational Table の数式フィールドも Sheet を参照できます。元データと変更通知が利用可能な場合、関連する編集で再計算が実行されます。
| 用途と数式 | 検証結果 |
|---|---|
Slide の予算集計:=SUM('[Leadership Budget]Budget'!C5:C8) | C7 を 17,100 から 18,000 に変更すると、合計が 61,200 → 62,100 に更新。 |
Sheet で Relational Table を集計:=SUM([Control Tasks]!Launch_tasks[Cost]) | Cost を 4,000 から 4,500 に変更すると、合計が 18,000 → 18,500 に更新。 |
数式の名前に加え、対応する安定した Unit ID を保存します。getFormula().buildReference() で参照とホスト側の外部参照マッピングを作成してください。Relational Table のテーブルには表示名や ID を直接連結せず、table.getFormulaName() を使います。数式付き Shape は shape.setFormula({ formula, externalReferences }) で設定し、計算完了後に結果を読み取ります。Formula Facade、Shape Facade、Relational Table の数式を参照してください。
作成と組み込み
同じ Univer インスタンスにホストと子製品、その UI、Embed と Embed UI を登録します。以下は既存の Sheet を Doc 本文へ挿入する例です。hostDocument と budgetWorkbook は対応する Facade です。
import '@univerjs-pro/embed/facade'const block = univerAPI.createEmbed({ host: { unitId: hostDocument.getId(), surface: univerAPI.Enum.FEmbedHostSurface.DocBlock, }, content: { unitType: univerAPI.Enum.UniverInstanceType.UNIVER_SHEET, ref: `#unit=${encodeURIComponent(budgetWorkbook.getId())}&type=sheet`, },})const embeddedWorkbook = await block.loadAsync()createEmbed() は関係とホストのアンカーを作成し、loadAsync() は子 Unit を読み込んで Facade を返します。初期ワークシート、Slide ページ、Relational Table ビューは displayTarget で指定します。プラグイン、スタイル、言語、ローダーの設定は埋め込みガイド、他の配置方法は Embed Facadeを参照してください。
保存、共同編集、対応範囲
- 個別に保存:ホスト Snapshot は参照、位置、表示設定を保存し、子の最新内容を自動で同梱しません。ブロックの削除は子文書の削除ではありません。
- 共同編集の読み込み:Server SDK は子のスナップショットと共同編集サービスを提供します。ブラウザーは
@univerjs-pro/collaboration-embedで子 Unit を読み込み、そのセッションに参加します。親子はそれぞれ変更とバージョンを持ちます。 - アクセスと権限:参照の解決、データの読み込み、認可はアプリケーションが担当します。ホストへのアクセス権が子の編集権限を自動で付与することはありません。
- 現在の範囲:異なる種類の Sheet、Doc、Slide、Relational Table、Canvases に対応します。PDF、同種間の埋め込み、さらに深い入れ子は対象外です。同一 Univer ランタイム内で、子 Unit は一つの有効な埋め込みにのみ属せます。
表からアプリケーション独自の入力欄、指標、グラフを動かす場合は双方向バインディングを使用します。子製品のエディターが必要な場合は Embed Block を使用します。
このガイドはいかがですか?