Personal Factory

Personal Factory

iOSエンジニアの技術ブログ

SwiftUIのデータ管理 Property Wrapper編

SwiftUIのデータ管理 Property Wrapper編

SwiftUIでアプリを開発していると@Stateや@Bindingの使い分けについて迷ったりしていませんか？ SwiftUIではデータを管理するProperty Wrapperがたくさんあります。 @State、@Binding、@StateObject、@ObservedObjectなどなどです。 Property Wrapperそれぞれの特徴を理解できれば、SwiftUIのアプリ開発がはかどるでしょう。 今回はSwiftUIのデータ管理を行うProperty Wrapperの使い分けについて解説します。 > この記事は私が12月9日に発表した資料、 「SwiftUIのデータ管理 [https://speakerdeck.com/satotakeshi/swiftuifalsetetaguan-li] 」を記事化したものです。 SwiftUIのデータ管理記事一覧 * SwiftUIのデータ管理 Single Source of Truth編 [https://blog.personal-factory.com/2021/01/20/whats-the-single
7 min read
SwiftUIのデータ管理 Single Source of Truth編
iOS

SwiftUIのデータ管理 Single Source of Truth編

SwiftUIでアプリを開発していると@Stateや@Bindingの使い分けについて迷ったりしていませんか？ SwiftUIではデータを管理するProperty Wrapperがたくさんあります。 @State、@Binding、@StateObject、@ObservedObjectなどなどです。 Property Wrapperそれぞれの特徴を理解できれば、SwiftUIのアプリ開発がはかどるでしょう。 今回はSwiftUIのデータ管理に欠かせないSingle Source of Truthという考え方について解説します。
3 min read
[iOS 14]WidgetでDeep Link作成
iOS

[iOS 14]WidgetでDeep Link作成

iOS 14からWidgetという機能が登場しました。これはアプリを起動しなくてもHome画面にアプリ情報をユーザーに届けられる機能です。 今回はWidgetをタップした時に特定のアプリ画面が開けるようにする、Deep Linkの作成方法について解説します。 検証環境 * Xcode 12.2 * iOS 14.2 WidgetとDeep Link Widgetをタップすると何も実装しなければ、本体アプリが起動されます。 しかし、Widgetに表示されているコンテンツと関連した画面に遷移できればユーザー体験が向上します。 そのためにはWidgetにDeep Linkを作る必要があります。 Widgetのサイズとリンクの数について まず最初にWidgetのサイズとリンクの数についてお話します。 開発者が作れるWidgetの大きさはSmall, Medium, largeの３つです。 実はWidgetはサイズによっておけるリンクの数が決まっています。 Smallサイズはひとつだけで、MediumサイズとLargeサイズは複数置くことができます。 例えば、Appleの
3 min read
[iOS 14] Widgetでカウントダウン
iOS

[iOS 14] Widgetでカウントダウン

WidgetのViewを更新するにはTimelineProviderプロトコルのgetTimelineメソッドを実装してタイムラインという何時何分にどんなデータでViewを更新するのかをあらかじめWidgetKitに伝える必要があります。 Todoアプリなどでイベントをカウントダウン表示したい場合を想定します。 毎秒更新するようにタイムラインを作成すればうまくいくかと思いきや、各アプリによってWidgetを更新できる回数は決まっています。 TimelineProviderのドキュメントにはこう書かれています。 > Each configured widget receives a limited number of refreshes every day. Several factors affect how many refreshes a widget receives, such as whether the containing app is running in the foreground or background, how frequently the widge
2 min read
iOS

[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対
1 min read
PMとデザイナーが知るべきiOS 14 新機能Widgetのすべて
iOS

PMとデザイナーが知るべきiOS 14 新機能Widgetのすべて

6月にWWDC20が発表され、次期iOS 14にはWidgetという新機能が登場することが判明しました。 Apple、iOS 14でiPhoneの体験を刷新 [https://www.apple.com/jp/newsroom/2020/06/apple-reimagines-the-iphone-experience-with-ios-14/] より抜粋 この記事ではWidgetのUI/UXをまとめます。 PMとデザイナーが「Widgetを自プロダクトに導入する」にあたって、「Widgetがどういうものなのか」を理解するためにこの記事が役に立つでしょう。 記事の内容はUI/UXに絞っているため技術的な観点からの言及は少ないです。 予めご了承ください。 免責 8月10日現在、WidgetについてはApple Beta Software Programにあたるため、スクリーンショットを独自でとることはNDAの観点から避けなければいけません。 この記事ではAppleの公式サイト、WWDCのVideoからキャプチャーを利用いたします。 引用と判別ができるよう、キャプチャーを取得した
9 min read
[SwiftUI]選択可能なUIコンポーネントの作り方【ラジオボタン偏】
iOS

[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
4 min read
[SwiftUI]選択可能なUIコンポーネントの作り方【複数選択偏】
iOS

[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
4 min read
[macOS]Bashでファイル名を一括変換する

[macOS]Bashでファイル名を一括変換する

開発メモです。大量のファイル名を一括で変換する必要がでてきたので、方法を調べてみました。 今回はmacOSでの解説になります。 実行環境は次の通りです。 * macOS Catalina 10.15.4 renameするファイル こんな構造のファイルがあるとします。 $ tree . . └── dic ├── bb_1.txt └── bb_2.txt dicディレクトリ以下のbb_1.txtとbb_2.txtのbbをaaに変えていきたいと思います。 renameコマンドを使う方法 renameコマンドを使ってリネームしてみます。 macにはLinuxのrenameコマンドはないので、brewでまずインスールします。 $ brew install rename あとはfindでリネーム対象のファイルを検索して変換します。 $ find dic -name "*bb*" | xargs rename -s bb aa mvコマンドを使う方法 renameコマンドを使わなくてもmvコマンドでfor文を回せばリネームはできます。 $ for f
1 min read
【WWDC20】Introduction to SwiftUI の雑メモ
Swift

【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
4 min read
WWDC20 SwiftUI API追加まとめ
SwiftUI

WWDC20 SwiftUI API追加まとめ

WWDC20 [https://developer.apple.com/wwdc20/] のkeynoteが終わり、Appleの開発者ドキュメントが更新されました。 https://developer.apple.com/documentation/technologies?changes=latest_minor SwiftUIのAPIでどんな更新があったのかをみていきたいと思います。 App Structure and Behavior Built-in Scene Types 新規追加。 ついにSwiftUIだけでアプリがすべて作れるようになります！ 伝統的にアプリ状態をハンドルしていたAppDelegateやiOS 13から導入されたSceneDelegateが不要になります。 これはめでたい。 https://developer.apple.com/documentation/swiftui/app-structure-and-behavior?changes=latest_minor * protocol App [https://developer.ap
3 min read
WWDC2020 Keynote まとめ
iOS

WWDC2020 Keynote まとめ

いよいよ現地時間6/22から6/26の間Appleの技術カンファレンス、WWDCが開催されます。 https://www.apple.com/apple-events/june-2020/ keynote発表後、早速各OSでpreviewサイトが公開されました。 項目だけまとめたいと思います。 iOS https://www.apple.com/ios/ios-14-preview/features/ * Widgets on the Home Screen * App Library * Compact Calls * 電話着信が全画面ではなくてフローUIに変化 * Picture in Picture * Messages * Pinned conversations * Group photos * Mentions * Inline replies * New Memoji styles and stickers * Maps * Cycling directions
3 min read
【Swift Argument Parser入門】Swiftでコマンドラインツールを作る
Swift

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

2020年2月、AppleがSwift向けライブラリーArgumentParserをリリースしました。 これはSwiftでコマンドラインツールを作る際にコマンド引数を簡単に扱えるライブラリーです。 CarthageやXcodeGenなどSwift製のコマンドラインツールはたくさんありますが、いざ自分で作ろうと思ったときにこのライブラリーが役に立ちます。 この記事ではArgumentParserの使い方を解説します。 Swiftでコマンドラインツールを作成した方にぴったりの記事です。
11 min read
SwiftUIアプリをVIPERアーキテクチャーで作り画面遷移処理をまとめる
iOS

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

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

[iOS]画像解析フレームワークVision FrameworkとUIKitの座標計算

前回、[iOS]画像解析フレームワークVision Framework入門にて、Vision Frameworkの概要を解説する記事を書きました。 そこで紹介したAppleのサンプルコード、Detecting Objects in Still Images | Apple Developer Documentationで私がつまづいた点をまとめます。 具体的には、Vision FrameworkとUIKitの座標空間が異なりその変換方法の理解を深めたいと思います。
4 min read
【個人活動実績】2019年7月〜2020年4月
個人活動

【個人活動実績】2019年7月〜2020年4月

[【個人活動実績】2019年1月〜6月](https://blog.personal-factory.com/2019/06/20/portfolio-from-2019-01-to-06/)を公開してから早１年半。2020年5月になってしまいました。 定期的に個人の実績は振り返りたいと思ってるので、今回は2019年7月から2020年4月までをやっていきます。 # アマトリウム株式会社にて業務委託 2019年6月から2020年1月まで現代美術品のデジタル化やプラットフォーム化をおこなう[アマトリウム株式会社](https://amatorium.com/)にて業務委託を行いました。
6 min read
iOS 13でのNavigationBarのカスタマイズ方法
iOS

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
4 min read
[SwiftUI]iPad上でNavigaitonViewでSplitViewを実現
iOS

[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
2 min read
「1人でアプリを作る人を支えるSwiftUI開発レシピ」という同人誌を書きました #技術書典
iOS

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

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