インストールと基本的な使い方

この章では、Univer Boards のインストール方法と基本的な使い方を紹介します。Boards は Univer Office SDK 製品として提供され、現在はプラグインモードを使用します。

Univer の基本概念に詳しくない場合は、先にクイックスタートをお読みください。

Univer にはプリセットモードとプラグインモードの 2 つの導入方法があります。プリセットモードは構成済みのプラグインをまとめて読み込むため、簡単に導入できます。高度なカスタマイズや拡張が必要な場合は、プラグインを個別に組み合わせて設定できるプラグインモードを推奨します。

プラグインモードでのセットアップ

Univer は Boards を一連のプラグインとして提供します。ブラウザーエディターでは通常、共通の Univer ランタイム、ライセンスプラグイン、ドキュメントと描画の依存関係を登録してから、Board のモデルプラグインと UI プラグインを登録します。

パッケージマネージャーの使用

ES Modules と package.json の exports フィールドに対応したビルドツールを使用してください。

インストール

Univer は UI に React、データストリームに RxJS を使用し、Vue や Angular アプリにも組み込めます。peer dependencies¹ の react、react-dom、rxjs がインストールされていることを確認してください。以下の Yarn コマンドにはこれらを明示的に含めています。

すべての @univerjs/* と @univerjs-pro/* パッケージのバージョンを揃えてください。

pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui

npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui

yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui react react-dom rxjs

bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui

使い方

Univer の初期化前にコンテナーを作成し、高さを指定してください：

<div id="app" style="height: 600px"></div>

FUniver.newAPI(univer) を呼び出す前に、以下の例で使用する facade エントリーをインポートしてください。CSS は @univerjs/design、@univerjs/ui、製品 CSS の順にインポートします。

1. スタイル、ロケールパック、必要なプラグインをインポートします。

   TypeScript

   import { UniverBoardsPlugin } from '@univerjs-pro/boards'import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'import BoardsUIEnUS from '@univerjs-pro/boards-ui/locale/en-US'import { UniverInkUIPlugin } from '@univerjs-pro/ink-ui'import InkUIJaJP from '@univerjs-pro/ink-ui/locale/ja-JP'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignEnUS from '@univerjs/design/locale/en-US'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIEnUS from '@univerjs/drawing-ui/locale/en-US'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIEnUS from '@univerjs/ui/locale/en-US'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs/docs-ui/lib/index.css'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs-pro/ink-ui/lib/index.css'import '@univerjs-pro/boards-ui/lib/index.css'

   コードを展開

2. Facade API² を使用する場合は、Facade のエントリーポイントをインポートします。

   TypeScript

   import { FUniver } from '@univerjs/core/facade'import '@univerjs-pro/boards/facade'

3. Univer インスタンスを作成してプラグインを登録し、Board ユニットを作成します。

   TypeScript

   const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DesignEnUS,      UIEnUS,      DocsUIEnUS,      DrawingUIEnUS,      InkUIJaJP,      BoardsUIEnUS,    ),  },})univer.registerPlugin(UniverRenderEnginePlugin)univer.registerPlugin(UniverUIPlugin, { container: 'app' })univer.registerPlugin(UniverDocsPlugin)univer.registerPlugin(UniverDocsUIPlugin)univer.registerPlugin(UniverDrawingPlugin)univer.registerPlugin(UniverDrawingUIPlugin)univer.registerPlugin(UniverInkUIPlugin)univer.registerPlugin(UniverLicensePlugin, {  license: process.env.CLIENT_LICENSE_TEXT,})univer.registerPlugin(UniverBoardsPlugin)univer.registerPlugin(UniverBoardsUIPlugin)univer.createUnit(UniverInstanceType.UNIVER_BOARD, {})const univerAPI = FUniver.newAPI(univer)

   コードを展開

univer.registerPlugin と univer.registerPlugins メソッド

univer.registerPlugin メソッドは、Univer インスタンスにプラグインを登録するために使用されます。Univer インスタンスを作成した後、このメソッドを呼び出してプラグインを登録できます。

univer.registerPlugin(Plugin, options) メソッドを使用してプラグインを登録できます。ここで Plugin は登録するプラグイン、options はオプションの設定項目で、各プラグインは異なる設定項目を持つ場合があります。

univer.registerPlugins に配列を渡して複数のプラグインを一度に登録することも可能です。これは、プラグインを一元管理する必要があるシナリオで便利です。

univer.registerPlugins([  UniverRenderEnginePlugin,  [UniverUIPlugin, { container: 'app' }],  UniverDocsPlugin,  UniverDocsUIPlugin,  UniverDrawingPlugin,  UniverDrawingUIPlugin,  UniverInkUIPlugin,  [UniverLicensePlugin, {    license: process.env.CLIENT_LICENSE_TEXT,  }],  UniverBoardsPlugin,  UniverBoardsUIPlugin,])

FUniver.newAPI(univer) が返す univerAPI オブジェクトは、Univer の Facade API です。この API を使用して Board を作成し、Board 上の要素を操作します。

モバイル対応

Univer Boards のタッチ操作にはモバイル UI プラグインを使用します。³ エディターを作成する前に UI モードを選択してください。

上のプラグインモードの例で、次の UI のインポートと登録を createUnit() の前に置き換えます。初期化済みのデスクトップエディターに追加しないでください。モデル、エンジン、言語ファイル、CSS、Facade のインポートは維持します。両クラスは同じパッケージの入口からの名前付きエクスポートです。

import { UniverBoardsMobileUIPlugin } from '@univerjs-pro/boards-ui'import { UniverDocsMobileUIPlugin } from '@univerjs/docs-ui'import { UniverDrawingMobileUIPlugin } from '@univerjs/drawing-ui'import { UniverMobileUIPlugin } from '@univerjs/ui'univer.registerPlugin(UniverMobileUIPlugin, { container: 'app' })univer.registerPlugin(UniverDocsMobileUIPlugin)univer.registerPlugin(UniverDrawingMobileUIPlugin)univer.registerPlugin(UniverBoardsMobileUIPlugin)

プラグイン対応表

必要な機能だけを登録し、モデルプラグインと依存関係は維持してください。モバイル UI の提供は、両方の操作画面が同一であることを意味しません。Pro 機能には引き続きライセンスが必要です。バックエンドが必要な機能は、アプリに Univer Server SDK で対応する機能を組み込んでください。

コンテナーとタッチ操作

コンテナーの高さを明示し、ページの viewport を設定してください。100dvh は動的なビューポートの高さに追従します。対象のモバイルブラウザーでスクロール、ピンチ操作、文字選択、クリップボード、ソフトキーボード表示時の配置を確認してください。幅を狭めるだけではモバイルプラグインに切り替わりません。

UniverMobileUIPlugin の既定値は disableAutoFocus: true で、初期化時にエディターが自動でフォーカスを取得することを防ぎます。

<meta name="viewport" content="width=device-width, initial-scale=1" /><div id="app" style="height: 100dvh"></div>

オプション機能のパッケージ

Board エディターで該当する要素タイプが必要な場合は、機能パッケージを追加します。

pnpm add @univerjs-pro/boards-table @univerjs-pro/boards-table-uipnpm add @univerjs-pro/boards-mind @univerjs-pro/boards-mind-ui

機能の登録例については、テーブル、マインドマップ、インポートとエクスポートを参照してください。

その他のリリース

安定版リリースに加えて、Univer は alpha/beta および nightly チャンネルも提供しています。これらのバージョンでは、まだ正式にリリースされていない最新機能に早期にアクセスできます。ただし、機能が多いということはリスクも多いということを覚えておいてください。これらのバージョンにはバグ、不完全な機能、または不安定な機能が含まれている可能性があります。可能な限り、本番環境でのこれらのバージョンの使用は避けてください。

Alpha/Beta リリース

Univer 開発チームが新機能や重要な変更を完了すると、alpha または beta チャンネルにプレリリースすることがあります。以下のコマンドを使用して Univer パッケージの alpha/beta バージョンをインストールできます：

pnpm add @univerjs-pro/boards@alpha # Alpha バージョン
pnpm add @univerjs-pro/boards@beta # Beta バージョン

npm install @univerjs-pro/boards@alpha # Alpha バージョン
npm install @univerjs-pro/boards@beta # Beta バージョン

yarn add @univerjs-pro/boards@alpha # Alpha バージョン
yarn add @univerjs-pro/boards@beta # Beta バージョン

bun add @univerjs-pro/boards@alpha # Alpha バージョン
bun add @univerjs-pro/boards@beta # Beta バージョン

alpha/beta バージョンを使用中に問題が発生したり、フィードバックがある場合は、GitHub Issues から Univer 開発チームに報告してください。

これらの早期リリースについてのフィードバックを歓迎します。

次のステップ

• クイックスタート
• Facade API
• ライセンス設定
• Server SDK の統合