DocSpaceプラグインの開発方法：完全なステップバイステップチュートリアル

2025年05月21日著者：Denis

速度とコラボレーションがすべての世界では、生産性ツールも対応し続ける必要があります。DocSpaceプラグインはユーザーのドキュメント管理と操作を強化するモダンな方法を提供します。このガイドでは、公式プラグインサンプルの実例を使って、DocSpaceプラグインを作成する手順を詳しく解説します。

DocSpaceプラグイン開発：完全ステップバイステュートリアル

ONLYOFFICE DocSpace Plugins SDKについて

ONLYOFFICE DocSpaceプラグインSDKはTypeScriptベースのnpmパッケージで、DocSpaceポータルに埋め込むプラグインを作成するためのインターフェースを提供します。プラグイン開発のライフサイクルには企画、開発、テスト、運用が含まれます。

Plugins SDKの使用例として、公式サンプルリポジトリを用意しています。では、このサンプルを基にプラグイン開発の全手順を見ていきましょう。

企画

プラグインの目的を明確にし、どこで利用するか、どのサードパーティサービスと連携するかを検討します。

Step 1. 必要なパッケージと環境をインストール

  • ONLYOFFICEDocSpaceオンプレミス版
  • @onlyoffice/docspace-plugin-sdk npmパッケージ

グローバルインストールには以下を実行：

npm i -g @onlyoffice/docspace-plugin-sdk

Step 2. プラグインの設計

どのサービスを使い、どの機能を追加するかを決めます。

サンプルでは以下を利用：

各サービスのドキュメントやライセンス、必要なAPIキー取得などを事前に確認してください。

プラグインの配置場所、構造、ユーザーインタラクションを考え、必要なプラグインタイプやアイテムをリストアップします。詳しくはプラグインタイプとプラグインアイテムのドキュメントを参照。

例：Speech-to-Textプラグインでは以下を実装：

Draw.ioプラグインではさらに：

プラグイン構造の詳細はこちらを参照。サンプルではspeech-to-textとdraw.ioでフォルダ構成を変えています。

speech-to-textプラグイン構造例

最後にプラグイン名と説明を決めます。

開発

準備が整ったら開発を開始します。

Step 1. プラグインテンプレートの作成

テンプレート生成と設定：

npx create-docspace-plugin

npxが使えない場合：

npm i -g @onlyoffice/docspace-plugin-sdk

対話形式でpackage.jsonなどを設定します（詳細）。サンプルのspeech-to-text用設定例：

speech-to-textテンプレート設定例

既存プロジェクトで使う場合は依存に追加し、package.jsonに必要項目を記載してください。

Step 2. エントリポイント設定

テンプレート作成でsrc/index.tsが生成されます。プラグインタイプの基本メソッドを定義した必須ファイルです。独自作成時はサンプルを参照してください。

Step 3. アイコン追加

ルートにassetsフォルダを作りアイコンを配置。必要サイズ例：

  • プラグインロゴ（48×48px）– package.jsonのlogo項目に対応プラグインロゴ例
  • コンテキストメニューアイコン（16×16px）

同一アイコンをメインボタンにも利用可能。Draw.ioプラグインでは.tile用に32×32pxアイコンも追加。

メインボタンアイコン例

ファイルアイコンタイル例

Step 4. UI要素設定

Draw.ioプラグイン例ではモーダルとエディタを設定。Dialog.tsでIFrameやIBoxを定義し、ModalDialogPropsを構成：

export const frameProps:IFrame={width:"100%",height:"100%",name:"test-drawio",src:""}
const body:IBox={widthProp:"100%",heightProp:"100%",children:[{component:Components.iFrame,props:frameProps}]}
export const drawIoModalDialogProps:IModalDialog={dialogHeader:"",dialogBody:body,displayType:ModalDisplayType.modal,fullScreen:true,onClose:()=>({actions:[Actions.closeModal]}),onLoad:async()=>({newDialogHeader:drawIoModalDialogProps.dialogHeader||"",newDialogBody:drawIoModalDialogProps.dialogBody}),autoMaxHeight:true,autoMaxWidth:true}

Editor.tsでDiagramEditor関数を定義し、UIパラメータと各メソッドを実装（startEditing,getDataなど）。サンプルコードを参照。

Step 5. プラグインタイプ定義

speech-to-text用にIContextMenuItemを定義：

export const contextMenuItem:IContextMenuItem={
  key:"speech-to-text-context-menu-item",
  label:"Convert to text",
  icon:"speech-to-text-16.png",
  onClick:assemblyAI.speechToText,
  fileType:[FilesType.video],
  withActiveItem:true,
}

コンテキストメニュー例

Draw.ioプラグインではIMainButtonItemとIFileItemも定義：

const mainButtonItem:IMainButtonItem={key:"draw-io-main-button-item",label:"Draw.io",icon:"drawio.png",onClick:(id)=>{…}}
export const drawIoItem:IFileItem={extension:".drawio",fileTypeName:"Diagram",fileRowIcon:"drawio-32.svg",fileTileIcon:"drawio-32.svg",devices:[Devices.desktop],onClick}

ダイアグラム作成例

Step 6. 設定プラグインタイプ作成

管理者向け設定用にISettingsを構築：

const descriptionText:TextGroup={component:Components.text,props:{text:"To generate API token visit https://www.assemblyai.com",color:"#A3A9AE",fontSize:"12px",fontWeight:400,lineHeight:"16px"}}
const descGroup:BoxGroup={component:Components.box,props:{children:[descriptionText]}}
const parentBox:IBox={displayProp:"flex",flexDirection:"column",children:[tokenGroup,descGroup]}
const adminSettings:ISettings={settings:parentBox,saveButton:userButtonComponent,onLoad:async()=>{assemblyAI.fetchAPIToken();tokenInput.value=assemblyAI.apiToken;plugin.setAdminPluginSettings(adminSettings);return{settings:parentBox}}}

設定画面例

Step 7. メインコードファイル作成

srcフォルダにAssemblyAI.tsを作成。AssemblyAIクラスでAPI URL設定やトークン管理、uploadFile,transcribeAudio,speechToTextなどのメソッドを実装。最後にインスタンス化してexport。

const assemblyAI=new AssemblyAI()
export default assemblyAI

テスト

distフォルダに完成プラグインのアーカイブが生成されます。

※オンプレミス版のみプラグインが追加可能です。バグがあれば修正→再ビルド→再テストを繰り返します。

テストが完了し正常動作を確認したら本番サーバーに追加して利用開始です。

DocSpaceプラグインはユーザーフレンドリーなドキュメント管理とコラボレーションを実現します。ご質問はフォーラムへ（要登録）、機能要望やバグ報告はGitHubまたはメールでお寄せください。開発の成功を祈ります！

お役立ちリンク

DocSpaceプラグイン入門

ONLYOFFICE on GitHub

ONLYOFFICE DocSpaceオンプレミス版

DocSpace Community版

お問い合わせ

ONLYOFFICEの無料アカウントを登録する

オンラインでドキュメント、スプレッドシート、スライド、フォーム、PDFファイルの閲覧、編集、共同作業