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

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.に ドキュメントサポートを追加できるのです ありがとうございました