ONLYOFFICEプラグイン開発ガイド

Posted at 2025-02-20

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

ONLYOFFICEプラグインとは？

プラグインの概要

ONLYOFFICEプラグインとは、HTMLページをエディタ内に埋め込むことで、APIを活用して特定の機能を追加できるツールです。以下のような多彩な活用法があります：

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

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

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

ONLYOFFICEプラグインマーケットプレイスやアプリディレクトリを活用すれば、既存のプラグインを簡単に検索し、必要に応じてインストールやカスタマイズを行うことが可能です。

ONLYOFFICEプラグインSDKについて

SDKの機能

ONLYOFFICE DocSpace Plugins SDKは、TypeScriptエンジンをベースに構築されたnpmパッケージで、開発者に強力なインターフェイスを提供します。このSDKを利用すれば、以下が可能です。

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

GitHubにはサンプルコードが公開されており、これをもとに自分独自のプラグインを作成することができます。

主な構成ファイル

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

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

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

ONLYOFFICEでのプラグイン開発は4つの段階で構成されます：

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

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

プラグイン開発の始め方

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

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

ONLYOFFICE公式ドキュメントを参考に、環境構築を完了させます。

2. フォルダ構造の作成

以下の3つのファイルを必ず作成しましょう:

config.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]
   }
 ]
}

index.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>

pluginCode.js：

    // 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のデバッグガイドを参照してください。

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

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

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

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

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

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

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

SDKの詳細を見る

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up