紹介すること

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

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

Cloudinaryへ登録

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

右上のSIGN UP FOR FREEからCloudinaryにサインアップ
名前、Emailアドレス、パスワード、国、電話番号（オプショナル：企業名又はサイト名、興味）
を記入する。

サインアップが終了すると登録したメールアドレスへ認証メールが届くので、認証を行う。
Welcome to Cloudinaryというダッシュボードが出てくるので必要事項を記入
初期設定まで完了!!
Account DetailにあるAPI Key、API Secret、Cloud nameを利用してCloudinaryに登録する。

Laravelのセットアップ

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の中身）

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

CLOUDINARY_API_KEY = 'Your API Key'
CLOUDINARY_API_SECRET = 'Your API Secret'
CLOUDINARY_CLOUD_NAME = 'Your Cloud name'

セットアップ終了！

Cloudinaryへのアップロードの実装方法

以下3点を説明しています。 -Migrationファイル作成（カラム追加） -画像投稿機能/CREATE機能 -画像削除機能/DELETE機能

Migrationファイル作成（カラム追加）

以下は、すでに作成していた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ファイルを以下のように作成する。

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

php artisan migrate

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

画像投稿機能/CREATE機能

1.母子手帳アプリ画像投稿フォームのあるページ
albums/create.blade.php

画像投稿する際も、画像投稿のない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;

3.投稿内容一覧表示画面
albums/index.blade.php

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

<img src="{{$album->img}}" alt="">

CREATE機能完成！

画像削除機能/DELETE機能

削除ボタンを押したら、削除する投稿の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アクション

削除機能完成！

最後に

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