ONLYOFFICEオンラインエディターをJavaのウェブサイトに統合する方法

この記事では、Javaで書かれたWebアプリケーションにONLYOFFICE Docsを統合方法をご紹介します。

:::note warn
統合の例は、ドキュメントエディタの機能と、Document Serverをあなたのアプリケーションに接続する方法を示すために使用されます。**適切なコードの変更なし**に、これらの例をあなた自身のサーバで**使用しないでください**！テスト用のサンプルを有効にした場合は、本番環境に移行する前に無効にしてください。
:::

## 重要なセキュリティ情報

テスト例を使用する際には、以下のセキュリティ面に留意してください：

* 認証が必要ないので、不正アクセスからストレージを保護することはできません。
* パラメータはあらかじめ用意されたスクリプトに従ってコードによって生成されるので、リンクのパラメータ置換に対するチェックはありません。
* 各テスト例はONLYOFFICE Document Serverからのリクエストのみを対象としているため、編集後のファイル保存リクエストにおけるデータチェックはありません。
* 他ドメインからONLYOFFICE Document Serverとやり取りすることを想定しているため、他サイトのテスト例を使用することを禁止しておりません。

## Windowsの場合

### ステップ1. ONLYOFFICE Docsのインストール

[ONLYOFFICE Docs](https://api.onlyoffice.com/editors/demopreview)（Document Serverとしてパッケージ化されています）をダウンロードし、インストールしてください。

[Windows用](https://helpcenter.onlyoffice.com/installation/docs-developer-install-windows.aspx?from=api_java_example)のDocument Serverのインストール方法については、詳細ガイドをご覧ください。

### ステップ2. エディタ統合のためのJavaコードのダウンロード

私たちのサイトから[Javaのサンプル](https://api.onlyoffice.com/editors/demopreview)をダウンロードしてください。

エディタをウェブサイトに接続するために、エディタインストールへのパスとストレージフォルダへのパスを*∕srcmain∕resources∕settings.properties*ファイルに指定します：

```java
storage-folder = app_data
files.docservice.url.site=https://documentserver/
```

ここで、documentserverはONLYOFFICE Document Serverがインストールされているサーバーの名前、storage-folderはファイルが作成され保存されるパスです。絶対パスを設定できます。例えば、`D:\\`フォルダです。Windows OSでは、セパレータとしてダブルバックスラッシュを使用しなければならないことに注意してください。

エディタ設定を試したい場合は、editor.jspファイルの[パラメータ](https://api.onlyoffice.com/editors/advanced)を変更してください。

### ステップ3. 前提条件のインストール

Javaサンプル・コードを実行するために、OSとWebサーバーApache Tomcatに適したJavaバージョンをインストールしてください：

* Java（[Oracle公式サイト](https://www.java.com/en/download/manual.jsp)からダウンロードしてください；）
* Apache Tomcat：バージョン9.0.x（[公式サイト](https://tomcat.apache.org/download-90.cgi)からダウンロード）。

### ステップ4．Apache Tomcatの実行

１．WindowsにJavaをインストールしたら、**JAVA_HOME**環境変数をJavaのインストールディレクトリに設定します。

Javaがインストールされている場所を確認してください。インストール時にパスを変更しなかった場合は、以下のようになります：

```
C:\Program Files\Java\jdk1.8.0_65
```

Windows 7の場合、「マイコンピュータ」を右クリックし、「プロパティ」を選択し、「詳細設定」をクリックします。

Windows 8の場合は、コントロールパネルからシステムを選択し、システムの詳細設定をクリックします。

「環境変数」ボタンをクリックします。

「システム変数」で、「新規」をクリックします。

変数名」フィールドに、JDK（Java Development Kit）をインストールした場合は「JAVA_HOME」、JRE（Java Runtime Environment）をインストールした場合は「JRE_HOME」と入力します。

Variable Valueフィールドに、JDKまたはJREのインストール・パスを入力します。例：C:\Program Files\Java\jdk1.8.0_65

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/93b21de3-d95b-bef9-5d5f-34f504acea5f.png)

コマンドプロンプトの echo コマンドで変数が正常に作成されているか確認します：

```
echo %JAVA_HOME%
```

２．コマンド・プロンプトを実行します。カレントディレクトリをApache Tomcatのインストールディレクトリに変更します：

```
cd /d C:\Apache Tomcat\apache-tomcat-7.0.67\bin
```

bin startup.batスクリプトを使用してApache Tomcatを起動します：

```
startup.bat
```

Tomcatの起動に関する情報やメッセージを提供する新しいTomcatコンソール・ウィンドウが表示されます：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/74d80e90-869b-ae3a-1024-aed5e92f73f3.png)

ウェブ・ブラウザのアドレスを使用して、Tomcatのインストールをテストしてください：

```
http://localhost:8080
```

問題がなければ、以下のようにブラウザにTomcatのWebページが表示されます。

### ステップ 5 . Javaコードの実行

１．Manager Appをクリックして、Tomcat Web Application Managerを開きます：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/ebdf03dc-a5e3-ddb8-d5db-270ad7009fcc.png)

２．Tomcat Web Application Managerはユーザ名とパスワードを要求します：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/654712c1-109b-7bcf-ed41-a6146b3915c0.png)

Apache Tomcatのインストールフォルダにあるtomcat-users.xmlファイルにユーザデータを指定します。manager-guiユーザ・ロールを定義し、ユーザ名とパスワードの値を指定します：

```java
<tomcat-users>
    <role rolename="manager-gui"/>
    <user username="tomcat" password="tomcat" roles="manager-gui"/>
</tomcat-users>
```

３．Tomcat Web Application ManagerでJavaプロジェクトをアップロードします。そのためには、[WAR file to deploy]セクションで[Choose File]をクリックし、Javaプロジェクト・フォルダ内の.warファイルを見つけて、[Deploy]をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/0e30785d-79d0-d250-00a8-07e0090a31a8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/7da9b371-087d-1c3a-c163-857f007730b1.png)

４．アプリケーションリストにプロジェクトが表示されます：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/f17ed682-90df-be60-1f19-17625a653882.png)

５．アプリケーション名のリンクをクリックして実行します。

### ステップ6. アクセシビリティの確認

exampleとDocument Serverが別々のコンピュータにインストールされている場合、exampleがインストールされているサーバーが、設定ファイルでdocumentserverの代わりに指定したアドレスでDocument Serverにアクセスできることを確認してください。また、Document Serverが、exampleをインストールしたサーバーに、設定ファイルでexample.comの代わりに指定したアドレスでアクセスできることを確認してください。

エディタの統合が成功すれば、私たちのサイトの[デモプレビュー](https://api.onlyoffice.com/editors/demopreview#DemoPreview)のようになるはずです。

## Linuxの場合

### ステップ1. ONLYOFFICE Docsのインストール

[ONLYOFFICE Docs](https://api.onlyoffice.com/editors/demopreview)（Document Serverとしてパッケージ化されています）をダウンロードしてインストールしてください。

[Linux用](https://helpcenter.onlyoffice.com/installation/docs-developer-install-ubuntu.aspx?from=qiita)Document Serverのインストール方法については、詳細ガイドをご覧ください。

### ステップ2. 前提条件をインストールし、エディタでウェブサイトを実行します。

１．Javaをインストールします：

```
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer
```

２．Java サンプルのアーカイブをダウンロードし、解凍します：

```
wget https://github.com/ONLYOFFICE/document-server-integration/releases/latest/download/Java.Example.zip
```

```
unzip Java\ Example.zip
```

カレント・ディレクトリをプロジェクト・ディレクトリに変更します：

```
cd Java\ Example/
```

４．settings.properties設定ファイルを編集します。ONLYOFFICE Document Serverがインストールされているローカルサーバ名を指定してください。

```
nano src/main/resources/settings.properties
```

以下の行を編集してください：

```
storage-folder = app_data
files.docservice.url.site=https://documentserver/
```

ここで、documentserverはONLYOFFICE Document Serverがインストールされているサーバーの名前で、storage-folderはファイルが作成され保存されるパスです。フォルダに対する読み取り権限と書き込み権限が必要であることに注意してください。権限がない場合は、次のコマンドを使用してください：

```
sudo chmod -R ugo+rw /{path}
```

５．Mavenをインストールします：

```
sudo apt-get install maven
```

６．構築します：

```
mvn package
```

７．管理ページでTomcatをインストールします：

```
sudo apt-get install tomcat8 tomcat8-admin
```

８．Tomcatのadminユーザを設定します：

```
sudo nano /var/lib/tomcat8/conf/tomcat-users.xml
```

行を入力します：

```
<role rolename="manager-gui"/>
<user username="USERNAME" password="PASSWORD" roles="manager-gui"/>
```

ここで、USERNAMEとPASSWORDはあなた自身の認証情報データです。

Tomcatを再起動します：

```
systemctl restart tomcat8
```

９．ブラウザでTomcatの管理画面をadminユーザで開きます：

```
http://localhost:8080/manager/html
```

１０．target/OnlineEditorsExampleJava-1.0.warからアップロードするWARファイルを選択します。

１１．ブラウザのアドレスで結果を確認してください：

```
http://localhost:8080/OnlineEditorsExampleJava-1.0/
```

### ステップ3. アクセス可能性の確認

exampleとDocument Serverが異なるコンピュータにインストールされている場合、exampleがインストールされているサーバーが、設定ファイルでdocumentserverの代わりに指定したアドレスでDocument Serverにアクセスできることを確認してください。また、Document Serverが、exampleをインストールしたサーバーに、設定ファイルでexample.comの代わりに指定したアドレスでアクセスできることを確認してください。

エディタが正常に統合されれば、当サイトの[デモプレビュー](https://api.onlyoffice.com/editors/demopreview#DemoPreview)のようになるはずです。

Dockerの場合
settings.properties設定ファイルを編集します。ONLYOFFICE Document Serverが[インストールされている](https://helpcenter.onlyoffice.com/installation/docs-developer-install-docker.aspx)ローカルサーバの名前を指定します。

```
nano src/main/resources/settings.properties
```

以下の行を編集してください：

```
storage-folder = app_data
files.docservice.url.site=https://documentserver/
```

ここで、documentserverはONLYOFFICE Document Serverがインストールされたサーバーの名前で、storage-folderはファイルが作成され保存されるパスです。

２．Javaのサンプルディレクトリで次のコマンドを実行してください：

```
docker-compose up
```

３．その後、すべてのbinファイルが./targetフォルダに移動されます。