#86 日報作成画面のデザインと実装 ─ 個人開発者向けのサービスの開発記録

tyshgc
·

本日(4/23)の作業

今日の作業は日報作成画面のデザインと実装、あとロゴのバランス調整などやってました。と言っても見せれる段階にはないのでまた明日以降に。

あとは仕事の方でFirebase AuthenticationでSafari/Firefox(まもなくChromeも)とドメイン跨ぐCookieへのアクセス問題でsignInWithRedirectが使えない問題が判明したのでその対応などやってました。

あとは、PLOP(turborepo使っているので turbo gen)のプロンプトとアクションをFeature-Sliced Design向けに最適化しました。

  • ✅ Feature-Sliced Design向けにPLOPのコンフィグとテンプレを調整

  • 🚴 日報の画面設計・実装

    • 🚴 設計

    • 🚴 実装

  • サインインの実装

    • 認証画面実装

    • 認証ロジック実装(主にClient側)

    • Server側の認証チェック実装

    • Client側の認証チェック実装

Feature-Sliced Design向けのPLOP

Feature-Sliced DesignはLayerを「pages/widgets/features/entities/shared」という粒度と関心事で区分する主にView層のアーキテクチャです。

特にfeatures/entities/sharedは以下の役割を持っているものです。

  • entities ─ ドメインモデリングを経て定義されたデータをUIとして表現するオブジェクトのレイヤー。例えば認証とかユーザとかそういう単位。

  • features ─ 複数または単数のentitiesを機能的な単位でまとめる必要がある時に使うレイヤー。例えばサインインフォームとかサインアップフォームとかユーザプロフィール変更フォームとか。

  • shared ─ UIパーツ群。ドメインに関係なくAtomic DesignでいうところのMoleculesやAtomsに相当。再利用性やドメイン知識の無い小さい単位のもの。

また各レイヤーはSlicesというものがあります。例えばentitiesだとAPI Client/View Model/Controller/View Componentというものです。

しかし、自分の場合はクライアントサイドのビジネスロジックをOOP DDD + Repositoryパターンで表現しており、Gateway関数(APIやPrisma、外部SDKやLocal Storageなどなど)という外部データ層とのやり取りの細かい単位での関数群としているためAPI Client/View Model/Controllerという部分にあまりロジックは置きません。特にビジネスロジックは。

その代わり、Viewとして必要なロジックやRepositoryとのやり取りはHooksにuseDomainとして集約し(その中で使う細かいHooksやUtilityは別ファイルに切り出してます)、Compound Patternを使ってルートに必要であればContextを置いて配下の要素を適当に分割したコンポーネントを持たせています(下のリンクにtreeでまとめてみました)。

で、それぞれVitestのテストファイルとStoryBookのファイルをturbo genで生成できるようにしています。※この生成はUI層のみでやってます。ビジネスロジック層はお決まりファイルを作るとモデリングが思考停止してしまうのでやってません。

長いのでimage 2 codeのリンクだけ貼っときます。

今日やったのはウィザードで前のプロンプトで以降のプロンプトで分岐したり、アクションで吐き出すパスを分岐したりなどです。

その他、メモなど

Firebase AuthenticationのCookie

以前にFirebase AuthのSSO認証実装したの2年くらい前だったからかこんなことなってるの知らなかった。そして案の定ハマった。仕事の方でしかFirebaseは使っていないもののおそらくこれは他の認証サービスでも同じ問題になるはず。

尚、signInWithRedirectの実装で進めるにはいくつか手を加える必要がある。

なるべくコストをかけずに対応するには次の3つか。

実装から変えるパターン

  1. signInWithPopupに変える

  2. 自分でSSOのトークン取ってきてsignInWithCredentialにする

Firebase Hostingを使っている場合

一番楽だけど、Firebase Hostingを使っていることが条件になる。ただし、別にアプリケーションのインフラをFirebase Hostingにする必要はなく、ドメインのDNSを向けておけば良い。自分の場合はCloudflareでドメインを管理しており、Cloud RunにRemixを置いていてGoogleのカスタムマッピングだとレイテンシがあるのでドメインマッピングの代わりにFirebase Hostingを経由していたのでこれができるぽい(まだやってないのでできるか知らないけどChat GPT的にはできるとのこと)。

4/24 追記)

Firebase Hostingパターンをlocalhostで実現しようとするとSSLの問題でうまくいかない。解決方法は調べてみたが見つからず。

おそらくlocalhostにSSL証明書を発行するのは間違いなさそう(ただちょっと面倒くさい)。とりあえずはSafari, FireFoxだけ今は問題なので先に進めないといけない実装を進めて後で対応する予定です。このlocalhostのSSL化がダメそうならsignInWithCredentialにする必要がある。signInWithPopupはできればユーザビリティやブラウザのポップアップブロックなどの兼ね合いで良く無いので使いたくない。

← #85 #87 →

@tyshgc
デザインファーム及びスタートアップ(上場)などを経てフリーランスとして、様々なスタートアップや大手企業の新規事業の立ち上げ期における事業設計・アプリケーションの設計・開発、サービスのUX分析とデザインとエンジニアリングの両軸でお手伝いさせていただいています。 現在、個人開発者向けの支援サービスを個人開発中。 X Account: @tyshgc