Tweet
Tweet

Slide 1

Slide 1 text

2024.07.12 Apple WalletͰύεΛ࡞Δ͓࿩ YUMEMI Inc. Flutter Engineer - Ryotaro Onoue 1 Money Forward×YUMEMI.grow ࣗশएखϞόΠϧΤϯδχΞLTձ

Slide 2

Slide 2 text

0. ࣗݾ঺հ ɾגࣜձࣾΏΊΈ FlutterΤϯδχΞ 2023೥4݄ʙ ɾFlutterKaigi 2023 (ڞಉ)ొஃ&ελοϑ ɾDart BFF(Backend for Frontend)ͷ࿩Λ͠·ͨ͠ ɾFlutterKaigi 2024 WebαΠτνʔϜ&σʔλνʔϜ ɾTwitter͸ @YumNumm(΋͙΋͙) Ͱ΍͍ͬͯ·͢ ɾࠓ೥9݄Ͱ20ࡀʹͳΓ·͢ ࠓ͸19Ͱ͢ 2

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ࠓ೔ͷτϐοΫ ❌ FlutterΤϯδχΞͰ͕͢ɺFlutterͷ࿩͸͠·ͤΜ ࠓ೔͸ɺAppleϓϥοτϑΥʔϜʹدͬͨ࿩Λ͠·͢ (ݩʑAndroidʹ΋৮Δ༧ఆͩͬͨͷͰ͕͢ɺ͕࣌ؒ͋·ΓऔΕͣ...🙏) 4

Slide 5

Slide 5 text

ࠓ೔ͷτϐοΫ ❌ FlutterΤϯδχΞͰ͕͢ɺFlutterͷ࿩͸͠·ͤΜ ࠓ೔͸ɺAndroidͱiOS ͦΕͧΕϓϥοτϑΥʔϜʹدͬͨ࿩Λ͠Α͏ͱࢥ͍·͢ 5

Slide 6

Slide 6 text

ࠓ೔ͷτϐοΫ 6 ΢ΥϨοτ App Έͳ͞Μ࢖͍ͬͯ·͔͢?

Slide 7

Slide 7 text

ͳΜͰ͜ͷ࿩? ɾ@ۙॴͷΠτʔϤʔΧυʔ ɾηϧϑϨδͰ঎඼ొ࿥Λͨ͠ޙͷϙΠϯτΧʔυొ࿥ʹͯ ɾΠτʔϤʔΧυʔͷWiFiʹ઀ଓ͞Ε͍ͯͯ ΞϓϦ͕ىಈ͠ͳ͍ ɾϞόΠϧσʔλ༰ྔ͕ऴΘ͍ͬͯͯ ىಈʹ10ඵ͘Β͍଴ͨ͞ΕΔ ɾ଴ͭͷ΋ΠϠ͕ͩ ϙΠϯτ͕෇͔ͳ͍ͷ΋൵͍͠ ɾ݁Ռ: ڏແͷ͕࣌ؒྲྀΕΔ 7

Slide 8

Slide 8 text

ͳΜͰ͜ͷ࿩? ɾۙॴͷΠτʔϤʔΧυʔʹͯ ɾηϧϑϨδͰ঎඼ొ࿥Λͨ͠ޙͷϙΠϯτΧʔυొ࿥ʹͯ ɾ΅͘ʮ͋ͬɺϙΠϯτΧʔυొ࿥͠ͳ͍ͱ... εϚϗͷΞϓϦͬͱʯ ɾiPhoneʮΠτʔϤʔΧυʔͷWiFiܨ͕͍ͬͯΔ͔Βೝূͯ͠Ͷʯ(ΩϟϓςΟϒWiFi) ɾ΅͘ʮ͍΍ɺࠓ͸͍ΒΜʯ ɾΞϓϦʮ(10ඵ΄Ͳ଴ػ)ωοτ઀ଓͰ͖·ͤΜʯ ɾ΅͘ʮWiFiΦϑʹͯ͠ΞϓϦ࠶ىಈ...ʯ ɾΞϓϦʮ(5ඵ΄Ͳ଴ػ)͸͍ɺϙΠϯτΧʔυͷόʔίʔυʯ ɾ΅͘ʮ΍ͬͱܾࡁͷͱ͜Ζ·ͰདྷͨΘʯ 8 ɾSuicaܾࡁɾΫϨδοτΧʔυܾࡁͰ͢Β Apple Watch୯ମͰࡁ·ͤΒΕΔ͜ͷ࣌ ୅ʹͲ͏ͯ͠ʮΞϓϦΛ։͍ͯ଴ͭʯͱ͍͏ΊΜͲ͍͘͞ίτΛ͠ͳ͍ͱ͍͚ͳ͍ͷ ͔? ɾ͜͜͸Ұͭ ٕज़Ͱղܾ͍ͨ͠ɻ -> ύεΛ࡞ͬͨΔ!

Slide 9

Slide 9 text

2. Apple Walletͷ࢓૊Έ 9

Slide 10

Slide 10 text

1. ύεͷσʔλΛ༻ҙ͢Δ - pass.json: ύεʹදࣔ͢Δจࣈྻ΍ϝλσʔλΛ֨ೲ - ֤छը૾ϑΝΠϧ: ϩΰ΍ΞΠίϯͳͲ - (optional) ϩʔΧϦθʔγϣϯ৘ใ 2. Apple Walletͷ࢓૊Έ 10

Slide 11

Slide 11 text

1. ύεͷσʔλΛ༻ҙ͢Δ - pass.json: ύεʹදࣔ͢Δจࣈྻ΍ϝλσʔλΛ֨ೲ - ֤छը૾ϑΝΠϧ: ϩΰ΍ΞΠίϯͳͲ - (optional) ϩʔΧϦθʔγϣϯ৘ใ 2. ύεͷσʔλͦΕͧΕʹରͯ͠ॺ໊Λ͢Δ - ͍͔ͭ͘ͷσʔλΛ༻ҙͯ͠ॺ໊ 3. σʔλͱॺ໊ΛؚΊͯZIPѹॖ 4. ֦ுࢠΛ.pkpassʹม͑ͯ഑෍ - Webܦ༝Ͱ΋ϝʔϧͰ΋AirDropͰ΋ʙ 2. Apple Walletͷ࢓૊Έ 11

Slide 12

Slide 12 text

- Apple WalletΛܦ༝ͯ͠ύεΛ഑৴ɾ഑෍͢ΔͨΊʹ͸ॺ໊͕ඞཁ - ύε͕࡞੒+ॺ໊͞Ε͔ͯΒɺѱҙͷ͋ΔϢʔβʹΑͬͯվม͞Ε͍ͯͳ͍͜ͱΛ ݕূͰ͖ΔΑ͏ʹͳΔ - Pass Type IdentifierͱTeam IDΛ༻ҙ͢Δ - Identifier(ࣝผࢠ)Λొ࿥ͨ͠ΒɺCertificate(ূ໌ॻ)ΛDL͢Δ - Identifier͸ pass. ͔Β࢝·Δ೚ҙͷٯDNSจࣈྻ 2-0. ֤छূ໌ॻͷ༻ҙ 12

Slide 13

Slide 13 text

- ύεͷσʔλ͸ pass.json ʹهड़͢Δ - description, formatVersion: “1”, organizationName(Team ID), passTypeIdentifier, serialNumber ͸ඞਢ - barcodes΍backgroundColor, associatedStoreIdentifiers, locations΋هड़Ͱ͖Δ - associatedStoreIdentifiers: ύεʹඥͮ͘ΞϓϦ ͷAppStoreࣝผࢠ഑ྻɻύε͔ΒΞϓϦΛىಈͰ͖Δ - locations: ύεʹඥͮ͘Ң౓ܦ౓഑ྻɻͦͷҐஔʹߦ͘ ͱɺϩοΫը໘ʹύεͷީิ͕ग़ͯ͘Δ - ৄࡉͳύεͷจࣈྻ͸Pass Type͝ͱʹهड़(࣍ϖʔδ) 2-1. ύεͷσʔλΛ༻ҙ͢Δ 13

Slide 14

Slide 14 text

- ύεʹ͸େ͖͘5छྨ͋ΜͶΜ: ͦΕͧΕͰදࣔͰ͖Δ߲໨͕ҧ͏ 2-1. ύεͷσʔλΛ༻ҙ͢Δ 14 Boarding pass Coupon Generic Event ticket Store card https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/PassKit_PG/Creating.html#//apple_ref/doc/uid/TP40012195-CH4-SW1 ΑΓҾ༻

Slide 15

Slide 15 text

- ύεʹ͸େ͖͘5छྨ͋ΜͶΜ: ͦΕͧΕͰදࣔͰ͖Δ߲໨͕ҧ͏ 2-1. ύεͷσʔλΛ༻ҙ͢Δ 15 Boarding pass Coupon Generic Event ticket Store card https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/PassKit_PG/YourFirst.html ΑΓύεσʔλΛҾ༻

Slide 16

Slide 16 text

- ֤छը૾ͷ༻ҙ - എܠը૾΍ΞΠίϯɾϩΰͳͲΛ഑ஔ Ͱ͖Δ - ύεͷλΠϓʹԠͯ͡දࣔͰ͖Δը૾ ͕ҟͳΔͷͰɺ֬ೝ͢΂͠ 2-1. ύεͷσʔλΛ༻ҙ͢Δ 16

Slide 17

Slide 17 text

- ॺ໊ɾѹॖ͸signpassίϚϯυͰָʹ࣮૷Ͱ͖Δ - signpassπʔϧ͸Apple Developer͔ΒDLͰ͖Δ - signpass -p hoge Ͱѹॖʙॺ໊·Ͱ΍ͬͯ͘ΕΔ - hoge.pkpass͕Ͱ͖ΔͷͰɺAirDropͰૹΕ͹OK 2-2. ύεͷσʔλΛॺ໊͢Δ 17 https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/PassKit_PG/index.html ΑΓDLՄೳ

Slide 18

Slide 18 text

- Ͱ͸ɺsignpassίϚϯυ͸தͰԿΛ΍͍ͬͯΔͷ͔? - ͍͔ͭ͘ͷॺ໊νΣʔϯΛݩʹɺύεσʔλ͕ਖ਼͍͔͠ݕূͰ͖ΔΑ͏ʹ͍ͯ͠Δ 1. pass.json΍ը૾ϑΝΠϧͷSHA-1ϋογϡ஋Λܭࢉͯ͠manifests.jsonʹ֨ ೲ͢Δ 2-2. ύεͷσʔλΛॺ໊͢Δ 18

Slide 19

Slide 19 text

- Ͱ͸ɺsignpassίϚϯυ͸தͰԿΛ΍͍ͬͯΔͷ͔? - ͍͔ͭ͘ͷॺ໊νΣʔϯΛݩʹɺύεσʔλ͕ਖ਼͍͔͠ݕূͰ͖ΔΑ͏ʹ͍ͯ͠Δ 1. pass.json΍ը૾ϑΝΠϧͷSHA-1ϋογϡ஋Λܭࢉͯ͠manifests.jsonʹ֨ ೲ͢Δ 2.ʮ2-0. ֤छূ໌ॻͷ༻ҙʯͰ༻ҙͨ͠Certificates+WWDR(World Wide Developer Relations தؒূ໌ॻ)Ͱ manifests.json Λެ։伴ॺ໊Λൃߦ - PKCS#7(҉߸Խσʔλ΍ॺ໊ΛؚΉϝοηʔδަ׵ܗࣜنఆ)෼཭ॺ໊Λ࡞੒͢Δ 2-2. ύεͷσʔλΛॺ໊͢Δ 19

Slide 20

Slide 20 text

- Ͱ͸ɺsignpassίϚϯυ͸தͰԿΛ΍͍ͬͯΔͷ͔? - ͍͔ͭ͘ͷॺ໊νΣʔϯΛݩʹɺύεσʔλ͕ਖ਼͍͔͠ݕূͰ͖ΔΑ͏ʹ͍ͯ͠Δ 1. pass.json΍ը૾ϑΝΠϧͷSHA-1ϋογϡ஋Λܭࢉͯ͠manifests.jsonʹ֨ ೲ͢Δ 2.ʮ2-0. ֤छূ໌ॻͷ༻ҙʯͰ༻ҙͨ͠Certificates+WWDR(World Wide Developer Relations தؒূ໌ॻ)Ͱ manifests.json Λެ։伴ॺ໊Λൃߦ - PKCS#7(҉߸Խσʔλ΍ॺ໊ΛؚΉϝοηʔδަ׵ܗࣜنఆ)෼཭ॺ໊Λ࡞੒͢Δ 2-2. ύεͷσʔλΛॺ໊͢Δ 20

Slide 21

Slide 21 text

- Ͱ͸ɺsignpassίϚϯυ͸தͰԿΛ΍͍ͬͯΔͷ͔? - ͍͔ͭ͘ͷॺ໊νΣʔϯΛݩʹɺύεσʔλ͕ਖ਼͍͔͠ݕূͰ͖ΔΑ͏ʹ͍ͯ͠Δ 1. pass.json΍ը૾ϑΝΠϧͷSHA-1ϋογϡ஋Λܭࢉͯ͠manifests.jsonʹ֨ ೲ͢Δ 2.ʮ2-0. ֤छূ໌ॻͷ༻ҙʯͰ༻ҙͨ͠Certificates+WWDR(World Wide Developer Relations தؒূ໌ॻ)Ͱ manifests.json Λެ։伴ॺ໊Λൃߦ - PKCS#7(҉߸Խσʔλ΍ॺ໊ΛؚΉϝοηʔδަ׵ܗࣜنఆ)෼཭ॺ໊Λ࡞੒͢Δ 3. σʔλ+ॺ໊ΛZIPѹॖ -> ֦ுࢠΛ.pkpassʹมߋ Ϥγ👌 2-2. ύεͷσʔλΛॺ໊͢Δ 21

Slide 22

Slide 22 text

3. ࣮ࡍʹύεΛߏங͢Δ 22

Slide 23

Slide 23 text

- ࠓճ͸ΠτʔϤʔΧυʔͷϙΠϯτΧʔυΛApple WalletʹೖΕ͍ͨ - ͪͳΈʹɺར༻ن໿͸֬ೝࡁΈ(ϙΠϯτΧʔυͷόʔίʔυෳ੡ʹؔ͢Δهड़͸ͳ͍) - όʔίʔυ͸࣌ؒʹΑͬͯมԽ͠ͳ͍ - े෼࣮ݱՄೳͳ͜ͱ͸ݕূࡁΈ 3. ࣮ࡍʹύεΛߏங͢Δɹ 23

Slide 24

Slide 24 text

3. ࣮ࡍʹύεΛߏங͢Δɹ 24

Slide 25

Slide 25 text

25 ͬͯ͜ͱͰ׬੒!

Slide 26

Slide 26 text

- νέοτͬͯݴΘΕͨΒΠϕϯτνέοτͰ͢ΑͶʙ - ͱ͍͏͜ͱͰɺSupabase(Database)+Stripe(ܾࡁ)+Flutter Web(ϑϩϯτ Τϯυ)Ͱνέοτ؅ཧγεςϜΛ࡞ͬͯΈ·ͨ͠ ticket.yumnumm.dev github.com/YumNumm/ticket-system 4. [͓·͚] ಈతੜ੒͢ΔΑ͏ʹͯ͠Έ·ͨ͠ 26

Slide 27

Slide 27 text

- νέοτͬͯݴΘΕͨΒΠϕϯτνέοτͰ͢ΑͶʙ - ͱ͍͏͜ͱͰɺSupabase(Database)+Stripe(ܾࡁ)+Flutter Web(ϑϩϯτ Τϯυ)Ͱνέοτ؅ཧγεςϜΛ࡞ͬͯΈ·ͨ͠ ticket.yumnumm.dev github.com/YumNumm/ticket-system - νέοτੜ੒͸Cloudflare Workers(αʔόϨεJS࣮ߦ؀ڥ)Ͱ࣮ߦ - TypeScriptͰهड़ - ແྉͰࢼͤΔͷͰؾ͕޲͍ͨΒݟͯΈ͍ͯͩ͘͞ 4. [͓·͚] ಈతੜ੒͢ΔΑ͏ʹͯ͠Έ·ͨ͠ 27

Slide 28

Slide 28 text

- νέοτͬͯݴΘΕͨΒΠϕϯτνέοτͰ͢ΑͶʙ - ͱ͍͏͜ͱͰɺSupabase(Database)+Stripe(ܾࡁ)+Flutter Web(ϑϩϯτ Τϯυ)Ͱνέοτ؅ཧγεςϜΛ࡞ͬͯΈ·ͨ͠ ticket.yumnumm.dev github.com/YumNumm/ticket-system - νέοτੜ੒͸Cloudflare Workers(αʔόϨεJS࣮ߦ؀ڥ)Ͱ࣮ߦ - TypeScriptͰهड़ - αϯϓϧύε͸ https://api.ticket.yumnumm.dev/sample/wallet ͔Β DLͰ͖·͢! 4. [͓·͚] ಈతੜ੒͢ΔΑ͏ʹͯ͠Έ·ͨ͠ 28 ͍͔ͭ͘᠘͕͋Δ΋ͷͷɺTSͷܕʹैͬͯຒΊ ͍͚ͯͩ͘ͳͷͰɺׂͱָʹߏஙͰ͖·͢

Slide 29

Slide 29 text

- Apple WalletͰͷύεੜ੒͸ׂͱָʹͰ͖Δ - ΞϓϦ΍αʔϏεʹ૊ΈࠐΉ͚ͩͰ͸ͳ͘ɺࣗ෼༻ʹύεΛ૊Ήͷ΋ΞϦ(Ex. ϙ ΠϯτΧʔυɾֶੜূ) - ن໿΍ϧʔϧʹ͸ؾΛ͚ͭͯ - ಈతʹੜ੒͢Δ͜ͱ΋Մೳ - ຊLTͰ͸ѻ͍·ͤΜͰ͕ͨ͠ɺApple Push Notification Service(APNs)Λ ར༻ͯ͠ αʔό͔Βಈతʹ಺༰Λॻ͖׵͑Δ͜ͱ΋Ͱ͖·͢ - ௨஌ΛૹͬͨΓ΋Ͱ͖Δ 5. ·ͱΊ 29

Slide 30

Slide 30 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠! 30 Follow me on Twitter: @YumNumm νέοτ؅ཧγεςϜ Twitter