早起き習慣アプリ ーEarly Birdー

早起きを習慣化するためのアプリを作ってみたので、紹介します！

:::note warn
警告
ChatGPTやAWSの無料枠が終わったため、デプロイを終了しました。
:::

### 

## 目次
[1.はじめに](#1はじめに)
[2.ざっくり概要](#2ざっくり概要)
[3.どんなことができるの](#3どんなことができるの)
[4.技術](#4技術)
[5.なんで作ったか](#5なんで作ったか)
[6.おわりに](#6おわりに)


## 1.はじめに
早起きをすべきなのに、いつもと同じように起きて、どんどん月日が流れていく・・・
そんな方に向けて早起きを習慣化するためのWebアプリを作ってみました！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">まず、１日目ということで作ったWebアプリを紹介します。 <a href="https://t.co/28ZyUCSqDE">pic.twitter.com/28ZyUCSqDE</a></p>&mdash; とりポン酢 (@toriponzu_tech) <a href="https://twitter.com/toriponzu_tech/status/1719663426887364976?ref_src=twsrc%5Etfw">November 1, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 2.ざっくり概要
まず、超ざっくりこのWebアプリ説明します。特徴は大きく2つ！
**「ChatGPTによるあなたのための応援コメント」** 
**「友人との起床時間のシェアによる早起きの義務化」**

### ChatGPTによるあなたのための応援コメント
早起きが続かない理由として、**モチベが湧かない、アラームは鳴らしているが二度寝してしまうという** のがあります。（私はその常習犯でした）

そこで朝、 **目標を入力することで、頭を回転＋やる気の増加を促進！**
さらに **その目標にあった応援コメントを受け取ることでモチベUP！**

やり方は簡単！
朝起きたら、今日の目標を入力し、ChatGPTをチェック、「Good Morning!」をクリック！
そうすると
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/0b59de94-dfc7-d5c7-081a-b4ef7c35a442.png" width=50%>

ChatGPTがその目標に対して、応援コメントを返してくれます！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/655dc5df-ac05-8340-b396-035dc92d9ebc.png" width=50%>

<br>

### 友人との起床時間のシェアによる早起きの義務化に
早起きが続かないもう一つの理由として強制力がないことがあります。
（私も、昨日の自分の決意は何だったのか………といつも思ってました）
そこで友人と起床時間をシェアすることで、起きねばならない状況を作り出します！
寝坊した日には寝坊時間をさらすことになります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/77dd6556-af68-1d2b-e38a-8dd636c7b946.png" width=50%>

目標時間より早く起きると青色、遅く起きるとオレンジ色になります。
その他にも「いいね」が押せたり、詳しく見るから「コメント」もできます！


## 3.どんなことができるの
機能としては、主に次のようなものがあります。

<details><summary>ログイン機能</summary>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/b4c23088-e154-a490-72cb-9274d01140a6.png" width=50%>

ニックネーム、メールアドレス、パスワード（8文字以上）を入力して新規登録

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/6aaa250c-2718-af43-7340-2b7754c1a015.png" width=50%>

新規登録したら、以降はメールアドレスとパスワードでログインできます。

 ログイン機能はBreeze認証機能をしようしています。
***
</details>


<details><summary>投稿機能</summary>

投稿、詳細画面は、 **「ChatGPTによるあなたのための応援コメント」** に書いてある通りです。
自分の投稿はヘッダーのTOPから見ることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/d3aa5579-d17e-19e7-f340-e9e6042c5a86.png" width=50%>

使う媒体によっては横スクロールして、消去ボタンで投稿を消去できます。
***
</details>


<details><summary>目標起床時間変更機能</summary>

設定ページから目標起床時間を変更できます。
これはいつでも変更できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/8f5ac7bc-1988-50f9-75fc-f414f0f92106.png" width=50%>

***
</details>


<details><summary>フォロー機能</summary>

設定ページからフレンドを追加できます。
下にあるフレンドリストからフレンド消去したり、フォローされている人から追加できます。
また、検索して追加もできます（検索については次の検索機能で説明します）。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/8f5ac7bc-1988-50f9-75fc-f414f0f92106.png" width=50%>

***
</details>


<details><summary>検索機能</summary>
フレンド追加の欄に追加したい友達の登録しているニックネームを入力し検索

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/7f0efb12-0e72-3455-d1b6-d77b9dab4695.png" width=50%>

以下のページに飛び、フレンドに追加できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/9a82cf37-4f43-31d4-8b68-0721115f914d.png" width=50%>

***
</details>


<details><summary>いいね・コメント機能</summary>

フレンドページやその詳細ページから。「いいね」や「コメント」することができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/50725876-5779-1156-3dda-54ad391ad9d6.png" width=50%>

***
</details>

<details><summary>チャットGPTによる応援機能</summary>

主な内容は **ChatGPTによるあなたのための応援コメントについて** に書いてある通りです。
チェックを付けるとChatGTPが目標に対して応援コメント
チェックを外すと事前に用意した応援コメントがランダムで帰ってきます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/0b59de94-dfc7-d5c7-081a-b4ef7c35a442.png" width=50%>

 *ChatGTPについてはOpenAI APIの無料枠を作っており、一定以上の通信、使用期限あり、いづれ使えなくなります。*
</details>

## 4.技術
### 使用技術
+ HTML
+ PHP
+ Laravel
+ Bootstrap
+ MySQL
+ AWS(EC2)
+ Heroku
+ GitHub

### DB設計
 ER図
![スクリーンショット (451).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582036/70da406f-8ef1-142c-2c45-12c04631cb92.png)
データベース上には他にもテーブルが存在していますが、使用しているのは上図の通りです。

ここで、userテーブルのgoal_timeは設定ページで変更できるデータであり、postsテーブルのgoal_timeは投稿する際、PostControllerにて、userテーブルのgoal_timeの値が入力されます。


## 5.なんで作ったか
このWebアプリを作ろうと思った理由として、主に３つあります
 **「朝に行動する習慣をつけたかったから」**
 **「エンジニアに興味があり、技術を付けたかったから」**
 **「就活のためのポートフォリオ作成」**

 初めのきっかけは２つ目と３つ目でしたが、何を作ろうと思ったとき、朝活が頭に浮かびました。
 
高校生までは朝派で、早めに学校へ行き、宿題や受験勉強をしていましたが、大学生になってみると、
あら不思議！ **午前中に講義がない日は、起きて時計を見たら10時過ぎではありませんか！**
就活性になって、やるべきことがあるというのに全然進まない…
今こそ朝活をしよう！となったわけですが、 **身についた習慣というのは中々手ごわく、昨日の決意をガン無視していました。**

そして、就活を進める中で、Webエンジニアを目指す際は、ポートフォリオを作成することが多いと聞き、元々、何か作ってみたいとも思っていたこともあり、レバテックカレッジで勉強し、早起き習慣アプリ ーEarly Birdーを作成しました。
（ちなみに「Early Bird」とは「早起き」という意味があるそうです）

これまで挫折し続けた経験から、 **強制力とモチベUPが必須** だと感じていました。
そこで、いい案がないかと調べていると、X（旧ツイッター）で「〇〇やります！」と宣言することで、うまくいったという話を聞きました。そこで **自分以外に宣言するということがまさに強制力に繋がる** と思い、フレンドと起床時間を共有しようと考えました。

また、私は人は褒められて伸びると考えており、 **応援コメントでChatGTPからの返信する機能の追加、朝から目標を入力することでやる気アップ** などで、モチベUPに繋がると思い、実装しました。

## 6.おわりに

このアプリを作成する中で、MVCモデル？DB？調べたとおりにやっているのにうまくいかない！など、さまざま苦戦しましたが、うまく動いたときの喜びや、目指したものが出来ていく高揚感などをたくさん感じ、とても楽しい経験ができ、こんなことを仕事にしていきたいと再確認できました。

<br>

~~このアプリに関しては、Github EducationでHerokuを使ってデプロイしている関係上、長く運営し続けられるわけではありませんが、一人でも早起き習慣が身につくと幸いです。~~
ChatGPTの無料枠が終わったため、現在アプリは使用できません。