OlyOfficeを使用してWebアプリにオフィス機能を追加します

この記事は、OlyOfficeと協力して作成されました。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。 アプリに複雑な機能を追加しようとしていることに気付いたときはいつでも、「自分のものを転がすべきですか？」という疑問が生じます。そして、あなたの目標がその機能を構築することでない限り、答えはほとんど常にまっすぐな「いいえ」です。

必要なのは、できるだけ早くMVPに到達するのに役立つものであり、それを達成するための最良の方法は、時間を節約するのに役立つ完全なボックスアウトボックスソリューションを使用することです。ターン、開発コストの節約に変換されます

上記があなたと共鳴するので、あなたはまだここにいると思います。だから、私たちが同期しているので、この記事であなたに見せたいのは、あなたのWebアプリにOnlyOfficeを統合するのがどれほど簡単かということです。

キーテイクアウト

OnlyOfficeは、Microsoft OfficeおよびOpenDocumentフォーマットと非常に互換性のある包括的なオフィススイートを提供します。これは、ドキュメント、スプレッドシート、およびプレゼンテーション管理のためにWebアプリケーションに直接統合できます。

onlyOfficeの開発者版では、編集者を独自のものとしてブランディングするための「ホワイトラベル」オプションを提供するための「ホワイトラベル」オプションを提供します。

の唯一のオフィスのセットアップでは、唯一のオフィスドキュメント（ドキュメントサーバー）をローカルにインストールし、複数のプログラミング言語をサポートして、アプリ内のドキュメントを管理するためのAPIリクエストを実装します。

OnlyOffice統合により、Webアプリ内でドキュメントの作成、編集、削除、追跡が可能になり、外部アプリケーションを必要とせずにユーザーの相互作用と生産性が向上します。

リアルタイムのコラボレーションはOfficeFiceでサポートされているため、複数のユーザーがドキュメントを同時に編集し、お互いの変更をライブで確認できるようになりました。
• 統合プロセスは、開発者が最小限の実行可能な製品（MVP）を迅速かつ費用対効果に達成できるようにすることを目的としており、十分なドキュメントとコミュニティサポートを支援できるように設計されています。
• 唯一のオフィスとは？
彼らのウェブサイトから：
• OnlyOfficeは、Microsoft OfficeおよびOpenDocumentファイル形式と非常に互換性があり、利用可能な最も機能が豊富なオフィススイートを提供しています。 Webアプリケーションから直接、ドキュメント、スプレッドシート、プレゼンテーションを表示、編集、共同作業で編集し、共同作業します。
• オフィススイートにはいくつかのエディションがあります。この記事では、デベロッパーエディションを使用します。これは、エディターをアプリに統合し、後でクラウドサービスまたはオンプレミスインストールとして多くのユーザーに配信されるためです。
既存のSync＆Shareソリューション内でOnlyOfficeを使用する場合は、Enterprise Editionをご覧ください。統合のリストはこちらです。

• Developer Edition

  Developer Editionは、アプリ内に編集者を統合するのに十分な自由を提供するだけでなく、編集者を完全にカスタマイズして独自のブランドで使用できる「ホワイトラベル」オプションも付属しています。

  ドキュメントサーバーの統合
  Webアプリと統合するには、最初に唯一のOfficeドキュメント（ドキュメントサーバーとしてパッケージ化されている）をダウンロードし、ローカルサーバーにセットアップする必要があります。

  インストールした後、サーバー上のドキュメントを処理するリクエストの実装を開始できます。 OnlyOfficeは、.NET、Java、node.js、PHP、Python、Rubyの非常に素晴らしい例をいくつか提供しています。

  ドキュメントサーバーとお好みの例をダウンロードして、マシンですぐに試してみることができます。
  アプリに統合し始める方法を示します。この目的のために、node.jsとExpressを使用して非常に簡単な例を使用します。実装についてはあまり詳しく説明しません。裸の骨の必需品をレイアウトし、堅牢でスケーラブルなシステムを構築するために空白を埋めることができます。

  次の構造を持つアプリがあります：

  公開/ドキュメントフォルダーを使用してドキュメントを保存します。 App.jsファイルは、Express Appコードがある場所であり、index.htmlはドキュメントを表示する場所です。テスト目的でドキュメントフォルダーにsample.docxファイルをドロップしました。

  public/ samples/内部のツリーファイルは、新しいファイルを「作成」するときにコピーする空白のファイルです。

  バックアップフォルダーは、後で見るように、以前のバージョンのバックアップを維持するだけでなく、ドキュメントを変更した後のドキュメントの一意の識別子を生成するのにも役立ちます。

  - node_modules
  - public
      - backups
      - css
          - main.css
      - documents
          - sample.docx
      - javascript
          - main.js
      - samples
          - new.docx
          - new.xlsx
          - new.pptx
  - app.js
  - index.html
  - package.json
  

  public/css/main.cssおよびpublic/javascript/main.jsファイルは、index.htmlによって使用されます。後でそれを調べます。
  app.jsファイル：

  を見てみましょう

  私たちがしていることは、ファイルをlocalhost：3000/documents/filenameとして提供することです。

  また、私は自分よりも先を行き、SyncRequest、FS、およびBodyParserを追加しました。これらは現在関連していませんが、後で使用します。

  ドキュメントの取得

  利用可能なドキュメントを表示するには、すべてのファイル名のリストを取得し、クライアントに送信する必要があります。これのために /documentsルートを作成します：

  <span>const express = require('express');
  </span><span>const bodyParser = require("body-parser");
  </span><span>const path = require('path');
  </span><span>const fs = require('fs');
  </span><span>const syncRequest = require('sync-request');
  </span>
  <span>const app = express();
  </span>
  app<span>.use(bodyParser.json());
  </span>app<span>.use(bodyParser.urlencoded({ extended: false }));
  </span>
  app<span>.use(express.static("public"));
  </span>
  app<span>.get("/", (req<span>, res</span>) => {
  </span>  res<span>.sendFile(path.join(__dirname, "/index.html"));
  </span><span>});
  </span>
  <span>const port = process.env.PORT || 3000;
  </span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>));
  </span>

  ドキュメントを作成

  最初はサンプルドキュメントを用意しますが、それはまったく楽しいことではありません。いくつかのファイルを追加するのを支援するために、A /Create Routeを追加しましょう。ファイル名を取り、対応するテンプレートを新しい名前で公開/ドキュメントフォルダーにコピーします。

  ドキュメントを削除

  また、ドキュメントを削除する方法も必要です。 /deleteルートを作成しましょう：

  app<span>.get("/documents", (req<span>, res</span>) => {
  </span>  <span>const docsPath = path.join(__dirname, "public/documents");
  </span>  <span>const docsPaths = fs.readdirSync(docsPath);
  </span>
    <span>const fileNames = [];
  </span>
    docsPaths<span>.forEach(filePath => {
  </span>    <span>const fileName = path.basename(filePath);
  </span>    fileNames<span>.push(fileName);
  </span>  <span>});
  </span>
    res<span>.send(fileNames);
  </span><span>});
  </span>

  これは非常にシンプルです。ファイルを削除し、200ステータスコードを送信して、ユーザーにすべてがうまくいったことをユーザーに知らせます。それ以外の場合は、400ステータスコードが取得されます。

  ドキュメントを保存

  これまでのところ、編集のためにドキュメントを開くことができますが、変更を保存する方法はありません。今それをしましょう。ファイルを保存するには、 /トラックルートを追加します：

  - node_modules
  - public
      - backups
      - css
          - main.css
      - documents
          - sample.docx
      - javascript
          - main.js
      - samples
          - new.docx
          - new.xlsx
          - new.pptx
  - app.js
  - index.html
  - package.json
  

  これは、ファイルがエディターによって保存されているときにドキュメントサーバーで使用されるため、トリッキーなものです。ご覧のとおり、「{"エラー"：0}」を返しています。これは、すべてが良いことをサーバーに伝えます。

  エディターが閉じられている場合、ファイルの現在のバージョンは、ファイルの名前としてミリ秒単位で現在の時間をパブリック/バックアップ/filename-historyでバックアップします。ご覧のとおり、フロントエンドの後半でファイルの名前を使用します。

  この例では、新しいバックアップを保存するたびに以前のバックアップを交換しています。より多くのバックアップを保持するにはどうすればよいですか？
  バックアップの取得
  特定のファイルのバックアップを取得する方法が必要になるので、これを処理するためのA /Backupsルートを追加しています。
  ここで、そのファイルのバックアップフォルダーが存在することを確認し、そのフォルダー内のすべてのバックアップファイルの配列を返します。はい、これは、単一のファイルのバックアップを増やすというタスクに役立ちます。私はあなたのためにすべての仕事を続けることはできません！

  <span>const express = require('express');
  </span><span>const bodyParser = require("body-parser");
  </span><span>const path = require('path');
  </span><span>const fs = require('fs');
  </span><span>const syncRequest = require('sync-request');
  </span>
  <span>const app = express();
  </span>
  app<span>.use(bodyParser.json());
  </span>app<span>.use(bodyParser.urlencoded({ extended: false }));
  </span>
  app<span>.use(express.static("public"));
  </span>
  app<span>.get("/", (req<span>, res</span>) => {
  </span>  res<span>.sendFile(path.join(__dirname, "/index.html"));
  </span><span>});
  </span>
  <span>const port = process.env.PORT || 3000;
  </span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>));
  </span>

  ブラウザでドキュメントを開く

  OnlyOfficeドキュメントを使用してブラウザで直接編集するためにドキュメントを開く方法を確認します。

  最初に、簡単なHTMLファイルを作成します：

  

  ご覧のとおり、このファイルにはあま​​りありません。編集者が添付されるプレースホルダーDIVがあります。次に、ドキュメントDivがあります。これには、ファイル名のリストのドキュメントとコンテナを作成するコントロールが含まれています。 その下には、ドキュメントサーバーのJavaScript APIを備えたスクリプトがあります。ホストをドキュメントサーバーの場所に置き換える必要がある場合があることに注意してください。私があなたに与えたdockerコマンドでそれをインストールした場合、あなたは行くのが良いはずです。

  最後になりましたが、最後になりましたが、スクリプトタグがあり、フロントエンドJavaScriptとMain.jsファイルをインポートし、DocSAPIオブジェクトにグローバルにアクセスできます。

  app<span>.get("/documents", (req<span>, res</span>) => {
  </span>  <span>const docsPath = path.join(__dirname, "public/documents");
  </span>  <span>const docsPaths = fs.readdirSync(docsPath);
  </span>
    <span>const fileNames = [];
  </span>
    docsPaths<span>.forEach(filePath => {
  </span>    <span>const fileName = path.basename(filePath);
  </span>    fileNames<span>.push(fileName);
  </span>  <span>});
  </span>
    res<span>.send(fileNames);
  </span><span>});
  </span>

  css
  コーディングに到達する前に、レイアウトをいくつかのCSSでまとめて、アプリをより使いやすく、ugい低いようにしましょう。 main.cssに次のものを追加します：

  利用可能なドキュメントを表示

  それが邪魔にならないので、フロントエンドのコーディングを開始する準備ができています。まず、ドキュメントフォルダーにファイルをリストすることから始めます。 main.jsに移動して、次のコードを追加します：

  ここでは、クエリパラメーターを取得して、ファイルを開いているかどうかを確認します。もしそうなら、editdocument関数を呼び出します。心配しないでください、後でそれを作成します。

  app<span>.post("/create", async (req<span>, res</span>) => {
  </span>  <span>const ext = path.extname(req.query.fileName);
  </span>  <span>const fileName = req.query.fileName;
  </span>
    <span>const samplePath = path.join(__dirname, "public/samples", "new" + ext);
  </span>  <span>const newFilePath = path.join(__dirname, "public/documents", fileName);
  </span>
    <span>// Copy the sample file to the documents folder with its new name.
  </span>  <span>try {
  </span>    fs<span>.copyFileSync(samplePath, newFilePath);
  </span>    res<span>.sendStatus(200);
  </span>  <span>} catch (e) {
  </span>    res<span>.sendStatus(400);
  </span>  <span>}
  </span><span>});
  </span>

  ファイルを開いていない場合は、利用可能なファイルとコントロールのリストを表示してさらに作成します。 ListDocumentsでは、最初にプレースホルダーを隠し、リストをクリアして、それを新たに作成することを確認します。次に、すべてのファイルを取得し、それらを繰り返し、対応する要素を作成するために、以前に作成した /ドキュメントルートを呼び出します。 Filenameを使用して各要素をIDとして識別します。このようにして、後で簡単に検索できます。

  addocumenthtml関数を呼び出していることに注意してください。これは後で再利用して新しいファイルを追加します。

  これらの各ドキュメントについては、下部に定義したOpenDocumentも呼び出し、次に定義します。

  ドキュメントの削除

  ドキュメントを削除するには、先に進んで /削除ルートを呼び出してそのファイルで核に移動する前に、ユーザーが確信している場合はプロンプトが表示されます。 APIへの別の呼び出しを無駄にする代わりに、DOM要素を直接削除するために、返されたステータスが200であることを確認しています。

  ドキュメントを作成

  - node_modules
  - public
      - backups
      - css
          - main.css
      - documents
          - sample.docx
      - javascript
          - main.js
      - samples
          - new.docx
          - new.xlsx
          - new.pptx
  - app.js
  - index.html
  - package.json
  

  ドキュメント作成コントロールのオンクリックで呼び出していた関数を覚えていますか？ここに行きます：

  非常にシンプルです。名前を促し、 /createルートをファイル名パラメーターとして呼び出し、ステータスが200として戻ってきた場合、adddocumenthtmlを呼び出してdom要素を直接追加します。

  OnlyOffice docsでドキュメントを開く

  <span>const express = require('express');
  </span><span>const bodyParser = require("body-parser");
  </span><span>const path = require('path');
  </span><span>const fs = require('fs');
  </span><span>const syncRequest = require('sync-request');
  </span>
  <span>const app = express();
  </span>
  app<span>.use(bodyParser.json());
  </span>app<span>.use(bodyParser.urlencoded({ extended: false }));
  </span>
  app<span>.use(express.static("public"));
  </span>
  app<span>.get("/", (req<span>, res</span>) => {
  </span>  res<span>.sendFile(path.join(__dirname, "/index.html"));
  </span><span>});
  </span>
  <span>const port = process.env.PORT || 3000;
  </span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>));
  </span>

  editdocument関数を定義する必要があります。次のコードをmain.jsに追加します：

  したがって、3つの関数を追加しました。最後の2つに焦点を当てましょう。 （editdocumentについては、すぐに説明します。）
  GenerateKeyは、キーを生成することでも支援します。これは、サービスによるドキュメント認識に使用される一意のドキュメント識別子です。最大長は20で、特殊文字はありません。そして、ここにトリックがあります。ドキュメントが保存されるたびに再生する必要があります。これがどこに向かっているのかわかりますか？その通り！バックアップファイル名から利益を得て、キーを生成します。 ご覧のとおり、キーを生成するには、唯一のバックアップを取得し、その名前を使用するか、その他の時間を数ミリ秒で取得していない場合は、その名前を使用しています。

  app<span>.get("/documents", (req<span>, res</span>) => {
  </span>  <span>const docsPath = path.join(__dirname, "public/documents");
  </span>  <span>const docsPaths = fs.readdirSync(docsPath);
  </span>
    <span>const fileNames = [];
  </span>
    docsPaths<span>.forEach(filePath => {
  </span>    <span>const fileName = path.basename(filePath);
  </span>    fileNames<span>.push(fileName);
  </span>  <span>});
  </span>
    res<span>.send(fileNames);
  </span><span>});
  </span>

  より多くのバックアップをサポートする場合、その機能で何を変更する必要がありますか？

  [逃げる]

  getDocumentTypeは、テキスト、スプレッドシート、またはプレゼンテーションのいずれかを返します。オフィスのみがこれを必要として、どのエディターを開くかを知る必要があります

  editdocumentは私たちがここにいるものです。これはあなたがずっと待っていたものです。ここでは、プレースホルダーdivのIDと構成の束を持つオブジェクトを渡すDoceditorオブジェクトをインスタンス化します。

  doceditor構成

  これまでに私があなたに示したのは、Doceditorをインスタンス化するために必要な最小限のオプションです。ドキュメントの高度なパラメーターセクションをチェックして、さまざまなオプションから利益を得る方法を確認する必要があります。それまでの間、私はあなたを基本を通して連れて行ってください。

  上部には、開きたいドキュメントに関する情報を含むオブジェクトを取得するドキュメントフィールドがあります。

  それから、documentTypeがあります。これは、以前に見たように、テキスト、スプレッドシート、またはプレゼンテーションのいずれかにすることができます。 editorconfigオブジェクトです。これにより、スペルチェック、ユニット、ズームなどを設定できます。この場合、Callbackurlを使用しています。これは、ドキュメントサーバーがファイルを保存するために使用する /トラックルートへのURLです。

  結論

  私たちは終わりに到達しました、そして、あなたはあなたのWebアプリとのOnlyOfficeをセットアップして統合する方法を学んだことを願っています。許可、共有、カスタマイズ、その他多くのことができることなど、私たちが除外していることがたくさんあります。

  製品を改善し続けるのに十分な情報、あるいは新しいプロジェクトをゼロから開始するためのインスピレーションさえあることを願っています。現在のような時間はありません。
  さて、次のものでお会いしましょう。それまでの間、コーディングを続けて、あなたがそれにいる間は楽しんでください！
  Offerofficeを使用してWebアプリにオフィス機能を追加することについてのよくある質問（FAQ）

  既存のWebアプリケーションにOfficeのみを統合するにはどうすればよいですか？

  ​​

  既存のWebアプリケーションにOfficeを統合するには、いくつかのステップが含まれます。まず、OnlyOfficeのコアである唯一のOffice Document Serverをインストールする必要があります。これは、Dockerを使用して実行できます。これは推奨される方法であるか、手動で行うことができます。ドキュメントサーバーがインストールされたら、唯一のOffice APIを使用してWebアプリケーションに統合できます。 APIは、ドキュメント、スプレッドシート、およびプレゼンテーションを使用するための一連のメソッドを提供します。これらのメソッドを使用して、Webアプリケーションにドキュメントを開き、編集、保存できます。ユーザーは、ドキュメントをアプリケーションで直接作成、表示、編集することができます。これにより、ユーザーエクスペリエンスと生産性が大幅に向上します。また、Officeのみがリアルタイムのコラボレーションをサポートしており、複数のユーザーが同じドキュメントで同時に作業できるようにします。さらに、OnlyOfficeは、Microsoft OfficeフォーマットやOpenDocument形式など、幅広いドキュメント形式をサポートしています。

  Only OfficeをReactで使用できますか？

  ​​

  はい、OnlyOfficeはReactで使用できます。唯一のオフィスAPIは、OnlyOfficeをReactアプリケーションに統合するために使用できるReactコンポーネントを提供します。このコンポーネントは、ドキュメントを使用するための一連の小道具と方法を提供します。これらの小道具と方法を使用して、Reactアプリケーションにドキュメントを開き、編集、保存できます。唯一のオフィスAPIによって提供されます。このオブジェクトを使用すると、唯一のオフィスインターフェイスの外観と動作を変更できます。たとえば、配色を変更したり、特定のボタンを隠したり表示したり、特定の機能を有効または無効にしたりできます。 SSL暗号化を使用して輸送中のデータを保護し、誰があなたのドキュメントにアクセスできるかを制御できます。さらに、Officeのみがオープンソースです。つまり、そのコードはレビューと精査のために公開されています。これは、複数のユーザーが同じドキュメントで同時に作業できることを意味し、お互いのリアルタイムでの変更を見ることができます。これにより、チームワークと生産性が大幅に向上する可能性があります。

  他のJavaScriptフレームワークとのみOfficeを使用できますか？唯一のオフィスAPIは、これらのフレームワークにコンポーネントを提供し、OnlyOfficeをAngularまたはVueアプリケーションに統合できます。 Microsoft Officeフォーマット（.docx、.xlsx、.pptxなど）およびOpendocument形式（.odt、.ods、.odpなど）を含むドキュメント形式。また、.txtや.csvなどの他の形式もサポートしています。

  モバイルデバイスでのみOfficeを使用できますか？これは、ユーザーがスマートフォンまたはタブレットでドキュメントを作成、表示、編集できることを意味し、デバイス全体でシームレスなエクスペリエンスを提供します。 OffineOffice開発者向けのコミュニティ。このコミュニティは、開発者が質問をしたり、ヒントやコツを共有したり、プロジェクトで協力したりするフォーラムを提供します。唯一のオフィスで開発する人にとって素晴らしいリソースです。

以上がOlyOfficeを使用してWebアプリにオフィス機能を追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。