Swift - Personal Factory (Page 2)

Personal Factory

Swift

Swiftに関するページ

[SwiftUI]半透明の色を設定する

検証環境 * Xcode 11.6 * iOS 13.6 半透明の色を設定する Colorに.opacity修飾子メソッドを実行すると色の透明度を設定することができます。 Rectangle() .foregroundColor(Color.black.opacity(0.5)) 50%の透明度で指定しています。キャプチャはこちら。 20%ぐらいだとこのぐらい。 .foregroundColor(Color.black.opacity(0.2)) 100%だとこのぐらいの色になります。 .foregroundColor(Color.black.opacity(1)) まとめ背景色などを半透明にしたいなと思ったときに.opacityは使えそうです。宣伝インプレスR&D社より、「1人でアプリを作る人を支えるSwiftUI開発レシピ」発売中です。「SwiftUIでアプリを作る！」をコンセプトにSwiftUI自体の解説とそれを組み合わせた豊富なサンプルアプリでどんな風にアプリ実装すればいいかが理解できる本となっています。 iOS 14対

[SwiftUI]選択可能なUIコンポーネントの作り方【ラジオボタン偏】

[SwiftUI]選択可能なUIコンポーネントの作り方【ラジオボタン偏】

前回 [SwiftUI]選択可能なUIコンポーネントの作り方【複数選択偏】 [https://blog.personal-factory.com/2020/07/11/how-to-create-selectable-ui-component-by-swiftui-in-multiple/] で複数選択ができるUIコンポーネントをSwiftUIで作る方法を解説しました。今回はHTMLのラジオボタンのように複数あるViewの内一つのみ選択するコンポーネントを作ってみます。まずは動きをみていきましょう。赤、緑、青のビューがあって、赤をタップすると黒枠が追加されて選択状態ということがわかります。デバックエリアにも「selected box is red」と出力されます。他のビュー、例えば緑をタップすると、赤のビューの黒枠は消えて、緑のビューが黒枠でおおわれるようになるというしだいです。選択するViewのタイプを定義ユーザーが何を選択したかを判定できるようにBoxTypeというenumを定義します。 enum BoxType: String { case unkn

[SwiftUI]選択可能なUIコンポーネントの作り方【複数選択偏】

[SwiftUI]選択可能なUIコンポーネントの作り方【複数選択偏】

人はときにタップをしたらそのビューを選択状態にするコンポーネントが必要になることがあります。ちょっと手こずったのでブログに作り方を残します。今回は複数選択する場合を解説したいと思います。実行環境 * Xcode 11.5 * iOS 13.5 複数選択可能なUIコンポーネント HTMLだとチェックボックスがいい例ですが、複数選択できるコンポーネントがあると素敵ですよね。作ってみましょう。赤、緑、青のViewがあって、タップするとViewに黒枠が追加されて選択状態がわかるようになります。またコンソールにもタップされたら「red is selected」。もう一度タップすると「red is not selected」というようなメッセージができるようにしています。 ViewModelの定義まずはデータまわりを定義していきましょう。 MultipleSelectableViewModelというクラスを定義します。 final class MultipleSelectableViewModel: ObservableObject { @Publish

【WWDC20】Introduction to SwiftUI の雑メモ

【WWDC20】Introduction to SwiftUI の雑メモ

WWDC20のIntroduction to SwiftUIをみました。雑にメモを残そうと思います。 https://developer.apple.com/wwdc20/10119 * ライブラリーからdrop and dragでViewコンポーネントをeditorに入れられる * ライブラリーペインからcornerRadius modifierをキャンバスに落とす * コードに追加される * previewのresumeショートカット * ⌘+option+P * Extract Subviews * View実装が大きくなったとき使う。追加でViewのレイアウトを増やしたい。でもすでにたくさん実装していてコードが大きくなっている。 * Extract Subviewsを使ってViewを新しい型に切り分けることができる * spacer、スペースが可能な領域までできるだけ広がる。 * テキストを真ん中によせるために今回は使った。 * Detai

SwiftUIでAVFundationを導入する【Video Capture偏】

SwiftUIでAVFundationを導入する【Video Capture偏】

AVFundationはiOS/macOSともに使えるフレームワークで、端末のカメラやオーディオ機器にアクセスするためのフレームワークです。今回の記事ではAVFundationをつかって、iPhoneのカメラ映像をアプリに表示する方法を解説します。

【Swift Argument Parser入門】Swiftでコマンドラインツールを作る

【Swift Argument Parser入門】Swiftでコマンドラインツールを作る

2020年2月、AppleがSwift向けライブラリーArgumentParserをリリースしました。これはSwiftでコマンドラインツールを作る際にコマンド引数を簡単に扱えるライブラリーです。 CarthageやXcodeGenなどSwift製のコマンドラインツールはたくさんありますが、いざ自分で作ろうと思ったときにこのライブラリーが役に立ちます。この記事ではArgumentParserの使い方を解説します。 Swiftでコマンドラインツールを作成した方にぴったりの記事です。

SwiftUIアプリをVIPERアーキテクチャーで作り画面遷移処理をまとめる

SwiftUIアプリをVIPERアーキテクチャーで作り画面遷移処理をまとめる

この記事では画面遷移処理をView実装から引き剥がす方法としてVIPERアーキテクチャを解説し、実際にSwiftUIアプリケーションに適応します。ログイン画面やNavigation ViewのPush遷移, Tab Bar表示、アラートやモーダル表示など、アプリケーションで利用する画面遷移処理をどう扱うかをみていきましょう。

SwiftUIの画面遷移をCoordinatorパターンでまとめた話

SwiftUIの画面遷移をCoordinatorパターンでまとめた話

SwiftUIのアプリの実装について、画面遷移をView実装から切り離す方法について考えていきたいと思います。

[iOS]画像解析フレームワークVision Framework入門

[iOS]画像解析フレームワークVision Framework入門

# Vision Frameworkとは？ Vision FrameworkはAppleが提供する、コンピュータービジョン技術を簡単に扱えるフレームワークです。 2017年のWWDCで発表されました。iOS 11.0以上、macOS 10.13以上で利用できます。コンピュータービジョン技術に精通していなくても物体認識をできるフレームワークです。

iOS 13でのNavigationBarのカスタマイズ方法

iOS 13でのNavigationBarのカスタマイズ方法

NavigationBarをカスタマイズする方法がiOS13から変わったそうです。ご丁寧にAppleからサンプルアプリ [https://developer.apple.com/documentation/uikit/uinavigationcontroller/customizing_your_app_s_navigation_bar] が提供されているのでそれを確認していけばカスタマイズできそうです。今回の記事ではAppleのサンプルアプリをみつつ、NavigationBarのカスタマイズ方法を解説します。実行環境 * Xcode 11.4.1 Customizing Your App’s Navigation Bar AppleはCustomizing Your App’s Navigation Bar [https://developer.apple.com/documentation/uikit/uinavigationcontroller/customizing_your_app_s_navigation_bar] という記事を公開し、NavigationBar

[SwiftUI]iPad上でNavigaitonViewでSplitViewを実現

[SwiftUI]iPad上でNavigaitonViewでSplitViewを実現

SwiftUIでSplitViewを表現する方法がNavigationでできるようなのでまとめます。少しトリッキーなコードになりますが、少ないコードでSplitViewレイアウトを実装することができます。検証環境 * Xcode 11.4 Split Viewとは？設定アプリのように、Viewが２つ並びで左右に別れているレイアウトです。設定アプリでは、左側のペインに設定項目が並び、それらをタップすると右側ペインに詳細画面が表示されます。 NavigationViewでSplitView SwiftUIではNavigationViewでSplitViewを表現できるようです。 NavigationView { NavigationLink(destination: Text("Detail")) { // ③ Text("Master") // ① } .navigationBarTitle("Nav", displayMode: .large) Text("First Screen") // ② } .paddin

「1人でアプリを作る人を支えるSwiftUI開発レシピ」という同人誌を書きました #技術書典

「1人でアプリを作る人を支えるSwiftUI開発レシピ」という同人誌を書きました #技術書典

WWDC 19から登場した新しいユーザーインターフェースフレームワークSwiftUI。これを使えば、アップルプラットフォーム（iOS/iPadOS/macOS/tvOS)でアプリを楽に作ることができます。発表から半年以上がたち、徐々にSwiftUIでアプリ開発をする事例も出てきました。ですが、世の中に出ているSwiftUIの解説記事はまだまだ断片的で、ひとつのアプリを開発するノウハウを説明するところまではいってないと感じています。「1人でアプリを作る人を支えるSwiftUI開発レシピ」ではアプリ開発に焦点をあてたSwiftUI解説本です。実践的なアプリレシピを紹介することで、自分でアプリを作るときにもどうアプリを組み立てていったらいいのかが理解できるようになります。「本書で学べること」 * データバインディング * MVVMでのアーキテクチャ * SwiftUI自体の使い方（レイアウトシステム、座標取得） * SwiftUIでは足りない部分を補う方法掲載レシピ GitHubAPIリポジトリ検索アプリ今ではどのアプリにも必須の機能であるURLSessi

SwiftUIでドロップシャドー

SwiftUIでドロップシャドー

SwiftUIでドロップシャドーをつけるにはshadow修飾子をつければ良いです。 Text("Text") .shadow(color: Color.red, radius: 10, x: 0, y: 0) しかし、親Viewにshadowをつけると子ビューそれぞれにドロップシャドーついてしまいます。 VStack() { Text("Text") .background(Color.red) .padding() Text("Text") .background(Color.purple) .padding() } .padding() .background(Color.white) .shadow(color: Color.red, radius: 10, x: 0, y: 0) 親ビューのみにドロップシャドーをつける場合は２つ方法があります。

[SwiftUI] GeometryReaderで特定のViewをキャプチャする

[SwiftUI] GeometryReaderで特定のViewをキャプチャする

前回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

[SwiftUI] GeometryReaderでViewのサイズを知る

[SwiftUI] GeometryReaderでViewのサイズを知る

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

SwiftUIでお絵かきアプリ

SwiftUIでお絵かきアプリ

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まとめ

Accessibility in SwiftUIまとめ

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

Introducing SwiftUI: Building Your First App まとめ

Introducing SwiftUI: Building Your First App まとめ

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 書き起こし（SwiftUIのみ）

Platforms State of the Union 書き起こし（SwiftUIのみ）

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

SwiftUI On All Devices まとめ（概要のみ）

SwiftUI On All Devices まとめ（概要のみ）

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はすべてのデバイスで動作する。なので開発者に

Building Custom Views with SwiftUI まとめ

Building Custom Views with 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("

SwiftUIにおけるVStack,HStackとFunction Builderの関係

WWDC19,5日目。前回SwiftUIのコードを読み解く [https://blog.personal-factory.com/2019/06/07/understand-swiftui-code/] の記事の最後にVStackでViewBuilderが使えるかがわからないという話をしました。 Labで質問をしたのでその結果をまとめます。そもそもの疑問 SwiftUIのVStackとHStackはクロージャーの中にViewコンポーネントを宣言的に実装することができます。 VStack { MapView() .edgesIgnoringSafeArea(.top) .frame(height: 300) CircleImage() .offset(x: 0, y: -130) .padding(.bottom, -130) VStack(alignment: .leading) { Text("Turtle Rock") .font(.titl

SwiftUIでUIViewControllerAnimatedTransitioningは使える？

WWDC3日目、SwiftUIのLabにて聞いたことをメモします。以前私は「ハーフモーダルで理解するFluid Interfece [https://personal-factory.booth.pm/items/1316137]」という技術同人誌を執筆しました。そのサンプルアプリとしてUIViewControllerAnimatedTransitioningを使ったカスタムトランジションをするアプリ [https://github.com/SatoTakeshiX/FluidInterfaceBook/tree/master/02_PhotoTransition] を作成しました。今回SwiftUIが登場して、カスタムトランジションができるかどうかが気になったのでLabで聞きました。組み込みのトランジションはあるまず、SwiftUIには組み込みのトランジションがあります。それを使えば画面遷移は実現できるそうです。こんな感じ。 body { VStack{ if isPresent { MyView().transi

App Store Labでアプリマーケティングを相談した話

App Store Labでアプリマーケティングを相談した話

wwdc19、4日目。今回はApp Storeのマーケティングを相談できるExpanding to JapanとExpanding to Taiwanに行ってきました。そのレポートをします。私は個人でフライングスター風水 [%5Bhttps://itunes.apple.com/jp/app/%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%B0%E3%82%B9%E3%82%BF%E3%83%BC%E9%A2%A8%E6%B0%B4/id1360544342?mt=8%5D(

SwiftUIのコードを読み解く

WWDC19参加中です。４日目です。ラボのSwift Open Hoursにいきまして、SwiftUIのコードを文法レベルで教えてもらいました。 Swift5.1になり、新しい構文がたくさん追加され、SwiftUIはそれをフルに活用しているので今回はチュートリアルのこちらのコードを読み合わせしました。 * Creating and Combining Views Section 6 Compose the Detail View [https://developer.apple.com/tutorials/swiftui/creating-and-combining-views#compose-the-detail-view] struct ContentView: View { var body: some View { VStack { MapView() .edgesIgnoringSafeArea(.top) .frame(height: 300)