iOS

A collection of 93 posts
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
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
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が2つ並びで左右に別れているレイアウトです。 設定アプリでは、左側のペインに設定項目が並び、それらをタップすると右側ペインに詳細画面が表示されます。 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
SwiftUIでドロップシャドー
iOS

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) 親ビューのみにドロップシャドーをつける場合は2つ方法があります。 clippedを使う clipped()修飾子を使う方法です。 SwiftUIはデフォルトでは、フレームの端を越えて広がる
2 min read
[SwiftUI] GeometryReaderで特定のViewをキャプチャする
SwiftUI

[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
3 min read
[SwiftUI] GeometryReaderでViewのサイズを知る
iOS

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

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

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メソ
2 min read
Accessibility in SwiftUIまとめ
iOS

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
2 min read
Introducing SwiftUI: Building Your First App まとめ
iOS

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(派生データソース) * 依存関係の管理は難しい * 値を変えたとき、
5 min read
Platforms State of the Union 書き起こし(SwiftUIのみ)
iOS

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
6 min read
SwiftUI On All Devices まとめ(概要のみ)
iOS

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はすべてのデバイスで動作する。 なので開発者に
2 min read
Building Custom Views with SwiftUI まとめ
iOS

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("Hello
6 min read
WWDCのDesign Labが 最高だった
iOS

WWDCのDesign Labが 最高だった

WWDC19の様子WWDC19、最終日にDesign Labにいってきました。 Design LabはAppleのデザイナーと1対1でアプリデザインを相談できるLabです。 アプリのデザインはApp Storeにリリース済み、プロトタイプどちらでも構いません。 WWDCアプリから予約が必要です。 当日の7:00から7:30までに予約リクエストをして、枠が空いていれば正式に予約完了という流れになっています。 Design Labはとても人気のLabでなかなか予約が取りづらいLabです。 しかし、最終日ともなると、参加者の数も少なくなっているので予約が取りやすくなっています。 個人アプリのデザイン相談 Design Labで私は個人で製作している「フライングスター風水」のアプリデザインについて相談しました。 相談ごと1つ目 引っ越し間取り画面の写真登録UIを改善したいと思っています。 間取り画面で引越し先の住宅の運勢を占うには以下の2つのタスクが必要です。 1. 写真の北方向と端末画面上部を回転させて合わせる 2. 玄関の方向に画像を回転させる しかしセミナーなどで実際に
4 min read
iOS

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
2 min read
iOS

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
iOS

SwiftUIのコードを読み解く

WWDC19参加中です。4日目です。 ラボの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)
1 min read
SwiftUIの子ビューのクロージャーSelf参照について
iOS

SwiftUIの子ビューのクロージャーSelf参照について

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")
1 min read
技術書典6で同人誌を配布するまで考えたこと全て
技術書

技術書典6で同人誌を配布するまで考えたこと全て

2019/04/14 (日) 技術書オンリーイベント技術書典6 [https://techbookfest.org/event/tbf06]が開催されました。 私は新作「ハーフモーダルで理解するFluid Interface [https://techbookfest.org/event/tbf06/circle/48210003]」を配布しました。 イベント開催時間の11:00から17:00まで、ひっきりなしに人がブースに遊びにきていただき大いに盛り上がりました。お陰様で販売数も170冊以上 (製本+PDF合わせて)配布することができました。 ご購入頂いた方、ブースをのぞいてくれた方ありがとうございます。 この記事では新作を作り、読者に届けるまでの過程を振り返りたいと思います。 > 本日ご購入いただいた方、見本誌お読みいただいた方ありがとうございました!たくさんの方に興味を持ってもらい書ききった甲斐がありました。(〆切前に泣きながら書いてました。。) #技術書典 [https://twitter.com/hashtag/%E6%8A%80%E8%A1%93%E6%
12 min read