ONLYOFFICE DocSpaceのシングルページアプリケーションへの統合
2023年春、ONLYOFFICEはクライアント、パートナー、第三者とのドキュメントコラボレーションを強化するためにデザインされた最先端のコワーキングプラットフォーム、ONLYOFFICE DocSpaceを発表しました。カスタマイズ可能なルームと高度なセキュリティ機能を備えたこの革新的なソリューションは、ドキュメントを使ったコラボレーション方法に革命をもたらします。このブログポストでは、GitHub Pagesを例に、DocSpaceをシングルページアプリケーション（SPA）に簡単に統合する方法をご紹介します。
DocSpaceを統合するメリット
クラウド版でもサーバー版でも、DocSpaceには豊富なカスタマイズオプションが用意されています：
- 共同エディターやビューアーを使って、シームレスにコンテンツを共同編集する
- 様々な目的のためにルームを作成し、パーソナライズする
- 特定のDocSpaceセクション、ルーム、またはフォルダをWebアプリケーションにシームレスに統合する
- AES-256暗号化、JWT認証、2FAなどの堅牢なセキュリティ機能を利用する
- OpenAIのシームレスな統合により、生産性が向上する
ONLYOFFICE DocSpaceは、包括的なコラボレーション機能と堅牢なストレージソリューションを組み合わせることで、ドキュメントワークフローを再定義します。DocSpaceは、CRM、PMS、メッセージングアプリケーションなどに理想的な選択肢となり、製品のコラボレーション機能とストレージ機能を強化しようとしている開発者に支援の手を差し伸べます。
DocSpaceは、クラウドで運用することも、ローカルサーバーにデプロイすることも可能です。
次回の記事では、サーバー版で利用可能なネイティブ統合の可能性について深く掘り下げていきます。しかし今日は、クラウド版をシングル・ページ・アプリケーション（SPA）に簡単に統合することに焦点を当てます。このプロセスは非常に簡単で、ONLYOFFICE DocSpaceをローカルにインストールする必要はありません。
DocSpaceアカウントの設定
DocSpaceアカウントを作成し、プランを選択します。DocSpaceソリューションには、無料のSTARTUPプランとBUSINESSサブスクリプションがあります。
DocSpaceの組み込み
DocSpaceの多彩な機能により、アプリケーション全体または特定の部屋やフォルダを埋め込むことができます。DocSpaceインスタンス全体の埋め込みはとても簡単で、数回クリックするだけで完了します：
- DocSpaceのホーム画面で、名前の横にある3つの点をクリックし、DocSpaceの設定に進みます：
- 右のタブで、「開発者ツール」オプションを選択します：
- JavaScript SDKにアクセスし、「サンプルDocSpaceエンベッドを作成する」セクションまでスクロールダウンしてください：
ここでは、Width（幅）、Height（高さ）、Interface elements（インターフェイス要素）、Data display settings（データ表示設定）、Advanced display settings（詳細表示設定）などの表示オプションをカスタマイズできます。
- Codeに切り替えて、生成されたコード・スニペットを挿入し、コピーします：
- 生成されたコードスニペットをウェブサイトのindex.htmlファイルに挿入します。
- DocSpace Developer Toolページに戻り、iframeとしてDocSpaceを埋め込むセクションまでスクロールします。あなたのウェブサイトへのリンクを貼り付け、+アイコンを押します。入力ボックスの下にリンクが表示されます：
- WEBサイトに移動します。
特定のルームを埋め込む
特定のルームを埋め込むには、以下の手順に従ってください：
- DocSpace設定のデベロッパーツールに戻ります。
- JavaScript SDKに移動し、サンプルDocSpace埋め込みセクションまでスクロールダウンします。ここでは、iframe の幅と高さを設定し、表示するインターフェイス要素を選択し、高度な表示設定を変更することができます。特定の部屋を表示するには、データ表示設定に移動し、作成された部屋のリストから選択します：
- 「挿入するコード」タブに切り替え、生成されたコード・スニペットをコピーします：
- 生成されたコード・スニペットをウェブサイトのindex.htmlファイルに挿入します：
GitHubページにDocSpaceを埋め込む
- GitHubにログインします。
- GitHubアカウントで、ユーザー名の後に.github.ioを付けて新しいリポジトリを作成します。
- GitHubリポジトリに移動し、新しいindex.htmlファイルを作成し、DocSpace Javascript SDKのコードスニペットを貼り付け、変更をコミットします。
- リポジトリをGitHubページとしてデプロイします。
- DocSpace Developer Toolページに戻り、iframeとしてDocSpaceを埋め込むセクションまでスクロールしてください。あなたのウェブサイトがホストされている GitHub ドメインへのリンクを挿入し、+ アイコンをクリックします。リンクが次のフォーマットに従っていることを確認してください：yourGitHubName.github.io. 入力ボックスの下にリンクが表示されます。
- あなたのウェブサイトにアクセスしてください。
ONLYOFFICE DocSpaceの機能を使うことで、簡単にドキュメントコラボレーションを強化することができるので、ぜひご利用ください。サーバーバージョンとのより深いレベルの統合を探求する今後の記事にご期待ください。DocSpaceをあなたのコワーキング・ニーズに最大限に活用していただけると信じています。
