Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

18c4748985323ef0e69f3436f89fbdb8?s=128

hiroya iizuka

March 04, 2021
Tweet

Transcript

  1. ReactNative + microCMS の設計にすごく悩んだ話 株式会社BeatFit CTO 飯塚 浩也

  2. 医師 循環器内科、総合診療医と して、⼤学 - 地⽅の病院を 8 年間勤務。 IT は⼤の苦⼿。 パソコン教室のアビバに

    通っていた。 エンジニア 株式会社BeatFit にエンジニ アとして⼊社。 [ ⽇課] Codewars, LeetCode Hack The Box Type Challenge
  3. 今⽇のお話 Headless CMS の技術選定に⾄るまでの経緯 悩んだ設計の話 CMS との差分を埋める React Native ライブラリ

  4. みんなの広場

  5. None
  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 で 差分を埋められる