Tweet
Tweet

Slide 1

Slide 1 text

React NativeͰখઆΛಡΈ·͠ΐ͏ʂ

Slide 2

Slide 2 text

όοΫάϥ΢ϯυ ಡΉ ௌ͘

Slide 3

Slide 3 text

e-book ΦʔσΟΦϒοΫ ͜ͷझຯͷ໰୊ ಉظ͞Ε·ͤΜʂ💦

Slide 4

Slide 4 text

൥ Θ͍͠ • ࣗಈతʹಉظ͢ΔιϦϡʔγϣϯ͕ཉ͍͠ɻ • React NativeͰղܾͰ͖ΔͰ͠ΐ͏͔⁈ ΘͣΒ

Slide 5

Slide 5 text

໨త ϥΠϒϥϦʔɾεΫϦʔϯ ϊϕϧɾεΫϦʔϯ ᶃ ΦʔσΟΦ ɹ ϓϨΠϠʔ ᶄ ࣙॻ ᶅ ebook ɹ Ϧʔμʔ ଞ ଞ ଞ

Slide 6

Slide 6 text

֓ཁ ᶃ ΦʔσΟΦɾϓϨΠϠʔ • ಉظతͳExpo Modules APIͰHTMLAudioElementΛਅࣅ͢ΔViewΛ࡞ͬͯΈ·ͨ͠ɻ 🥹 👍 ☝ • Expo-AV͸ඇಉظͰ͔͢ΒɺHTMLAudioElementʹൺ΂ͯɺ࢖͍ͮΒ͍Ͱ͢ɻ

Slide 7

Slide 7 text

໋ྩܕAPIͷ໰୊ ᶃ ΦʔσΟΦɾϓϨΠϠʔ Module ✅ ✅ • Viewͷ໋ྩܕAPI͸ඇಉظతͳ΋ͷʢAsyncFunctionʣ͔͠ରԠ͠·ͤΜɿ • PropsΛ࣮ݱ͢Δͷ͸໰୊ͳ͠Ͱ͕ͨ͠…ɻ • …ಉظతͳ໋ྩܕAPI͸ผͷ࿩Ͱ͢ɻ छྨ AsyncFunctionʢඇಉظతʣ Functionʢಉظతʣ View ✅ ❌

Slide 8

Slide 8 text

໋ྩܕAPIͷճආࡦ ᶃ ΦʔσΟΦɾϓϨΠϠʔ • Viewͷؔ਺Λݺͼग़͢͜ͱΛModuleʹཔΈ·͢ɻ ID View 1 A 2 B … … Module func play(id: Int) • Module͸ViewͷϨδετϦʔΛҡ࣋͠·͢ɻ

Slide 9

Slide 9 text

Expo-AV ➡ Onkyou ᶃ ΦʔσΟΦɾϓϨΠϠʔ ݁Ռ

Slide 10

Slide 10 text

֓ཁ • react-native-quick-sqliteͰͰ͖ ͍ͯ·͢ɻ • σʔλ͸JMDict͔Βདྷ·͢ɻ • ܗଶૉղੳث͸MeCabʹ͠·͠ ͨɻ·ͨɺExpo Moduleͱͯ͠࡞ Γ·ͨ͠ɻ ᶄ ࣙॻ ͚͍͍͔͍͖͖ͨͦͤ

Slide 11

Slide 11 text

֓ཁ • ͨͩͷWebViewͰ͢ɻWebViewΛ࢖͏ ͱɺ΢ΣϒͷྗΛआΓΒΕ·͢ɻ࣮͸ɺ ebook͸HTMLͷ΋ͷͷׂʹɺࣗવͳ νϣΠεͰ͢ɻ • IntersectionObserverͰಡΉϥΠϯ͕෼ ͔ͬͯɺΦʔσΟΦͷඵ਺ͱಉظͰ͖· ͢ɻ • ςΩετͷλΠϜελϯϓ͸Ϣʔβʔ͕ ઌʹspeech-to-textπʔϧͰੜ੒͠ͳ͘ ͪΌ͍͚ͳ͍΋ͷͰ͢ɻ ᶅ ebook Ϧʔμʔ

Slide 12

Slide 12 text

Demo

Slide 13

Slide 13 text

• Expo ModulesͰΑΓ͍͍APIΛ ࡞Ε·͢ɻ • WebView͸ԿͰ΋Ͱ͖Δ͔Βɺ ԕྀ͠ͳͯ͘࢖͍͍ͬͯͱࢥ͍ ·͢ɻ • React NativeͰເ͕׎͑·͢ 🤩 ݁࿦

Slide 14

Slide 14 text

ϓϩϑΟʔϧ @LinguaBrowse @shirakaba ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ