Laravel開発、作成したアプリをデプロイして本番環境で動作させる【8】画像編集
デプロイして本番環境でアプリを動作させるシリーズの続きです。
S3への画像の追加及び削除の処理までようやく完了したので、最後は編集です。
これが実装できればS3関連の画像処理としては完了となります。
今回の目的
本番環境で本データの編集による画像関連処理を行えるようにする
なぜやるか
編集時に適切な処理を入れ、常にデータとして必要な画像のみS3に保存できるようにする為
やりたいこと
画像変更時に旧画像削除＋新画像追加をする
画像のみ削除に対応する
やったこと
データ保存している内容について整理
画像変更作業の処理手順を考える
開発環境の処理修正
本番環境の処理実装
- 編集時の画像削除処理を実装
- 編集時の画像追加処理を実装
実施内容
データ保存している内容について
画像編集時の処理手順を考える
まず、今回のアプリで現段階の仕様について改めて整理しました。
本の情報を保存できるようにする(bookテーブル)
タイトル：必須
画像：1枚のみ、画像なしも許容
著者だとか詳細情報なんかも入れようと思っていますが、まず最低限で動く物を作って、そこから拡張する形でLaravelのいろんな機能を学ぶという事を今回しています。
そして、今回の編集で出来るようにすることがこちら。
タイトル：名前の変更ができる、必須入力の為空欄にはできない
画像：画像なしから画像をアップロードできるor画像のみ消去して画像なしにできる
画像編集時の処理手順を考える
画像処理パターンとして考えられるのはこちら
画像なし→編集で画像追加
画像あり→編集で画像変更(旧画像削除＋新画像追加)
画像あり→編集で画像のみ削除
さらにここに開発環境時と本番環境時の処理分岐が必要となります。
開発環境ではPC内で処理、本番環境はS3へ保存することにしている為です。
現在の処理はざっくりこうなっています。
----------------------------
if 画像変更処理がある？
旧画像削除
if 削除のみか？
DBの画像をnullにする
else
新画像追加処理
endif
endif
DB更新
----------------------------
編集とはいえ、内部的には古い画像を削除する工程と新しい画像を追加する処理です。ただし、繰り返しますがこれは現在の処理を書いてますので、開発環境での処理しか入っていません。
開発環境の処理修正
開発環境でのDB保存ファイル名も変更となっていたので、まず開発環境のみできちんと動作するように処理を直すことから始めました。
こちらは、画像の追加及び削除の処理と同じ内容です。今回、開発環境処理に関してはコンポーネントによる処理の切り分けをしていませんでしたので、編集時にも同様の記述をいれました。今後分ける必要があれば分けたいと思います。
本番環境の画像削除処理を実装
ここから本番環境の編集時処理を実装です。
まず、画像変更or画像のみ削除に対応できるように、削除処理をいれていきます。
# ~/app/Http/Controllers/BookController.php
125行目のifでまず画像変更処理があるか判定しています。
画像に対して何も処理をしていない＝formからpictureデータが送信されていない場合は処理がないため、何もしましせん。
129行目で開発環境と本番環境の処理分岐をしています。
そして本番環境のS3画像処理は136行目以降です。
内容としてはコンポーネント化したS3インスタンス処理と画像削除処理の2つを参照するのみです。
画像削除処理の詳細は削除処理編をごらん下さい。
編集時の画像追加処理を実装
続いて、今度は画像を追加するときの処理を実装します。
144行目でform送信内容を確認しています。
画像のみ削除パターンを考慮し、画像なしになる場合はフォームから"no-picture"が送信されるように作成したので、DBに保存される写真URLをnullにしています。
変更による新画像がある場合は、開発環境・本番環境に分けて処理を実施しています。
本番環境処理については、削除時同様にコンポーネント化したS3インスタンスとアップロード処理を参照する形にしました。
画像追加処理の詳細は追加処理編をごらん下さい。
この後、コードを見直すと変更処理時に必ず旧写真を削除する流れになっていましたので、多少の修正が入りましたが、これを修正することで編集作業としては完了しました。
※新規登録時に画像なしで編集で画像追加のパターンが考慮されていませんでした。
以上で本番環境でS3を利用した画像処理「新規追加・削除・編集」がようやく完成しました。
AWSにコンポーネントといろいろやってきましたが、動作を理解するのが解決の近道だと感じました。
この後はデザインが適当なままなので、そちらの見直しと、仮置き状態のままのテキスト編集やログイン機能周りを実施できたらと考えています。
詳細コードはこちらです
本番環境サイトはこちらです
protected-fortress-61913.herokuapp.com
