2019.02.26

LaravelアプリからCloudinaryに画像をアップロードする方法

今回はLaravelアプリからCloudinaryに画像をアップロードする方法を試していきたいと思います。

Laravel Cloudinary

バックエンド

[ 目次 ]

はじめに
Cloudinaryとは
Cloudinaryの登録方法
Laravelのセットアップ
Cloudinaryへのアップロードの実装方法
Cloudinaryのダッシュボードから画像を加工する
最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は、LaravelアプリCloudinaryに画像をアップロードする方法を試していきたいと思います。
Cloudinary

利用するライブラリは、jrm2k6/cloudder になります。
jrm2k6/cloudder

■ 検証環境

PHP	Laravel
^7.2.4	5.7.*

Cloudinaryとは

公式サイトでは

Cloudinary offers an incredibly feature-rich image and video platform for developers. Used by small teams to Fortune 500 companies, Cloudinary scales to any requirement with zero compromise on quality of service.

と記載がありますが、具体的には、画像や動画などのメディアをストレージにアップロードし保存・管理することが可能なクラウドサービスです。また、メディアファイルの変換や高速配信ができます。

無料枠もありますので、PRICING もご確認ください。

Cloudinaryの登録方法

公式サイトからアカウントの新規登録を行っていきます。

Cloudinary トップページ

新規登録画面から新規登録してください。
以下の内容から新規登録が可能です。

Your name: 名前
E-mail : メールアドレス
Password : パスワード
Country : 国
Phone: (Optional) : 電話番号
Company or site name: (Optional) : 企業名 or サイト名
Primary interest: 興味がある内容（今回は、"Image and Video Management via APIs" にしました）

Cloudinary 新規登録

新規登録時に入力したメールアドレス宛に認証メールが届きます。メール内のURLから認証を行ってください。
また、ダッシュボードではWellcomeモーダルが表示されます。必要な情報を入力、選択しダッシュボードを表示しましょう。

Cloudinary Wellcomeページ 1

Cloudinary Wellcomeページ 2

Cloudinary Wellcomeページ 3

Cloudinary Wellcomeページ 4

Cloudinary Wellcomeページ 5

Cloudinary ダッシュボード

ここまででCloudinaryの新規登録から初期設定まで完了です。
ダッシュボードの "Account Detail"にあるAPI KeyやAPI Secretを利用してCloudinaryに接続しますので、こちらの内容をメモしておきましょう。

Laravelのセットアップ

Laravelのプロジェクトにjrm2k6/cloudderをインストールします。
インストールにはcomposerを利用します。

$ composer require jrm2k6/cloudder

config/app.phpに設定を追加します。

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

'aliases' => [
    // ...
    'Cloudder' => JD\Cloudder\Facades\Cloudder::class,
]

続いて、Cloudinaryの設定ファイルを以下のコマンドから生成します。
config/cloudder.phpが生成されるのを確認しましょう。

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

config/cloudder.phpの中身は以下のようになります。

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cloudinary API configuration
    |--------------------------------------------------------------------------
    |
    | Before using Cloudinary you need to register and get some detail
    | to fill in below, please visit cloudinary.com.
    |
    */

    'cloudName'  => env('CLOUDINARY_CLOUD_NAME'),
    'baseUrl'    => env('CLOUDINARY_BASE_URL', 'http://res.cloudinary.com/'.env('CLOUDINARY_CLOUD_NAME')),
    'secureUrl'  => env('CLOUDINARY_SECURE_URL', 'https://res.cloudinary.com/'.env('CLOUDINARY_CLOUD_NAME')),
    'apiBaseUrl' => env('CLOUDINARY_API_BASE_URL', 'https://api.cloudinary.com/v1_1/'.env('CLOUDINARY_CLOUD_NAME')),
    'apiKey'     => env('CLOUDINARY_API_KEY'),
    'apiSecret'  => env('CLOUDINARY_API_SECRET'),

    'scaling'    => [
        'format' => 'png',
        'width'  => 150,
        'height' => 150,
        'crop'   => 'fit',
        'effect' => null
    ],

];

Cloudinaryの設定をenvに追加します。設定内容はダッシュボードの"Account Detail"から確認しましょう。

CLOUDINARY_API_KEY = 'Your key'
CLOUDINARY_API_SECRET = 'Your secret'
CLOUDINARY_CLOUD_NAME = 'Your cloud name'

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

実際に導入したプロジェクトのソースを抜粋します。
（ほんと一部でごめんなさい・・・）

HTMLのフォームは以下のようにします。
（Bootstrap4を使っているので、Bootstrap4のclassが設定されています）

<form method="post" action="{{ route('[対象のルート名を入れる]') }}" enctype="multipart/form-data">
  @csrf
  <div class="form-group form-row">
    <label for="logo" class="col-lg-3 col-form-label text-lg-right">ロゴ</label>
    <div class="col-lg-8">
      <input type="file" name="logo">
      @if ($errors->has('logo'))
        <span class="invalid-feedback" role="alert">
          <strong>{{ $errors->first('logo') }}</strong>
        </span>
      @endif
    </div>
  </div>
  
  ・・・
  
  <div class="form-group form-row">
    <div class="col-lg-8 offset-lg-3">
      <button class="btn btn-primary btn-lg btn-block" type="submit">
        <i class="fas fa-sync mr-1"></i>保存
      </button>
    </div>
  </div>
</form>

Controller側では、以下のようなソースでサーバーにアップロードしたファイルを更にCloudinaryにアップロードできます。

// 以下のuse句を忘れないように
use JD\Cloudder\Facades\Cloudder;

・・・

public function upload(Request $request)
{
    $data = $request->all();
    if ($logo = $request->file('logo')) {
        $image_name = $logo->getRealPath();
        // Cloudinaryへアップロード
        Cloudder::upload($image_name, null);
        list($width, $height) = getimagesize($image_name);
        // 直前にアップロードした画像のユニークIDを取得します。
        $publicId = Cloudder::getPublicId();
        // URLを生成します
        $logoUrl = Cloudder::show($publicId, [
            'width'     => $width,
            'height'    => $height
        ]);
     }
     ・・・
     
     // この後、CloudinaryのPublicIDとロゴURLをDBに登録したり、更新したりする
     // ロゴは変換したりしないのでURLをDBに登録することにした。CloudinaryのPublicIDがあれば色々画像を加工できます。
}

Cloudinaryにアップロードした画像は削除したい場合は以下のような実装になります。

Cloudder::destroyImage($publicId);
Cloudder::delete($publicId);

Cloudinaryのダッシュボードから画像を加工する

ダッシュボードから"Media Library"画面に遷移してみてください。アップロードした画像が確認できます。
"画像編集" 画面に遷移すると下のスクショの画面から画像を加工することができます。

Cloudinary 画像編集画面

最後に

今回はLaravelでCloudinaryを利用する方法をまとめました。
今後は他の言語でも利用してみたいと思います。また、運用を続けて出て来た知見などあれば追記したいと思います。

Nakamu Blog