こんにちは！すぎちゃんです！
今回は前編に引き続き、Fargateコンテナと連携をした「エロ画像防止機能」をlaravelで作っていこうと思います! 
こちらの記事にも「いいね 
」よろしくお願いします！
ディレクトリ構造
今回の実装で使用する、クラス、bladeファイルを一挙公開いたします！
srcを起点にtreeを起動してしまうと枠に収まりきらなくなるので、直下のappディレクトリ、resourcesディレクトリでそれぞれコマンドを叩きファイル構造を可視化しました。
(省略)と末尾についているディレクトリについては、今回のエロ画像検出機能とは関係がないので配下のディレクトリ、及びファイルの表示は控えさせていただきます
src/app(サーバーサイド)
sugi@sugizaki-mac app % tree
.
├── Auth(省略)
├── Console(省略)
├── Exceptions(省略)
├── Http
│ ├── Controllers
│ │ ├── Profile
│ │ │ ├── ProfileController.php
│ │ │ └── ProfileImageController.php
│ ├── Domains
│ │ └── NsfwApi
│ │ ├── NsfwErrorResponseDomain.php
│ │ └── NsfwOutputResponseDomain.php
│ ├── Kernel.php
│ ├── Middleware(省略)
│ └── Services
│ └── Profile
│ ├── DeleteProfileImage.php
│ └── UpdateProfileImage.php
├── Models(省略)
├── Providers(省略)
├── Util
│ └── HttpClient.php
└── Validators(省略)
さっくりと説明すると・・・
Controllers:
フロントエンドとサーバーサイドの繋ぎ目の役割を果たす。
bladeから受け取った変数を受け取り、Serviceクラスに渡す。
そしてServiceクラスで処理した結果を受け取り、bladeにまた投げる。
DBの処理をここで書かないのがエンジニア間での暗黙の了解。
Services:
DB操作（レコードの生成・更新・削除）や外部APIの呼び出しを担当。
Domains:
出力用データの整形。
出力用の型を決めておくと何かと運用・保守がスムーズになる。
NsfwOutputResponseDomain.phpは正常時に出力されたレスポンスを格納し、
NsfwErrorResponseDomain.phpはエラー時に出力されるレスポンスを格納する。
src/resources (画面関連)
sugi@sugizaki-mac resources % tree
.
├── css(省略)
├── js(省略)
├── lang (省略)
├── sass (省略)
└── views
├── auth (省略)
├── components
│ ├── alert.blade.php
│ ├── form_action_modal.blade.php
│ └── profile_image.blade.php
├── layouts
│ └── app.blade.php
└── profile.blade.php
今回メインで編集するのがprofile.blade.phpです！
alert.blade.phpは画像アップロード時orエロ画像検出時のアラート、form_action_modal.blade.phpについては画像アップロードフォームにそれぞれ対応します！
次はS3へヒアウィーゴー!!
S3の設定
1. 初期設定
S3の設定がお済みで無い方は以下の記事を参考にしてください。
2. S3バケットポリシーの更新
1で作成したS3バケットの詳細画面に遷移し、画面上部に位置する「アクセス許可」のタブをクリックします。
下にスクロールしていくと「バケットポリシー」のブロックが表示されます。ブロック右上にある「編集」ボタンをタップし、以下の内容を貼り付けてください。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::pictures-local/*",
"Condition": {
"IpAddress": {
"aws:SourceIp": [
<端末のIPアドレス>,
<Fargate taskに紐づいているIPアドレス> // 今回追加するもの
]
}
}
}
]
<Fargate taskに紐づいているIPアドレス>には前回の記事で設定したタスクのパブリックIPアドレスを設定しましょう 
これらの設定を怠ると、折角S3に画像をアップロードしてもnsfw_apiが画像にアクセスできません 
サーバーサイドの処理
1. 画像の前処理
アップロードされた画像がエロ画像かそうでないかを問わず、以下の流れで一旦S3に保管されます！
- ユーザーからアップロードされた画像ファイルを、ローカルのストレージ（
public/imgディレクトリ）に保存 - 一意のファイル名を生成するために、MD5ハッシュ関数を用いてランダムな文字列を作成し、それを36進数に変換してファイル名に設定する
- ローカルストレージに保存された画像を取得し、その内容を$fileContentsに格納
- 取得した画像の内容をS3バケットにアップロード。アップロードしたS3オブジェクトには、2で生成したランダムなファイル名を紐付ける
- アップロードした画像のS3上のURLを取得し、$s3Pathに格納する
public function update(Request $request, UpdateProfileImage $updateProfileImage)
{
if(!array_key_exists("image", $request->all())){
return null;
}
# ①
$path = $request->file('image')->store('public/img');
$nsfwResponse = $updateProfileImage->execute($path);
# ...省略
}
public function execute(?string $path)
{
# ②
$randomStr = base_convert(md5(uniqid()), 16,36);
$fileName = $randomStr.'.png';
# ③
$fileContents = Storage::get($path);
# ④
Storage::disk('s3')->put($fileName, $fileContents);
# ⑤
$s3Path = Storage::disk('s3')->url($fileName);
# ...以下略
}
上記のステップが終わった後はnsfw_apiにリクエストを送り、
apiレスポンスの結果によりサーバーサイドの処理を分岐させます。
2-a. 猫の画像をアップロードした場合
nsfw_apiによってエロ画像と判定されなかった画像は、以下のステップで処理が行われます。
- usersテーブルに1で保存したオブジェクトのURLとキーを保管する
- もし更新前の画像がデフォルトのものでなければ、その画像の情報をS3バケットから削除する
- ローカルのストレージから画像データを削除する
- viewに渡すデータを整形する
public function execute(?string $path)
{
# ...省略
# ①
$user = Auth::user();
$oldProfileImageKey = $user->profile_image_key;
$user->profile_image_url = $s3Path;
$user->profile_image_key = $fileName;
$user->save();
# ②
if($oldProfileImageKey && $oldProfileImageKey !== $fileName) {
$this->deleteUploadedImage($oldProfileImageKey);
}
# ③
Storage::delete($path);
# ④
return new NsfwOutputResponseDomain(
$nsfwApiResponse['score'],
$nsfwApiResponse['url']
);
}
2-b. エロ画像をアップロードした場合 
S3にアップロードされた画像がエロ画像と判定された場合は以下のステップで処理を行います。
- S3オブジェクトをバケットから削除する
- ローカルのストレージからも画像を削除する
- viewに渡すデータを整形する
public function execute(?string $path)
{
# ... 省略
$nsfwApiResponse = $this->sendNsfwApiRequest($s3Path);
# ... 省略
if ($nsfwApiResponse['score'] >= 0.8) {
# ①
$this->deleteUploadedImage($fileName);
# ②
Storage::delete($path);
# ③
return new NsfwOutputResponseDomain(
$nsfwApiResponse['score'],
$nsfwApiResponse['url']
);
}
# ... 省略
}
3. それ以降の処理
public function update(Request $request, UpdateProfileImage $updateProfileImage)
{
# ... 省略
# ①
$nsfwResponse = $updateProfileImage->execute($path);
# ②
$nsfwResponseArray = $nsfwResponse->toArray();
# NSFW応答の処理
# ③
$redirectData = [
'bgColor' => $nsfwResponseArray['alertBgColor'],
'result' => ($nsfwResponse instanceof NsfwErrorResponseDomain)
? $nsfwResponseArray['code'] . ' error: ' . $nsfwResponseArray['message']
: $nsfwResponseArray['message']
];
return redirect('/profile')->with($redirectData);
}
このステップではUpdateProfileImage.phpのexecuteメソッドの処理結果をprofile.blade.phpファイルに表示させるまでの処理を説明します。
- サービスクラス
UpdateProfileImage.phpで処理した内容を$nsfwResponseに格納する。NsfwOutputResponseDomainorNsfwErrorResponseDomainのどちらかが代入される - 出力用のデータを整形する
- アラートの背景色、メッセージ(※1)を出力する
メッセージのルールはこちらで参照できます。
メッセージと背景色をviewファイルに受け渡すと、
画像更新時にアラートバルーンが表示されます！
視覚的にわかりやすくするために登録成功時は緑色、エロ画像アップロード時orエラー時は赤色にするなど工夫を凝らしました
@if(session('result'))
<x-alert :message="session('result')" :color="session('bgColor') ?? 'success'"/>
@endif
<!-- 以下略 -->
<div class="alert alert-{{$color}} d-flex align-items-center alert-dismissible fade show mb-3" role="alert">
<div>{{ $message }}</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
以上が実装の流れとなります！
ここまでお読みいただきありがとうございます 
まとめ
本記事では、エロ画像検出APIの利用方法とその重要性について解説しました！
エロ画像のアップロードを防ぐことは、ユーザー体験の向上やコンプライアンスの遵守においてすごい大切です。また、AWS ECS、nsfw_apiなどのAPIを活用することで、効率的に画像のモデレーションを実現できることがわかりました
ぜひ本記事を参考に、自分のプロジェクトにも導入してみてください!!!