# インストールと基本的な使い方 - Human documentation: [https://docs.univer.ai/ja-JP/guides/slides/getting-started/installation](https://docs.univer.ai/ja-JP/guides/slides/getting-started/installation) - Agent Markdown: [https://docs.univer.ai/ja-JP/guides/slides/getting-started/installation.md](https://docs.univer.ai/ja-JP/guides/slides/getting-started/installation.md) - Requested language: `ja-JP` - Content language: `ja-JP` - Documentation version: `1.1.0` - Source: [slides/getting-started/installation/index.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/getting-started/installation/index.ja-JP.mdx) --- この章では Univer Slides のインストールと基本的な使い方を説明します。このガイドでは Web SDK の Slides パッケージを使用します。現在 Slides の preset は提供されていないため、アプリケーションは plugin mode で構築します。 Univer の基本概念にまだ慣れていない場合は、先に [Quickstart](https://docs.univer.ai/ja-JP/guides/slides/getting-started/quickstart.md) を確認してください。 Univer には*プリセットモード*と*プラグインモード*の 2 つの導入方法があります。プリセットモードは構成済みのプラグインをまとめて読み込むため、簡単に導入できます。**高度なカスタマイズや拡張**が必要な場合は、プラグインを個別に組み合わせて設定できるプラグインモードを推奨します。 ## プラグインモードでのセットアップ Univer は Slides 機能をプラグインとして提供します。ブラウザーエディターでは通常、共通の Univer runtime、ライセンスプラグイン、Docs と Drawing の依存関係を登録してから、Slides のモデルと 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/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui ``` #### npm ```shell npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui ``` #### yarn ```shell yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui react react-dom rxjs ``` #### bun ```shell bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui ``` #### 使い方 Univer の初期化前にコンテナーを作成し、高さを指定してください： ```html
``` `FUniver.newAPI(univer)` を呼び出す前に、以下の例で使用する facade エントリーをインポートしてください。CSS は `@univerjs/design`、`@univerjs/ui`、製品 CSS の順にインポートします。 > [!WARNING: 注意] > * Slides プラグインを登録する前に `UniverLicensePlugin` を登録してください。 > * CSS の読み込み順は重要です。共通 UI CSS を先に読み込み、その後に製品 UI CSS を読み込みます。 > * 印刷、テーブル、チャート、インポートとエクスポートなどの追加機能パッケージは、製品で必要になったときだけ追加してください。 > * `UniverSlidesUIPlugin` は図形機能のために `UniverProFormulaEnginePlugin` を自動的に読み込みます。同じ `Univer` インスタンスで `UniverFormulaEnginePlugin` も登録している場合は、`@univerjs-pro/engine-formula` をインストールし、初期化コード内の通常エンジンのインポートと登録を `UniverProFormulaEnginePlugin` に置き換えてください。両方の数式エンジンを登録しないでください。 1. CSS、locale pack、必要なプラグインを import します。 ```typescript import { UniverLicensePlugin } from '@univerjs-pro/license' import { UniverSlidesPlugin } from '@univerjs-pro/slides' import { UniverSlidesUIPlugin } from '@univerjs-pro/slides-ui' import SlidesUIJaJP from '@univerjs-pro/slides-ui/locale/ja-JP' import SlidesJaJP from '@univerjs-pro/slides/locale/ja-JP' import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core' import DesignJaJP from '@univerjs/design/locale/ja-JP' import { UniverDocsPlugin } from '@univerjs/docs' import { UniverDocsUIPlugin } from '@univerjs/docs-ui' import DocsUIJaJP from '@univerjs/docs-ui/locale/ja-JP' import { UniverDrawingPlugin } from '@univerjs/drawing' import { UniverRenderEnginePlugin } from '@univerjs/engine-render' import { UniverUIPlugin } from '@univerjs/ui' import UIJaJP from '@univerjs/ui/locale/ja-JP' import '@univerjs/design/lib/index.css' import '@univerjs/ui/lib/index.css' import '@univerjs/docs-ui/lib/index.css' import '@univerjs-pro/slides-ui/lib/index.css' ``` 1. Facade API[^facade-entry] を使う場合は、関連する facade entry を import します。 ```typescript import { FUniver } from '@univerjs/core/facade' import '@univerjs-pro/slides/facade' ``` 1. Univer インスタンスを作成し、プラグインを登録して Slides unit を作成します。 ```typescript const univer = new Univer({ locale: LocaleType.JA_JP, locales: { [LocaleType.JA_JP]: mergeLocales( DesignJaJP, UIJaJP, DocsUIJaJP, SlidesJaJP, SlidesUIJaJP, ), }, }) univer.registerPlugin(UniverRenderEnginePlugin) univer.registerPlugin(UniverUIPlugin, { container: 'app', }) univer.registerPlugin(UniverDocsPlugin) univer.registerPlugin(UniverDocsUIPlugin) univer.registerPlugin(UniverDrawingPlugin) univer.registerPlugin(UniverLicensePlugin, { license: process.env.CLIENT_LICENSE_TEXT, }) univer.registerPlugin(UniverSlidesPlugin) univer.registerPlugin(UniverSlidesUIPlugin) univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {}) const univerAPI = FUniver.newAPI(univer) ``` ここで作成した `univerAPI` は Univer の Facade API です。これを使ってプレゼンテーションを作成し、Slides 関連 API を呼び出せます。 #### `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, [UniverLicensePlugin, { license: process.env.CLIENT_LICENSE_TEXT, }], UniverSlidesPlugin, UniverSlidesUIPlugin, ]) ``` #### 追加機能パッケージ エディターで必要になった機能だけを追加します。 ```shell pnpm add @univerjs-pro/slides-print pnpm add @univerjs-pro/slides-table @univerjs-pro/slides-table-ui pnpm add @univerjs-pro/chart-ui @univerjs-pro/slides-chart @univerjs-pro/slides-chart-ui pnpm add @univerjs-pro/slides-exchange-client ``` 機能登録の例は、[印刷](https://docs.univer.ai/ja-JP/guides/slides/features/print.md)、[テーブル](https://docs.univer.ai/ja-JP/guides/slides/features/tables.md)、[チャート](https://docs.univer.ai/ja-JP/guides/slides/features/charts.md)、[インポートとエクスポート](https://docs.univer.ai/ja-JP/guides/slides/features/import-export.md) を参照してください。 #### 一部プラグインの遅延読み込み plugin mode では、追加機能プラグインを必要になるまで遅延読み込みできます。 ```typescript univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {}) import('@univerjs-pro/slides-chart').then(({ UniverSlidesChartPlugin }) => { univer.registerPlugin(UniverSlidesChartPlugin) }) ``` ### サーバーサイドでの使用 Node.js では通常、モデルプラグインだけを登録し、ブラウザー UI プラグインは登録しません。 ```typescript univer.registerPlugin(UniverSlidesPlugin) ``` モデルプラグインはヘッドレスでのスナップショット処理に使います。共同編集やファイル変換 API を提供する場合は、対応する [Server SDK モジュール](https://docs.univer.ai/ja-JP/server.md)を別途組み込んでください。このプラグインの登録だけではサービスは作成されません。 ## モバイル対応 > [!WARNING] > 以下のモバイルプラグインをエクスポートする SDK パッケージが必要です。すべての `@univerjs/*` と `@univerjs-pro/*` の依存関係を**同じバージョン**に揃えてください。 > > `1.0.0-rc.0` は `UniverSlidesMobileUIPlugin` をエクスポートしません。このモバイルエントリーを含むビルドで以下の例を使用してください。 Univer Slides のタッチ操作には**モバイル UI プラグイン**を使用します。[^mobile-ui-mode] エディターを作成する前に UI モードを選択してください。 上のプラグインモードの例で、次の UI のインポートと登録を `createUnit()` の前に**置き換えます**。初期化済みのデスクトップエディターに追加しないでください。モデル、エンジン、言語ファイル、CSS、Facade のインポートは維持します。両クラスは**同じパッケージの入口**からの名前付きエクスポートです。 ```typescript import { UniverSlidesMobileUIPlugin } from '@univerjs-pro/slides-ui' import { UniverDocsMobileUIPlugin } from '@univerjs/docs-ui' import { UniverMobileUIPlugin } from '@univerjs/ui' univer.registerPlugin(UniverMobileUIPlugin, { container: 'app' }) univer.registerPlugin(UniverDocsMobileUIPlugin) univer.registerPlugin(UniverSlidesMobileUIPlugin) ``` ### プラグイン対応表 必要な機能だけを登録し、モデルプラグインと依存関係は維持してください。モバイル UI の提供は、両方の操作画面が同一であることを意味しません。Pro 機能には引き続きライセンスが必要です。バックエンドが必要な機能は、アプリに [Univer Server SDK](https://docs.univer.ai/ja-JP/server.md) で対応する機能を組み込んでください。 | パッケージ | デスクトップの登録 | モバイルの登録 | | ---------------------------------------- | ----------------------------------- | ----------------------------------------- | | `@univerjs/ui` | `UniverUIPlugin` | `UniverMobileUIPlugin` | | `@univerjs/docs-ui` | `UniverDocsUIPlugin` | `UniverDocsMobileUIPlugin` | | `@univerjs-pro/slides-ui` | `UniverSlidesUIPlugin` | `UniverSlidesMobileUIPlugin` | | `@univerjs/drawing-ui` | `UniverDrawingUIPlugin` | `UniverDrawingMobileUIPlugin` | | `@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/slides-chart-ui` | `UniverSlidesChartUIPlugin` | `UniverSlidesChartMobileUIPlugin` | | `@univerjs-pro/slides-print` | `UniverSlidesPrintPlugin` | `UniverSlidesPrintMobilePlugin` | | `@univerjs-pro/slides-table-ui` | `UniverSlidesTableUIPlugin` | `UniverSlidesTableMobileUIPlugin` | | `@univerjs-pro/slides-thread-comment-ui` | `UniverSlidesThreadCommentUIPlugin` | `UniverSlidesThreadCommentMobileUIPlugin` | ### コンテナーとタッチ操作 コンテナーの高さを明示し、ページの viewport を設定してください。`100dvh` は動的なビューポートの高さに追従します。対象のモバイルブラウザーでスクロール、ピンチ操作、文字選択、クリップボード、ソフトキーボード表示時の配置を確認してください。幅を狭めるだけではモバイルプラグインに切り替わりません。 `UniverMobileUIPlugin` の既定値は `disableAutoFocus: true` で、初期化時にエディターが自動でフォーカスを取得することを防ぎます。 ```html
``` ## その他のリリース 安定版リリースに加えて、Univer は alpha/beta および nightly チャンネルも提供しています。これらのバージョンでは、まだ正式にリリースされていない最新機能に早期にアクセスできます。ただし、機能が多いということはリスクも多いということを覚えておいてください。これらのバージョンにはバグ、不完全な機能、または不安定な機能が含まれている可能性があります。可能な限り、本番環境でのこれらのバージョンの使用は避けてください。 ### Alpha/Beta リリース Univer 開発チームが新機能や重要な変更を完了すると、alpha または beta チャンネルにプレリリースすることがあります。以下のコマンドを使用して Univer パッケージの alpha/beta バージョンをインストールできます： #### npm ```bash npm install @univerjs-pro/slides@alpha # Alpha バージョン npm install @univerjs-pro/slides@beta # Beta バージョン ``` #### pnpm ```bash pnpm add @univerjs-pro/slides@alpha # Alpha バージョン pnpm add @univerjs-pro/slides@beta # Beta バージョン ``` #### yarn ```bash yarn add @univerjs-pro/slides@alpha # Alpha バージョン yarn add @univerjs-pro/slides@beta # Beta バージョン ``` #### bun ```bash bun add @univerjs-pro/slides@alpha # Alpha バージョン bun add @univerjs-pro/slides@beta # Beta バージョン ``` alpha/beta バージョンを使用中に問題が発生したり、フィードバックがある場合は、[GitHub Issues](https://github.com/dream-num/univer/issues) から Univer 開発チームに報告してください。 これらの早期リリースについてのフィードバックを歓迎します。 ## 次のステップ * [Facade API](https://docs.univer.ai/ja-JP/guides/slides/getting-started/facade.md) で Slides を Facade API から操作する方法を確認します。 * [ライセンス設定](https://docs.univer.ai/ja-JP/server/license.md) * [Server SDK の統合](https://docs.univer.ai/ja-JP/server.md) * 必要に応じて [機能](https://docs.univer.ai/ja-JP/guides/slides/features/print.md) セクションのプラグインを追加します。 [^peer-dependency]: `peerDependencies` は、ホストアプリケーションが互換性のあるバージョンを用意する依存パッケージです。Univer とアプリケーションが React などのライブラリを共有できます。 [^facade-entry]: Facade は、登録済みプラグインの機能をアプリケーションから操作する API です。Facade のエントリをインポートすると API メソッドが追加されますが、機能プラグイン自体は登録されません。 [^mobile-ui-mode]: モバイル UI プラグインは初期化時にタッチ用の部品とサービスを選択します。端末の自動判定や、ウィンドウサイズ変更による既存インスタンスの切り替えは行いません。モードを変更する場合は文書の状態を保存し、旧インスタンスを破棄してから選択したプラグインで初期化します。