ONLYOFFICE ドキュメント用の独自のプラグインを作成する方法


簡単: この記事では、ONLYOFFICE Docs 用の独自のプラグインを作成する方法と、バージョン 7.2 以降で利用可能な公式プラグイン マーケットプレイスでそれを公開する方法を学びます。

PDF ファイルなどを参照して変換します。

ただし、ONLYOFFICE をさらに強力にする方法があります。ここで意味するのは、サードパーティのプラグイン、つまり、スイートの標準機能を強化する追加のソフトウェア ツールです。たとえば、プラグインを使用すると、サードパーティのサービスに接続したり、新しいユーザー インターフェイス要素を追加したりできます。

ONLYOFFICE ドキュメントのプラグインを作成する方法

ONLYOFFICE Docs 用の独自のプラグインの作成を開始する前に、GitHub ドキュメントがあることを確認する必要があります。

プラグインの作成プロセスは、慎重に従う必要がある 7 つのステップに分けることができます。

  • 準備活動
  • コーディング。
  • プラグイン スタイルの調整。
  • ローカリゼーション (オプション)。
  • 準備。
  • テスト。
  • プラグイン マーケットプレイスでの公開

プラグイン開発について詳しく見ていきましょう。

まず、GitHub アカウントにログインするか、持っていない場合は作成する必要があります。その後、次の URL アドレスで利用できる ONLYOFFICE プラグイン マーケットプレイス リポジトリのフォークを作成する必要があります。

https://github.com/ONLYOFFICE/onlyoffice.github.io.

その結果、別のリポジトリが作成され、その URL アドレスは次のようになります。

https://github.com/YOUR-USERNAME/ONLYOFFICE/onlyoffice.github.io

プラグイン マーケットプレイス リポジトリのフォークに成功したら、テスト目的でこのリポジトリから GitHub ページ サイトを作成する必要があります。方法がわからない場合は、公式の GitHub ガイドを参照してください。

独自の GitHub Pages サイトを作成したので、今度はフォークをコンピューターに複製します。

最後に、将来のプラグイン用のフォルダーを次の場所に作成する必要があります。

onlyoffice.github.io/sdkjs-plugins/content/.

それでおしまい。必要な準備作業をすべて完了したので、次のステップに進むことができます。

コーディングが非常に上手である必要はありませんが、ONLYOFFICE Docs 用の独自のプラグインを作成するには、基本的なコーディングの知識が必要です。

簡単に言えば、ONLYOFFICE プラグインは複数のファイルを含むフォルダーです。プラグインが正しく機能するには、次の 3 つのファイルを作成する必要があります。

  • config.json – これは、すべての重要なデータに関する情報を含むプラグイン構成ファイルです。このファイルには、プラグインを ONLYOFFICE エディターに登録するために必要ないくつかのパラメーターがあります。各パラメータの完全な説明を読むには、公式 API ドキュメントのこのページを参照してください。
  • プラグイン コード (.js ファイル) – これは、プラグインの JavaScript コードを含むプラグイン ファイルそのものです。このファイルには、プラグインが実行する操作とその実行方法が記述されています。この API ガイドを読んで、その仕組みを理解してください。
  • index.html – config.json ファイルと plugin.js ファイルを接続するプラグインのエントリ ポイントです。この例を見て、どのように見えるべきかを理解してください。

これらの必須ファイルとは別に、プラグイン フォルダーには他のファイルを含めることができます。たとえば、アイコン、プラグイン スタイル、readme ファイル、サードパーティ サービスなどです。これらのファイルの詳細については、以下を参照してください。

プラグインの適切に機能するコードを作成するには、必要なイベントを知る必要があります。

プラグインのコードを書くだけでは不十分です。 ONLYOFFICE エディターの不可欠な部分のように見えるように、スタイルを調整する必要もあります。そのためには、上記の index.html ファイルに ONLYOFFICE スタイル シートを追加するだけです。

<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">

ボタン、入力コントロール、ラベル コントロール、ローダー、およびその他の要素を追加できます。

たとえば、コンボ ボックスをプラグインに追加するには、select2 関数を使用できます。

<select id="select_example" class="" ></select> 
$('#select_example').select2({     
data : [{id:0, text:'Item 1'}, {id:1, text:'Item 2'}, {id:2, text:'Item 3'}],     
minimumResultsForSearch: Infinity,     
width : '120px' 
});

挿入されたコンボ ボックスは次のようになります。

ONLYOFFICE スタイル要素の詳細については、こちらを参照してください。

英語を話すユーザー専用のプラグインを作成する場合は、この手順を省略できます。ただし、プラグインを他の言語で使用できるようにする場合は、プラグイン ディレクトリに translations フォルダーを作成し、使用するすべての言語の .json ファイルを配置できます。

プラグインを正しくローカライズする方法については、公式の API ドキュメントを参照してください。

プラグインが ONLYOFFICE マーケットプレイスで利用可能になる前に外観を洗練するには、プラグインの簡単な説明、バージョン、開発者名などを含む [About] ウィンドウを追加する必要があります。

たとえば、これは Photo Editor プラグインの About ウィンドウです。

プラグイン用にそのようなウィンドウを作成できるようにするには、次の手順に従ってください。

また、プラグインのアイコンを作成し、リソース フォルダーに配置する必要があります。一般に、プラグインが ONLYOFFICE プラグイン マーケットプレイスで正しく表示されるようにするには、8 つのアイコンが必要です: Light および Dark インターフェイス テーマ用の 4 つのアイコン (125%、150%、175%、および 200% のスケーリング)。

さらに、readme ファイルを作成してメインのプラグイン フォルダーに配置することもできます。このファイルには、他のユーザーに知ってもらいたい情報 (プラグインの主な機能の説明、インストール手順、既知の問題、バグなど) を含めることができます。

これでプラグインの準備が整い、マーケットプレイスに公開する前に適切にテストできます。

ここで、上記の手順に従って作成したすべてのファイルをプラグイン フォルダーに配置します。次に、プラグイン フォルダーをリモート リポジトリにプッシュし、ONLYOFFICE デスクトップ エディターでプラグインをテストします。この目的のために、デスクトップ アプリをデバッグ モードで実行できます。

Linux では、CTRL+ALT+T でターミナルを開くことができます。その後、ONLYOFFICE Desktop Editors へのパスを入力し、スペースを追加して、--ascdesktop-support-debug-info を指定します。

"/opt/onlyoffice/desktopeditors/DesktopEditors" --ascdesktop-support-debug-info

プラグインとその機能をテストします。

すべて問題なければ、ONLYOFFICE スイートの Web バージョンである ONLYOFFICE Docs でプラグインをテストすることもできます。つまり、プラグインを新しい拡張機能として追加できます。

対応する拡張機能を作成するには、onlyoffice.github.io/store/plugin-dev/extension/inject.js ファイルを開き、URL_TO_PLUGIN 変数で GitHub Pages サイトのプラグインへのパスを指定する必要があります。

var URL_TO_PLUGIN = "https://YOUR-USERNAME.github.io/onlyoffice.github.io/sdkjs-plugins/content/your-plugin/"

必要な拡張機能は、office.github.io/store/plugin-dev/extension フォルダーのみです。 Web ブラウザーにアップロードするだけで、プラグインを Web ブラウザーに追加する方法。

プラグインが意図したとおりに機能する場合は、最後のステップに進むことができます。

おめでとう!プラグインの作成プロセスが完了し、プラグインを他のユーザーが利用できるようになりました。この目的のために、フォークから次の ONLYOFFICE リポジトリへのプル リクエストを作成できます。

https://github.com/ONLYOFFICE/onlyoffice.github.io

プラグインがうまく機能すると、ONLYOFFICE 開発者がプル リクエストを承認し、プラグインが ONLYOFFICE プラグイン マーケットプレイスに表示されます。この場合、他のユーザーは数回クリックするだけでマーケットプレイスからインストールできます。

この記事がお役に立てば幸いです。以下のコメントであなたの考えを共有することを忘れないでください.