# インストールと基本的な使い方 - Human documentation: [https://docs.univer.ai/ja-JP/guides/boards/getting-started/installation](https://docs.univer.ai/ja-JP/guides/boards/getting-started/installation) - Agent Markdown: [https://docs.univer.ai/ja-JP/guides/boards/getting-started/installation.md](https://docs.univer.ai/ja-JP/guides/boards/getting-started/installation.md) - Requested language: `ja-JP` - Content language: `ja-JP` - Documentation version: `1.2.0` - Source: [boards/getting-started/installation/index.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/getting-started/installation/index.ja-JP.mdx) --- この章では、Univer Boards のインストール方法と基本的な使い方を紹介します。Boards は Univer Office SDK 製品として提供され、現在はプラグインモードを使用します。 Univer の基本概念に詳しくない場合は、先に[クイックスタート](https://docs.univer.ai/ja-JP/guides/boards/getting-started/quickstart.md)をお読みください。 Univer には*プリセットモード*と*プラグインモード*の 2 つの導入方法があります。プリセットモードは構成済みのプラグインをまとめて読み込むため、簡単に導入できます。**高度なカスタマイズや拡張**が必要な場合は、プラグインを個別に組み合わせて設定できるプラグインモードを推奨します。 ## プラグインモードでのセットアップ Univer は Boards を一連のプラグインとして提供します。ブラウザーエディターでは通常、共通の Univer ランタイム、ライセンスプラグイン、ドキュメントと描画の依存関係を登録してから、Board のモデルプラグインと UI プラグインを登録します。 ### パッケージマネージャーの使用 ES Modules と `package.json` の `exports` フィールドに対応したビルドツールを使用してください。 #### インストール Univer は UI に React、データストリームに RxJS を使用し、Vue や Angular アプリにも組み込めます。peer dependencies[^peer-dependency] の `react`、`react-dom`、`rxjs` がインストールされていることを確認してください。以下の Yarn コマンドにはこれらを明示的に含めています。 すべての `@univerjs/*` と `@univerjs-pro/*` パッケージのバージョンを揃えてください。 #### pnpm ```shell 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 ```shell 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 ```shell 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 ```shell 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 の初期化前にコンテナーを作成し、高さを指定してください： ```html
``` `FUniver.newAPI(univer)` を呼び出す前に、以下の例で使用する facade エントリーをインポートしてください。CSS は `@univerjs/design`、`@univerjs/ui`、製品 CSS の順にインポートします。 > [!WARNING: 注意] > * Board プラグインより先に `UniverLicensePlugin` を登録してください。 > * 製品固有の UI CSS より先に、共通の UI CSS をインポートしてください。 > * オプション要素を含むスナップショットを開く前に、該当する要素のプラグインを登録してください。 > * `UniverBoardsUIPlugin` は図形機能のために `UniverProFormulaEnginePlugin` を自動的に読み込みます。同じ `Univer` インスタンスで `UniverFormulaEnginePlugin` も登録している場合は、`@univerjs-pro/engine-formula` をインストールし、初期化コード内の通常エンジンのインポートと登録を `UniverProFormulaEnginePlugin` に置き換えてください。両方の数式エンジンを登録しないでください。 1. スタイル、ロケールパック、必要なプラグインをインポートします。 ```ts 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' ``` 1. Facade API[^facade-entry] を使用する場合は、Facade のエントリーポイントをインポートします。 ```ts import { FUniver } from '@univerjs/core/facade' import '@univerjs-pro/boards/facade' ``` 1. Univer インスタンスを作成してプラグインを登録し、Board ユニットを作成します。 ```ts 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` に配列を渡して複数のプラグインを一度に登録することも可能です。これは、プラグインを一元管理する必要があるシナリオで便利です。 ```typescript 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 上の要素を操作します。 ## モバイル対応 > [!WARNING] > 以下のモバイルプラグインをエクスポートする SDK パッケージが必要です。すべての `@univerjs/*` と `@univerjs-pro/*` の依存関係を**同じバージョン**に揃えてください。 > > `1.0.0-rc.0` は `UniverBoardsMobileUIPlugin` をエクスポートしません。このモバイルエントリーを含むビルドで以下の例を使用してください。 Univer Boards のタッチ操作には**モバイル UI プラグイン**を使用します。[^mobile-ui-mode] エディターを作成する前に UI モードを選択してください。 上のプラグインモードの例で、次の UI のインポートと登録を `createUnit()` の前に**置き換えます**。初期化済みのデスクトップエディターに追加しないでください。モデル、エンジン、言語ファイル、CSS、Facade のインポートは維持します。両クラスは**同じパッケージの入口**からの名前付きエクスポートです。 ```typescript 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](https://docs.univer.ai/ja-JP/server.md) で対応する機能を組み込んでください。 | パッケージ | デスクトップの登録 | モバイルの登録 | | ---------------------------------------- | ----------------------------------- | ----------------------------------------- | | `@univerjs/ui` | `UniverUIPlugin` | `UniverMobileUIPlugin` | | `@univerjs/docs-ui` | `UniverDocsUIPlugin` | `UniverDocsMobileUIPlugin` | | `@univerjs/drawing-ui` | `UniverDrawingUIPlugin` | `UniverDrawingMobileUIPlugin` | | `@univerjs-pro/boards-ui` | `UniverBoardsUIPlugin` | `UniverBoardsMobileUIPlugin` | | `@univerjs/thread-comment-ui` | `UniverThreadCommentUIPlugin` | `UniverThreadCommentMobileUIPlugin` | | `@univerjs-pro/shape-editor-ui` | `UniverShapeEditorUIPlugin` | `UniverShapeEditorMobileUIPlugin` | | `@univerjs-pro/chart-ui` | `UniverChartUIPlugin` | `UniverChartMobileUIPlugin` | | `@univerjs-pro/exchange-client` | `UniverExchangeClientPlugin` | `UniverExchangeClientMobileUIPlugin` | | `@univerjs-pro/boards-chart-ui` | `UniverBoardsChartUIPlugin` | `UniverBoardsChartMobileUIPlugin` | | `@univerjs-pro/boards-mind-ui` | `UniverBoardsMindUIPlugin` | `UniverBoardsMindMobileUIPlugin` | | `@univerjs-pro/boards-resources-ui` | `UniverBoardsResourcesUIPlugin` | `UniverBoardsResourcesMobileUIPlugin` | | `@univerjs-pro/boards-table-ui` | `UniverBoardsTableUIPlugin` | `UniverBoardsTableMobileUIPlugin` | | `@univerjs-pro/boards-thread-comment-ui` | `UniverBoardsThreadCommentUIPlugin` | `UniverBoardsThreadCommentMobileUIPlugin` | ### コンテナーとタッチ操作 コンテナーの高さを明示し、ページの viewport を設定してください。`100dvh` は動的なビューポートの高さに追従します。対象のモバイルブラウザーでスクロール、ピンチ操作、文字選択、クリップボード、ソフトキーボード表示時の配置を確認してください。幅を狭めるだけではモバイルプラグインに切り替わりません。 `UniverMobileUIPlugin` の既定値は `disableAutoFocus: true` で、初期化時にエディターが自動でフォーカスを取得することを防ぎます。 ```html
``` ## オプション機能のパッケージ Board エディターで該当する要素タイプが必要な場合は、機能パッケージを追加します。 ```shell pnpm add @univerjs-pro/boards-table @univerjs-pro/boards-table-ui pnpm add @univerjs-pro/boards-mind @univerjs-pro/boards-mind-ui ``` 機能の登録例については、[テーブル](https://docs.univer.ai/ja-JP/guides/boards/features/tables.md)、[マインドマップ](https://docs.univer.ai/ja-JP/guides/boards/features/mind-maps.md)、[インポートとエクスポート](https://docs.univer.ai/ja-JP/guides/boards/features/import-export.md)を参照してください。 ## その他のリリース 安定版リリースに加えて、Univer は alpha/beta および nightly チャンネルも提供しています。これらのバージョンでは、まだ正式にリリースされていない最新機能に早期にアクセスできます。ただし、機能が多いということはリスクも多いということを覚えておいてください。これらのバージョンにはバグ、不完全な機能、または不安定な機能が含まれている可能性があります。可能な限り、本番環境でのこれらのバージョンの使用は避けてください。 ### Alpha/Beta リリース Univer 開発チームが新機能や重要な変更を完了すると、alpha または beta チャンネルにプレリリースすることがあります。以下のコマンドを使用して Univer パッケージの alpha/beta バージョンをインストールできます： #### npm ```bash npm install @univerjs-pro/boards@alpha # Alpha バージョン npm install @univerjs-pro/boards@beta # Beta バージョン ``` #### pnpm ```bash pnpm add @univerjs-pro/boards@alpha # Alpha バージョン pnpm add @univerjs-pro/boards@beta # Beta バージョン ``` #### yarn ```bash yarn add @univerjs-pro/boards@alpha # Alpha バージョン yarn add @univerjs-pro/boards@beta # Beta バージョン ``` #### bun ```bash bun add @univerjs-pro/boards@alpha # Alpha バージョン bun add @univerjs-pro/boards@beta # Beta バージョン ``` alpha/beta バージョンを使用中に問題が発生したり、フィードバックがある場合は、[GitHub Issues](https://github.com/dream-num/univer/issues) から Univer 開発チームに報告してください。 これらの早期リリースについてのフィードバックを歓迎します。 ## 次のステップ * [クイックスタート](https://docs.univer.ai/ja-JP/guides/boards/getting-started/quickstart.md) * [Facade API](https://docs.univer.ai/ja-JP/guides/boards/getting-started/facade.md) * [ライセンス設定](https://docs.univer.ai/ja-JP/server/license.md) * [Server SDK の統合](https://docs.univer.ai/ja-JP/server.md) [^peer-dependency]: `peerDependencies` は、ホストアプリケーションが互換性のあるバージョンを用意する依存パッケージです。Univer とアプリケーションが React などのライブラリを共有できます。 [^facade-entry]: Facade は、登録済みプラグインの機能をアプリケーションから操作する API です。Facade のエントリをインポートすると API メソッドが追加されますが、機能プラグイン自体は登録されません。 [^mobile-ui-mode]: モバイル UI プラグインは初期化時にタッチ用の部品とサービスを選択します。端末の自動判定や、ウィンドウサイズ変更による既存インスタンスの切り替えは行いません。モードを変更する場合は文書の状態を保存し、旧インスタンスを破棄してから選択したプラグインで初期化します。