ONLYOFFICE DocsをReactベースのサービスに連携する方法

React環境でONLYOFFICEオンラインエディタを簡単にデプロイするためのフレームワークコンポーネントをリリースしました。詳しくはこの投稿をご覧ください。

## シームレスなフレームワーク連携

今後、ONLYOFFICE Docs（Document Server）は、Reactをベースとしたサービスやプラットフォームと簡単に統合することができます。新しくリリースされた各フレームワーク用のコンポーネントのおかげで、私たちのオンラインエディタが皆さまの環境でどのように動作するか、より少ない労力でインストールし、テストすることが可能です。

## 開始方法

フレームワークコンポーネントは、npmレジストリで利用可能です。

npmからコンポーネントをインストールするには、対応するフレームワークについて、以下のコマンドを実行してください。

```
npm install --save @onlyoffice/document-editor-react
```

または、次のコマンドを実行してください。

```
yarn add @onlyoffice/document-editor-react
```

## 使用方法

コンポーネントの使用例を以下に示します。

```
...
import { DocumentEditor } from "@onlyoffice/document-editor-react";
...
...
var onDocumentReady = function (event) {
    console.log("Document is loaded");
};
...
...
<DocumentEditor
  id="docxEditor"
  documentServerUrl="http://documentserver/"
  config={{
    "document": {
      "fileType": "docx",
      "key": "Khirz6zTPdfd7",
      "title": "Example Document Title.docx",
      "url": "https://example.com/url-to-example-document.docx"
    },
    "documentType": "word",
    "editorConfig": {
      "callbackUrl": "https://example.com/url-to-callback.ashx"
    }
  }}
  events_onDocumentReady={onDocumentReady}
/>
...
```

## API

|      名前                 | 種類 | デフォルト | 必須 | 詳細 |
|:-----------|:------------:|:------------:|:-----------|:-----------:|
| `id`       | string      | null         |yes|コンポーネント固有の識別子
| `documentServerUrl`    | string      | null      |yes|ONLYOFFICEドキュメントサーバーのアドレス
| `config`      | object        | null        |yes|トークンでファイルを開くための汎用的な設定オブジェクト。[設定API](https://api.onlyoffice.com/editors/config/)
| `document_fileType`         |  string          | null          |no|ファイルの種類
| `document_title`       |  string       | null      |no|ファイルの名前
| `documentType`   |  string      | null      |no|文書の種類
|`height` |string  |null |no | ブラウザウィンドウにおける文書の高さを定義する|
| `type`|string  |null |no |文書へのアクセスに使用されるプラットフォームの種類を定義する（デスクトップ、モバイル、埋め込み）|
|`width` |string  |null |no | ブラウザウィンドウでの文書の幅を定義する|
|`events_onAppReady` |(event: object) => void |null |no | アプリケーションがブラウザに読み込まれたときに呼び出される関数|
| `events_onDocumentStateChange`|(event: object) => void |null | no| 文書が変更されたときに呼び出される関数|
| `events_onMetaChange`|(event: object) => void |null | no| meta コマンドにより文書のメタ情報が変更されたときに呼び出される関数|
| `events_onDocumentReady`|(event: object) => void |null | no|文書がドキュメントエディタに読み込まれたときに呼び出される関数 |
| `events_onInfo`|(event: object) => void |null |no |アプリケーションがファイルを開いたときに呼び出される関数 |
|`events_onWarning` |(event: object) => void | null|no | 警告が発生したときに呼び出される関数|
| `events_onError`|(event: object) => void |null |no |エラーなど特定の事象が発生したときに呼び出される関数 |
|`events_onRequestSharingSettings` |(event: object) => void |null | no|ユーザーが「アクセス権の変更」ボタンをクリックして、文書のアクセス権を管理しようとしたときに呼び出される関数 |
|`events_onRequestRename` |(event: object) => void |null | no|ユーザーが「名前の変更」ボタンをクリックしてファイル名を変更しようとしたときに呼び出される関数|
|`events_onMakeActionLink` |(event: object) => void |null | no| ユーザーがブックマークを含む文書を開くためのリンクを取得しようとするときに、ブックマーク位置までスクロールして呼び出される関数|
|`events_onRequestInsertImage` |(event: object) => void |null |no | ユーザーが 「ストレージからの画像」ボタンをクリックして画像を挿入しようとしたときに呼び出される関数|
|`events_onRequestSaveAs` |(event: object) => void |null | no|ユーザーが「名前を付けてコピーを保存」ボタンをクリックしてファイルを保存しようとしたときに呼び出される関数|
|`events_onRequestMailMergeRecipients` |(event: object) => void |null |no |ユーザーがメールマージボタンをクリックして受信者データを選択しようとしたときに呼び出される関数 |
|`events_onRequestCompareFile` |(event: object) => void |null | no|ユーザーが「ストレージからの文書」ボタンをクリックして比較するドキュメントを選択しようとしたときに呼び出される関数 |
|`events_onRequestEditRights` |(event: object) => void |null | no|ユーザーが「文書の編集」ボタンをクリックして、文書を閲覧モードから編集モードに切り替えようとしたときに呼び出される関数|
|`events_onRequestHistory` |(event: object) => void |null |no |ユーザーがバージョン履歴ボタンをクリックして文書のバージョン履歴を表示しようとしたときに呼び出される関数 |
|`events_onRequestHistoryClose` |(event: object) => void |null | no| ユーザーが文書のバージョン履歴を閲覧しているときに、履歴を閉じるボタンで文書に戻ろうとしたときに呼び出される関数|
|`events_onRequestHistoryData` |(event: object) => void |null | no|ユーザーが文書バージョン履歴の中の特定の文書バージョンをクリックしようとしたときに呼び出される関数 |
|`events_onRequestRestore` |(event: object) => void |null | no|ユーザーがバージョン履歴の復元ボタンをクリックして、ファイルのバージョンを復元しようとしたときに呼び出される関数 |

## ストーリーブック

`config/default.json`ファイルのドキュメントサーバーのアドレスを変更します。

```
"documentServerUrl": "http://documentserver/"
```

### ストーリーブックを構築する

```
yarn build-storybook
```

### ストーリーブックを開始する

```
yarn storybook
```

## 開発

### GitHubのリポジトリからプロジェクトをクローンする

```
git clone https://github.com/ONLYOFFICE/document-editor-react
```
### プロジェクトの依存関係をインストールする

```
yarn install
```

### コンポーネントをテストする

```
yarn test
```

### プロジェクトをビルドする

```
yarn rollup
```

### パッケージを作成する

```
npm pack
```