メインコンテンツまでスキップ

ワークスペースの埋め込み

ONLYOFFICE Appsまたはその一部を独自のWebアプリケーションに統合することで、ユーザーがあなたのウェブサイトから直接ドキュメントを作成し、提出できるようになります。

この目的のために、JavaScriptに基づくONLYOFFICE Apps SDKを使用します。これにより、開発者はapi.jsを使用してONLYOFFICE Appsのすべての機能を利用できます。

ウェブサイトにワークスペース全体、特定のルーム、またはフォルダーを埋め込むには、

  1. 任意のセクション(ファイル、ルーム)で左パネルにある開発者ツールリンクをクリックして開発者ツールセクションを開きます。

    注記

    デフォルトでは、ゲストを除くすべてのユーザーが開発者ツールセクションにアクセスできるため、どのユーザーもこのページにアクセスして独自の統合を作成できます。

  2. 開発者ツールで、Embed SDKセクションに移動します。

  3. Embed SDKページで、このワークスペースに許可されるドメインを追加してくださいセクションに移動し、ワークスペースを埋め込みまたは接続するサービスのアドレスを入力して+アイコンを押します。ドメイン名のみを指定し、URLパスや余分な文字は含めないでください。追加したドメインはフィールドの下に一覧表示され、xアイコンをクリックして削除できます。

    注記

    サーバーバージョンを使用している場合は、最初にワークスペースをHTTPSに切り替える必要があります。インストールセクションの手順に従ってください。

    開発者ツール

  4. ワークスペースの埋め込みモードを選択セクションで、提案されたモードのいずれかを選択します:Apps、公開ルーム、エディター、ビューアー、ルームセレクター、ファイルセレクター、カスタム、アップローダー。

    • Apps - ワークスペース全体を埋め込んで、ユーザーがすべてのルーム、ファイル、設定とやり取りできるようにします。
    • 公開ルーム - 登録なしでそこに保存されているすべてのドキュメントを表示、編集、コメント、レビューできるように公開ルームを埋め込みます。
    • エディター - 対応するルームからファイルを編集できるようにエディターを埋め込みます。
    • ビューアー - 対応するルームからファイルを表示するためにビューアーを埋め込みます。
    • ルームセレクター - 利用可能なルームのリストから任意のルームにアクセスできるようにルームセレクターを埋め込みます。すべてのタイプのルームを埋め込むことも、詳細表示設定 -> ルームタイプの表示メニューで必要なものを選択することもできます。必要なオプションを選択します:すべてのタイプ、公開ルーム、コラボレーションルーム、バーチャルデータルーム、カスタムルーム。
    • ファイルセレクター - 利用可能なファイルのリストから任意のファイルにアクセスできるようにファイルセレクターを埋め込みます。
    • カスタム - ワークスペースを埋め込むためのパラメーターを手動で設定します。
    • アップローダー - ユーザーが登録なしでドキュメントをワークスペースにアップロードできるように、アップローダーを埋め込みます。アップロードを許可するファイルタイプを選択します。次の設定が利用できます:
      • 保存先フォルダーID - アップロードしたファイルを保存するワークスペースのフォルダーを選択します。フォルダーピッカーを使用して、保存先を参照して選択します。

      • アップロードモード - ユーザーがアップロードできる内容を選択します:

        • ファイル - 個々のファイルのアップロードを許可します。
        • フォルダー - フォルダー構造全体のアップロードを許可します。
      • 数量 - 一度にアップロードできる項目数を定義します:

        • 単一ファイル - アップローダーをセッションあたり1ファイルに制限します。
        • 複数ファイル - 複数のファイルを一度にアップロードできるようにします。
      • アップロード制限 - 最大ファイルサイズと単位(KB、MB、GB)を設定して、アップロードされる個々のファイルの大きさを制限します。

      • 利用可能なファイルタイプ - 1つ以上のカテゴリをチェックして、アップロード可能なファイルタイプを制限します:ドキュメント、スプレッドシート、プレゼンテーション、画像、ビデオ、オーディオ、アーカイブ、PDF。

      • ボタンのテキスト - アップロードボタンのラベルをカスタマイズします(デフォルトはアップロード)。

      • ヘルパーテキスト - ボタンの下に表示される補助ヒントテキストをカスタマイズします(デフォルトはまたはここにファイルをドロップ)。

      • 表示のカスタマイズ - 幅、高さ(%またはpx)と、ページ内の埋め込みフレームを識別するために使用するフレームIDを設定します。

        開発者ツール - アップローダー

  5. 設定を開始ボタンをクリックします。

  6. 選択したモードに応じて異なる表示オプションをカスタマイズします。たとえば、カスタムモードでは、次のオプションが利用可能です:幅、高さ、フレームID、インターフェース要素(左メニュー、タイトル、列の設定、アクションボタン、検索、フィルターと並べ替え、およびヘッダー(モバイルデバイスのみ))、データ表示設定(表示するセクション、ルーム、フォルダーを選択)、および詳細表示設定(検索語、並べ替えパラメーター、並べ替え順序、1ページに表示されるファイル/フォルダーの数、表示ページ、ファイル行の列の表示など)。

  7. プレビューセクションで結果をプレビューします。

  8. 挿入するコードタブに切り替えて、HTML、JavaScript、またはNPMタブから生成されたコードをコピーします。NPMの場合は、パッケージのインストールとインポートのコマンド、必要なパラメーターを含む設定オブジェクト、およびSDKフレームを挿入するHTML要素が提供されます。

  9. コピーしたコードをウェブサイトに埋め込みます。

開発者ツール

Embed SDKページには、ZoomやWordPressなどの人気プラットフォーム向けのすぐに使える統合を紹介する統合の例セクションもあります。すべてのコネクタを見るをクリックすると、利用可能な統合の全リストを参照できます。

Embed SDKの詳細については、api.onlyoffice.comをご覧ください。