はじめに
少し前にDjangoでWebアプリを個人開発したのですが、これについて色々振り返ってみようと思います！
このアプリを作った目的は大きく分けて二つです
- 開発からデプロイまでを行ってWebアプリについて勉強する
- 誰かにとって役立つプロダクトを作ってみる
このアプリはデプロイまで行っているのでこのリンクを踏んで使ってみてください！
どんなサービスなのか？
Web上に日記を保存するサービスです
ただ、それだけではなくて...
- 日記と共に写真を保存すること
- AIに自動で日記を書かせること
ができます！
では、これの何が嬉しいのかというと...
- 日記に写真を添付できるので、普段撮っている写真を思い出として残せる！
- 日記を書くのがめんどくさい人でも簡単に日記を作れる！
という2点です！
このアプリを作ったきっかけは？
アナログの日記に写真を添付できないのって不便じゃない？？
と、思ったことがきっかけでした
スマートフォンカメラの進化とともに、日々の記録はほぼ写真になっていますよね
なのに普段日記を書いている人にとって写真を添付できないのって不便じゃないですか？
なので、写真を添付して日記を保存できるサービスを開発しようと思いました！
Webアプリ詳細
全体図
DjangoでMVTモデルを構成しています
大きく分けて二つのViewがあり、一つが問い合わせを行うView、もう一つが日記についての操作を行うViewです
技術スタック
バックエンド
ライブラリ・ドキュメントも豊富であることから、開発のコストを考慮してPythonをバックエンド用の言語として採用しました！
MVTモデルを簡単に構成できることや, REST APIフレームワークなどがライブラリとして用意されているので将来API開発を行うことを見越してDjangoを採用しました！
フロントエンド
デザインにはbootstrapを用いました
API
日記の自動生成を行うためにOpenAIのAPIを使用しました
インフラ
デプロイはAWSのEC2を使って行いました
サービス
HOME
これがホーム画面です
メールアドレスとパスワードを登録すると、次の日記一覧ページに飛びます
日記一覧
右上の二つのボタンそれぞれのページに飛び、日記を作ることができます
AIで新規生成 (ここが特にこだわったところです！)
AIで日記を自動生成することを可能にすることで、日記を書くことのハードルが下がり、より多くのユーザに使っていただけると思いました！
箇条書きで今日あった出来事を書くだけで、タイトルと日記を生成してくれます
生成した日記に写真を添付して完成！
苦労したこと
このアプリを作るまでは簡単なWebアプリケーションしか作成したことがなかったので、DjangoのMVTモデルを利用したWebアプリ全体の構成、AWSを使ったデプロイ、セキュリティー対策などを行うことに苦労しました...
研究室の先輩や同期と意見を交換することや、書籍を購入して勉強することで解決しました！
もう一つは、AIで生成した日記を手書きのフォームにどう送るかに苦労しました...
わかりにくいかもしれないので、下の図参照です
まず、日記を保存するための仕組みについて説明します。日記を保存するには、手書きで作成する方法とAIで生成する方法があります。
- 日記を手書きで作成するためには、ManualCreateFormに日記を書いてからDBに保存します
- AIを使って日記を作成するためにはBulletPointFoamに箇条書きで出来事を書き、日記を自動生成し、ManualCreateFoamに転送し、DBに保存します
この転送をどう行ったら良いのかがわかりませんでした
最終的には、AIで生成した日記の内容をセッションに保存し、ManualCreateViewで取り出すことによって解決しました！
Qiitaなどのブログから知見を得ることや、研究室の先輩などに意見をもらうことによって解決することができました
改善点
日記を自動生成している間の待機時間が暇！！という点です
APIのレスポンスが帰ってくるのがかなり遅いので、Loading画面を作成するべきですね
横スクロールの簡単なゲームを作成するのもいいかもしれませんね
学んだこと
Webアプリを開発するところからデプロイまでを行うことで、フロントエンド・バックエンド・インフラについて広く知識をつけることや、デプロイするにあたって暗号化などの技術について勉強したので、セキュリティについて知識を深めることができました
まとめ
フロント・バックエンド・インフラまで幅広い領域に触れられたのはいい経験でした。今回は勉強することが大きな目的であったので、次は独創的で面白いものを開発します！