ONLYOFFICEプラグイン開発ガイド

[ONLYOFFICE](https://www.onlyoffice.com/ja)は、10年以上にわたって国際的なオープンソースプロジェクトとして進化を続けており、現在では1,500万人以上のユーザーに活用されています。その機能の一つであるプラグイン開発は、エディタの性能を拡張し、ユーザーの体験を大幅に向上させることができる魅力的なツールです。この記事では、ONLYOFFICEでのプラグイン開発の基本知識から実際の手順、開発のヒントまで幅広く解説します。これを読めば、皆さまも独自のプラグインを作成し、専門知識をさらに深めることができます！

## ONLYOFFICEプラグインとは？

### プラグインの概要

[ONLYOFFICEプラグイン](https://www.onlyoffice.com/blog/ja/search?s=%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3)とは、HTMLページをエディタ内に埋め込むことで、APIを活用して特定の機能を追加できるツールです。以下のような多彩な活用法があります：

* サードパーティサービスとの接続（例：Zoom、Google Translate、YouTube）
* UIへのカスタムコンポーネントの追加（例：特定ツールバーへの追加）
* 既存のエディタ機能の拡張（例：自動補完や拡張コメント機能）
* マクロ機能によるタスクの効率化（例：繰り返し作業の自動化）

### プラグインがもたらす利点

* 柔軟性のある機能拡張により、ユーザー体験の向上を実現
* 特定業務の効率性向上と操作性の改善
* 標準機能にプラスアルファの価値を提供

[ONLYOFFICEプラグインマーケットプレイス](https://www.onlyoffice.com/blog/ja/2023/07/64496)や[アプリディレクトリ](https://www.onlyoffice.com/app-directory/ja)を活用すれば、既存のプラグインを簡単に検索し、必要に応じてインストールやカスタマイズを行うことが可能です。

## ONLYOFFICEプラグインSDKについて

### SDKの機能

[ONLYOFFICE DocSpace Plugins SDK](https://api.onlyoffice.com/docspace/plugins-sdk/get-started/basic-concepts)は、TypeScriptエンジンをベースに構築されたnpmパッケージで、開発者に強力なインターフェイスを提供します。このSDKを利用すれば、以下が可能です。

1. プラグインのコードを簡単に生成
1. ONLYOFFICEエディタとDocSpaceポータルへの統合
1. 他システムとのスムーズな連携

[GitHub](https://github.com/ONLYOFFICE/docspace-plugin-sdk)にはサンプルコードが公開されており、これをもとに自分独自のプラグインを作成することができます。

### 主な構成ファイル

* `config.json`：プラグイン全体の設定を定義
* `index.html`：UIのレイアウトやスタイルシートの記述
* `pluginCode.js`：プラグインの動作ロジックを記述

例を用いながらこれらファイルの作り方を後ほど掘り下げます。

## プラグイン開発ライフサイクル

ONLYOFFICEでのプラグイン開発は4つの段階で構成されます：
1. 計画
    * プラグインの目的や実現したい機能を明確化
    * サードパーティサービスとの必要な接続点を検討
2. 開発
    * Plugins SDKを学び、基本コードを作成
    * GitHubのサンプルコードを活用することで効率的に開発可能
3. テスト
    * エラーを解決しながら、プラグインが正常に動作するか確認
4. 利用
    * 完成したプラグインをエディタにアップロードし、実際に使用

迅速で効率的な開発を行うためには、このライフサイクルに基づき体系的に進めることが重要です。

## プラグイン開発の始め方

初心者でも始めやすいよう、実際の手順を以下に紹介します。

### 1. 開発環境のセットアップ

[ONLYOFFICE公式ドキュメント](https://api.onlyoffice.com/docs/plugin-and-macros/get-started/)を参考に、環境構築を完了させます。

### 2. フォルダ構造の作成

以下の3つのファイルを必ず作成しましょう:
1. `config.json`：

     ```json
       {
      "name": "hello world",
      "guid": "asc.{0616AE85-5DBE-4B6B-A0A9-455C4F1503AD}",
      "baseUrl": "",
      "variations": [
        {
          "description": "hello world",
          "url": "index.html",
          "icons": ["resources/img/icon.png", "resources/img/icon@2x.png"],
          "isViewer": false,
          "EditorsSupport": ["word"],
          "isVisual": false,
          "isModal": true,
          "isInsideMode": false,
          "initDataType": "none",
          "initData": "",
          "isUpdateOleOnResize": true,
          "buttons": []
        },
        {
          "description": "About",
          "url": "index_about.html",
          "icons": ["resources/img/icon.png", "resources/img/icon@2x.png"],
          "isViewer": false,
          "EditorsSupport": ["word"],
          "isVisual": true,
          "isModal": true,
          "isInsideMode": false,
          "initDataType": "none",
          "initData": "",
          "isUpdateOleOnResize": true,
          "buttons": [
            {
              "text": "Ok",
              "primary": true
            }
          ],
    
          "size": [392, 147]
        }
      ]
    }
    ```

1. `index.html`：
 
    ```html
    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="UTF-8" />
     <title>Hello world</title>
     <script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
     <script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
     <link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
     <script type="text/javascript" src="scripts/helloworld.js"></script>
    </head>
    <body>
    </body>
    </html>
   ```

1. `pluginCode.js`：

   ```javascript
       // Example insert text into editors (different implementations)
    ((window) => {
      const text = "Hello world!"
      window.Asc.plugin.init = () => {
        const variant = 2

        switch (variant) {
        case 0:
          // serialize command as text
          let sScript = "var oDocument = Api.GetDocument();"
          sScript += "oParagraph = Api.CreateParagraph();"
          sScript += "oParagraph.AddText('Hello world!');"
          sScript += "oDocument.InsertContent([oParagraph]);"
          this.info.recalculate = true
          this.executeCommand("close", sScript)
          break
        case 1:
          // call command without external variables
          this.callCommand(() => {
            const oDocument = Api.GetDocument()
            const oParagraph = Api.CreateParagraph()
            oParagraph.AddText("Hello world!")
            oDocument.InsertContent([oParagraph])
          }, true)
          break
        case 2:
          // call command with external variables
          Asc.scope.text = text // export variable to plugin scope
          this.callCommand(() => {
            const oDocument = Api.GetDocument()
            const oParagraph = Api.CreateParagraph()
            oParagraph.AddText(Asc.scope.text) // or oParagraph.AddText(scope.text);
            oDocument.InsertContent([oParagraph])
          }, true)
          break
        default:
          break
        }
      }

      window.Asc.plugin.button = (id) => {}
    })(window)
   ```

### 3. コードのデバッグ

エラーをチェックしつつ、プラグインの安定稼働を保証します。トラブル発生時は[Plugins SDKのデバッグガイド](https://api.onlyoffice.com/docs/plugin-and-macros/get-started/getting-started/)を参照してください。

### 4. パッケージングとインストール

完成したプラグインフォルダをZIP圧縮し、拡張子を`.plugin`形式に変更。ONLYOFFICE Plugin Managerを利用してインストールします。

## プラグイン開発におけるヒント

* ONLYOFFICE APIをフル活用：APIを活用すれば、エディタのさらに高度なカスタマイズが可能
* テスト環境を活用：プラグインをあらゆる状況で試すことで、予期せぬ動作を防ぐことが可能
* ドキュメント参照を活用：「公式のガイド」と「GitHubサンプル」を併用すれば効率的に習得可能

これらのヒントを組み合わせることで、プロジェクトの成功率をぐっと高めることができるでしょう。

## プラグインでできる未来の拡張

ONLYOFFICEプラグインの可能性を最大限に引き出すことで、ただタスクをこなすだけでなく、ユーザー体験全体を変革するアプリケーションが構築できます。
今すぐSDKにアクセスして、プラグインの開発を始めましょう。新しいスキルを身に着け、ONLYOFFICEエコシステムの一員として、より高次元のプロジェクトへ挑戦してみませんか？

[SDKの詳細を見る](https://api.onlyoffice.com/)