Save 37% off PRO during our Black Friday Sale! »

Marzipan の正体は何だったのか そして SwiftUI の衝撃/wwdc19_marzipan_swiftui

Marzipan の正体は何だったのか そして SwiftUI の衝撃/wwdc19_marzipan_swiftui

70d9714ea13fc1133803d61fb16e4160?s=128

Yusuke Hosonuma

June 17, 2019
Tweet

Transcript

  1. Marzipan の正体は何だったのか そして SwiftUI の衝撃 Yusuke Hosonuma @ペンギン村 Yappli Meetup

    #11 WWDC2019報告会 for yappliメンバー
  2. About

  3. Yusuke Hosonuma @tobi462

  4. ペンギン村 ࣮͸σβΠϯͨ͠ͷ๻Ͱ͢

  5. 88%$ͷײ૝ ϘδϣϨʔɾψʔϰΥʔͷධՁ෩ʹ

  6. 4XJGU͕ൃද͞Εͨ`ͱಉ౳ ·ͨ͸ͦΕΛ্ճΔ࠷ߴͷ88%$

  7. WWDC19 感想 • 初参加でドキドキ! • 空気感は現地でしか味わえない! • ⼀一度は参加してみると良い経験になる! • 今年年はたくさんの発表があって楽しかった!

    • (でもキャッチアップが本当に⼤大変)
  8. WWDC19 思い出 • 航空性中⽿耳炎でも⼊入国に成功 • ♪ Billie Eilish「bad guy」にハマる •

    サンフランシスコ観光 /
  9. おことわり • 本⽇日の資料料には個⼈人的な⾒見見解を含みます w w w w w w •

    キャッチアップ不不⾜足で間違ってる箇所も
 w w w w w あるかも
  10. "HFOEB 5PEBZ

  11. Agenda • Marzipan(マジパン)の正体 • SwiftUI • まとめ

  12. Agenda • Marzipan(マジパン)の正体 • SwiftUI • まとめ

  13. .BS[JQBO ʢϚδύϯʣ ڈ೥ͷ88%$લʹϦʔΫͯ͠࿩୊ʹͳͬͨ

  14. Marzipan • iOSアプリが macOS でも動くらしい? • UIKit / AppKit のラッパーAPIが提供?

    • 多くの開発者は否定的な印象 • 去年年の WWDC でティム・クックが否定 ͷᷚͱڈ೥ͷ88%$
  15. ։ൃऀͷ༧૝ ͨͿΜଟ͘ͷ

  16. ① iOS アプリが Mac で動く?

  17. ① iOS アプリが Mac で動く? J04͸.BDΞϓϦ͡Όͳ͍ʂʢౖ

  18. ② UIKit / AppKit のラッパー AppKit UIKit

  19. ② UIKit / AppKit のラッパー AppKit UIKit MarzipanKit ?

  20. ② UIKit / AppKit のラッパー AppKit UIKit MarzipanKit ? ৽͍͠"1*Λ֮͑Δͷʁ

    ͦΕͰ΋6*͸ҟͳΔΑʁ
  21. ࠓ೥ͷ88%$ ͦͯ͠

  22. 予想 • Marzipan について進捗シェア w w • ARKit 3.0(内容はわからないけど) •

    Apple Glass の発表 • Mac Pro の発表 ࢲͷ
  23. 結果 • Marzipan について進捗シェア w w • ARKit 3.0 •

    Apple Glass の発表 • Mac Pro の発表
  24. 結果 • Marzipan について進捗シェア w w • ARKit 3.0 •

    Apple Glass の発表 • Mac Pro の発表 "QQMFͷຊؾͷൃදʂ
  25. ൃද͋ͬͨͷʁ ͑ͬɺ.BS[JQBOͬͯ

  26. Marzipan の正体 w w • 共通的な UI 定義を⾏行行い • プラットフォーム側で適切に表示する仕組み

    • SwiftUI / Project Catalyst
  27. 4XJGU6*

  28. SwiftUI • 完全に新しい UI フレームワーク(iOS 13 〜 • マルチプラットフォーム対応 •

    iOS / iPad OS / mac OS / AppleWatch • Pure Swift で先進的 w w w ͷͪ΄Ͳৄ͘͠
  29. SwiftUI 4XJGU6* 6*Λఆٛ

  30. SwiftUI 4XJGU6* 6*Λఆٛ ϓϥοτϑΥʔϜຖʹదͨ͠6*

  31. SwiftUI 4XJGU6* 6*Λఆٛ ϓϥοτϑΥʔϜຖʹదͨ͠6* ϓϧμ΢ϯ .BTUFS%FUBJM

  32. https://developer.apple.com/videos/play/wwdc2019/103/

  33. 1SPKFDU$BUBMZTU

  34. Project Catalyst • iPad アプリを Mac アプリとして動かす • 単⼀一ソースで両プラットフォームを対応 •

    iPad OS / macOS Catalina • SwiftUI じゃなくてもかんたんに w w w w w w
  35. 3 steps 1. macOS のチェックボックスを ON 2. iPad 向けの⼤大画⾯面に対応するアプリを作る 3.

    macOS 向けの機能を追加する w w w w w ϑϧϝχϡʔɺλονόʔɺଞ
  36. ͜͜·Ͱ ͷ·ͱΊ

  37. ここまで • Marzipan は共通の UI 定義をもとに • プラットフォーム固有の UI 表現を実現する

    • SwiftUI / Catalyst を筆頭にした • これからの Apple のアプリ戦略略の総称 w w w w w w w w ͩͱɺ๻͸ײ͡·ͨ͠ɻ
  38. Agenda • Marzipan(マジパン)の正体 • SwiftUI • まとめ

  39. 8IBUT4XJGU6*

  40. What’s SwiftUI • Less Code • Better Code • Everywhere

    1MBUGPSNTUBUFPGUIF6OJPOΑΓ
  41. What’s SwiftUI • Less Code • Better Code • Everywhere

    ΑΓগͳ͍ίʔυͰ
  42. What’s SwiftUI • Less Code • Better Code • Everywhere

    ޮ཰తʹॻ͘͜ͱ͕Ͱ͖
  43. What’s SwiftUI • Less Code • Better Code • Everywhere

    ͢΂ͯͷϓϥοτϑΥʔϜͰಈ͘
  44. 4XJGU6*ͷಛ௃

  45. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

  46. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

  47. Declarative • 宣⾔言的にコードで記述できる w w w w • どのように(How)作るのかではなく •

    どうあるべき(What)か • XML などではなく Pure Swift で実現
  48. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

  49. Automatic • ⾃自動的にいろいろ対応してくれる w w w w • ⾔言語に応じた⽂文字の揃え •

    Light / Dark モード • Dynamic type
  50. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

  51. Compositional • コンポーネントを組み合わせやすい w w w w w • HStack

    / VStack • ForEach で繰り返し • 階層をまたがったテキストの揃え 'MVUUFSʹΘΓͱࣅͯΔ
  52. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

  53. Consistent • ⼀一貫性のある仕組み w w w • 信頼できる⼀一元化されたデータから作る • データバインディング(Reactive)の仕組み

    • Combine フレームワーク 3Y 'MVY 3FEVY తͳߟ͑
  54. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

  55. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

    ͜ΕͬͯԿ͔ʹࣅͯ·ͤΜ͔ʁ ͱ͜ΖͰ
  56. )5.- $44

  57. HTML + CSS • Declarative • Automatic • Compositional •

    Consistent 宣⾔言的に書く 様々なデバイスで動いてくれる コンポーネントを組み合わせる (CSSは怪しいけど)⼀一貫性ある
  58. HTML + CSS • Declarative • Automatic • Compositional •

    Consistent 宣⾔言的に書く 様々なデバイスで動いてくれる コンポーネントを組み合わせる (CSSは怪しいけど)⼀一貫性ある 4XJGU6*͸"QQMF੡඼ʹ͓͚Δ )5.- $44ͳҐஔ͚ͮͰ͸ʁ ݸਓతͳղऍͰ͕͢
  59. ࣮ࡍͷίʔυ

  60. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } }
  61. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } } 7JFXͷఆٛ
  62. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } } /BWJHBUJPO7JFX͕͋ͬͯ
  63. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } } τʔΫҰཡͷϦετ͕͋ͬͯ λΠτϧ͸͜Ε
  64. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } } બ୒Ͱ͖ΔηϧͰ ભҠઌʹ͸͜ΕΛදࣔ
  65. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } } ηϧͷத਎͸ʮը૾ʯͱ
  66. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } } λΠτϧʴ࡞ऀΛදࣔ
  67. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } }
  68. %FNP

  69. ·ͱΊ

  70. まとめ • Marzipan の正体は UI 定義の共通化と
 プラットフォーム固有の UI 提供による
 今後の

    Apple のアプリ戦略略(だったかも) • SwiftUI は先進的な UI フレームワーク • Apple 製品における HTML + CSS のような?
  71. 0OFNPSFUIJOH ͱɺ͍ͬͯ΋એ఻Ͱ͕͢ʜ

  72. None
  73. s ൃച༧ఆ Α͔ͬͨΒങͬͯͶʂ