BuriKaigi2023 みんなのヨガ部開発エピソード

by Yosuke Doke

Slide 1

Slide 1 text

サービス企画とUIデザインと Webアプリ開発を全部やってみたら良かった 2023/1/21 BuriKaigi 2023 道家陽介みんなのヨガ部開発エピソード

Slide 2

Slide 2 text

自己紹介道家陽介金沢在住（2年目） Flashエンジニアを経たフロントエンドエンジニア。受託制作会社でテクニカルディレクターやPMを経験。現在はフリーランス。「みんなのヨガ部」というWebサービスを開発・運営。

Slide 3

Slide 3 text

サマリーオンラインヨガサービス「みんなのヨガ部」をWebアプリ化。サービス設計とUIデザインとバックエンドをフロントエンドエンジニアひとりで全部やってみた記録7 サービス開始とWebアプリ開発までの経Æ Å UIデザインと開発でやったこ0 Ä 全部やってみて感じたこと

Slide 4

Slide 4 text

みんなのヨガ部とはみんなのヨガ部は、「小さく長く続けやすく」をコンセプトにしたオンラインヨガスクールですB 0 オンラインで場所や時間の制約がなr 0 自宅でできる簡単なエクササイt 0 Zoomで部分参加でも耳だけでも自由な利用を可能にす% 0 安価なサブスクリプションで長く続けやすい仕組みで提供

Slide 5

Slide 5 text

サービス開始とWebアプリ開発の経緯 UIデザインと開発でやったこと全部やってみて感じたこと

Slide 6

Slide 6 text

サービス開始とWebアプリ開発の経緯 2010年頃 2010年頃　講師の「鈴木めゆ」さんおよびヨガとの出会い締切に追われても生きててよいんだ（ちょっと疲れていた）

Slide 7

Slide 7 text

サービス開始とWebアプリ開発の経緯 2010年頃 2010年頃　講師の「鈴木めゆ」さんおよびヨガとの出会い 2018年頃都内のカフェで開催した呼吸で思考を整えるワークショップ締切に追われても生きててよいんだ（ちょっと疲れていた）マネジメントやデザインに通じる思想があって面白い！

Slide 8

Slide 8 text

サービス開始とWebアプリ開発の経緯 2010年頃 2010年頃　講師の「鈴木めゆ」さんおよびヨガとの出会い 2018年頃都内のカフェで開催した呼吸で思考を整えるワークショップ 2020年4月新型コロナウイルス流行に伴う緊急事態宣言の発令呼吸の病気なのに呼吸を良くするレッスンができない事態に締切に追われても生きててよいんだ（疲れていた）マネジメントやデザインに通じる思想があって面白い！

Slide 9

Slide 9 text

サービス開始とWebアプリ開発の経緯 2020年4月新型コロナウイルス流行に伴う緊急事態宣言の発令 2020年5月 2020年6月 Zoomを使って知り合いを集めてテストプレイ PayPayやPeatixで集金しながら試行錯誤。結果noteサークルを採用 2021年 2022年8月しばらくはnoteサークル+Peatixで運用 Webアプリ＋Stripeによる課金システムを構築し移行Peatixは営業窓口として継続

Slide 10

Slide 10 text

UIデザインと開発でやったこと全部やってみて感じたことサービス開始とWebアプリ開発の経緯

Slide 11

Slide 11 text

UIデザインと開発でやったこと PH Figmaで画面デザインとコンポーネント設R EH Firebase＋Nextでアプリケーションを構! H Chakra UIに組み込む

Slide 12

Slide 12 text

UIデザインと開発でやったこと前提としてChakra UIの採用を決めていたのでその前提で準備しました8 s 8dpのグリッドシステムを採用8 s FigmaのStylesを積極的に使う8 s コンポーネント化は画面デザインをしながら随時。 Figmaで画面デザインとコンポーネント設計

Slide 13

Slide 13 text

UIデザインと開発でやったこと 8dpのグリッドシステム場合によって4pxのサブグリッドを入れることもある Figmaで画面デザインとコンポーネント設計実際の濃さ

Slide 14

Slide 14 text

UIデザインと開発でやったことカラーシステムテキストスタイル Figmaで画面デザインとコンポーネント設計

Slide 15

Slide 15 text

コンポーネント HSTackやContainerを意識したレイアウト用のコンポーネントも模擬的に定義してる。ガイドとして利用するのと実装時のヒントにもなる。 UIデザインと開発でやったこと Figmaで画面デザインとコンポーネント設計

Slide 16

Slide 16 text

UIデザインと開発でやったこと他にFigmaでできないが意識したことコンポーネントの語彙をChakra UIに合わせるq Border Radius(角丸)なども手入力だがChakra UIの値を利用するq AutoLayoutやConstraintsの利用、ガイドコンポーネントでレイアウトを表明する。 Figmaで画面デザインとコンポーネント設計

Slide 17

Slide 17 text

UIデザインと開発でやったことコンポーネントにすることで実装の検証を半分くらい行える例例）次回以降の予定コンポーネント Figmaで画面デザインとコンポーネント設計幅は成り行きでストレッチコンポーネント幅に対してどう構造化し、整列、追従するかを表現できる。幅固定

Slide 18

Slide 18 text

UIデザインと開発でやったことアプリケーションの構成 y Next.js でSSR(ホスティングはVercelQ y Clean Architecture風味のレイヤードアーキテクチャパターr y Firebase Authorization / Firestore Databasu y Stripe Firebase＋Nextでアプリケーションを構築

Slide 19

Slide 19 text

UIデザインと開発でやったこと Next.js でSSR(ホスティングはVercel) AWSとかでNext.jsのSSRなどの構築がめんどくさかった。 App Runnerなどコンテナ技術を使えば構築は可能だがデプロイに20分近くかかる。コンテナで利用するパッケージのメンテナンスなども自身がなく負担が大きい。個人サービスなので素直にVercelでよいと思った。 ※GCPやAWSで縛られたらCloud runやApp Runner使うしか無いと思うが情報求ム。 Firebase＋Nextでアプリケーションを構築

Slide 20

Slide 20 text

UIデザインと開発でやったこと Clean Architecture風味のレイヤードアーキテクチャパターン Firebase＋Nextでアプリケーションを構築 domain層 model usecase repository firebase stripe view components features pages model usecase view domain層 repository page User Firebase Stripe

Slide 21

Slide 21 text

UIデザインと開発でやったこと Firebase Authorization Firestore Database GmailのSSOと電話番号の実装 Account - 登録ユーザー情報とStripeの顧客情報 Lesson - 曜日ごとのレッスンとプランの紐付け Schedule - レッスンに紐づく予定とZoomURL あまりユーザーごとのデータを持たない設計。 Firebase＋Nextでアプリケーションを構築

Slide 22

Slide 22 text

UIデザインと開発でやったこと Stripe Firebase＋Nextでアプリケーションを構築サブスクリプションの商品をAPIで取得する。 Checkout.Session.Createを利用してStripe側で決済処理する。コールバックで決済情報を受け取りユーザーに紐付ける。ユーザーの顧客IDからSubscriptionを確認して該当するプランに紐づく予定のみ表示する仕組み。

Slide 23

Slide 23 text

UIデザインと開発でやったこと Chakra UIに組み込むコンポーネント設計ディレクトリ構造とコンポーネント種別 views/components 汎用コンポーネント views/features/* ドメインコンポーネント pages/* ページコンポーネント Next.jsの構成を下敷きにレイヤードアーキテクチャを意識して構造化する。関心を集める・凝縮度を上げやすい構造

Slide 24

Slide 24 text

UIデザインと開発でやったこと Chakra UIに組み込む大事なこと UIコンポーネント設計　∋　Figmaで思考したことコンポーネント分割や命名、スタイリングやレイアウトの半分くらいは Figmaで決めたことをなぞるだけ。になるようにデザインできる。

Slide 25

Slide 25 text

UIデザインと開発でやったこと Chakra UIに組み込むテーマの設定 Figmaで決めた値をマッピングして入れる。メインテーマをしてで流す。メインテーマを更に拡張して管理画面用のテーマを用意する。 export ThemeProvider import { breakpoints } from './foundations/breakpoints' /* 中略 */ const = { breakpoints, /* 中略 */ } const = ( ) export default theme export const = ( , { /* 中略 */ }) customTheme theme customTheme adminTheme theme extendTheme extendTheme

Slide 26

Slide 26 text

UIデザインと開発でやったこと Chakra UIに組み込む既存コンポーネントの拡張 export const = { : { : { fontSize: '4xl', fontWeight: 'light', lineHeight: 10, }, : { fontSize: '3xl', fontWeight: 'normal', lineHeight: 10, }, '2xl': { Heading '4xl' '3xl' sizes テキストスタイルなどをのvariantに割り当てていく。 Chakra UI

Slide 27

Slide 27 text

UIデザインと開発でやったこと Chakra UIに組み込む汎用コンポーネントの実装基本的にはのみに依存する。レイアウトの都合上、のラッパーとなることが多いのでのように互換性をもたせることが多い。 Props Chakra UI FC

Slide 28

Slide 28 text

機能ごとのとに依存する。各側でユースケースを呼び出し外部から取得したデータが流し込まれる想定。認証やナビゲーションなど一部の横断的機能もを通じて統合できる。こちらもレイアウトの都合でなどのを継承することが多い。内部で使う単体のUIコンポーネントは分離して化する。 Context Props Provider Context Box/Stack Props memo UIデザインと開発でやったこと Chakra UIに組み込むドメインコンポーネントの実装

Slide 29

Slide 29 text

Provider Context 内でユースケースを呼び出す。そのに依存するドメインコンポーネントを子要素にしてデータを結合する。レイアウトへの流し込みを行う。 UIデザインと開発でやったこと Chakra UIに組み込むページコンポーネントの実装

Slide 30

Slide 30 text

UIデザインと開発でやったこと Chakra UIに組み込むあとで気づいたことや考えていきたいこと ※とても雑に思っていることなので懇親会とかで話したいです！！は導入するとコンポーネントの検証が早い。特にレスポンシブh の分割の仕方をもっと工夫したら再描画を抑えられるh との宣言するファイルをうまく分けないとが表示されないh うまく分けた上でをモックすることで複雑なも実現できそう。 Storybook Context Context Provider Story Provider Story

Slide 31

Slide 31 text

全部やってみて感じたことサービス開始とWebアプリ開発の経緯 UIデザインと開発でやったこと

Slide 32

Slide 32 text

全部やってみて感じたことデザイナーの思考プロセスを理解できた　　決めやすさ決めづらさを知る　　何を決めて何を決めてないか知るデザインしながら設計するので開発効率はめちゃくちゃ良いロジックでデザインの品質にコミットするデザインへのコンプレックスを単純に減らせるフロントエンドエンジニアとして

Slide 33

Slide 33 text

全部やってみて感じたことデザインシステムなどシステマチックなデザインは開発に近い FigmaやSTUDIOのような思想のあるツールを使う UIフレームワークやデザインシステムを熟知するデザインに責任を持とういう気持ちでコミットできるコードを書かなくとも構造とルールをシステマチックに実装する結果、ビジュアルコミュニケーションやスタイリングに集中できる UIデザイナーとして

Slide 34

Slide 34 text

フロントエンドエンジニアがデザインに参加するデザイナーがアプリケーション設計に参加する月なみですが、双方の立場でのメリットを実感できました。全部やってみて感じたこと

Slide 35

Slide 35 text

チームもプロダクトもハッピーひとりでどちらもできるという選択肢が増える。分業したとしても、強化スキルとしてどちらの工程の品質を倍加できる。できることが増える楽しみをもっと多くの人に知ってもらえたら幸いです。全部やってみて感じたこと

Slide 36

Slide 36 text

参考書籍 Micro State Management with React Hooks: 直近読みはじめました。グローバルステートのアプローチの違いや Contextの最適化、Jotaiなどのライブラリの仕組みや再描画抑制の仕組みなどを詳しく解説しています。著者: Daishi Kato

Slide 37

Slide 37 text

参考書籍 Figma for UIデザインアプリ開発のためのデザイン、プロトタイプ、ハンドオフこれも先日買って読み始めたばかり。本日伝えようとしていたことが Figmaの活用法を通して書かれているのでフロントエンドエンジニアなどがデザインにより触れていく入門としても良いと思いました。著者: 沢田俊介

Slide 38

Slide 38 text

参考書籍 Firebase Authenticationで学ぶソーシャルログイン入門 ID管理の原則にそった実装のベストプラクティス認証・認可の違いといった基本知識や Firebaseのやや複雑でドキュメントだけだと分かりづらい部分を丁寧に解説しています。著者のBOOTH等で販売しているシリーズも併せて読むとより詳しく理解できます。著者: Auth屋 https://amzn.to/3J9hirT

Slide 39

Slide 39 text

PR: Burikaigi2023 みんなのヨガ部を使ってみてください！ https://minnanoyogabu.com/ BURIKAIGI2023 お試しクーポン（初回登録時限定）