ONLYOFFICEでモバイル文書処理〜アプリにモバイルエディタを導入する方法〜 #iOS

紙文書の必要性は、とっくに過去のものです。文書処理のほとんどはデジタル化されています。ユーザーは外出先でドキュメントを扱う必要があるため、文字通り毎日ノートパソコンやデスクトップにアクセスすることなく、モバイルデバイスで文書処理は特に大きな需要を持っているのです。

この記事では、ONLYOFFICEによるモバイル文書処理を取り上げ、モバイル統合がどのように機能するかをご説明します。

アーキテクチャと技術スタック

ONLYOFFICE Document Server の通常のアーキテクチャには、以下のコンポーネントが含まれます。

server - バックエンドサーバーソフトウェア層で、他のすべてのコンポーネントのベースとなるもの
core - ファイルフォーマット間の変換を可能にするサーバーコアコンポーネント
sdkjs - クライアントサイドのインタラクションに含まれる全てのコンポーネントのためのAPIを含むJavaScript SDK
web-apps - プログラムのインターフェイスを構築し、ユーザーがドキュメントを作成、編集、保存、エクスポートすることを可能にするフロントエンド
dictionaries - スペルチェックに使用される様々な言語の辞書
sdkjs-plugins - エディタに追加機能を加えることができるプラグイン

ONLYOFFICEでは、オンライン、デスクトップ、モバイルのエディタに単一のエンジンが使用されています。つまり、エディタの一般的な技術スタック（HTML5 Canvasベース、サーバーサイドコード用のNode.js、クライアントサイドインタラクション用のJavaScript SDK、コアファイル形式としてのOOXML）は、各プラットフォームで適切に機能し、少ない労力で環境間の切り替えを可能にすることを保証します。

ONLYOFFICEは、スマートフォンやタブレットなどのiOSおよびAndroidデバイス向けにネイティブモバイルアプリを提供しています。両アプリとも、WebDAV経由で任意のクラウドワーキングに接続してのオンラインコラボレーションや、オフラインモードでデバイス上のドキュメントを操作することが可能です。

また、モバイルアプリに加え、アダプティブモバイルウェブエディタにより、モバイルブラウザ上でドキュメントを操作することも可能です。

モバイルウェブか、モバイルネイティブか？

モバイル開発に関して、開発者はしばしばジレンマに直面します。モバイルウェブソリューションを選ぶか、ネイティブモバイルアプリを構築するか、あるいはその両方を目指すかという悩みです。

Statistaのサービスによると、2021年、世界中のAndroidユーザーは、92,5%の時間をネイティブアプリに費やし、モバイルブラウザアプリとの対話はわずか7,5%に過ぎないという。

このような統計データを見ると、モバイル・ネイティブ・アプリケーションの構築にのみ集中する必要があるように思われるかもしれません。しかし、すべてのユーザーが常にブラウザよりもアプリを好むわけではありません。特に、たまにしか使わないのであれば、すべてのユーザーが追加のアプリをインストールしたいと思うわけではありません。場合によっては、モバイルWeb版で十分なこともあります。

また、堅牢なネイティブ・モバイル・アプリケーションの構築は、それほど簡単で迅速なプロセスではないことは、多くの開発者が認めるところです。そのため、サービスやソリューションのモバイルウェブ版を最適化することは、常に良いアイデアとなります。

モバイルウェブで最適化する

エディタをWebアプリに実装する開発者は、typeパラメータとconfigを使用して、モバイルデバイス用にエディタの外観を調整することができます。これは、ドキュメントへのアクセスに使用されるプラットフォームの種類を定義します。

var docEditor = new DocsAPI.DocEditor("placeholder", { 
    "document": { 
        "url": "https://example.com/document.docx",
    },
    "documentType": "word", 
    "height": "100%", 
    "type": "mobile", 
    "width": "100%", 
...
});

mobileタイプのパラメーターは、モバイルデバイスのブラウザでの表示に最適化するためのものです。

モバイルアプリで文書処理を可能にする

既存のモバイルアプリケーションにドキュメントエディタを組み込む必要がある開発者やインテグレーターのために、2つの可能なオプションがあります。

シナリオ１：個々のモバイルアプリケーション＋共有フォルダー機能

このオプションは、ONLYOFFICE Documentsと開発者のモバイルアプリという2つのネイティブモバイルアプリ（iOSまたはAndroid環境であるかどうかに関係なく）を介して統合が機能することを想定しています。このようなシナリオは、例えばSeafileで使用されています。

ONLYOFFICEモバイルアプリからデータを書き込むために、アクセス可能な共有フォルダを実装する必要があります。ファイルは、クラウドサービスアプリから同期フォルダにダウンロードされます。モバイル端末では、フォーマットに応じて、対応するアプリケーションでファイルを開きます。例えば、ONLYOFFICEはDOCX、XLSX、PPTXに対応しており、これらのファイル形式を扱うためのデフォルトアプリケーションとして選択されていれば、その文書をすぐにエディタで開くことができる。

これにより、エンドユーザーはONLYOFFICEアプリを使ってオフィス文書を編集し、その変更内容は自動的にクラウドサービスのアカウントと同期されます。

Android端末では、ONLYOFFICEアプリが編集後のドキュメントを同じ場所に保存するため、インテグレーターのアプリによってファイルが同期されて戻ってきます。iOSデバイスの場合、ドキュメントを開くには、アプリケーションのディレクトリにファイルをインポートすることで行われます。

シナリオ２：ONLYOFFICE Docs + インテグレーターのモバイルアプリとサイト WebView

WebViewは、ネイティブアプリケーションがWebコンテンツを表示するために使用できる埋め込み型ブラウザです。

このオプションは、クラウドサービスのモバイルアプリケーションがWebViewコンポーネントでそのサイトへのリンクを生成し、開くことを想定しています。こうすることで、インテグレーターのモバイルアプリはONLYOFFICE Docsのモバイル版をブラウザで開くことができます。このようなシナリオは、例えばNextcloudで使用されています。

上記リンクは、認可ユーザーデータを含むか、または WebView で認可クッキーを渡す必要があります。また、WebView がアプリケーションでどのように動作するかの詳細も考慮する必要があります。エディタを閉じる、エディタからファイルをダウンロードする、ディスクからファイルを挿入する、印刷するなど、いくつかのイベントは個別に処理する必要があります。

例えば、前の画面に移動するための「Go back」ボタンや、エディタを終了するための「Go back」ボタンを作成します。

private let goBackUrl = Bundle.main.object(forInfoDictionaryKey: "DocumentServerURL") as? String ?? ""
func webView(_ webView: WKWebView,
decidePolicyFor navigationAction: WKNavigationAction,
decisionHandler: @escaping (WKNavigationActionPolicy) -> Void)
{
guard let urlString = navigationAction.request.url?.absoluteString else {
decisionHandler(.cancel)
return
}
if urlString == goBackUrl {
decisionHandler(.cancel)
navigationController?.popViewController(animated: true)
} else {
decisionHandler(.allow)
}
}

WebViewコンポーネントを使用したモバイル統合に関するAPIドキュメントを参照し、iOSとAndroidの両方に対するさらなる実践を検討することができます。

ONLYOFFICEでモバイル文書処理を実装するための基本的なマイルストーンは以下の通りです。どのオプションを選択するかは、ニーズとアプリの仕様に応じて、あなた次第です。

ONLYOFFICEでモバイル文書処理 〜アプリにモバイルエディタを導入する方法〜