画像をクリックしたときにリップルエフェクトを表示します。 イメージファイルは適当なものをセットしてください。 Stack( children: <Widget>[ Image.file( ... ), Positioned.fill( child: Material( color: Colors.transparent, child: InkWell( onTap: () { ... }, ), ), ), ], );

課題 SwiftUIが登場して、２年ぐらい経過している。2年経つが既存のプロダクトでSwiftUIで開発をするといくつかの制約に出会す。特に機能不足、不具合、サポートバージョンなどの問題もあり、UIKitベースで進めることが多い。 しかし、長期的な視点で見るとSwiftUIが開発の中心になっていくことが予想される。今回は既存のプロダクトでUIKitとSwiftUIの共存、少しずつ置き換えるための戦略について考えてみました。 SwiftUIで実装するメリット 日頃の開発でInterface Builderを使っている場合は、コードだけでUIを実装できる 宣言的に実装できるのでメンテしやすく、コードの可読性が上がる プレビュー機能が使える(UIKitのクラスをWrapすれば同様の機能は使える) 実装方法 UIHostingControllerを使う SwiftUIのViewをUIHostingControllerに渡して、Child ViewControllerとして、登録することで表示することができる import UIKit import SwiftUI final class SampleListDisplayController: UIViewController { override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .white title = "SampleListView(SwiftUI)" let hostingController = UIHostingController(rootView: SampleListView()) addChild(hostingController) view.addSubview(hostingController.view) hostingController.didMove(toParent: self) hostingController.view.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ hostingController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor), hostingController.view.rightAnchor.constraint(equalTo: view.rightAnchor), hostingController.view.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor), hostingController.view.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor) ]) } } 実装 + α Mewを使う Mewを使います Mewを使うことでchild ViewControllerの管理が楽になり、StackViewと合わせて使うとさらにレイアウトが簡単になります。 MicroViewControllerとすることで画面の一部のパーツに切り分けることができ、部分的に置き換えることが容易になります UIHostingControllerを継承して、SwiftUIのViewをrootViewに渡すことでSwiftUIのViewを表示できます。そして、MicroViewControllerとして画面に追加することで表示できます。 import Foundation import UIKit import SwiftUI import Mew final class BodyViewController: UIHostingController<BodyView>, Instantiatable, Injectable { func input(_ input: Input) {} typealias Input = Void typealias Environment = Void private var swiftUIView: BodyView var environment: Void init(with input: Input, environment: Environment) { self.swiftUIView = BodyView() super.init(rootView: swiftUIView) view.backgroundColor = .clear } @available(*, unavailable) @objc required dynamic init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } } サンプルコードはこちらです t-osawa-009/UIKit-SwiftUI まとめ 今後はSwiftUIのアップデートによって、使いやすくなり、主流になっていくことが予想される。 Mewのライブラリを使うことで少しずつの置き換えが簡単になります。 現状はSwiftUIだけでは実装したい機能を実現するのは大変である。UIKitと組み合わせ、１つの画面の一部を置き換えていくことが現実的なやり方である 環境 Xcode 12.5 Build version 12E262 Apple Swift version 5.4 (swiftlang-1205.0.26.9 clang-1205.0.19.55) Target: x86_64-apple-darwin20.3.0

課題 SwiftUIが登場して、２年ぐらい経過している。2年経つが既存のプロダクトでSwiftUIで開発をするといくつかの制約にでくわす。特に機能不足、不具合、サポートバージョンなどの問題もあり、UIKitベースで進めることが多い。 しかし、長期的な視点で見るとSwiftUIが開発の中心になっていくことが予想される。今回は既存のプロダクトでUIKitとSwiftUIの共存、少しずつ置き換えるための戦略について考えてみました。 SwiftUIで実装するメリット interface builderなどを使っている場合は、コードだけでUIを実装できる 宣言的に実装できるのでメンテしやすく、コードの可読性が上がる プレビュー機能が使える(UIKitのクラスをWrapすれば同様の機能は使える) 実装方法 UIHostingControllerを使う SwiftUIのViewをUIHostingControllerに渡して、、Child ViewControllerとして、登録することで表示することができる import UIKit import SwiftUI final class SampleListDisplayController: UIViewController { override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .white title = "SampleListView(SwiftUI)" let hostingController = UIHostingController(rootView: SampleListView()) addChild(hostingController) view.addSubview(hostingController.view) hostingController.didMove(toParent: self) hostingController.view.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ hostingController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor), hostingController.view.rightAnchor.constraint(equalTo: view.rightAnchor), hostingController.view.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor), hostingController.view.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor) ]) } } 実装 + α Mewを使う Mewを使います Mewを使うことでchild ViewControllerの管理が楽になり、StackViewと合わせて使うとさらにレイアウトが簡単になります。 MicroViewControllerとすることで画面の一部のパーツに切り分けることができ、部分的に置き換えることが容易になります UIHostingControllerを継承して、swiftUIViewをrootViewに渡すことでSwiftUIのViewを表示できます。あとはMicroViewControllerとして画面に追加することで表示できます。 import Foundation import UIKit import SwiftUI import Mew final class BodyViewController: UIHostingController<BodyView>, Instantiatable, Injectable { func input(_ input: Input) {} typealias Input = Void typealias Environment = Void private var swiftUIView: BodyView var environment: Void init(with input: Input, environment: Environment) { self.swiftUIView = BodyView() super.init(rootView: swiftUIView) view.backgroundColor = .clear } @available(*, unavailable) @objc required dynamic init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } } サンプルコードはこちらです t-osawa-009/UIKit-SwiftUI まとめ 今後はSwiftUIのアップデートによって、使いやすくなり、主流になっていくことが予想される。 Mewのライブラリを使うことで少しずつの置き換えが簡単になります。 現状はSwiftUIだけでは実装したい機能を実現するのは大変である。UIKitと組み合わせつつ、１つの画面の一部を置き換えていくことが現実的なやり方である 環境 Xcode 12.5 Build version 12E262 Apple Swift version 5.4 (swiftlang-1205.0.26.9 clang-1205.0.19.55) Target: x86_64-apple-darwin20.3.0

はじめに iOSアプリ開発で環境構築の際にmake: *** [gem-install] Error 1のエラーになる場合の解決法 環境 MacBook Air(M1 2020) macOS Big Sur iOSアプリの環境構築をする際に以下のようなエラーが出ました。 エラー内容 プロジェクト名/Gemfile.lock. (Gem::GemNotFoundException) To update to the latest version installed on your system, run `bundle update --bundler`. To install the missing version, run `gem install bundler:2.1.2` make: *** [gem-install] Error 1 エラーメッセージにあるようにまずはbundle update --bundlerを実行してみます。 You must use Bundler 2 or greater with this lockfile. このlockfileを使用するには、Bundler2以上を使用する必要があります。というエラーになりました。 次にgem install bundler:2.1.2を実行してみます。 Fetching bundler-2.1.2.gem ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory. Library/Ruby/Gems/2.6.0ディレクトリへの書き込み権限がないというエラーになりました。 上記のような流れのエラーになる場合、システムのrubyを利用しているため、権限不足でgemのインストールができない可能性が高いです。 対処法 rbenvを使用してrubyを管理します。 まずはgemとrubyがどのパスを指しているのか確認してみます。 $ which gem /usr/bin/gem $ which ruby /usr/bin/ruby rbenvをインストールしてない場合はインストールします。 $ brew install rbenv rbenvで管理されているrubyのバージョンを確認します。 $ rbenv versions * system (set by /Users/ユーザー名/.rbenv/version) 上記のようにrubyはsystemを利用しているので、rbenvの管理下にrubyをインストールします。 $ rbenv install 3.0.0 system * 3.0.0 (set by /Users/ユーザー名/.rbenv/version) globalでインストールしたバージョンを利用するように変更します。 $ rbenv global 3.0.0 rbenvで管理されたrubyに変更されているか確認します。 $ rbenv versions system * 3.0.0 (set by /Users/ユーザー名/.rbenv/version) rbenvにパスを通すため、.zshrcに以下を追加します。 [[ -d ~/.rbenv ]] && \ export PATH=${HOME}/.rbenv/bin:${PATH} && \ eval "$(rbenv init -)" ターミナルを再起動後、もう一度gemとrubyのパスを確認すると以下のように変わっています。 $ which ruby /Users/ユーザー名/.rbenv/shims/ruby $ which gem /Users/ユーザー名/.rbenv/shims/gem この状態で該当のコマンドを実行するとエラーが解決できました。