Apple Walletでパスを作るお話

Transcript

1. 2024.07.12 Apple WalletͰύεΛ࡞Δ͓࿩ YUMEMI Inc. Flutter Engineer - Ryotaro Onoue 1 Money Forward×YUMEMI.grow ࣗশएखϞόΠϧΤϯδχΞLTձ
2. 0. ࣗݾ঺հ ɾגࣜձࣾΏΊΈ FlutterΤϯδχΞ 2023೥4݄ʙ ɾFlutterKaigi 2023 (ڞಉ)ొஃ&ελοϑ ɾDart BFF(Backend for Frontend)ͷ࿩Λ͠·ͨ͠ ɾFlutterKaigi 2024 WebαΠτνʔϜ&σʔλνʔϜ ɾTwitter͸ @YumNumm(΋͙΋͙) Ͱ΍͍ͬͯ·͢ ɾࠓ೥9݄Ͱ20ࡀʹͳΓ·͢ ࠓ͸19Ͱ͢ 2
4. ࠓ೔ͷτϐοΫ ❌ FlutterΤϯδχΞͰ͕͢ɺFlutterͷ࿩͸͠·ͤΜ ࠓ೔͸ɺAppleϓϥοτϑΥʔϜʹدͬͨ࿩Λ͠·͢ (ݩʑAndroidʹ΋৮Δ༧ఆͩͬͨͷͰ͕͢ɺ͕࣌ؒ͋·ΓऔΕͣ...🙏) 4
5. ࠓ೔ͷτϐοΫ ❌ FlutterΤϯδχΞͰ͕͢ɺFlutterͷ࿩͸͠·ͤΜ ࠓ೔͸ɺAndroidͱiOS ͦΕͧΕϓϥοτϑΥʔϜʹدͬͨ࿩Λ͠Α͏ͱࢥ͍·͢ 5
6. ࠓ೔ͷτϐοΫ 6 ΢ΥϨοτ App Έͳ͞Μ࢖͍ͬͯ·͔͢?
7. ͳΜͰ͜ͷ࿩? ɾ@ۙॴͷΠτʔϤʔΧυʔ ɾηϧϑϨδͰ঎඼ొ࿥Λͨ͠ޙͷϙΠϯτΧʔυొ࿥ʹͯ ɾΠτʔϤʔΧυʔͷWiFiʹ઀ଓ͞Ε͍ͯͯ ΞϓϦ͕ىಈ͠ͳ͍ ɾϞόΠϧσʔλ༰ྔ͕ऴΘ͍ͬͯͯ ىಈʹ10ඵ͘Β͍଴ͨ͞ΕΔ ɾ଴ͭͷ΋ΠϠ͕ͩ ϙΠϯτ͕෇͔ͳ͍ͷ΋൵͍͠ ɾ݁Ռ: ڏແͷ͕࣌ؒྲྀΕΔ 7
8. ͳΜͰ͜ͷ࿩? ɾۙॴͷΠτʔϤʔΧυʔʹͯ ɾηϧϑϨδͰ঎඼ొ࿥Λͨ͠ޙͷϙΠϯτΧʔυొ࿥ʹͯ ɾ΅͘ʮ͋ͬɺϙΠϯτΧʔυొ࿥͠ͳ͍ͱ... εϚϗͷΞϓϦͬͱʯ ɾiPhoneʮΠτʔϤʔΧυʔͷWiFiܨ͕͍ͬͯΔ͔Βೝূͯ͠Ͷʯ(ΩϟϓςΟϒWiFi) ɾ΅͘ʮ͍΍ɺࠓ͸͍ΒΜʯ ɾΞϓϦʮ(10ඵ΄Ͳ଴ػ)ωοτ઀ଓͰ͖·ͤΜʯ ɾ΅͘ʮWiFiΦϑʹͯ͠ΞϓϦ࠶ىಈ...ʯ ɾΞϓϦʮ(5ඵ΄Ͳ଴ػ)͸͍ɺϙΠϯτΧʔυͷόʔίʔυʯ ɾ΅͘ʮ΍ͬͱܾࡁͷͱ͜Ζ·ͰདྷͨΘʯ 8 ɾSuicaܾࡁɾΫϨδοτΧʔυܾࡁͰ͢Β Apple Watch୯ମͰࡁ·ͤΒΕΔ͜ͷ࣌ ୅ʹͲ͏ͯ͠ʮΞϓϦΛ։͍ͯ଴ͭʯͱ͍͏ΊΜͲ͍͘͞ίτΛ͠ͳ͍ͱ͍͚ͳ͍ͷ ͔? ɾ͜͜͸Ұͭ ٕज़Ͱղܾ͍ͨ͠ɻ -> ύεΛ࡞ͬͨΔ!
9. 2. Apple Walletͷ࢓૊Έ 9
10. 1. ύεͷσʔλΛ༻ҙ͢Δ - pass.json: ύεʹදࣔ͢Δจࣈྻ΍ϝλσʔλΛ֨ೲ - ֤छը૾ϑΝΠϧ: ϩΰ΍ΞΠίϯͳͲ - (optional) ϩʔΧϦθʔγϣϯ৘ใ 2. Apple Walletͷ࢓૊Έ 10
11. 1. ύεͷσʔλΛ༻ҙ͢Δ - pass.json: ύεʹදࣔ͢Δจࣈྻ΍ϝλσʔλΛ֨ೲ - ֤छը૾ϑΝΠϧ: ϩΰ΍ΞΠίϯͳͲ - (optional) ϩʔΧϦθʔγϣϯ৘ใ 2. ύεͷσʔλͦΕͧΕʹରͯ͠ॺ໊Λ͢Δ - ͍͔ͭ͘ͷσʔλΛ༻ҙͯ͠ॺ໊ 3. σʔλͱॺ໊ΛؚΊͯZIPѹॖ 4. ֦ுࢠΛ.pkpassʹม͑ͯ഑෍ - Webܦ༝Ͱ΋ϝʔϧͰ΋AirDropͰ΋ʙ 2. Apple Walletͷ࢓૊Έ 11
12. - Apple WalletΛܦ༝ͯ͠ύεΛ഑৴ɾ഑෍͢ΔͨΊʹ͸ॺ໊͕ඞཁ - ύε͕࡞੒+ॺ໊͞Ε͔ͯΒɺѱҙͷ͋ΔϢʔβʹΑͬͯվม͞Ε͍ͯͳ͍͜ͱΛ ݕূͰ͖ΔΑ͏ʹͳΔ - Pass Type IdentifierͱTeam IDΛ༻ҙ͢Δ - Identifier(ࣝผࢠ)Λొ࿥ͨ͠ΒɺCertificate(ূ໌ॻ)ΛDL͢Δ - Identifier͸ pass. ͔Β࢝·Δ೚ҙͷٯDNSจࣈྻ 2-0. ֤छূ໌ॻͷ༻ҙ 12
13. - ύεͷσʔλ͸ pass.json ʹهड़͢Δ - description, formatVersion: “1”, organizationName(Team ID), passTypeIdentifier, serialNumber ͸ඞਢ - barcodes΍backgroundColor, associatedStoreIdentifiers, locations΋هड़Ͱ͖Δ - associatedStoreIdentifiers: ύεʹඥͮ͘ΞϓϦ ͷAppStoreࣝผࢠ഑ྻɻύε͔ΒΞϓϦΛىಈͰ͖Δ - locations: ύεʹඥͮ͘Ң౓ܦ౓഑ྻɻͦͷҐஔʹߦ͘ ͱɺϩοΫը໘ʹύεͷީิ͕ग़ͯ͘Δ - ৄࡉͳύεͷจࣈྻ͸Pass Type͝ͱʹهड़(࣍ϖʔδ) 2-1. ύεͷσʔλΛ༻ҙ͢Δ 13
14. - ύεʹ͸େ͖͘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 ΑΓҾ༻
15. - ύεʹ͸େ͖͘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 ΑΓύεσʔλΛҾ༻
16. - ֤छը૾ͷ༻ҙ - എܠը૾΍ΞΠίϯɾϩΰͳͲΛ഑ஔ Ͱ͖Δ - ύεͷλΠϓʹԠͯ͡දࣔͰ͖Δը૾ ͕ҟͳΔͷͰɺ֬ೝ͢΂͠ 2-1. ύεͷσʔλΛ༻ҙ͢Δ 16
17. - ॺ໊ɾѹॖ͸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Մೳ
18. - Ͱ͸ɺsignpassίϚϯυ͸தͰԿΛ΍͍ͬͯΔͷ͔? - ͍͔ͭ͘ͷॺ໊νΣʔϯΛݩʹɺύεσʔλ͕ਖ਼͍͔͠ݕূͰ͖ΔΑ͏ʹ͍ͯ͠Δ 1. pass.json΍ը૾ϑΝΠϧͷSHA-1ϋογϡ஋Λܭࢉͯ͠manifests.jsonʹ֨ ೲ͢Δ 2-2. ύεͷσʔλΛॺ໊͢Δ 18
19. - Ͱ͸ɺsignpassίϚϯυ͸தͰԿΛ΍͍ͬͯΔͷ͔? - ͍͔ͭ͘ͷॺ໊νΣʔϯΛݩʹɺύεσʔλ͕ਖ਼͍͔͠ݕূͰ͖ΔΑ͏ʹ͍ͯ͠Δ 1. pass.json΍ը૾ϑΝΠϧͷSHA-1ϋογϡ஋Λܭࢉͯ͠manifests.jsonʹ֨ ೲ͢Δ 2.ʮ2-0. ֤छূ໌ॻͷ༻ҙʯͰ༻ҙͨ͠Certificates+WWDR(World Wide Developer Relations தؒূ໌ॻ)Ͱ manifests.json Λެ։伴ॺ໊Λൃߦ - PKCS#7(҉߸Խσʔλ΍ॺ໊ΛؚΉϝοηʔδަ׵ܗࣜنఆ)෼཭ॺ໊Λ࡞੒͢Δ 2-2. ύεͷσʔλΛॺ໊͢Δ 19
20. - Ͱ͸ɺsignpassίϚϯυ͸தͰԿΛ΍͍ͬͯΔͷ͔? - ͍͔ͭ͘ͷॺ໊νΣʔϯΛݩʹɺύεσʔλ͕ਖ਼͍͔͠ݕূͰ͖ΔΑ͏ʹ͍ͯ͠Δ 1. pass.json΍ը૾ϑΝΠϧͷSHA-1ϋογϡ஋Λܭࢉͯ͠manifests.jsonʹ֨ ೲ͢Δ 2.ʮ2-0. ֤छূ໌ॻͷ༻ҙʯͰ༻ҙͨ͠Certificates+WWDR(World Wide Developer Relations தؒূ໌ॻ)Ͱ manifests.json Λެ։伴ॺ໊Λൃߦ - PKCS#7(҉߸Խσʔλ΍ॺ໊ΛؚΉϝοηʔδަ׵ܗࣜنఆ)෼཭ॺ໊Λ࡞੒͢Δ 2-2. ύεͷσʔλΛॺ໊͢Δ 20
21. - Ͱ͸ɺ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
22. 3. ࣮ࡍʹύεΛߏங͢Δ 22
23. - ࠓճ͸ΠτʔϤʔΧυʔͷϙΠϯτΧʔυΛApple WalletʹೖΕ͍ͨ - ͪͳΈʹɺར༻ن໿͸֬ೝࡁΈ(ϙΠϯτΧʔυͷόʔίʔυෳ੡ʹؔ͢Δهड़͸ͳ͍) - όʔίʔυ͸࣌ؒʹΑͬͯมԽ͠ͳ͍ - े෼࣮ݱՄೳͳ͜ͱ͸ݕূࡁΈ 3. ࣮ࡍʹύεΛߏங͢Δɹ 23
24. 3. ࣮ࡍʹύεΛߏங͢Δɹ 24
25. 25 ͬͯ͜ͱͰ׬੒!
26. - νέοτͬͯݴΘΕͨΒΠϕϯτνέοτͰ͢ΑͶʙ - ͱ͍͏͜ͱͰɺSupabase(Database)+Stripe(ܾࡁ)+Flutter Web(ϑϩϯτ Τϯυ)Ͱνέοτ؅ཧγεςϜΛ࡞ͬͯΈ·ͨ͠ ticket.yumnumm.dev github.com/YumNumm/ticket-system 4. [͓·͚] ಈతੜ੒͢ΔΑ͏ʹͯ͠Έ·ͨ͠ 26
27. - νέοτͬͯݴΘΕͨΒΠϕϯτνέοτͰ͢ΑͶʙ - ͱ͍͏͜ͱͰɺSupabase(Database)+Stripe(ܾࡁ)+Flutter Web(ϑϩϯτ Τϯυ)Ͱνέοτ؅ཧγεςϜΛ࡞ͬͯΈ·ͨ͠ ticket.yumnumm.dev github.com/YumNumm/ticket-system - νέοτੜ੒͸Cloudflare Workers(αʔόϨεJS࣮ߦ؀ڥ)Ͱ࣮ߦ - TypeScriptͰهड़ - ແྉͰࢼͤΔͷͰؾ͕޲͍ͨΒݟͯΈ͍ͯͩ͘͞ 4. [͓·͚] ಈతੜ੒͢ΔΑ͏ʹͯ͠Έ·ͨ͠ 27
28. - νέοτͬͯݴΘΕͨΒΠϕϯτνέοτͰ͢ΑͶʙ - ͱ͍͏͜ͱͰɺ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ͷܕʹैͬͯຒΊ ͍͚ͯͩ͘ͳͷͰɺׂͱָʹߏஙͰ͖·͢
29. - Apple WalletͰͷύεੜ੒͸ׂͱָʹͰ͖Δ - ΞϓϦ΍αʔϏεʹ૊ΈࠐΉ͚ͩͰ͸ͳ͘ɺࣗ෼༻ʹύεΛ૊Ήͷ΋ΞϦ(Ex. ϙ ΠϯτΧʔυɾֶੜূ) - ن໿΍ϧʔϧʹ͸ؾΛ͚ͭͯ - ಈతʹੜ੒͢Δ͜ͱ΋Մೳ - ຊLTͰ͸ѻ͍·ͤΜͰ͕ͨ͠ɺApple Push Notification Service(APNs)Λ ར༻ͯ͠ αʔό͔Βಈతʹ಺༰Λॻ͖׵͑Δ͜ͱ΋Ͱ͖·͢ - ௨஌ΛૹͬͨΓ΋Ͱ͖Δ 5. ·ͱΊ 29
30. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠! 30 Follow me on Twitter: @YumNumm νέοτ؅ཧγεςϜ Twitter