■ つづる自分史

■ アプリURL

https://www.tsuzuru-jibunshi.com/

■ サービス概要

人生を可視化できるアプリです。

■ アプリを作ったキッカケ

誰しも長い人生を生きていると、失敗したり、挫折することは多々あると思います。 私も失敗してきました。 しかし、そこから立ちあがろうと思っても、自分の経歴に自信がなく、人生を人に見せることに対して恥ずかしい感情がありました。 そんな感情から、1人悶々と考える日々がありました。 人間孤独になると、さらにマイナスに感じてきて、悲惨な方向に行動してしまう方もいらっしゃいます。 そこで、技術を使って人の人生を気軽に覗く事ができないか？と考え【つづる自分史】を作りました。

■ アプリに込めた思い・実現したい未来

「自分の人生に悲観する人を減らしたい」
そんな思いを込めてサービスを作りました。
人の人生を覗いてみると、今悩んでいることがちっぽけに感じたり、その悩みを解決するヒントが隠されているかもしれません。
このアプリを通して、人生をポジティブに捉える人が１人でも増えてくれると嬉しいと思っています。

■ 執筆記事

• Qiita LGTM 142 👉 https://qiita.com/junya__ya/items/ff5008052c0ebf626901

■ 主なページと機能

Topページ	ユーザ登録ページ
Topページはシンプルなデザインを意識し、サービスの特徴が把握しやすいように工夫しました。	各フォームの下にエラーメッセージを表示することで、ユーザーにわかりやすい設計を意識しました。

ログインページ	自分史新規作成・編集ページ
ブラウザを閉じてもログインを継続させるため、ログイン保持機能を実装しました。	出来事は複数登録することを考慮して、画面遷移を無くし、非同期でデータだけをやり取りする形にしました。また「公開設定」を実装し、一般に公開したくない人を考慮した設計をしました。

一覧ページ	詳細ページ
一覧画面では、公開されている自分史のみ表示しています。「性別」や「年齢」で検索できるようにしています。また、グラフを画像として表示する事で、どんな自分史かイメージできるようデザインを工夫しました。	グラフのhoverすることで、詳細な情報を閲覧できます。コメントやいいね機能も実装し、ユーザー同士の交流を図っています。TwitteリンクではグラフをOGPとして共有できるようにしています。また、グラフはダウンロードして外部で利用する事ができます。

マイページ	プロフィール編集ページ
ユーザーの詳細情報や作成した自分史を表示しています。こちらから退会も可能です。	プロフィール編集ができます。

■ 使用技術

バックエンド

• Ruby 3.0.3
• Rails 6.0.4.1

フロントエンド

• HTML
• CSS（SCSS）
• Bulma（CSSフレームワーク）
• Vue.js 2.6.14
• JavaScript（jQuery）

データベース

• MySQL 8.0.26

ストレージサービス

• Amazon S3

■ ER図

https://app.diagrams.net/?src=about#G1VuTSIdLMgvtgosmCS90aHUxXr0jZjm2B

■ 画面遷移図

https://www.figma.com/file/tpd5guOIGeBcx2N1hK30O4/Wireframe?node-id=0%3A1