こどもの作品を残し、家族みんなで共有できるWebサービスです。
PCはもちろん、スマホからも扱いやすいUIにしています。
サービス名は「tottoko（トットコ）」
写真を「撮る」という意味と、残こしておくという意味での「とっておく」から命名。
https://tottoko.su-dx.com ※2022/10/2 サービス停止
React + Typescriptを使用したシングルページアプリケーション（以下、SPA）を採用。
本番環境ではCDN（Cloud Front）を使用し、SPAで不利となる初期表示の遅延を改善。
| ライブラリ名 | バージョン | 説明 |
|---|---|---|
| react | 17.02 | |
| typescript | 4.5.5 | |
| chakra-ui | 1.8.5 | UIコンポーネントライブラリ |
| react-router-dom | 6.2.1 | ルーティングライブラリ |
| ky | 0.29.0 | FetchベースのHTTPクライアントライブラリ |
| react-query | 3.34.16 | データフェッチングライブラリ サーバーデータのキャッシュ機構として使用 |
| react-hook-form | 7.27.1 | フォームバリデーションライブラリ 登録・編集系画面で使用 |
| reduxjs/toolkit | 1.7.2 | 状態管理ライブラリ 認証情報とログインユーザーの情報のみ管理 |
- バックエンドで生成したアクセストークン(JWT)やリフレッシュトークン(Cookie,JWT)を用いてリソースのアクセス制限やセッション維持を実現。
→ サイレントリフレッシュ機能や起動時自動ログイン機能を実装。 chakra-uiを使用し、チェックボックスカードのUIコンポーネントを実装。keen-slider、chakra-uiを使用し、カルーセルUIコンポーネントを実装。react-queryを使用し、コメントの「もっと見る」機能を実装。
create-react-appを使用し、プロジェクトテンプレートを作成。- エディタは
VSCodeを使用し、VSCodeからブラウザ起動・デバッグできるよう設定。 ESLint、StyleLint、Prettierを導入・設定し、VSCodeと連携。simple-git-hooks、lint-stagedを導入し、コミット時にコード解析＆テストを自動実行できるよう設定。
GitHubのmainリポジトリにコードがマージされた際、GitHub Actionsで以下内容を実施。
ESLint,StyleLintを実行し、テストを実施。- 不備がなければProduction Buildし、本番環境用のコードを生成、S3に配備。
- 配備したコードをユーザーが取得できるよう、Cloud Frontのキャッシュを無効化。
RailsのAPIモードを使用。
Dockerを使用したコンテナベースで開発し、REST APIを提供。
本番環境でもそのままコンテナを使用できるようAWSのECS（Fargate）を使用。
負荷分散装置（Application Load Balancer）を使用することでスケールアウト可能な構成を実現。
画像はS3に保存し、メール配信はAWS SESを使用。
| ライブラリ名 | バージョン | 説明 |
|---|---|---|
| rails | 6.1.4.1 | APIモードで使用 |
| bcrypt | 3.1.16 | パスワードのハッシュ化ライブラリ |
| jwt | 2.3.0 | JWT作成・検証ライブラリ |
| rack-cors | 1.1.1 | CORS設定ライブラリ |
| image_processing | 1.12.1 | 画像処理ライブラリ サブネイル作成に使用 |
| jbuilder | 2.11.2 | JSON形式のデータを出力するライブラリ |
| kaminari | 1.2.2 | ページングライブラリ 一覧系を出力する機能で使用 |
- 以下機能をJWTを用いて実現。
- ユーザー認証（アクセストークン、リフレッシュトークンの実装）
- アカウントアクティブ化
※ JWT付きURLをログインIDのメールアドレスに送ることでメールアドレスの有効性を検証 - パスワードリセット
- メールアドレス変更
- 画像保存はRailsの
Active Storageを使用。 - マスターデータはDBを使用せず
active_hashを使用してメモリ管理。
docker及び、docker-composeを用いて、コンテナ開発環境を構築。
※イメージ軽量化のためベースイメージはalpineを使用。rspec、factory_botを使用してテスト実施。- デバックは
pryを使用。
GitHubのmainリポジトリにコードがマージされた際、GitHub Actionsで以下内容を実施。
- マージしたリポジトリの内容からdockerイメージを作成。
docker-composeを使用し、作成したdockerイメージをテスト(rspec)。- 不備がなければAWS ECRにdockerイメージを登録。
- 登録したdockerイメージを使用し、ECS(Fargate)のタスクを新しく起動。
※既存タスクは停止させる
| 機能分類 | 機能名 | 説明 |
|---|---|---|
| ユーザー管理 | 新規登録 | ユーザーの新規登録を行う。 |
| アクティベイト | 登録したユーザーを有効化する。登録したメールアドレスにアクティベイト用URLを送付することで実現。（※JWT利用） | |
| ログイン | ユーザーの認証を行う。アクティベイトしていないユーザーはログイン不可。 | |
| パスワードリセット | ユーザーのパスワードをリセットする。 ログインしている場合、ログインIDのメールアドレスにパスワードリセット用URLを送付することで実現。 ログインしていない場合（パスワードを忘れた場合）、ログインIDのメールアドレスを指定することで、パスワードリセット用URLを送付。（※いずれもJWT利用） |
|
| メールアドレス変更 | ユーザーのメールアドレスを変更する。 変更対象のメールアドレスに変更用URLを送付することで実現。（※JWT利用） |
|
| プロフィール表示 | ユーザーのプロフィールを表示する。 | |
| プロフィール編集 | ユーザーのプロフィール（表示名やアバター）を変更する。 | |
| 家族管理 | お子さま追加 | お子さまを追加する。 |
| お子さま削除 | お子さまを削除する。お子さまに紐づく作品も削除される。 | |
| お子さま編集 | お子さまの登録情報を変更する。 | |
| 家族追加 | お子さまの作品を閲覧できる家族（ユーザー）を追加する。 （※ 追加する家族が「パパ」、「ママ」、「子ども自身」の場合、作品の投稿・編集・削除が可能。） |
|
| 家族解除 | お子さまの作品を閲覧できる家族（ユーザー）を解除する。 | |
| 作品管理 | 作品投稿 | お子さまの作品を新規投稿する。 |
| 作品編集 | 投稿した作品を変更する。 | |
| 作品削除 | 投稿した作品を削除する。 | |
| 作品一覧表示 | お子さまの作品を一覧表示する。 ページネーション可能。また、お子さまで作品を絞り込み可能。 |
|
| 作品詳細表示 | 作品の詳細を表示する。 複数画像のカルーセル表示、画像最大化表示が可能。また、複数画像の一括ダウンロードが可能。 |
|
| コメント管理 | コメント追加 | 作品にコメントを追加する。 |
| コメント削除 | 作品のコメントを削除する。 | |
| いいね管理 | いいね追加 | 作品に「いいね」を追加する。 |
| いいね削除 | 作品の「いいね」を削除する。 | |
| いいねカウント | 作品の「いいね」をカウントする。 |
お子さまによる作品絞り込みと、ページネーションを実現。
（※ 絞り込みはURLと紐付かせているため、ブラウザバック可能）
カルーセルUI、画像最大表示、いいねボタン、画像ダウンロード、コメントの「もっと見る」を実現。
画像プレビュー＆削除、画像圧縮、画像種類（png, jpeg）チェック等を実現。
