ReactNative + microCMS の設計にすごく悩んだ話

Transcript

1. ReactNative + microCMS の設計にすごく悩んだ話 株式会社BeatFit CTO 飯塚 浩也
2. 医師 循環器内科、総合診療医と して、⼤学 - 地⽅の病院を 8 年間勤務。 IT は⼤の苦⼿。 パソコン教室のアビバに 通っていた。 エンジニア 株式会社BeatFit にエンジニ アとして⼊社。 [ ⽇課] Codewars, LeetCode Hack The Box Type Challenge
3. 今⽇のお話 Headless CMS の技術選定に⾄るまでの経緯 悩んだ設計の話 CMS との差分を埋める React Native ライブラリ
4. みんなの広場
6. 弊社運営チームは CMS から投稿したい でも、CMS 周りを コーディング したくない 期限まで あと3 ヶ⽉しかない
7. そうだ microCMS でいこう
8. 運⽤⾯ ・⽇本語が魅⼒的だった ・中の⼈が、twitter で だった ・料⾦プランが、優しかった 友達
9. いいね、返信 コメント、通知など 複雑な機能がある React Native での 事例の少なさ よくある HeadlessCMS の Usecase と違う・・・
10. 実際に悩んだ設計
11. 設計 1. 責務を分離 通常の Feed コンテンツは、CMS ヘ 複雑なwrite 要件のデータは、RDS へ
12. Get request 時に、frontend 側で mapping するロジックが必要になる 😣
13. WebHook を使い、CMS 上 からの投稿や削除が可能。 運営が、不適切な投稿を、CMS でチェックできる。 設計 2. 全データを microCMS で管理
14. データの⼆重管理になり、データ不整合が⼼配。 定期的に同期をする処理が必要になる。 Post request が多く、コストが⾼くなる。 設計 2.
15. twitter でぶつぶつ悩んでたら → microCMS 創業者 ( 柴⽥さん、松⽥さん) からDM
16. 神対応、ありがとうございました・・・！😭
17. 最終設計： こうなりました！
18. 最終設計: Usecase での分離 運営の投稿 User の投稿
19. Appendix Usecase で分離することで、設計が simple になった Post request が少ない設計になり、費⽤⾯で優れた 運営側の投稿のカスタマイズを、細かくできる設計になった 運営側の投稿頻度は少なく、当⾯は Webhook 通信の失敗は 許容できる設計になった
20. microCMS との差分を埋める ライブラリーのご紹介 react-native-rich-editor react-native-render-html
21. Rich Editor in microCMS "textContent": "<p><br></p><h2 id=\"hf99e890528\"> あああいいい</h2> <p><a ref=\"https://beatfit.jp\"target=\"_blank\" rel=\"noopenernoreferrer\"> アイウエオ</a><br><br> </p>", ↓
22. react-native-rich-editor
23. HTML を取得 const richText = useRef<RichEditor | null>() const html = richText.current?.getContentHtml() <RichEditor ref={r => (richText.current = r)} placeholder={' ⼊⼒してください'} onChange={handleChange} initialFocus /> 1 2 3 4 5 6 7 8 9 10
24. HTML を取得 const richText = useRef<RichEditor | null>() const html = richText.current?.getContentHtml() <RichEditor ref={r => (richText.current = r)} placeholder={' ⼊⼒してください'} onChange={handleChange} initialFocus /> 1 2 3 4 5 6 7 8 9 10 const html = richText.current?.getContentHtml() const richText = useRef<RichEditor | null>() 1 2 3 4 <RichEditor 5 ref={r => (richText.current = r)} 6 placeholder={' ⼊⼒してください'} 7 onChange={handleChange} 8 initialFocus 9 /> 10
25. react-native-render-html import React, { Component } from "react"; import { ScrollView, useWindowDimensions } from "react-native"; import HTML from "react-native-render-html"; const htmlContent = ` <h1>This HTML snippet is now rendered with native components !</h1> <h2>Enjoy a webview-free and blazing fast application</h2> <img src="https://i.imgur.com/dHLmxfO.jpg?2" /> <em style="textAlign: center;">Look at how happy this native cat is</em> `; export default function Demo() { const contentWidth = useWindowDimensions().width; return ( <ScrollView style={{ flex: 1 }}> <HTML source={{ html: htmlContent }} contentWidth={contentWidth} /> </ScrollView> ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
26. react-native-render-html import React, { Component } from "react"; import { ScrollView, useWindowDimensions } from "react-native"; import HTML from "react-native-render-html"; const htmlContent = ` <h1>This HTML snippet is now rendered with native components !</h1> <h2>Enjoy a webview-free and blazing fast application</h2> <img src="https://i.imgur.com/dHLmxfO.jpg?2" /> <em style="textAlign: center;">Look at how happy this native cat is</em> `; export default function Demo() { const contentWidth = useWindowDimensions().width; return ( <ScrollView style={{ flex: 1 }}> <HTML source={{ html: htmlContent }} contentWidth={contentWidth} /> </ScrollView> ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const htmlContent = ` <h1>This HTML snippet is now rendered with native components !</h1> <h2>Enjoy a webview-free and blazing fast application</h2> <img src="https://i.imgur.com/dHLmxfO.jpg?2" /> <em style="textAlign: center;">Look at how happy this native cat is</em> `; import React, { Component } from "react"; 1 import { ScrollView, useWindowDimensions } from "react-native"; 2 import HTML from "react-native-render-html"; 3 4 5 6 7 8 9 10 11 export default function Demo() { 12 const contentWidth = useWindowDimensions().width; 13 return ( 14 <ScrollView style={{ flex: 1 }}> 15 <HTML source={{ html: htmlContent }} contentWidth={contentWidth} /> 16 </ScrollView> 17 ); 18 } 19
27. react-native-render-html import React, { Component } from "react"; import { ScrollView, useWindowDimensions } from "react-native"; import HTML from "react-native-render-html"; const htmlContent = ` <h1>This HTML snippet is now rendered with native components !</h1> <h2>Enjoy a webview-free and blazing fast application</h2> <img src="https://i.imgur.com/dHLmxfO.jpg?2" /> <em style="textAlign: center;">Look at how happy this native cat is</em> `; export default function Demo() { const contentWidth = useWindowDimensions().width; return ( <ScrollView style={{ flex: 1 }}> <HTML source={{ html: htmlContent }} contentWidth={contentWidth} /> </ScrollView> ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const htmlContent = ` <h1>This HTML snippet is now rendered with native components !</h1> <h2>Enjoy a webview-free and blazing fast application</h2> <img src="https://i.imgur.com/dHLmxfO.jpg?2" /> <em style="textAlign: center;">Look at how happy this native cat is</em> `; import React, { Component } from "react"; 1 import { ScrollView, useWindowDimensions } from "react-native"; 2 import HTML from "react-native-render-html"; 3 4 5 6 7 8 9 10 11 export default function Demo() { 12 const contentWidth = useWindowDimensions().width; 13 return ( 14 <ScrollView style={{ flex: 1 }}> 15 <HTML source={{ html: htmlContent }} contentWidth={contentWidth} /> 16 </ScrollView> 17 ); 18 } 19 <HTML source={{ html: htmlContent }} contentWidth={contentWidth} /> import React, { Component } from "react"; 1 import { ScrollView, useWindowDimensions } from "react-native"; 2 import HTML from "react-native-render-html"; 3 4 const htmlContent = ` 5 <h1>This HTML snippet is now rendered with native components !</h1> 6 <h2>Enjoy a webview-free and blazing fast application</h2> 7 <img src="https://i.imgur.com/dHLmxfO.jpg?2" /> 8 <em style="textAlign: center;">Look at how happy this native cat is</em> 9 `; 10 11 export default function Demo() { 12 const contentWidth = useWindowDimensions().width; 13 return ( 14 <ScrollView style={{ flex: 1 }}> 15 16 </ScrollView> 17 ); 18 } 19
28. まとめ 設計に悩んだときは、UseCase で分離すると単⼀責任に なり、設計が simple になる microCMS は、複雑な機能が必要な時も、有効な選択肢 となる react-native-render-html と react-native-rich-editor で 差分を埋められる