ONLYOFFICE Create Appで、Webアプリにドキュメント編集機能を組み込んでみよう

2026年09月30日著者：Denis

自分のアプリケーションにオンラインのドキュメント編集機能を組み込んだら、どのように動くのでしょうか。実際に動くサンプルがあれば、最初の一歩はぐっと踏み出しやすくなります。そのための出発点となるのが、ONLYOFFICE Create Appです。Create Appは、ファイルマネージャーと、ONLYOFFICEのDocsに接続するためのコードを備えた小さなWebアプリケーションを生成します。稼働中のDocsインスタンスへの接続を設定すれば、ブラウザでエディタを試しながら、自分のペースでプロジェクトの中身を確認できます。

ONLYOFFICE Create Appとは

ONLYOFFICE Create Appはnpmで公開されているコマンドラインツールで、連携用のサンプルプロジェクトを作成できます。

生成されるアプリはNext.jsとReactで作られています。ファイルをアップロードしたり、文書、スプレッドシート、プレゼンテーション、PDFフォームを新規作成したりできるファイルマネージャーを備えているほか、エディタページと、文書のダウンロードや保存を処理するサーバー側のコードも含まれています。

このアプリには、2つの重要な構成要素があります。

Create AppがWebサイトを用意します。
ONLYOFFICE Docs がドキュメントエディタを提供します。

ONLYOFFICE Create Appで、Webアプリにドキュメント編集機能を組み込んでみよう

ご注意ください。ONLYOFFICE Docsは別途インストールして接続する必要があります。npmコマンドがDocument Serverをインストールしたり、Dockerを起動したりすることはありません。

前提条件

Node.js 20.12以降
ONLYOFFICE Docs 8.2以降
npmパッケージマネージャーと安定したインターネット接続

以下の手順では、Windows PowerShellを使用し、ONLYOFFICEのDocsがすでにDocker Desktop上のポート80で稼働していることを前提としています。まだDocsをインストールしていない場合は、先にDockerでのインストールガイドに沿って準備しましょう。

Dockerは、Docsをローカルで動かすための方法のひとつにすぎません。別の場所にある既存のサーバーに接続する場合は、お使いのパソコンにDockerは必要ありません。

最初のアプリケーションを作成する

プロジェクトを保存したいフォルダでPowerShellを開き、次のコマンドを実行します。
```
npx @onlyoffice/create-app my-docs-app
```
ジェネレーターをインストールするかどうかnpmに確認された場合は、yを入力して進めます。このコマンドでmy-docs-appというフォルダが作成され、アプリケーションの依存関係がインストールされます。
インストールが完了するのを待ってから、新しいフォルダに移動します。
```
cd my-docs-app
```
ご注意ください。アプリを起動するコマンドは、package.jsonがあるプロジェクトフォルダ内で実行する必要があります。関係のない空のフォルダで npm install を実行しても、ONLYOFFICEとの連携は作成されません。

アプリをONLYOFFICEのDocsに接続する

今回のローカルのDocker Desktop環境では、.env の次の項目を編集し、それ以外の生成済みの設定はそのまま残しておきます。

DOCUMENT_SERVER_URL=http://localhost:80
DOCUMENT_SERVER_JWT_SECRET=your_actual_docs_secret
APP_URL=http://your_local_ip_adress:3000

DOCUMENT_SERVER_URLは、ブラウザにエディタの場所を伝える設定です。APP_URLは、Docsがファイルをダウンロードし、保存した変更を送信する先を伝えます。ここでは、host.docker.internalによって、コンテナからWindows上で動作しているアプリケーションにアクセスできるようにしています。アプリにはポート3000を使用し、ポート3000で動作する別のサンプルと並行して実行できるようにしています。

DOCUMENT_SERVER_JWT_SECRETは、2つの構成要素間のリクエストを検証するための共有シークレットです。サンプルのテキストを、お使いのDocsインスタンスに設定されている実際のシークレットに置き換えましょう。 .env を手動で編集する場合は、値そのものを貼り付けます。Dockerでインストールしている場合は、コンテナの環境変数JWT_SECRETでシークレットを設定し、アプリのDOCUMENT_SERVER_JWT_SECRETにも同じ値を使用します。

APP_URL：your_local_ip_adressを、Docsコンテナからアクセスできるお使いのパソコンのローカルIPアドレスに置き換えます。

このDocker環境では、Docsがホストのプライベートアドレスにファイルをリクエストできるよう許可しておく必要もあります。今回のテスト用コンテナでは ALLOW_PRIVATE_IP_ADDRESS=trueを使用しました。このオプションについては、公式Dockerイメージのドキュメントで説明されています。

ブラウザでアプリを開く

.env を保存したら、アプリケーションを起動します。

npm start

このテンプレートでは、startコマンドを実行すると、空の文書テンプレートのダウンロード、アプリケーションのビルド、Webサーバーの起動までが行われます。初回の実行で、別途ビルドコマンドを実行する必要はありません。

サーバーの準備ができたら、http://your_local_ip_adress:3000を開きます。アプリを使っている間は、ターミナルを起動したままにしておきましょう。

READMEのサンプルが入ったファイルマネージャーが表示されます。ここから別の文書を作成することもできます。アプリケーション内にONLYOFFICEのDocsが読み込まれ、すぐに編集を試せる状態になります。

ONLYOFFICE Create Appで、Webアプリにドキュメント編集機能を組み込んでみよう

自分だけの連携を試してみよう

Create Appを使えば、ONLYOFFICEのDocsとの連携を実践的に学べます。小さな動くサンプルから始めて、文書が編集から保存までどのように処理されるのかを確認し、その理解を自分のアプリケーション開発に生かしましょう。

GitHubのCreate Appリポジトリをチェックして、最初のプロジェクトを生成し、ブラウザで文書を開いてみましょう。連携オプションをさらに詳しく知りたい方は、ONLYOFFICE Docs APIドキュメントもあわせてご覧ください。アイデアやご提案があれば、GitHubでissueを作成するか、メールでお気軽にお知らせください。