[SwiftUI] Document App で Document Package を扱う

SwiftUI

Xcode で Document App を選択したアプリで Document Package を扱う方法を説明します

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Big Sur 11.1
  • Xcode 12.3

Xcode の生成コード

Xcode 12.3 では、Document App を選択してプロジェクトを作成すると、テキストファイルをドキュメントとしてもつアプリケーションがテンプレートとして作成されます。

複雑なデータを処理するアプリでは、Document Package をドキュメントとして持ちたいケースがあります。

テンプレートのコードを修正し、Document Package を扱うことができるようにする方法を説明します。

SwiftUI[Swift] [iOS][MacOS] Document App を作る(その1:UTI と Document Type の定義)

全体のステップ

以下のステップで説明していきます。

  1. 作るアプリの概要
  2. Doc Type の定義
  3. Document Package コード実装
  4. アプリ実装
  5. 動作確認

作るアプリの概要

以下のような外観のアプリを作ります。

アプリ外観
アプリ外観

画像をタップすると、画像が切り替わります。
保存すると、その時表示されている テキスト と 画像 が Document Pacakge に保存されます。

Doc Type の定義

以下のように Document Package を定義します。

  • Document Package として以下のファイルを内部に持つ
    • テキストファイル (ファイル名 txtfile.txt)
    • イメージファイル (ファイル名 imagefile.pnt)
    • イメージ名称 (ファイル名 imagename.txt)

Type Identifier 定義 (Info.plist)

ドキュメントの定義としては、以下とします。

Description
Text, Image, ImageName
Identifier
com.smalldesksoftware.bundletxtimage
Conform to
com.apple.package
extension
bundletxtimg

以下のように、Exported Type Identifier として定義しています。

Exported Type Identifier
Exported Type Identifier

Document Package コード実装

Type Identifier 定義 (コード)

Document 定義に、UTType を追加/置換し、readableContentTypes に設定します。

BundleDocDocument

上記の定義は、Info.plist で定義した Identifier と一致している必要があります。

次に、ドキュメントとして、読み書きできるタイプを設定します。

BundleDocDocument
コード解説
  1. Document の readableContentTypes を設定することで、読み書き対象のタイプを指定することができます

FileDocument.init に実装追加

.init を実装することで、実際の読み込み操作を実装することになります。

BundleDocDocument

コード解説
  1. configuration.file に保存されている FileWrapper をチェックして取得
  2. TextFile 用の FileWrapper を使用してテキストデータを取得
  3. ImageFile 用の FileWrapper を使用してイメージデータを取得
  4. ImageNameFile 用の FileWrapper を使用してテキストデータを取得

FileDocument.fileWrapper に実装追加

.fileWrapper を実装することで、実際の書き出し操作を実装することになります。

BundleDocDocument
コード解説
  1. テキストを data 化して、FileWrapper に渡します
  2. イメージを data 化して、FileWrapper に渡します
  3. イメージ名(テキスト) data 化して、FileWrapper に渡します
  4. 3つの FileWrapper をまとめた FileWrapper をドキュメントの FileWrapper として返します

アプリ実装

Document が保持している、txt, image, imageName を表示するようにします。

Image は、タップされた時に、別のイメージに切り替えるようにします。

# 表示用のイメージは、”cat”, “dog” という名前で、リソースに登録済みです

ContentView

画像を toggle させるメソッドを ドキュメントに追加しています

BundleDocDocument extension

動作確認

以下のような動作のアプリになります。

アプリの動作

ドキュメント内部

作成したドキュメントを保存し、Finder から確認してみると、1つのファイルに見えます。

そのファイルを「パッケージの内容を確認」で開いてみると、以下のように構成されていることが確認できます。

Document Package の内容を確認
Document Package の内容を確認

各ファイルの中身も期待通りになっていることも確認できます。

これで、単一ファイルではなく、複数ファイルを束ねたフォルダをドキュメントとして認識させることができていることになります。

まとめ:Document App で Document Package を扱う方法

Document App で Document Package を扱う方法
  • Document App をベースにすると簡単
  • UTI を定義する
  • FileDocument に準拠する Document を 定義した UTI に対応させる
  • FileDocument に準拠する Document の init, fileWrapper を対応させる

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です