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

この章では Univer Slides のインストールと基本的な使い方を説明します。このガイドでは Web SDK の Slides パッケージを使用します。現在 Slides の preset は提供されていないため、アプリケーションは plugin mode で構築します。

Univer の基本概念にまだ慣れていない場合は、先に Quickstart を確認してください。

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

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

Univer は Slides 機能をプラグインとして提供します。ブラウザーエディターでは通常、共通の Univer runtime、ライセンスプラグイン、Docs と Drawing の依存関係を登録してから、Slides のモデルと 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/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui

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 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 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 の初期化前にコンテナーを作成し、高さを指定してください：

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

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

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'

2. Facade API² を使う場合は、関連する facade entry を import します。

   TypeScript

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

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

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

追加機能パッケージ

エディターで必要になった機能だけを追加します。

pnpm add @univerjs-pro/slides-printpnpm add @univerjs-pro/slides-table @univerjs-pro/slides-table-uipnpm add @univerjs-pro/chart-ui @univerjs-pro/slides-chart @univerjs-pro/slides-chart-uipnpm add @univerjs-pro/slides-exchange-client

機能登録の例は、印刷、テーブル、チャート、インポートとエクスポート を参照してください。

一部プラグインの遅延読み込み

plugin mode では、追加機能プラグインを必要になるまで遅延読み込みできます。

univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {})import('@univerjs-pro/slides-chart').then(({ UniverSlidesChartPlugin }) => {  univer.registerPlugin(UniverSlidesChartPlugin)})

サーバーサイドでの使用

Node.js では通常、モデルプラグインだけを登録し、ブラウザー UI プラグインは登録しません。

univer.registerPlugin(UniverSlidesPlugin)

モデルプラグインはヘッドレスでのスナップショット処理に使います。共同編集やファイル変換 API を提供する場合は、対応する Server SDK モジュールを別途組み込んでください。このプラグインの登録だけではサービスは作成されません。

モバイル対応

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

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

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 で対応する機能を組み込んでください。

コンテナーとタッチ操作

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

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

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

その他のリリース

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

Alpha/Beta リリース

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

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

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

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

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

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

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

次のステップ

• Facade API で Slides を Facade API から操作する方法を確認します。
• ライセンス設定
• Server SDK の統合
• 必要に応じて 機能 セクションのプラグインを追加します。