rr-et

rr-et_logo_readme

「あるある」でつながる、

RR-ET(アルアル・イーティー)

rr-et_service_summary_220111

プロジェクトの概要説明

「あるある」を通して、日常・ネット上でのコミュニケーションのきっかけを提供するSNSサービスです。

あるあるネタのことを以下から「ネタ」と表記します。

実装機能一覧

機能概要

機能	概要
ネタ関連機能	投稿・編集・削除・検索機能
ネタ画像投稿機能	-
ネタソート機能	いいね・新規投稿順にソート
ネタいいね機能	いいねしたネタをユーザー詳細ページで閲覧可
ネタコメント機能	投稿ネタに関してコメント投稿・削除
ネタ下書き機能	-
カテゴリー関連機能	ネタに関連するカテゴリーごとに閲覧する機能
カテゴリー提案機能	カテゴリー一覧にない項目を提案
認証機能	ログイン・ログアウト・新規登録・登録内容変更
ゲストログイン機能	-
単体・E2Eテスト機能	PHPUnit, Cypress

サービスのスクリーンショット画像 or デモGIF 動画

投稿一覧

無限スクロール・いいね・コメント・検索・ソート機能

ネタ画像投稿機能

画像アップロード時にリサイズ・圧縮をかけることで、表示時読込速度の向上を図りました。(5MB -> 82KB)

image_upload_220126

ネタ投稿・投稿下書き機能

draft_220113

カテゴリー提案機能

関連するカテゴリーがないときに、提案する機能
提案投稿画面
管理者のみ表示できる一覧ページ。採用ボタンですぐカテゴリー追加ができます。

カテゴリー提案_4

使用言語、環境、テクノロジー

バックエンド

PHP 7.4
Laravel 6.20.43
MySQL 5.7

バックエンド側使用ライブラリー/フレームワーク

名称	備考
PHPUnit	単体テスト
PHP_CodeSniffer	静的コード解析ツール
laracasts / cypress	E2Eテストでのバックエンド側データ操作のため
guzzle	メール認証で Mailgun API を使用するため
laravel-breadcrumbs	パンくずリスト
intervention/image	画像圧縮・GD Library
flysystem-aws-s3-v3	S3バケットに保存
flysystem-cached-adapter	画像アップロードパフォーマンス向上化

フロントエンド

JavaScript (ES6)
jQuery

フロントエンド側使用ライブラリー / フレームワーク

名称	備考
Bootstrap4	-
FontAwesome	アイコン
jScroll	無限スクロール
flatpickr	日付入力ツール

インフラ：AWS

Terraform を用いて環境構築を一部コード化しました。

名称		備考	Terraform化
EC2	Web サーバー: Nginx	-	o
RDS	RDBMS: MySQL	-	o
Route 53	DNSサービス	-	-
ELB (ALB)	負荷分散機能	-	-
Certificate Manager	SSL証明書サービス	-	-

開発環境

Docker 20.10.8
Docker-compose 1.29.2

ER図

ER_diagram_220126

システム構成図

Infrastracture_Diagram_20220126

使い方

インストール・開発環境下での実行方法

$ git clone https://github.com/Misha434/rr-et.git
$ cd rr-et
$ docker-compose build
$ docker-compose up -d
$ docker-compose exec app bash

$ cd rr-et
$ composer install

$ cp .env.example .env
$ vi .env

## 以下を書き換え
DB_DATABASE=sample
DB_HOST=mysql
DB_USERNAME=user
DB_PASSWORD=password

$ php artisan migrate

## テストデータ挿入
$ php artisan migrate:refresh
$ php artisan db:seed

## localhost:8000 にアクセス

テスト方法

正常系
異常系: 入力フォーム一部境界値分析

デプロイ方法

手動デプロイ

工夫したポイント

ネタ編集機能

投稿後にネタ内容を編集する場合は、その投稿のいいね全取消・投稿済コメントには「このコメントはネタ内容変更前のコメントです」と告知するようにしました。ネタ変更前ネタ変更後

ユーザー権限

ユーザー権限に関するカラム(role)の番号の割当てを、権限設定の追加・変更しやすいように設計しました。

DB インデックス設計

各テーブルの 'id', と固有値 (ex: User: id, email)にはUnique制約、更新頻度が少なく検索頻度が多いカラムにはindexを付与しました。

いいねの二重クリック防止

いいね機能で二重送信を防ぐために、フロント側・バックエンド側で対策しました。フロント側では二重クリックを無効化する仕様とし、バックエンド側ではregenerateTokenをかけることでエラーが発生するように実装しました。

N+1問題への対策

パフォーマンスを意識して N + 1問題を発生させないようにコーディングを進めました。

ゲストログイン

ゲストログイン時は、プロフィール編集画面へのアクセス・updateアクションを不可となるようにしました。

コーディングで意識したこと

変数などは意図が分かる命名を心がけ、アクションなどを実装する際には、実行内容のまとまりごとに空白を空けて段落分けしました。

実行権限一覧

ログインユーザー・管理者に関して、特記なき場合はログインをしているユーザー自身が行なった投稿に対してのみ実行できることとします。

記号	意味
o	実行可能
-	該当アクションなし
x	実行不可

ホーム画面(HomeController)

ユーザー \ アクション	Home
未ログイン	o
ログインユーザー	o
管理者	o

ネタ関連(ScriptController)

ユーザー \ アクション	index	show	create	store	edit	update	destroy
未ログイン	x	-	x	x	x	x	x
ログインユーザー	o	-	o	o	o	o	o
管理者	o	-	o	o	x	o	(1)

(1) 全ユーザーの投稿に対して実行可能

カテゴリー関連(CategoryController)

ユーザー \ アクション	index	show	create	store	edit	update	destroy
未ログイン	x	x	x	x	x	x	x
ログインユーザー	o	o	x	x	x	x	x
管理者	o	o	o	o	o	o	o

いいね関連(LikeController)

ユーザー \ アクション	store	destroy
未ログイン	x	x
ログインユーザー	o	o
管理者	o	o

コメント関連(CommentController)

ユーザー \ アクション	store	destroy
未ログイン	x	x
ログインユーザー	o	o
管理者	o	(1)

(1) ログインユーザー自身と管理者が実行可能

提案関連(ProposalController)

ユーザー \ アクション	index	create	store	destroy	aprove
未ログイン	x	x	x	x	x
ログインユーザー	o	o	x	x	x	x	x
管理者	o	o	o	o	o	o	o

今後の課題

インフラの完全Terraform化
~~画像投稿機能~~
リファクタリング
いいね機能非同期化

Misha434 / rr-et

readme