LaravelアプリからCloudinaryへの画像投稿

<h1>紹介すること</h1>
**Cloudinary**:
 画像を保存することができるクラウドサービス
⇒[Cloudinary](https://cloudinary.com/)

- Cloudinaryへの登録
- Cloudinary使用のための、Laravelのセットアップ
- Cloudinaryへのアップロードの実装方法



<h1>Cloudinaryへ登録</h1>
チーム開発では、誰か一人がCloudinaryで実装しデプロイすれば、画像投稿機能が使えるが、
ローカルでも同じようにCloudinaryで動かす場合は、各々がCloudinaryを登録する必要がある。

1. 右上の**SIGN UP FOR FREE**からCloudinaryにサインアップ
名前、Emailアドレス、パスワード、国、電話番号（オプショナル：企業名又はサイト名、興味）
を記入する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656419/bf048980-4345-efb1-3c08-9d10cacce879.png)
サインアップが終了すると登録したメールアドレスへ認証メールが届くので、**認証**を行う。


2. Welcome to Cloudinaryというダッシュボードが出てくるので必要事項を記入
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656419/8afea478-a2c3-77c2-e2d9-82f577d22b26.png)


3.  初期設定まで完了!!
Account Detailにある**API Key**、**API Secret**、**Cloud name**を利用して**Cloudinary**に登録する。
![cloudinary.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656419/fb04fafe-f420-1b76-74e3-3036b56a35f3.png)


<h1>Laravelのセットアップ</h1>
1.Laravelプロジェクトにjrm2k6/cloudderをインストールする。インストールには**composer**を利用する。

```
$composer require jrm2k6/cloudder
```
2.config /app.phpの**'providers'**と**'aliases'**設定を追加する。

```
'providers' => [
    // ...
    JD\Cloudder\CloudderServiceProvider::class
],

'aliases' => [
    // ...
    'Cloudder' => JD\Cloudder\Facades\Cloudder::class,
]
```
3.Cloudinaryの設定ファイルを以下のコマンドから生成する。**config/cloudder.php**が生成されるのを確認

```
php artisan vendor:publish --provider="JD\Cloudder\CloudderServiceProvider"
```

（config/cloudder.phpの中身）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656419/ff5ce5a5-d039-978a-4568-b712f56026e3.png)

4.Cloudinayの設定を**.env**ファイルに追加する。
 設定内容はCloudinaryの*Account Detail*から確認する。

```
CLOUDINARY_API_KEY = 'Your API Key'
CLOUDINARY_API_SECRET = 'Your API Secret'
CLOUDINARY_CLOUD_NAME = 'Your Cloud name'
```
セットアップ終了！


<h1>Cloudinaryへのアップロードの実装方法</h1>
以下3点を説明しています。
-Migrationファイル作成（カラム追加）
-画像投稿機能/CREATE機能
-画像削除機能/DELETE機能

---
<h3>Migrationファイル作成（カラム追加）</h3>
以下は、すでに作成していたAlbumsテーブルのmigrationファイル。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656419/9efb6675-3e21-1b04-e869-b15884750ad5.png)
**imgカラム**はローカルデータベースで画像を保存する際のことを想定していたため、**Cloudinary上で管理するためのカラム(public_id)**が必要となる。今回は、テストデータを残しておきたかったためrefreshやfreshといったmigrationコマンドを使わず、既存のテーブルにカラムを追加するコマンドを使用。

```
php artisan make:migration add_public_id_to_albums_table
```
作成したmaigrationファイルを以下のように作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656419/77692d8b-ea97-f98a-c29b-6781748ae110.png)

記入できたら、以下のコマンドで

```
php artisan migrate
```
マイグレーションファイル作成（カラム追加）終了！

---
<h3>画像投稿機能/CREATE機能</h3>

**1.母子手帳アプリ画像投稿フォームのあるページ**
albums/create.blade.php
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656419/df4ee6ff-96b5-1dd0-1624-ef98852e3c93.png)
画像投稿する際も、画像投稿のないCreate機能と同様に、**POSTメソッド**で送り、**AlbumController.phpのstoreアクション**を動かす。**enctype="multipart/form-data"**は複合データ型であることを示し、複数の種類のデータ形式を扱う事でできるようになる。(.jpeg /.PNG/.JPGなど )
(albums/create.blade.phpで**input type="file"**としているため、必要となってくる。)

```
<form action= "{{route('albums.store')}}" method= "post" enctype="multipart/form-data">
```

**2.コントローラの設定（保存処理）**
AlbumController.php　storeアクション

```
//AlbumController.phpの上部に以下のuse~記述を忘れないようにする！
use JD\Cloudder\Facades\Cloudder;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656419/32358540-a91c-2bf3-4861-92ca9793f3ed.png)

**3.投稿内容一覧表示画面**
albums/index.blade.php
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656419/3ce65c8f-529e-eb86-7134-9e106368759d.png)

画像が保存される際は、画像そのものではなく、**画像のurl**が保存されるので下記のように記述する。

```
<img src="{{$album->img}}" alt="">
```
CREATE機能完成！

---
<h3>画像削除機能/DELETE機能</h3>


削除ボタンを押したら、削除する投稿のidを持ってAlbumControllerのdestroyアクションを動かす。

```
// albums/index.blade.php
<from action="{{route('albums.destroy', $album->id)}}" method="post">
   {{ csrf_field() }}
   {{ method_field('DELETE') }}
   <button class="delete">削除</button>
</form>
```
---
**コントローラの設定(削除処理)**
AlbumController.php　destroyアクション
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656419/8a2e1e8d-0aa3-1a83-9e18-5631b298f7e0.png)
削除機能完成！

<h1>最後に</h1>
実装後、画像投稿・削除をCloudinary上のMedia Libraryでも確認ができたら完成です！