ONLYOFFICEのプラグイン：開発者向けクイックスタートガイド

ONLYOFFICEのプラグインは、エディタに新機能を追加する簡単な方法です。プリインストールされたセットとともに、[ONLYOFFICE API](https://api.onlyoffice.com/plugin/basic?_ga=2.264300493.31450252.1655191076-1704458868.1654884129)を使って独自のプラグインを追加することが可能です。プラグインを構築し統合したい場合は、どこから始めればよいかこの記事をご覧ください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/23873a5e-7fab-af87-7a33-2f72c518a1b6.png)
## プラグインの種類

以下のタイプに分類されます。

* **視覚的なものと非視覚的なもの**　非ビジュアルプラグインは、ドキュメントにいくつかの変換を適用するためのボタンを提供します（例：選択したテキストを音声に変換する[スピーチプラグイン](https://www.onlyoffice.com/app-directory/speech)や、デスクトップアプリケーションからメールの添付ファイル権限としてドキュメントを送信できる[送信プラグイン](https://www.onlyoffice.com/ja/onlyoffice-app.aspx?app=send)など）。ビジュアルプラグインは、別のウィンドウまたはパネルを開きます（例えば、必要な言語、スタイル、背景色を選択してコードの構文をハイライトできる[Highlightコード](https://www.onlyoffice.com/app-directory/highlight-code)、または[写真エディタプラグイン](https://www.onlyoffice.com/app-directory/photo-editor)）。
* **OLEオブジェクト**　外部リソースから結果のファイルに情報を保存することができます（例：ドキュメントにYouTubeのビデオを埋め込むことができる[プラグイン](https://www.onlyoffice.com/app-directory/youtube)）。
* **システム＆非システム**　システムプラグインは、エディターが起動されるたびにバックグラウンドで動作します（例：デスクトップアプリケーションの[e2e暗号化](https://www.onlyoffice.com/private-rooms.aspx)）。非システム系は、対応するボタンをクリックすることで起動します（ONLYOFFICEのプラグインの大部分）。
* **入力ヘルパー**　独自のウィンドウを持ち、テキストを入力すると表示・非表示されます。その位置はカーソルと連動しています。例として、ユーザーがより速くタイプするのを助けるオートコンプリートプラグインがあります。

[GitHub](https://github.com/ONLYOFFICE/sdkjs-plugins)で利用可能なすべてのプラグインの例をご覧ください。

## プラグイン構造

ONLYOFFICEにおけるプラグインは、常に少なくとも3つのファイルを含むフォルダです。

* プラグイン設定ファイル `config.json`
* プラグインのエントリーポイント `index.html`
* コードファイルそのもの `pluginCode.js`

このフォルダは、アイコン、翻訳、readmeなどの追加ファイルを含むこともできます。

次は、プラグインを構築するための基本的な考え方を順を追ってご説明します。

### ステップ１：コーディング

[config.json](https://api.onlyoffice.com/plugin/config)、[index.html](https://api.onlyoffice.com/plugin/indexhtml)、[pluginCode.js](https://api.onlyoffice.com/plugin/code)を含むプラグインフォルダを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/5c94c356-f0e9-4486-20a1-49db6c081977.png)
プラグインのコードを書きながら、プラグインのメソッドとイベントを使用します。

### ステップ2：プラグインスタイルを調整する

[ONLYOFFICEスタイルシート](https://api.onlyoffice.com/plugin/styles)を`index.html`ファイルに追加して、プラグインをONLYOFFICEエディタスタイルに調整します。
```
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/a2bbc265-dc9f-c49e-0728-3c7de095bcdd.png)
### ステップ3：ローカライズ

翻訳を追加したい各言語のための`.json`ファイルとプラグインディレクトリ内のtranslationsフォルダを作成します。ローカライズして翻訳を適用するには、[こちらの説明](https://api.onlyoffice.com/plugin/localization)に従ってください。

### ステップ4：公開するプラグインを準備する

1. プラグインのために、情報満載の**詳細情報**のウィンドウを作成します。簡単な説明とプラグインのバージョン、開発会社の名前とそのウェブサイトへのリンクを追加します。[こちらの説明](https://api.onlyoffice.com/plugin/variations)に従って、`config.json`ファイルに**詳細情報**のバリエーションを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/0576d2f2-c67b-0681-bccd-c999a1806127.png)
2. プラグイン用のアイコンを用意し、メインプラグインフォルダに配置します。`config.json`ファイルにアイコンのパラメータを指定するには、[こちらの説明](https://api.onlyoffice.com/plugin/icons)に従ってください。

3. readmeファイルには、プラグインの詳細な説明、インストール方法、使用方法、既知の問題などを追加することを忘れないでください。このファイルは、メインのプラグインフォルダーに置きます。

### ステップ5：テスト

用意したファイルを全てpluginフォルダに入れます。これで完了です。あとは、[デスクトップ版](https://api.onlyoffice.com/plugin/installation/desktop)、[オンプレミス版](https://api.onlyoffice.com/plugin/installation/onpremises)、[クラウド版](https://api.onlyoffice.com/plugin/installation/cloud)のONLYOFFICE エディタに接続してテストしてください。
![hello-world.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/44d42100-f6ab-c838-a595-afff4b70f28d.gif)
### ステップ6：公開する

ONLYOFFICE App Directoryで他のユーザーにもプラグインを公開したい場合は、marketing@onlyoffice.com までご連絡ください。


コードサンプルは[GitHub](https://github.com/ONLYOFFICE/sdkjs-plugins)から入手可能です。

すぐに使えるプラグインをお探しの方は、[ONLYOFFICE App Directory](https://www.onlyoffice.com/en/app-directory)をご覧ください。