前回SwiftUIでお絵かきアプリ [https://blog.personal-factory.com/2019/11/30/draw-application-by-swiftui/] の記事で指をドラッグすることでPathを作りお絵かきアプリを作りました。 作った絵は保存したくなりますよね？ というわけで今回はSwiftUIで特定のViewをキャプチャして画像にする方法を解説します。 サンプルコード 今回解説するサンプルコードはこちらです。 https://github.com/SatoTakeshiX/SwiftUICatalog/blob/master/GeometryReaderSample/GeometryReaderSample/DrawEditor.swift アプリを試してみたい方は https://github.com/SatoTakeshiX/SwiftUICatalog をクローンしてください。 キャプチャをする流れ SwiftUIそのものにはまだViewからイメージデータに変換するメソッドはありません。 しかしUIKitではImageContex

Viewサイズをどうやって知る？ UIKitではView自身の座標位置やサイズはUIViewのプロパティとしてframeプロパティやboundsプロパティが定義されそれで取得ができました。 SwiftUIのViewには座標位置やサイズを表すプロパティはありません。 ではそれらの情報を取りたいときにはどうすればいいのでしょうか？ そのための特別のViewがあります。GeometryReaderです。 GeometryReader GeometryReader は特別なViewで、自身のサイズと座標空間を返す関数をクロージャーとして保持しています。そのクロージャーを通して、自身のViewのサイズや座標位置やRootViewのサイズや座標位置も取得することができます。 GeometryReaderを使うとこんなことができるようになります。 * ScrollViewのスクロールに合わせてコンテンツを操作する * スクロールに合わせてコンテンツのパララックス効果 * ヘッダーをスクロールに合わせて拡大、縮小する * 横スクロールでコンテンツが真ん中に来たら目立たせる

SwiftUIでお絵かきアプリを作りました。 指をなぞると線がかける機能があります。 https://github.com/SatoTakeshiX/EditorApp ドラッグイベント 画面のドラッグイベントはViewの.gesture()メソッドにDragGestureインスタンスを引数にわたすと取得できます。DragGestureの onChangedメソッドでドラッグ中、onEndedメソッドでドラッグ終了を検知できます。 .gesture( DragGesture() .onChanged({ (value) in}) .onEnded({ (value) in}) ) どちらもクロージャーでイベントのValueを取得できます。メンバー変数は次の通り。 * location: CGPoint, イベントの位置座標 * startLocation: CGPoint, イベントが始まったときの位置座標 線の引き方 線を引く方法はPathを使います。クロージャーのpathに座標ポイントを渡すと線を引けます。 strokeメソ

Accessibility in SwiftUI [https://developer.apple.com/videos/play/wwdc2019/238/] をまとめます。 アクセシビリティ 誰でもアクセスアプリが使えるようにするためにアクセシビリティがあります。 アクセシビリティの計測基準 * Understandable:Labels * 理解しやすさ：ラベル * Interactable: Actions * インタラクティブ性：アクション * Navigable: Ordering and Grouping * ナビゲーション：順序やグループ化がされているか？ 自動で行われるSwiftUIのアクセシビリティ SwiftUIのビューを作ると自動でアクセシビリティ要素を各ビューごとに作ってくれる。 アクセシビリティへの値の変更も自動 Viewの値が変更したら自動でアクセシビリティ機能へ通知してくれる。 画像とボイスオーバー 画像が修飾的なもので読み上げが必要ないなら Image(decorative: "xxxx

WWDC19のビデオ、Introducing SwiftUI: Building Your First App [https://developer.apple.com/videos/play/wwdc2019/204/]をまとめます。 Videoの概要 * 社内の会議室を一覧できるアプリを作成することを通してSwiftUIを使ったアプリの開発の流れを紹介 * Xcodeのプレビュー機能の紹介 * コードとキャンバスがシームレスに同期する * キャンバスで変更加えたものはコードも変更される * コードでビューに対して⌘+クリックすることでHStack/VStackをEmbedしたり、Extract viewとしてビューを切り分けたりできる * 切り分けたビューを組み合わせて画面遷移を作る方法の解説 * @Stateを使ったzoomedプロパティで画像のズームをタップで切り替える * Source of Truth(単一データソース)とDerived Value（派生データソース） * 依存関係の管理は難しい * 値を変えたとき、

Platforms State of the Union - WWDC 2019 [https://developer.apple.com/videos/play/wwdc2019/103/]で語られたSwiftUIの部分を書き起こします。 Developer Productivity Platforms Core Technologies デベロッパーの生産性についての話。 優秀なツールは生産性を劇的に向上させる。時間に余裕ができて、よりよいアプリケーションが作れる。その土台がプログラミング言語です。 この5年でSwiftは成熟し、全プラットフォームに組み込まれ、SwiftUIの基礎になりました。Xcodeはエディターとデバッカーではなく、必要なものすべてが入っている。 継続したテストをサポートしたり、機械学習や拡張現実などの新しい技術を試す様々なツールも提供する。そして新たなフレームワークSwiftUiがUIの構築に革命をもたらす。 Swift、Xcode、SwiftUIの3つの要素で生産性のレベルが格段に上がり、アプリケーションの作り方が一新される。 SwiftUI Swif

wwdc19のSwiftUI On All Devices [https://developer.apple.com/videos/play/wwdc2019/240/]をまとめます。 SwiftUIはアップルプラットフォームならどれでも動作するように作られています。 各プラットフォーム向けにアプリを作る際にどんな考えをもっておけばいいのかが解説されています。 後半には同じアプリを4つのプラットフォームそれぞれに最適化するデモが話されていました。 このまとめでは割愛しましたが、参考になる解説です。 SwiftUI On All Devices SwiftUIはあらゆるデバイス上で動くアプリを作るための近道。 Appleデバイスのアプリケーション開発には以下の4つのプラットフォームがある * AppKit(Mac) * UIKit(iPhone/iPad) * TVUIKit/UIKit(Apple TV) * WatchKit(Apple Watch) 従来ではデバイス間で同じコードを使うことはできなかった。 SwiftUIはすべてのデバイスで動作する。 なので開発者に

WWDC19のSwiftUI関連のビデオをまとめたいと思います。 今回はこちら * Building Custom Views with SwiftUI - WWDC 2019 [https://developer.apple.com/videos/play/wwdc2019/237/] SwiftUIでのレイアウトの仕組みとグラフィックが解説されています。 今回はレイアウトの仕組みのみをまとめました。 プレゼンテーション資料はこちら https://devstreaming-cdn.apple.com/videos/wwdc/2019/237x70rryl2b933v/237/237_building_custom_views_with_swiftui.pdf?dl=1 SwiftUIのレイアウトシステム レイアウトは画面上の表示領域を決めること。 struct ContentView: View { var body: some View { Text("

WWDC19にて発表されたSwiftUIのチュートリアルを試し中です。 Handling User InputのCreate a Favorite Button for Each Landmarkの項目でButton(action: {}) メソッドの引数のクロージャーにSelfにアクセスしているところがありました。 URL https://developer.apple.com/tutorials/swiftui/handling-user-input#create-a-favorite-button-for-each-landmark Button(action: { self.userData.landmarks[self.landmarkIndex] .isFavorite.toggle() }) { if self.userData.landmarks[self.landmarkIndex] .isFavorite { Image(systemName: "star.fill")