React Nativeで小説を読みましょう！

My talk for React Native Japan #14, showing how I built this novel reading app that I shared on Twitter.

Transcript

1. React NativeͰখઆΛಡΈ·͠ΐ͏ʂ
2. όοΫάϥ΢ϯυ ಡΉ ௌ͘
3. e-book ΦʔσΟΦϒοΫ ͜ͷझຯͷ໰୊ ಉظ͞Ε·ͤΜʂ💦
4. ൥ Θ͍͠ • ࣗಈతʹಉظ͢ΔιϦϡʔγϣϯ͕ཉ͍͠ɻ • React NativeͰղܾͰ͖ΔͰ͠ΐ͏͔⁈ ΘͣΒ
5. ໨త ϥΠϒϥϦʔɾεΫϦʔϯ ϊϕϧɾεΫϦʔϯ ᶃ ΦʔσΟΦ ɹ ϓϨΠϠʔ ᶄ ࣙॻ ᶅ ebook ɹ Ϧʔμʔ ଞ ଞ ଞ
6. ֓ཁ ᶃ ΦʔσΟΦɾϓϨΠϠʔ • ಉظతͳExpo Modules APIͰHTMLAudioElementΛਅࣅ͢ΔViewΛ࡞ͬͯΈ·ͨ͠ɻ 🥹 👍 ☝ • Expo-AV͸ඇಉظͰ͔͢ΒɺHTMLAudioElementʹൺ΂ͯɺ࢖͍ͮΒ͍Ͱ͢ɻ
7. ໋ྩܕAPIͷ໰୊ ᶃ ΦʔσΟΦɾϓϨΠϠʔ Module ✅ ✅ • Viewͷ໋ྩܕAPI͸ඇಉظతͳ΋ͷʢAsyncFunctionʣ͔͠ରԠ͠·ͤΜɿ • PropsΛ࣮ݱ͢Δͷ͸໰୊ͳ͠Ͱ͕ͨ͠…ɻ • …ಉظతͳ໋ྩܕAPI͸ผͷ࿩Ͱ͢ɻ छྨ AsyncFunctionʢඇಉظతʣ Functionʢಉظతʣ View ✅ ❌
8. ໋ྩܕAPIͷճආࡦ ᶃ ΦʔσΟΦɾϓϨΠϠʔ • Viewͷؔ਺Λݺͼग़͢͜ͱΛModuleʹཔΈ·͢ɻ ID View 1 A 2 B … … Module func play(id: Int) • Module͸ViewͷϨδετϦʔΛҡ࣋͠·͢ɻ
9. Expo-AV ➡ Onkyou ᶃ ΦʔσΟΦɾϓϨΠϠʔ ݁Ռ
10. ֓ཁ • react-native-quick-sqliteͰͰ͖ ͍ͯ·͢ɻ • σʔλ͸JMDict͔Βདྷ·͢ɻ • ܗଶૉղੳث͸MeCabʹ͠·͠ ͨɻ·ͨɺExpo Moduleͱͯ͠࡞ Γ·ͨ͠ɻ ᶄ ࣙॻ ͚͍
    ͍ͨ
    ͦ
    ͔͍
    ͖ͤ
    ͖
11. ֓ཁ • ͨͩͷWebViewͰ͢ɻWebViewΛ࢖͏ ͱɺ΢ΣϒͷྗΛआΓΒΕ·͢ɻ࣮͸ɺ ebook͸HTMLͷ΋ͷͷׂʹɺࣗવͳ νϣΠεͰ͢ɻ • IntersectionObserverͰಡΉϥΠϯ͕෼ ͔ͬͯɺΦʔσΟΦͷඵ਺ͱಉظͰ͖· ͢ɻ • ςΩετͷλΠϜελϯϓ͸Ϣʔβʔ͕ ઌʹspeech-to-textπʔϧͰੜ੒͠ͳ͘ ͪΌ͍͚ͳ͍΋ͷͰ͢ɻ ᶅ ebook Ϧʔμʔ
12. Demo
13. • Expo ModulesͰΑΓ͍͍APIΛ ࡞Ε·͢ɻ • WebView͸ԿͰ΋Ͱ͖Δ͔Βɺ ԕྀ͠ͳͯ͘࢖͍͍ͬͯͱࢥ͍ ·͢ɻ • React NativeͰເ͕׎͑·͢ 🤩 ݁࿦
14. ϓϩϑΟʔϧ @LinguaBrowse @shirakaba ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ