ChatGPTで日記を自動で書いてもらおう！

## はじめに
少し前にDjangoでWebアプリを個人開発したのですが、これについて色々振り返ってみようと思います！

このアプリを作った目的は大きく分けて二つです
1. 開発からデプロイまでを行ってWebアプリについて勉強する
2. 誰かにとって役立つプロダクトを作ってみる

このアプリはデプロイまで行っているので[このリンク](https://privatediary-by-ru.com/)を踏んで使ってみてください！

## どんなサービスなのか？
**Web上に日記を保存する**サービスです

ただ、それだけではなくて...

1. 日記と共に**写真**を保存すること
2. **AIに自動で**日記を書かせること

ができます！　
では、これの何が嬉しいのかというと...

1. 日記に写真を添付できるので、普段撮っている写真を思い出として残せる！
2. 日記を書くのがめんどくさい人でも簡単に日記を作れる！

という2点です！

## このアプリを作ったきっかけは？
**アナログの日記に写真を添付できないのって不便じゃない？？**　
と、思ったことがきっかけでした

スマートフォンカメラの進化とともに、日々の記録はほぼ写真になっていますよね

なのに普段日記を書いている人にとって写真を添付できないのって不便じゃないですか？

なので、写真を添付して日記を保存できるサービスを開発しようと思いました！


## Webアプリ詳細

### 全体図
DjangoでMVTモデルを構成しています

大きく分けて二つのViewがあり、一つが問い合わせを行うView、もう一つが日記についての操作を行うViewです
![Private_diary.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/dc5970cc-50cc-1a0f-ac23-db67a52de5f8.jpeg)

### 技術スタック
#### バックエンド
ライブラリ・ドキュメントも豊富であることから、開発のコストを考慮して**Python**をバックエンド用の言語として採用しました！
MVTモデルを簡単に構成できることや, REST APIフレームワークなどがライブラリとして用意されているので将来API開発を行うことを見越して**Django**を採用しました！
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/47a6b313-5bf1-544e-165b-775024f39edf.png">

#### フロントエンド
デザインには**bootstrap**を用いました
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/ef4723bc-fbfb-c8a1-3bb3-6da5b4405980.jpeg">

#### API
日記の自動生成を行うために**OpenAIのAPI**を使用しました
<img width="150" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/8ac368b6-f58a-2735-1dee-8d531928baa6.png">

#### インフラ
デプロイは**AWS**のEC2を使って行いました
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/4e5f1f1e-fcc8-2841-9db9-1826252ba1bc.png">



### サービス
**HOME**
これがホーム画面です
メールアドレスとパスワードを登録すると、次の日記一覧ページに飛びます
![876C11B9-5613-43C1-BED7-18DBE3BF993A_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/e978354b-94c4-50c6-6122-c6bcb6736e67.jpeg)

**日記一覧**
右上の二つのボタンそれぞれのページに飛び、日記を作ることができます
![631CD674-3B4F-452C-BC27-3D3D4D75BF76_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/c5317c69-2bdc-c339-2090-0e15dbb19fe3.jpeg)

**AIで新規生成 (ここが特にこだわったところです！)**
AIで日記を自動生成することを可能にすることで、日記を書くことのハードルが下がり、より多くのユーザに使っていただけると思いました！

箇条書きで今日あった出来事を書くだけで、タイトルと日記を生成してくれます
![4394A269-518B-4C0D-ADE8-655D433B1EC4_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/2b99692c-80c0-95a5-6894-f1ce0497e98c.jpeg)


生成した日記に写真を添付して完成！
![F7D7A9DE-13F3-4F14-9BD2-8024C833BBCB_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/425abc78-de50-aec9-21bd-4cf3b14dd675.jpeg)

## 苦労したこと
このアプリを作るまでは簡単なWebアプリケーションしか作成したことがなかったので、DjangoのMVTモデルを利用したWebアプリ全体の構成、AWSを使ったデプロイ、セキュリティー対策などを行うことに苦労しました...
研究室の先輩や同期と意見を交換することや、書籍を購入して勉強することで解決しました！

もう一つは、AIで生成した日記を手書きのフォームにどう送るかに苦労しました...
わかりにくいかもしれないので、下の図参照です

まず、日記を保存するための仕組みについて説明します。日記を保存するには、手書きで作成する方法とAIで生成する方法があります。
- 日記を手書きで作成するためには、ManualCreateFormに日記を書いてからDBに保存します
- AIを使って日記を作成するためにはBulletPointFoamに箇条書きで出来事を書き、日記を自動生成し、ManualCreateFoamに**転送**し、DBに保存します

この**転送**をどう行ったら良いのかがわかりませんでした

最終的には、AIで生成した日記の内容を**セッション**に保存し、ManualCreateViewで取り出すことによって解決しました！

 Qiitaなどのブログから知見を得ることや、研究室の先輩などに意見をもらうことによって解決することができました
![Private_diary (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/60a6b011-65ec-c844-0973-179949fc7672.jpeg)




## 改善点
日記を自動生成している間の待機時間が暇！！という点です

APIのレスポンスが帰ってくるのがかなり遅いので、Loading画面を作成するべきですね

横スクロールの簡単なゲームを作成するのもいいかもしれませんね

## 学んだこと
Webアプリを開発するところからデプロイまでを行うことで、フロントエンド・バックエンド・インフラについて広く知識をつけることや、デプロイするにあたって暗号化などの技術について勉強したので、セキュリティについて知識を深めることができました

## まとめ
フロント・バックエンド・インフラまで幅広い領域に触れられたのはいい経験でした。今回は勉強することが大きな目的であったので、次は独創的で面白いものを開発します！