SwiftUIが発表されたWWDC2019初期から間もないプレゼンテーション資料。beta版のxcodeで実際に実演したところ表題通りxcodeが途中終了するぐらい不安定だった。

1. SwiftUIのライブコーディングす
るとxcodeが⃝回落ちる
これってトリビアになりませんか?

2. 自己紹介

3. 能登 要 (@notoroid)
• iOSアプリ開発者
• 屋号:いります電算企画
• @notoroid
• @irimasu
• eスポーツ

4. 題目
• SwiftUI 登場
• SwiftUI ライブコーディング
• まとめ

5. 話す範囲
• SwiftUI Tutorials を使ったライブコーディング
• Creating and Combining Views
• https://developer.apple.com/tutorials/swiftui/creating-and-
combining-views
• Drawing Paths and Shapes
• https://developer.apple.com/tutorials/swiftui/drawing-paths-
and-shapes

6. 話さない範囲
• 画面遷移
• データバインディング
• 既存UI との組み合わせ
• アニメーション
• OSごとへのSwiftUI の適用

7. SwiftUI 登場

8. WWDC2019は
開発者に盛り沢山の内容

9. 注目はSwiftUI

10. SwiftUI
• Swift5.1 ベースのUI作成フレームワーク
• DSL(用途範疇固有言語) がSwift5.1で記述できる
• Swift5.1をDSLに寄せた
• UIを構成する基本定義はView
• Viewを宣言的(Declarative)に記述でき簡潔な記述が可能

11. SwiftUI
• Swift5.1 ベースのUI作成フレームワーク
• DSL(用途範疇固有言語) がSwift5.1で記述できる
• Swift5.1に仕様を追加してDSLに寄せてしまう
• UIを構成する基本定義はView
• Viewを宣言的(Declarative)に記述でき簡潔な記述が可能

12. SwiftUI
• Swift5.1 ベースのUI作成フレームワーク
• DSL(用途範疇固有言語) がSwift5.1で記述できる
• Swift5.1に仕様を追加してDSLに寄せてしまう
• UIを構成する基本定義はView
• Viewを宣言的(Declarative)に記述でき簡潔な記述が可能
何?

13. 宣言的(Declarative)
• ある出力を得るにあたってそれを作成する方法ではなく、出力の性質を記
述することを「宣言型」と称する
• 宣言的プログラミングの「宣言的」って？ (2009)
• https://sh-2.hatenadiary.org/entry/20091006/1254847253
• HTML は宣言的

14. Apple としては

15. 宣言的な記述を可能とし
宣言的な記述に慣れている
作り手(Web開発者)を呼び寄せたい

16. 宣言的な手法を提供することで
様々なOS(iOS,macOS,watchOS)で
同じ手法を適用できるようにしたい

17. Apple のSwiftUI導入
• 宣言的な記述を可能とし宣言的な記述に慣れている作り手を呼び寄せたい
• 宣言的な手法を提供し様々なOSで同じ手法を適用できるようにしたい
• Interfacebuilder でのUI作成から20年以上経ち求められるものを提供し
た

18. Apple のSwiftUI導入
• 宣言的な記述を可能とし宣言的な記述に慣れている作り手を呼び寄せたい
• 宣言的な手法を提供し様々なOSで同じ手法を適用できるようにしたい
• Interfacebuilder でのUI作成から20年以上経ち求められるものを提供し
た
Web開発者にまで開発者の間口を広げる

19. 従来のUI部品(Storyboard,xib)
も組み合わせ可能

20. OSに最適化された機能をこれまでど
おりアプリに組み込むこともできる

21. 宣言的記述内に複雑な機能を提供できる
いうと思い出す

22. Webブラウザー
Flash
2000年代前半

23. SwiftUIと既存UIフレームワークは共存し
つつSwiftUI でリプレースできるUIは
簡潔に記述できるようになる
iOS13からは…

24. SwiftUI ライブコーディング

25. SwiftUIは簡潔に
記述できるのが強み

26. とはいえ意図したレイアウトが
作れなければ話にならない

27. 今回は既存のUIを真似してみる

28. 真似する対象は
タイリングベースのUI

29. 真似するUIは

30. GloriousBattery
• 端末4台までのバッテリー状態を数値と背景
色で見やすく表示
• クリーンなインターフェイス
• バッテリー状態、充電状態のみを表示
• バッテリー確認したいデバイスを招待
• 端末4台まで登録可能。1つの画面で確認で
きます。

31. 実際のレイアウトを見てみる

33. 4セルSafeAreaまで
塗りつぶし

35. バッテリー量
単位
時間毎グラフ
充電状態
端末名
円グラデーション

36. GloriousBatteryのレイアウト
• 4セル
• セル毎にバッテリー情報
• セルの背面にグラデーション
• セルはSafeAreaを出ている

37. xcode11 の
テンプレートからデザインを
近づけてみる

38. レギュレーション
• フォントサイズ:75
• 度数フォントサイズ:30 offset: -5,-25
• フォント全体オフセット: 15
• グラデーションカラー:
• Color(red: 102.0 / 255, green: 196.0 / 255, blue: 66.0 / 255)
• グラデーションカラー2:
• Color(red: 87.0 / 255, green: 161.0 / 255, blue: 58.0 / 255)
• 円グラデーション: 開始半径: 50px、終了:半径 150px
• プロジェクト名はMonitor
• カスタムViewは、ContentView、MonitorView、GraphView を使用

39. View

40. import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello World")
}
}
#if DEBUG
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
#endif
SwiftUI のテンプレートコード
Viewはbody で1つのView を派生
した宣言を渡す必要がある。

41. 組み込みView派生
Text
Image
LinearGradient
RadialGradient
RectAngle
Circle
Ellipse
GeometryReader
AngularGradient
Capsule

42. 複数のViewを配置する場合は、
Stack(HStack,VStack,ZStack)

43. HStack
HStack {
RectAngle()
.foregroundColor(Color.red)
RectAngle()
.foregroundColor(Color.green)
RectAngle()
.foregroundColor(Color.blue)
}
①
②
③
記述順に左から右に配置
① ② ③

44. VStack
VStack {
RectAngle()
.foregroundColor(Color.red)
RectAngle()
.foregroundColor(Color.green)
RectAngle()
.foregroundColor(Color.blue)
}
①
②
③
記述順に上から下に配置
①
②
③

45. ZStack
ZStack {
RectAngle()
.foregroundColor(Color.red)
RectAngle()
.foregroundColor(Color.green)
RectAngle()
.foregroundColor(Color.blue)
}
①
②
③
記述順に奥に配置 ①
②
③

46. Stack の配置はView側にサイズ
指定がない限りは等倍配置

47. 詰め込む場合は
Spacer() を指定

48. View.edgesIgnoringSafeArea() を使
うとSafeAreaを無視するようになる

49. Stack(HStack,VStack,HStack)を
使わなくても配置できる

50. Viewに配置

51. Viewに配置

52. background はbodyのclipフィルターに
影響する。

53. background はView.clip() の
結果が反映される

54. Rectangle()
.fill(
Color.clear
).background(
背景描画するView
)
.clipped()

55. ライブコーディング中

56. リソース
• フォントサイズ:75
• 度数フォントサイズ:30 offset: -5,-25
• フォント全体オフセット: 15
• グラデーションカラー:
• グラデーションカラー2:

57. RadialGradient(gradient: .init(colors: [Self.gradientStart, Self.gradientEnd]), center: .init(x: 0.5, y:
0.5), startRadius: 50, endRadius: 150)
.aspectRatio(contentMode: .fill)
static let gradientStart = Color(red: 102.0 / 255, green: 196.0 / 255, blue: 66.0 / 255)
static let gradientEnd = Color(red: 87.0 / 255, green: 161.0 / 255, blue: 58.0 / 255)
// .previewDevice(PreviewDevice(rawValue: "iPhone 8") )
.previewDevice(PreviewDevice(rawValue: "iPhone X") )

58. import SwiftUI
struct GraphView: View {
var body: some View {
HStack(spacing:0) {
ForEach(0 ..< 12) { item in
GraphLineView()
}
Spacer()
}
}
}
#if DEBUG
struct GraphVioew_Previews: PreviewProvider {
static var previews: some View {
GraphView()
// .previewDevice(PreviewDevice(rawValue: "iPhone 8") )
.previewDevice(PreviewDevice(rawValue: "iPhone X") )
}
}
#endif
struct GraphLineView: View {
var body: some View {
ZStack {
// Rectangle()
// .foregroundColor(Color.green)
ForEach(0 ..< 12 ) { item in
GeometryReader { geometry in
Path { path in
let verticalOffset = 0.5 + (item == 0 ? 0 : (geometry.size.height * 0.2))
path.move(
to: CGPoint(
x: 0.5 + CGFloat(item) * 2.5,
y: verticalOffset
)
)
path.addLine(
to: CGPoint(
x: 0.5 + CGFloat(item) * 2.5,
y: 0.5 + geometry.size.height
)
)
}
.stroke(Self.strokeColor, lineWidth: 1)
}
}
}.frame(width:29.5, height:20)
}
static let strokeColor = Color(white: 1, opacity: 0.8)
}

59. まとめ
• SwiftUI はSwiftで記述できるDSLであるSwiftソースコードです
• 20年ぶりにAppleが重い腰を上げて新しい開発者の呼び込み中
• SwiftUIのレイアウトはWebのデザインに近いけどクセもあり
• SwiftUI は流し込むデータソースありきなのでモックアップ用のデータは
準備したほうがいいかも