Slide 1

Slide 1 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. Japan NFC Reader Ͱͷ UI σβΠϯ @treastrain | @JapanNFCReader NEW DEBUG!! #2.0 ~ຐԦΛ౗ͨ͢Ίʹҟੈքసੜ͠·͕ͨ͠όά͕ൃੜͨ͠ͷͰमਖ਼͠·͢~ @ CASPUR August 1, 2020

Slide 2

Slide 2 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. 2 ࣗݾ঺հ @treastrain / Tanaka Ryoga https://treastrain.jp ߴઐଔ → େֶֶ෦4೥ → 21৽ଔ༧ఆ Swift (iOS, watchOS), Core NFC 2019೥9݄22೔ iOSɾwatchOS App ʮJapan NFC ReaderʯϦϦʔε

Slide 3

Slide 3 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. Japan NFC Reader iOS 13.0 Ҏ߱ͷ iPhone Ͱ ిࢠϚωʔͷ࢒ߴɾར༻ཤྺͷಡΈऔΓ 2019೥9݄ ഑৴։࢝ 2020೥7݄ 235K (Ϣχοτ਺) https://japannfcreader.tret.jp/ Twitter @JapanNFCReader 3 iOS App

Slide 4

Slide 4 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. treastrain/TRETJapanNFCReader https://github.com/treastrain/TRETJapanNFCReader Japan NFC Reader ͷίΞ෦෼Λ OSS Խͨ͠ϥΠϒϥϦ MIT Licence Initial commit: 2019೥6݄19೔ɹ289 Stars 2020೥8݄1೔࣌఺ v2.0-develop ʹͯϑϧεΫϥονத… 4 OSS Library

Slide 5

Slide 5 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ීஈ iPhone ΞϓϦΛ࢖͍ͬͯͯࢥ͏͜ͱ த్൒୺ʹͳΔ͘Β͍ͳΒඪ४ UI Λ࢖͑ νϡʔτϦΞϧͳ͠Ͱ࢖͑ΔΑ͏ʹ͠Ζ ϚδοΫφϯόʔΛ࢖͏ͳ WebView ΍Ίͯ͘Ε ߥ͍ը૾Λ࢖͏ͳ ঢ়ଶΛલճͱҡ࣋͠Ζ μʔΫϞʔυରԠ͠Ζ ͜ͷػೳΛಠࣗͰ࣮૷͢Δͳ Dynamic Type Λ࢖͑

Slide 6

Slide 6 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. Japan NFC Reader Ͱͷ UI σβΠϯ ʢUI : Ϣʔβʔ͕ը໘্Ͱೝࣝɾૢ࡞͢ΔϞϊɺͦΕͱͷ઀ଓ఺ʣ

Slide 7

Slide 7 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ૝ఆϢʔβʔ͸ iPhone Λ࢖͏࿝एஉঁ ● ΩϟογϡϨεੜ׆ͷҰ෦Λߏ੒ ● ର৅೥ྸʹ੍ݶ͕ͳ͍ʢ4+ʣ ʢϦϦʔε։࢝ Ver 0.1 ͔Βݱߦ Ver 1.0.6 ࣌఺ͰɺϢʔβʔͷ೥ྸ૚΍ੑผͷ৘ใ͸ऩू͍ͯ͠ͳ͍ʣ

Slide 8

Slide 8 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ ● ○ ● ●

Slide 9

Slide 9 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ ● iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ ○ iPhone Ϣʔβʔ͕࠷΋਎ۙͳσβΠϯ͸ iOS ಺ଂΞϓϦ ● ●

Slide 10

Slide 10 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. A consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. Consistency - Design Principles Themes - iOS - Human Interface Guidelines - Apple Developer

Slide 11

Slide 11 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ

Slide 12

Slide 12 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ

Slide 13

Slide 13 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ ● iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ ○ iPhone Ϣʔβʔ͕࠷΋਎ۙͳσβΠϯ͸ iOS ಺ଂΞϓϦ ● iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ ●

Slide 14

Slide 14 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. σβΠϯͷઌੜ - Apple Wallet (& ઃఆ) ‏ ೔ৗతʹΈΔ ը໘ (Wallet)

Slide 15

Slide 15 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. σβΠϯͷઌੜ - Apple Wallet (& ઃఆ) ͋·Γ ݟͨ͜ͱ͕ ͳ͍ը໘ ➡ (ઃఆ)

Slide 16

Slide 16 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ ● ʮ೔ৗతʹΈΔը໘ʯʹ͸ ʮ͋·Γݟͨ͜ͱ͕ͳ͍ը໘ʯͱ ൺ΂ͯϨΠΞ΢τσβΠϯʹগ͠ ҧ͍Λ࣋ͨͤΔ ● Japan NFC Reader ͷը໘Λݟͤͳ͕Βɺ Ӻһ͞ΜʹϢʔβʔ͕໰͍߹ΘͤΔ͜ͱͷͳ͍Α͏ or ໰͍߹Θͤͯ΋Ӻһ͞Μ͕ʮ͜Ε͸ҧ͏Αʯͱ ՄೳͳݶΓ൑அͰ͖ΔΑ͏ʹ

Slide 17

Slide 17 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ ● ʮཤྺ(ΧʔυҰཡ)ʯͰ Apple Wallet ͱಉ͡Α͏ʹ͢Δ σβΠϯҊ΋͋ͬͨ ● ͜Ε͸ʮApple Walletʯͳͷ͔ʁ ʮJapan NFC Readerʯͳͷ͔ʁ ͕ඇৗʹΘ͔ΓͮΒ͘ͳΔ ɹ‎ ෆ࠾༻

Slide 18

Slide 18 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ ● iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ ○ iPhone Ϣʔβʔ͕࠷΋਎ۙͳσβΠϯ͸ iOS ಺ଂΞϓϦ ● iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ ● ΞΫηγϏϦςΟରԠʢVoiceOverɺDynamic Typeɺ৭֮ಛੑʣ

Slide 19

Slide 19 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ΞΫηγϏϦςΟରԠ ● VoiceOver ○ දࣔ಺༰ʢϘλϯɺ࢒ߴɺར༻ཤྺͳͲʣͷಡΈ্͛ ● Dynamic Type ○ จࣈΛଠ͘͢Δɺେ͖ͳจࣈ ● ͦͷଞ ○ ϘλϯͷܗɺΦϯ/Φϑϥϕϧɺ ಁ໌౓ΛԼ͛ΔɺίϯτϥετΛ্͛Δ ● ৭֮ಛੑ

Slide 20

Slide 20 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ΞΫηγϏϦςΟରԠ ● Dynamic Type ○ จࣈΛଠ͘͢Δɺେ͖ͳจࣈ ● Ϙλϯͷܗ ● Φϯ/Φϑϥϕϧ ● ಁ໌౓ΛԼ͛Δ ● ίϯτϥετΛ্͛Δ

Slide 21

Slide 21 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ରԠͯ͠Α͔ͬͨ 21 ෎தࢹ֮ো֐ऀ෱ࢱڠձ˒ϥδΦ൪૊ʰϒϥΠϯυɹφϏʱ์ૹதʂ @fuchu_shikyou Japan NFC Reader ిࢠϚωʔΧʔυΛiPhoneͰಡΈऔΓ japannfcreader.tret.jp ͪ͜Β͸εΩϟϯͷϘλϯ΋ϘΠεΦʔόʔͰʮεΩϟϯʯͱಡΈ্͛·͢ɻ ࢒ߴ͸΋ͪΖΜɺར༻ཤྺ΋͔ͬ͠ΓಡΈ্͛͠·͢ɻ εΠΧ΍ύε΋ͷ࢒ߴ֬ೝݟ͑ͳ͍ࣗ෼ʹ΋ศརʹͳΓ·͢(^^) QT: https://twitter.com/yasucom/status/1174959344900685824 ޕޙ1:54ɾ2019೥9݄28೔ɾεΠʔτπΠʔτ

Slide 22

Slide 22 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ ● iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ ○ iPhone Ϣʔβʔ͕࠷΋਎ۙͳσβΠϯ͸ iOS ಺ଂΞϓϦ ● iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ ● ΞΫηγϏϦςΟରԠʢVoiceOverɺDynamic Typeɺ৭֮ಛੑʣ ʮStoryboard ʹΦϒδΣΫτΛద౰ʹஔ͚ͩ͘ʯ͸΍ΊΖ த్൒୺ʹͳΔ͘Β͍ͳΒඪ४ͷ UI Λ࢖͑

Slide 23

Slide 23 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ࠷΋ॏ͖Λஔ͘ػೳ͸આ໌ͳ͠Ͱ࢖͑ΔΑ͏ʹ͠Ζ ● Japan NFC Reader Ͱ࠷΋ॏཁͳػೳ͸ʮΧʔυͷεΩϟϯʯ ● ࢖͍͍ͨͱ͖ʹਝ଎ʹ࢒ߴΛ֬ೝͰ͖Δ͜ͱ͕ॏཁ

Slide 24

Slide 24 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ࠷΋ॏ͖Λஔ͘ػೳ͸આ໌ͳ͠Ͱ࢖͑ΔΑ͏ʹ͠Ζ ● Japan NFC Reader Ͱ ࠷΋ॏཁͳػೳ͸ ʮΧʔυͷεΩϟϯʯ ● Ұ൪ॳΊʹදࣔ͞ΕΔը໘ ͔ͭதԝʹʮεΩϟϯʯ ϘλϯΛ഑ஔ ● ͜ΕͰ΋࢖͍ํ͕Θ͔Βͳ͍ࣄྫ͋Γ

Slide 25

Slide 25 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. 1ඵͰ΋ૣ͘࢒ߴΛݟ͍ͨ ● iOS ͷ NFC ͸ಡΈऔΓ࣌ʹ γεςϜUI͕ը໘Լ൒෼ΛຒΊΔ ● ʮ࢒ߴʯͷදࣔΛը໘্൒෼ʹ ͢Δ͜ͱͰγεςϜUIͷදࣔʹ ߅͏

Slide 26

Slide 26 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ঢ়ଶΛલճͱҡ࣋͠Ζ ● ҡ࣋͢΂͖ঢ়ଶ͕ͲΕͳͷ͔ΛݟۃΊͯอଘ͢Δ ● ʮཤྺʯͷʮελΠϧʯ ● Χʔυৄࡉը໘ͷʮར༻ཤྺʯͱʮ৘ใʯ

Slide 27

Slide 27 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.

Slide 28

Slide 28 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ͦͷଞ ● μʔΫϞʔυରԠ͠Ζɹಛʹ৽ن։ൃͳΒઈରʹରԠͯ͠ ● ࣗ෼ͰϚδοΫφϯόʔʢఆ਺ʣΛఆٛ͢Δͳ ○ γεςϜͰ༻ҙ͞Ε͍ͯΔ΋ͷΛ࢖͑ ○ ͦ΋ͦ΋ఆ਺Λ࢖͏ͳɹൺΛ࢖͑ ● ߥ͍ը૾Λ࢖͏ͳ ○ ϕΫλʔը૾Λ࢖͑ɹͦ͏Ͱͳ͚Ε͹ dpi Λҙࣝͯ͠ ○ Xcode 12 Ͱ͸ PDF ʹՃ͑ͯ SVG ͕࢖͑ΔΑ͏ʹͳΓ·ͨ͠ ○ iOS & iPadOS 13 Ҏ߱ͷ Deployment Target Ͱ࢖͑·͢

Slide 29

Slide 29 text

Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ऴΘΓʹ ● ݸਓ։ൃ͔ͩΒ ͜Μͳ͜ͱݴ͑ΔΜͩΖ͏ͳ͊… ● ຊݟղ͸ݸਓͷҙݟͰ͋Γɺ ಛఆͷਓ෺ɺஂମɺϓϩμΫτ౳ʹରͯ͠ ड़΂͍ͯΔ΋ͷͰ͸͋Γ·ͤΜ