SwiftUIでドキュメントベースのAppを構築する

SwiftUIでドキュメントベースのAppを構築する

ドキュメントベースのAppをSwiftUIのみで、構築する方法を学びましょう。DocumentGroup APIについて確認していき、AppやScenesをどのように構成するかをお伝えします。ドキュメントブラウジングや標準コマンドなどの文書管理にすぐに使うことのできるサポートを加えることが可能になります。困難な作業は必要ありません。Universal Type Identifierのセットアップ方法や一流のドキュメントベースのAppを構成する内容について学ぶことができます。このセッションを有効活用するには、まずSwiftUIでAppの作成に慣れている必要があります。詳細を学ぶには、"App essentials in SwiftUI"をご覧ください。

リソース
関連ビデオ

WWDC23
- より優れたドキュメントベースのアプリを構築
WWDC20
- SwiftUIにおけるAppの重要事項
- SwiftUIの新機能
WWDC2020へようこそ “SwiftUIでドキュメントベースアプリケーションをビルドする” 私はティナです SwiftUIの担当をしています今日はSwiftUIを使いドキュメントをサポートする App.構築についてお話をしお見せしますまず最初に皆さんドキュメントって何なのでしょう？よくFinderやFiles App.で macOSやiPadOS iOSでファイルを管理しようとしていますタグやクラウドファイルプロバイダのようなフィーチャーや外付けデバイスを使って自分のプロジェクトを必要に応じて整理できます App.を使ってシームレスに所定のファイルを開封し閲覧編集できることを当然と思っていますまたApp.でオリジナルのドキュメントを変更できることも当然期待する機能でその変更は所定のファイルの開封をサポートしているすべてのApp.へアクセスしますこれはまずファイルをデータベースにインポートしそれから初めてApp.で管理できるというApp.とは対照的です皆さんがインポートされたドキュメントを編集するときは実はオリジナルのコピーを編集しているのでありオリジナルは変更されていません Pixelmatorのようなプロフェッショナル用のApp.はユーザが所定のファイルをオープンしたその場でファイル管理ができるだけではなくよりパワフルな編集機能を使うことができそのパワフルな機能とは複数のファイルを同時にオープンする機能も含まれています Keynote, Final Cut Proなどの App.の機能のほとんどはユーザがこのようなドキュメントの管理ができるようにしていることが重要な点ですこのようなApp.の挙動を指して私たちはよく “ドキュメントベースApp.”と呼びますでも皆さんのApp.でもドキュメント開封フィーチャーには対応しており完全なドキュメントベースではなくてもその機能は可能なのです XcodeなどのApp.は更なるUIやフィーチャーをドキュメントサポートに加えて持っていますメールやConsoleのようなApp.は元々はドキュメントベースではないように見えますが EMLファイルやクラッシュレポートのようなドキュメントもさらにサポートしています
SwiftUI App.はApp.とシーンとビューで構成されていますドキュメントへのサポート追加は構成として実行されそれにはDocumentGroupと呼ばれるシーンタイプが使われますシンプルなテキスト編集App.はこのような外観です皆さんのApp.でDocumentGroupを使うとき実はこのApp.が所定のドキュメントタイプを開封し管理するということを宣言しているのです
“App Essentials in SwiftUI” トークにあるように我々のコード構成はApp.の所有者のヒエラルキーと一致しますこの場合我々のApp.には単一のDocumentGroupシーンが含まれておりまたそのドキュメントコンテンツの複数のウインドウをオープンすることができますもちろん構成要素として様々なタイプのDocumentGroupを複数サポートできますしまた単体のWindowGroupや DocumentGroupもサポートできますみなさんはこれらシーンを App.に構成することもできますまたSwiftUIは自動で皆さんのApp.にこれらに対応するプラットフォームの挙動もご期待通りのものをご提供していますそれにはドキュメントApp.に特有の標準UI要素を含みますまたMac上のステートトラッキングやHandoff また検索フィールド付きのドキュメントブラウザやナビゲーションバー iOS上の共有機能などもですこれら機能を使うためにも最低限のコードしか必要ではありませんではDocument Group APIを使って構築をしてみましょう私のiPad PlaygroundのSwiftUIで作図App.のプロトタイプを作っていましたここには様々な色のいろいろな形状を追加できるカンバスがありその形状を変更もできますとてもうまく動いていますそこで私の作った図面を保存し管理できるApp.へこれを入れたいと思いますさあやってみましょう XcodeをオープンしてドキュメントベースApp.を作りましょう macOSとiOS両方で実行したいと思いますここでマルチプラットフォームテンプレートを選びます
これを"ShapeEdit”と呼ぶことにします
すでにテンプレートはいくつか出てきていますではこれを構築し実行しましょう
今テキスト編集App.が使えますがこれには先ほど言いましたすべてのドキュメントサポートフィーチャーがありますここで詳細に入る前にプロジェクト設定を見てみましょう
今度はmacOSをターゲットにしてみましょうでも今から使うコンフィギュレーションは iOS macOSターゲットの両方に適用できます
それではInfo.plistを見てみましょう
XcodeはドキュメントベースApp.用 “ドキュメントタイプ”セクションを追加します
ここの識別子フィールドの値は Uniform Type Idendifierですこのシステムはこの識別子を使ってファイルと皆さんのApp.を関連付けしシステム上で識別子を認識するとそのApp.の中でこのタイプのドキュメントをオープンするのだということを認識しますこの識別子はここでインポートされたタイプであると宣言されるのです
これはプレーンテキストタイプがすでに他から宣言されているので重要なことですまたこのタイプの宣言をインポートし App.がそれを認識していることをシステムに教えます私たちのApp.については自分のタイプを宣言することとしてここへ戻りましょう
そして作ってみましょう
これは私たちが創ったタイプなのでタイプ宣言をエクスポートし私たちがこのタイプの正当な所有者であることを通知する必要がありますそのため“Exported Type Identifier” セクションに入力します
では記述をしましょう
これから図面App.のバイナリーデータを格納しますそしてパブリックデータへ一致させます
そしてパブリックコンテンツにも一致させます
また拡張子を割り当てます
必要な変更これだけすべて終わりましたメイン機能を見てみましょう
私たちのドキュメントタイプである ShapeEditDocumentはすでに宣言されています
使用するドキュメントのタイプと新しいドキュメントを作成するときに使うベースドキュメントこれらが DocumentGroupへ渡されます
クロージャの引数のドキュメントプロパティはバインディングであり基となるデータモデルへ読む‣書くアクセスを可能にしますこれはこのテキスト編集App.ではテキストです DocumentGroupはオープニングスペースをサポートしまたバインディングによりSwiftUIはテキストが更新されたことを認識できドキュメントの取り消しまた元の保存を変更したなどを登録するなどの処理をしますそれではContentViewを見てみましょうこれはドキュメントを表示するときのデフォルトの画面です
テキストエディターで構成されていますこれから形状描画図App.を実行するのでユーザが描画できるようにキャンバスに換えましょう後でまたここへは戻ってきます ShapeEditDocumentを見てみましょう
これはファイルドキュメントプロトコルに一致する値の型でディスク上のドキュメントの表現のことですまずreadableContentType つまり可読なコンテンツタイプを定義しますこれはUT TypeのアレイでユニフォームタイプアイデンティファイアーUTIです SwiftUIはこれを使い該当するユーザが開きたいドキュメントのタイプを特定し定義されたものだけが許可されます Textの例がここに定義されてます
さっきのターゲットのInfo.plistの“Document Type” セクションへの入力値と一致するはずですではこれを変更しましょう
この二つの宣言の違いに注目してくださいここではエクスポートされた Asコンストラクターを使っていますがこの前はインポートされた Asコンストラクターを使いましたインポートタイプは算出された変数ですというのもこれはインポートされたからです App.がインストールやアンインストールされるとこの値はそれに従い変わるということですここではエクスポートタイプを使いますので定数として宣言されますさらなる情報が必要な方は開発者ウエブサイトで UT Typeの資料をご覧くださいではこれを変更して
私たちのタイプにします
次に私たちのドキュメントの初期化を実装しましょうそれにはFileWrapperとコンテンツタイプが必要ですこのコードは要らないので削除します
コンテンツタイプ引数は常にApp.にサポートされるタイプとなりますやり方はいくつかありますここではJSONデコーダーを使うことにしましょう
JSONデコーダーを使うにはタイプが “Codable”に一致する必要があります
またこの指定されたタイプのためドキュメントをファイルに書き出しする処理を実行しなくてはなりませんこれはどちらも要りませんので削除します
FileWrapperはこのシリアライズ化のデスティネーションですこれはIN/OUT引数なので新規のFileWrapperを作成するかこれを更新するかのどちらかができますここでこのやり方も数個ありますが今回はJSONデコーダーを使いましょう
そのためファイルドキュメントプロトコルに一致させるにはこれだけでできてしまいますここである値の型を使っていることに注目してください
つまりこの構造体を使って得れるすべての恩恵を受けているということなのですそれにはコピーと書きこみも含みますそしてユーザが作図中でも App.は保存を開始できるのです
では所定のドキュメントサポートを使用しプロジェクトに私たちのプロトタイプキャンバスコードを追加しましょう
今形状の属性を定義するグラフィックタイプと形状を表示するCanvasViewが手元にあります
ではドキュメント内のデータタイプをテキストから今使っているグラフィックタイプに変えましょう
また最初の形状を追加しましょう
そしてこのキャンバスで TextEditorをスワップアウトしましょう
これで設定は終わりでは実行してみましょう
ここにドキュメントをサポートする図面App.があるので図面を保存しあとで使用することもできます本当に簡単に SwiftUIのご自身のApp.にドキュメントサポートを追加できるのですありがとうございました

@main
struct TextEdit: App {
    var body: some Scene {
        DocumentGroup(newDocument: TextDocument()) { file in
            TextEditor(text: file.$document.text)
        }
    }
}

リソース

関連ビデオ

WWDC23

WWDC20