Look Back - 振り返る サブスク管理 -

作成したオリジナルアプリについて紹介します。
READMEはこちら

READMEに記載がない項目一覧

下記からジャンプできます。

2.制作背景
　きっかけ
　解決策
　どうしてその仕組にしたのか
3.アプリテーマ
7.工夫したこと
　(GIF画像を追加し、解説をしています)
8.学んだこと
　技術編
　マインド編
9.Q&A
　簡単な振り返りに意味があるのか？
　カリキュラム外で取り入れたものは何か

全体の目次

1.アプリ概要
2.制作背景
　きっかけ
　解決策
　どうしてその仕組にしたのか
3.アプリテーマ
4.設計
　画面遷移図
　DB設計
5.機能一覧
6.各機能の紹介
　ユーザー登録機能
　ログイン機能
　ログアウト機能
　ユーザー編集機能
　ユーザー削除機能
　サブスク登録機能
　サブスク編集機能
　サブスク削除機能
　サブスク一覧表示機能
　サブスク詳細表示機能
　サブスク更新機能
　サブスク評価機能
　サブスク評価一覧表示機能
　サブスク評価詳細表示機能
　サブスク評価編集機能
　サブスク未評価一覧表示機能
　サブスク解約機能
　解約サブスク一覧表示機能
　解約サブスク詳細表示機能
7.工夫したこと
8.学んだこと
　技術編
　マインド編
9.Q&A
　簡単な振り返りに意味があるのか？
　カリキュラム外で取り入れたものは何か

アプリ概要

小さな行動につなげるための、サブスク管理アプリです。
このアプリでできることは、以下の通りです。

• サブスク情報の一括管理
• 累計金額・契約期間等、サブスク情報の閲覧
• 活用度の振り返り・アクションプラン設定
  

制作背景

きっかけ

自身のサブスク活用に課題を感じていたことがきっかけです。
課題に感じていたことは、以下の2つです。

• サブスクには金額に見合った価値があるが、自己投資としては損益が出ている。
• 一括10万円の買い物の前は悩むのに、毎月1000円のサブスクは気軽に支払っている。

解決策

• アクションプランの設定をする

自己投資の利益である「自己成長・現状改善という結果」を出すために、
サブスクから得た情報を実際に活用する必要がある。
そのために、行動につながる「アクションプラン」の設定を義務化する。

• 振り返りを習慣化する

コンテンツの良し悪しに加え、「どれくらい活用できたか」という活用度を意識することで、
自己投資金額を釣り合いが取れているか判断する様になる。
そのために、活用度の振り返りを習慣化する。

どうしてその仕組にしたのか

• プログラミング学習を通して、実践なくして習得・成長はないと再認識したから。
• 毎日の学習終了後、振り返り記入している際に、ハッと気づきを得る経験を何度もした為。

アプリテーマ

このアプリが目指すのは、「小さな行動につなげる」ことです。
具体的には、情報を閲覧するといった受け身な活用法から、
得た情報で行動するという実践的な活用法につなげます。

設計

画面遷移図

DB設計

users

Column	Type	Options
email	string	null: false, unique: true
encrypted_password	string	null: false
nickname	string	null: false

Association

• has_many :subscriptions
• has_many :reviews

subscriptions

Column	Type	Options
name	string	null: false
price	integer	null: false
contract_date	date	null: false
update_type_id	integer	null: false
update_cycle	integer	null: false
update_day_type_id	integer
user	references	null: false, foreign_key: true

Association

• belongs_to :user
• has_many :reviews
• has_one :contract_renewal
• has_one :contract_cancel

contract_renewals

Column	Type	Options
renewal_count	integer	null: false
total_price	integer	null: false
total_period	integer	null: false
update_date	date	null: false
next_update_date	date	null: false
subscription	references	null: false, foreign_key: true

Association

• belongs_to :subscription

contract_cancels

Column	Type	Options
cancel_date	date	null: false
reason_id	integer	null: false
cancel_comment	text
subscription	references	null: false, foreign_key: true

Association

• belongs_to :subscription

reviews

Column	Type	Options
review_rate	integer
review_comment	text
start_date	date	null: false
end_date	date	null: false
later_check_id	integer	null: false
user	references	null: false, foreign_key: true
subscription	references	null: false, foreign_key: true

Association

• belongs_to :user
• belongs_to :subscription
• has_one :action_plan

action_plans

Column	Type	Options
action_rate	integer
action_review_comment	text
action_plan	text
review	references	null: false, foreign_key: true

Association

• belongs_to :review

機能一覧

現在実装済の機能は、下記の通りです。

各機能の紹介

ユーザー登録機能

• トップページで、sign upをクリック
• 必要事項を入力し、Createをクリック

ログイン機能

• ヘッダーのLoginをクリック
• 必要事項を入力し、Loginをクリック

ログアウト機能

• ヘッダーのLogoutをクリック

ユーザー編集機能

• マイページで、Settingをクリック
• 編集したい項目を修正し、現在のパスワードを入力
• 更新するをクリック

ユーザー削除機能

• マイページで、Settingをクリック
• 退会はこちらからをクリック
• 退会しますをクリック

サブスク登録機能

• マイページで、Addをクリック
• 必要事項を入力・選択し、登録するをクリック

サブスク編集機能

• マイページで、サブスクのハンバーガーメニューをクリック
• メニューから、編集をクリック
• 必要事項を入力・選択し、更新するをクリック
• 確認ホップアップが表示されるので、OKをクリック
• 更新完了のホップアップが表示されるので、OKをクリック

サブスク削除機能

• マイページで、サブスクのハンバーガーメニューをクリック
• メニューから、削除をクリック
• 確認ホップアップが表示されるので、OKをクリック
• 削除完了のホップアップが表示されるので、OKをクリック

サブスク一覧表示機能

• マイページトップ(Listsタブ)で、契約中のサブスク一覧が確認できる

サブスク詳細表示機能

• マイページで、サブスクのカードをクリック
• サブスク情報を確認できる

サブスク更新機能

• サブスク更新日になると、通知アイコンが表示される
• 次回更新日がClickで更新に変化する
• Clickで更新をクリック
• 更新完了後、振り返りを促すホップアップが表示されるので、Goをクリック

• 更新完了後のホップアップで、後で振り返るをクリックし、後で振り返ることも可能

サブスク評価機能

• サブスク更新後に表示される画面に、必要事項を入力する
• レビューをクリック

• 後で振り返るをONにすると、現在の入力を一時保存できる

サブスク評価一覧表示機能

• マイページで、サブスクのカードをクリック
• Reviewのもっと見る→をクリック
• 過去のレビュー 一覧が確認できる

サブスク評価詳細表示機能

• マイページで、サブスクのカードをクリック
• Reviewのもっと見る→をクリック
• 閲覧したいレビューのカードのLook More→をクリック
• 入力したレビューの詳細を確認できる

サブスク評価編集機能

• マイページで、サブスクのカードをクリック
• Reviewのもっと見る→をクリック
• 閲覧したいレビューのカードのLook More→をクリック
• Editをクリック
• 必要事項を入力して、レビューをクリック

サブスク未評価一覧表示機能

• マイページで、Reviewsタブをクリック
• 後で振り返るをONにしているレビュー 一覧を確認できる

サブスク解約機能

• マイページで、サブスクのハンバーガーメニューをクリック
• メニューから、解約をクリック
• 必要事項を入力・選択し、解約するをクリック

解約サブスク一覧表示機能

• マイページで、Cancelsタブをクリック
• 解約済のサブスク一覧を確認できる

解約サブスク詳細表示機能

• マイページで、Cancelsタブをクリック
• 閲覧したいサブスクカードをクリック
• サブスク詳細ページに解約理由が表示される

工夫したこと

• 行動につながるアプリ設計をした

  • サブスク管理機能に振り返り機能を加え、サブスクの活用を保証する設計にした
  • 振り返り項目でアクションプランを必須にし、行動を促す仕様にした
  • ☆評価で手軽な評価を実現し、振り返りを継続するハードルを下げる仕様にした

• 実際のサブスクに対応できるように、契約プランを充実させた

  • 年、月、日のタイプを選択可能
  • 年、月の場合は、「1日はじまりか否か」も選択可能
    

• サブスク登録時、契約開始日が過去の場合にも対応した

  • 昔から登録しているサブスクも、過去期間を含めた累計金額・契約期間を計上する

• 利用しやすいUIを心がけて設計した

  • レスポンシブ対応にした
    

• 削除前に確認アラートを表示し、誤操作によるデータ消失を防止した。
  

• 更新待ちのサブスクには通知アイコンを付け、目立たせた
  

• 感覚的な操作ができるように、アイコン、hoverイベントを使用
  
  　　　　

• サブスク登録時、自動で当日の日付が入る(カレンダー選択不要)

• ハンバーガーメニューから、ワンクリックで編集・削除・解約操作ができる
  

• 後で振り返る機能を利用し、内容の一時保存ができる
  

• 複数のサブスクで「後で振り返るレビュー」が存在しても、未評価一覧から処理できる

• 気づきを得るきっかけを得られるように、様々な角度の情報を表示した

  • サブスク契約金額だけでなく、累計金額・期間を表示
  • 解約理由・コメントを残すことで、過去の判断・価値観を見返す事が可能
  • 平均評価も表示することで、ロングスパン視点も持つことができる

• 実際の開発を意識したアプリケーション作成を心がけた

  • プルリクエストでWhat, Whyを記述
    
  • プルリクエスト前に、単体テスト・RuboCopの実行
  • 要件定義、画面遷移図を作成後実装開始
    
  • 446 exampleの単体、結合テスト実装
    

• ユーザーニーズを知るため、フィードバックを受けれるようにした

  • googleフォームリンクを追加

学んだこと・感想

技術編

• 問題を解くことと、問題を解決することの違い

仕様通りのアプリを実装するのは、問題を「解く」ことであり、
オリジナルアプリを要件定義から行うことは、問題を「解決する」ことだと感じました。

課題通りのアプリの作成中に、
エラー解消に取り組んだり、実装方法に悩むことも勿論ございました。

しかし、
どの方法を使うのが最適か？
この方法で問題が解決出来るか？
バリデーションに漏れはないか？と、
「どうやって」といった方法から検証することは、
プログラミング知識プラス、
言語化する能力や、論理的思考力などが必要だと実感しました。

また、足りないが故に、失敗・修正を繰り返しましたが、
工夫する余地の大きさは「やりがい」に、
難しさは「できたときに充実感」に変換されました。

エンジニアの仕事の本質は、
相手の問題を解決したり、ニーズを満たすことだと思います。
そのため、プログラミング知識をしっかりつけながら、
問題解決ができるエンジニアを目指していきたいと思いました。

• デザインの持つ力

ユーザーが利用しやすいアプリケーションを実現するには、
デザインが必須だと学びました。

具体的には、Qiitaの記事「なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】」や、
ノンデザイナーズ・デザインブックの挿絵を見て、
デザインの四原則を適応することで、印象がガラッと変わる視覚的体験をし、
デザインのもつ力・奥深さに衝撃を受けました。

同じ情報が表示されていても、デザインによって、
情報の理解しやすさが変わることを体感し、デザインの重要さを学びました。

また、上記を参考にマイページのビューを作り変えた一例が下記です。

マインド編

• 自身の壁とうまく付き合う方法

オリジナルアプリ実装に当たり、何度も実力不足を感じるタイミングがございました。
その際、建設的に考えるために次のように捉えるようにしました。

・実力不足だと感じるのは、今の自分にとって難しいと感じることに「挑戦中」である。
・レベルが低いと感じるなら、それだけ「伸びしろ」があり、想像もできない様な成長が可能である。

知識・実力不足を受け入れながら、
前向きな捉え方もすることで、
継続的な学習モチベーションの維持になったと考えています。

• 本心の確認

自身のキャリアと現状、なぜプログラミングなのか、と
転職を考える前に自問し、自分なりに答えを出した上で、学習を開始しました。

しかし、それが口だけでないかどうか、
プログラミングを都合の良い魔法の道具や逃げ場にしていないかは、
「行動」で確かめるのが良いと考えていました。

実際アプリ実装中に、何度も失敗し、力不足を感じながらも、
「作り上げたい、作ってみたい」「できる事が増えて楽しい」と感じていました。
プロトタイプを完成まで、簡単に諦めない・逃げなかったことから、
「エンジニア転職をする」と決めたのは意志であり、本心であったと感じました。

学習をすることと、仕事にすることは、勿論異なりますが、
半年間仕事と両立しながら学習を進めたこと、
オリジナルアプリを制作したこと、
アウトプットとしてブログを投稿したこと、
メンター質問を200問以上利用したことなど、
行動ができた＝中途半端な気持ちではないと、自身では思っております。

Q&A

簡単な振り返りに意味があるのか？

2つの理由から、「意味がある」と考えています。

• 気づきにつながる
  作業としては☆を選択するだけでも、
  どのくらいアクションしたか？を☆数で評価するには、
  「何か行動しただろうか」「いつ」「どのくらい」など、自然と振り返る思考が生まれます。
  振り返ることで、「意外と行動はできなかったな...」など、気付きにつながるからです。

• 行動につながる
  アクションプランの設定は必須にしているため、
  次回更新日までに「何をするか」を決めることになります。
  行動を誘発することで、成長につながると考えています。

カリキュラム外で取り入れたものは何か

• AWS(EC2, Route53, ACM)
  • カリキュラムでは意識しなかったインフラを手を動かして学ぶため
• Capistrano
  • デプロイ作業を効率化し、コマンド実行時のミスを防止するため
• tailwindcss
  • フロント実装スピードを上げるため
• sweetalert2
  • アラートデザインを変更するため
• rary
  • ☆評価を行うため
• canva
  • トップページに表示するロゴを作成するため