# ウォーターマーク

- Human documentation: [https://docs.univer.ai/ja-JP/guides/sheets/features/watermark](https://docs.univer.ai/ja-JP/guides/sheets/features/watermark)

- Agent Markdown: [https://docs.univer.ai/ja-JP/guides/sheets/features/watermark.md](https://docs.univer.ai/ja-JP/guides/sheets/features/watermark.md)

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

- Source: [sheets/features/watermark.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/watermark.ja-JP.mdx)

---

#### Package metadata

```json
{
  "plugins": [
    {
      "client": "@univerjs/watermark",
      "facade": "@univerjs/watermark/facade"
    }
  ],
  "server": false
}
```

ウォーターマーク機能は、スプレッドシート向けに柔軟かつ安全な透かしソリューションを提供することを目的としています。テキストや画像の透かしをスプレッドシートに追加でき、透かしの見た目や挙動をカスタマイズするための各種設定オプションを提供します。

> [!INFO]
> [透かし設定ジェネレーター](/tools/watermark-generator)で透かしのスタイルをプレビューし、プラグイン用の設定を JSON としてダウンロードできます。

> Interactive example: [Open the playground](/playground/sheets/watermark)

## プラグインモード

### インストール

#### npm

```bash
npm install @univerjs/watermark
```

#### pnpm

```bash
pnpm add @univerjs/watermark
```

#### yarn

```bash
yarn add @univerjs/watermark
```

#### bun

```bash
bun add @univerjs/watermark
```

### 使い方

```typescript
import { UniverWatermarkPlugin } from '@univerjs/watermark' // [!code ++]

import '@univerjs/watermark/facade' // [!code ++]

const univer = new Univer({
  // ...
})

univer.registerPlugin(UniverWatermarkPlugin, { // [!code ++]
  textWatermarkSettings: { // [!code ++]
    content: 'Hello, Univer!', // [!code ++]
    fontSize: 36, // [!code ++]
  }, // [!code ++]
}) // [!code ++]
```

### プラグインと設定

#### @univerjs/watermark

このプラグインはウォーターマーク機能のコア実装を提供します。開発者はテキストや画像の透かしをアプリケーションに追加でき、透かしの見た目や挙動をカスタマイズするための各種設定オプションを利用できます。`UniverWatermarkPlugin` プラグインを提供します。

参照: [@univerjs/watermark](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs/watermark.md)

## プリセットモード

ウォーターマークはプリセット自体は提供していませんが、プラグインと組み合わせて使用することができます。

### インストール

#### npm

```bash
npm install @univerjs/watermark
```

#### pnpm

```bash
pnpm add @univerjs/watermark
```

#### yarn

```bash
yarn add @univerjs/watermark
```

#### bun

```bash
bun add @univerjs/watermark
```

### 使い方

```typescript
import { UniverWatermarkPlugin } from '@univerjs/watermark' // [!code ++]

import '@univerjs/watermark/facade' // [!code ++]

const { univerAPI } = createUniver({
  // ...
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    [UniverWatermarkPlugin, { // [!code ++]
      textWatermarkSettings: { // [!code ++]
        content: 'Hello, Univer!', // [!code ++]
        fontSize: 36, // [!code ++]
      }, // [!code ++]
    }], // [!code ++]
  ],
})
```

## Facade API

### インポート

> [!INFO: プラグインモード注意]
> Facade パッケージの手動 import が必要なのはプラグインモードのみです。プリセットモードには対応する Facade パッケージが内蔵されているため、追加の import は不要です。

```typescript
import '@univerjs/watermark/facade'
```

### ウォーターマークを設定

```typescript
univerAPI.addWatermark('text', { content: 'hello', repeat: true })
```

### ウォーターマークを削除

```typescript
univerAPI.deleteWatermark()
```