ウェブサイト検索

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


概要: この記事では、ONLYOFFICE Docs 用の独自のプラグインを作成する方法と、バージョン 7.2 以降で利用できる公式プラグイン マーケットプレイスでそれを公開する方法について説明します。

ONLYOFFICE Docs は、従来の意味での通常のオフィス スイートではありません。もちろん、他のオフィス パッケージを使用して実行できること、つまりドキュメント、スプレッドシート、プレゼンテーションの作成と編集、オンラインでの共有と共同編集、入力可能なフォームの作成、PDF ファイルの参照と変換などを行うことができます。

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

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

ONLYOFFICE Docs 用の独自のプラグインの作成を開始する前に、GitHub アカウントを持っていることと、このプラットフォームの操作方法の基本を理解していることを確認する必要があります。これはとても重要です。 GitHub を初めて使用する場合は、公式 GitHub ドキュメントを参照してください。

プラグインの作成プロセスは 7 つのステップに分かれており、慎重に従う必要があります。

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

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

ステップ 1. Plugin Marketplace リポジトリをフォークする

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

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

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

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

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

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

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

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

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

ステップ 2. プラグインのコードを作成する

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

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

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

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

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

ステップ 3. プラグインのスタイルを調整する

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

<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 スタイル要素の詳細については、ここを参照してください。

ステップ 4. プラグインをローカライズする (オプション)

英語を話すユーザーのみを対象としたプラグインを作成する場合は、この手順をスキップできます。ただし、プラグインを他の言語でも利用できるようにしたい場合は、プラグイン ディレクトリに翻訳フォルダーを作成し、使用するすべての言語の .json ファイルを配置できます。

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

ステップ 5. ONLYOFFICE Marketplace で公開するためのプラグインを準備する

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

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

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

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

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

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

ステップ 6. ONLYOFFICE Docs プラグインをテストする

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

Linux では、CTRL+ALT+T を押してターミナルを開くことができます。その後、ONLYOFFICE デスクトップ エディターへのパスを入力し、スペースを追加して、--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 ファイルを開き、GitHub Pages サイトのプラグインへのパスを指定する必要があります。 URL_TO_PLUGIN 変数:

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

onlyoffice.github.io/store/plugin-dev/extension フォルダーが必要な拡張機能です。 Web ブラウザにアップロードし、ONLYOFFICE ドキュメントを実行し、 上部ツールバーのプラグイン タブプラグイン マネージャーでプラグインを見つけるだけです。ここでは、Web ブラウザーにプラグインを追加する方法に関する詳細なガイドを示します。

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

ステップ 7. ONLYOFFICE Marketplace にプラグインを送信する

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

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

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

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