名言アプリ作成「導入」

# はじめに
今回開発したものは、 https://quotablemoments.com/ で私がec2インスタンス起動中のみ利用できるようになっております。（諸々お金の事情で💦）ちなみにアプリケーションキーは login114 を入力すれば利用できます。

名言には、一言の中に深い気づきやインスピレーションが込められており、日常の悩みについて解決のヒントくれたり新しい行動のきっかけとなってくれます。

本プロジェクトは、もともと哲学や思想といった分野に興味があり、普段行動への一歩が重い自分が使いたいものをということで着手しました。まだまだ工夫が必要と感じますが、ChatGPTとの対話を通じて、各名言が呼び起こすユーザー自身の思いや考えを整理し、さらなる気づきや新しい発想へと導けるように設計したつもりです。

名言をただ眺めるのではなく、対話を通して自身の内面を見つめ直し、次の一歩につなげる手伝いとなるものを目指しました。

# 使用技術

![mermaid-diagram-2025-02-24-053604.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4007751/87cb46e1-0853-49ba-9a42-821ca049d57b.png)


1. **フロントエンド**  
   - **技術選定:**  
     本プロジェクトのフロントエンドは、HTML と JavaScript を用いて実装しております。今回はシンプルな UI を重視しており、直感的な操作性を確保するために余計な装飾は施しておりません。<br>  
   - **実装上の工夫:**  
     軽量な HTML/JavaScript により、各ブラウザで高速に動作することを意識し、ユーザーが名言と対話機能に集中できる環境を整えております。

2. **バックエンド**  
   - **技術選定:**  
     バックエンドは、Python のマイクロフレームワーク Flask を採用し、シンプルかつ拡張性のある実装を実現しております。<br>
   - **デプロイ:**  
 Webアプリケーションは、Amazon EC2 インスタンス上に構築し、WSGI を介して Apache サーバーでデプロイしております。
 また、Let's Encrypt を利用して SSL 証明書を取得し、HTTPS による安全な通信環境を構築しています。  
さらに、運用の安定性を高めるために、お名前.com にてドメインを取得し、DNS 設定で Aレコード に EC2 の Elastic IP を指定しております。  
これにより、固定のドメイン名と IP アドレスでアクセス可能な環境と、暗号化された安全な通信を実現し、ユーザーに対して信頼性の高いサービスを提供しています。<br>
   - **セキュリティ:**  
     IPA の「安全なウェブサイトの作り方」に基づくセキュアコーディングを実践し、リクエストのバリデーション、エラーハンドリング、ログ管理など、多層的なセキュリティ対策を講じています。<br>  

3. **ChatGPT API連携**  
   - **目的と工夫点:**  
     ユーザーとの対話機能の核として、ChatGPT API を統合しております。ユーザーが抱える課題や思考を引き出すため、ユーザーを想定したプロンプト設計を採用し、出力結果を意図通りに制御する工夫を施していま。<br> 
   - **実装詳細:**  
     バックエンドでユーザーからの入力を受け取り、前処理を経た上で ChatGPT API へリクエストを送信。その応答をユーザーへ返す仕組みを整え、より適切な回答が得られるよう工夫しております。<br>

4. **データベース**  
   - **技術選定:**  
     データベースは、Flask に組み込まれている SQLite を採用しております。<br>  
   - **実装上の工夫:**  
     ユーザー情報、名言データ、対話ログなどの管理に最適なシンプルなスキーマ設計を行い、定期的なバックアップやメンテナンスを念頭に置いた信頼性の高いデータ管理体制を構築しています。<br>

5. **名言情報のスクレイピング**  
   - **情報抽出:**  
     名言とその出展に関する情報は、対象サイト [http://www.meigensyu.com/quotations/index](http://www.meigensyu.com/quotations/index) からスクレイピングにより抽出しております。<br>  
   - **規約遵守:**  
     スクレイピング実施時には、対象サイトの利用規約の有無を十分に確認し、アクセスによる負荷をかけあいように、データの取り扱いに関する法的および倫理的ガイドラインを厳守した上で情報収集を行いました。<br>

---

# 全体アーキテクチャと設計上の工夫

1. **フロントエンド・バックエンド分離アーキテクチャ:**  
   フロントエンドはシンプルな HTML/JavaScript によりユーザーインターフェースの提供に専念し、バックエンドは Flask を用いて API やデータ処理、ChatGPT API との連携を担当しております。この分離により、UI 改善や機能追加、セキュリティ対策がそれぞれ独立して行えるため、保守性と拡張性が大幅に向上しています。<br>

2. **セキュリティとパフォーマンスの両立:**  
   IPA のガイドラインに基づいたセキュアコーディングを実施し、Apache やサーバー側の設定においてもセキュリティ強化を図っています。また、キャッシュ機能やタイムアウト制御の導入により、リクエスト処理の最適化を実現し、ユーザーに高速かつ安定したサービス提供を可能としています。<br>

3. **オープンな開発プロセス:**  
   プロジェクトのソースコードは GitHub 上で公開しており(https://github.com/SophieJam/LQ.git) 、オープンな開発プロセスを推進しております。まだREADMEなど完成していないので開発途中ということなります。ぜひ記事をご覧になった方がコードの方も見て改善点などをツッコんでいただけたら有難いです。<br>

4. **ログイン機能とセッション管理:**  
   ユーザー認証は Flask のセッション機能を活用して実装しており、ログイン時に一意のセッションIDが発行され、サイト全体で認証状態が維持される仕組みを採用しています。さらに、セッショントークンの定期再発行やセッションタイムアウトの設定により、ユーザー情報の保護と快適な利用環境の提供を実現しております。<br>

5. **ユーザー権限管理:**  
   システム内での管理者カウントと一般ユーザーの権限管理を実装しており、特に管理者アカウントには、指定した一般ユーザーを管理者に権限昇格させる機能を付与しております。これにより、システム全体の運用管理がより効率的かつ柔軟に行えるよう工夫しています。<br>

6. **拡張性を視野に入れた設計:**  
   現状のシンプルなシステム設計に加え、将来的な機能追加を容易に実現できるよう、モジュール設計を採用しております。具体的には、名言をもとに目標設定し、スケジュール管理を行う機能や、詳細なログ機能の確立など、今後の拡張に柔軟に対応できる体制を整えています。<br>

## **アプリの機能紹介**
  
以下に、主要な機能を紹介します。

### **1. ユーザー登録・認証、ログアウト**
![スクリーンショット 2025-02-24 211118.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4007751/d24e6a49-3eb3-4a1a-978b-f528ef3f1a11.png)

![スクリーンショット 2025-02-24 211140.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4007751/08351d02-772d-4d7f-bf3b-76b97b29382f.png)

![スクリーンショット 2025-02-24 211157.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4007751/71580016-251f-4682-bd3b-eecebee338dc.png)

- ユーザーはアカウントを作成し、ログインすることで各種機能を利用できます。
- Flaskのセッション管理を活用し、ログイン状態を維持。
- 不正アクセスを防ぐためのセキュリティ対策も実施。
- ログアウト機能により、セッションを安全に終了可能。

### **2. 名言とその名言の画像生成**
![スクリーンショット 2025-02-24 213748.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4007751/befe8286-c3c0-4716-8351-767a459ef830.png)

- SQLiteに保存された名言データの中から、ランダムに名言を取得して表示。
- 名言とその出典を提供し、ユーザーが気に入ったものを記録できる機能。(今後実装予定)
- 取得した名言をもとに、**名言を画像として生成する機能**も搭載。
- 画像生成によって、視覚的に名言を楽しむことが可能。

### **3. ChatGPTとの対話機能**
![スクリーンショット 2025-02-24 215022.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4007751/0aaff50e-8177-4742-b670-1a51502603ed.png)

![スクリーンショット 2025-02-24 215651.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4007751/3ed2fae5-b4a8-42ef-8d1d-ed0907e624e4.png)

- **名言についての対話機能:** 「この名言の意味を詳しく知りたい」「この名言から学べることは？」といった深ぼるような質問から、自分の悩みを相談したり、行動指針を立てたり、教養を深める一歩にしたり自由に使える。  


- **名言をカスタマイズする機能:** ユーザーが名言を編集し、ChatGPTからフィードバックをもらうことが可能。名言にはその短い文章に心に残るような表現の仕方のエッセンスも散りばめられているため表現の練習にもなるだろう。
- プロンプト設計により、ユーザーの意図に沿った回答を提供する工夫がされている。

### **4. ユーザー権限管理**
![スクリーンショット 2025-02-24 215711.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4007751/5d12a37f-e2c7-4613-8fd4-a6d0a08f9a58.png)

![スクリーンショット 2025-02-24 215725.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4007751/f04e0bd2-6e22-4a44-aae8-7bfb631085c6.png)

- ユーザーは **一般ユーザー** と **管理者** の2つの権限に分類。
- **管理者** は、特定のユーザーを管理者に昇格させることが可能。
- **管理者権限では、スクレイピングデータの更新やシステム設定の変更が可能。**（今後実装）
- 権限管理によって、安全で効率的なシステム運用を実現。

---

## **次回の記事について**
次回の記事では、これらの機能を**セキュアコードの観点から掘り下げ**、安全な実装方法について書きます。
実際のコードスニペットを交えながら、どのように安全なシステムを構築しているのかを詳しく紹介する予定です。  
ぜひご期待ください！