【Laravel5.8+Stripe②】メールフォームの実装

f:id:nekorokkekun:20190827102831p:plain:w1000
こちらの連載記事では、LaravelとStripeを使用して企業サイト兼Eコマース（ECサイト）を作成していきます。

Laravelのプロジェクト作成からStripeの実装まで行い、最終的に単発決済・サブスクリプションの実装までを目指します。

シリーズ

ちなみにこちらの記事は、Easy E-Commerce Using Laravel and Stripeという書籍をもとに執筆しています。

シリーズ
Mandrillへの登録
Mandrillへのサインアップ
Guzzle HTTPライブラリのインストール
MandrillのAPIキーを取得・設定
コンタクトフォームの作成
フォーム画面の作成
バリデーション設定
メール受信viewの作成
連載記事

今回はMandrillを使用してメールフォームを実装していきます。

ただ、Mandrillを使用したメール設定は若干ややこしく工数も多いため、飛ばしても大丈夫です。

Mandrillへの登録

Mandrillとは

MailChimpと同じ会社が管理する電子メール配信サービスです。 Mandrillを使用すると、メール配信を自分で管理しようとする際に発生する可能性のある面倒な作業のほとんどがなくなり、電子メールがスパムと誤認されないようにするのに役立つ機能が提供されます。
さらに、マンドリルは最初の2,000通のメールに対して無料でサービスを提供するため、会社のポケットブックを圧迫することはありません。その後、1か月に最大25,000通のメールで$ 9.95になります。
送信された連絡先フォームデータを指定されたアドレスに送信することが唯一の目的である場合、Mandrillはやり過ぎのように思えるかもしれませんが、近年制定された多数のスパム防止対策により、電子メール配信はますます複雑な問題になっていることに注意してください。
連絡先フォームデータは常に同じ会社のアドレスに送信されますが、プロジェクトの後半では、アカウントパスワードの回復など、さまざまな理由でさまざまな顧客のメールアドレスにメールを配信する必要があります。
これらの種類の電子メールはフィルターに巻き込まれない可能性が最も高く、マンドリルなどの信頼性の高い有名な配信サービスで配信されるようにすることで、これらの可能性を高めることができます。

とのこと。Laravelで実装できる1つのメールサービスです。

Mandrillへのサインアップ

まずはMandrillのサイトへ行き、サインアップをします。
f:id:nekorokkekun:20190815143504p:plain

登録が済むとメールが届き、プラン・支払い方法・住所・ビジネスについてなどを選択できます。

Freeプランであれば他の選択肢はなんでもOKです。

Guzzle HTTPライブラリのインストール

Mandrillを使用するために、Guzzle HTTPライブラリのインストールを行います。

/composer.json

    "require": {
        "php": "^7.1.3",
        "fideloper/proxy": "^4.0",
        "laravel/framework": "5.8.*",
        "laravel/tinker": "^1.0",
        "guzzlehttp/guzzle": "~5.3|~6.0" //追記
    },

$ composer install

MandrillのAPIキーを取得・設定

次に、マンドリルアカウントにログインして、シークレットAPIキーを取得します。

まずはMandrillにログインし、ナビバーのExtrasからAPI keysを選択しましょう。
f:id:nekorokkekun:20190815145208p:plain

その後、以下の画面が出てくるため、
f:id:nekorokkekun:20190815145400p:plain
Create A keyというボタンを押しましょう。

APIキーの取得に成功した後、以下の設定を行います。

.env

MAIL_DRIVER=mandrill
MAIL_HOST=smtp.mandrillapp.com
MAIL_PORT=587
MAIL_FROM=YOUR_MANDRILL_EMAIL_HERE
MAIL_NAME=EMAIL_FROM_NAME
MAIL_USERNAME=YOUR_MANDRILL_USERNAME_HERE
MAIL_PASSWORD=YOUR_API_KEY_HERE
MAIL_ENCRYPTION=null

/config/services.php

// 追加
    'mandrill' => [
        'secret' => env('MAIL_PASSWORD'),
    ],

// 変更
'from' => ['address' => env('MAIL_FROM'), 'name' => env('MAIL_NAME')],

コンタクトフォームの作成

次にコンタクトフォームを作成していきます。

まずはコントローラーの作成から。

$ php artisan make:controller ContactController
||>

/app/Http/Controllers/ContactController.php
>|php|
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ContactController extends Controller
{
    public function create(){
        return view('contact.create');
    }
}
||>

/routes/web.php
>|php|
Route::resource('contact', 'ContactController', ['only' => ['create', 'store']]);
||>


*Formファサードの使用
次にFormファサードを使用するためにLaravelCollectiveを導入します。

composer.json
>|php|
    "require": {
        "php": "^7.1.3",
        "fideloper/proxy": "^4.0",
        "laravel/framework": "5.8.*",
        "laravel/tinker": "^1.0",
        "guzzlehttp/guzzle": "~5.3|~6.0"
        "laravelcollective/html": "5.1.*"  // 追加
    },

$ composer update

/config/app.php

    'providers' => [
// 省略

        Collective\Html\HtmlServiceProvider::class, //追加

// 省略
    'aliases' => [
// 省略
        'Form' => Collective\Html\FormFacade::class,　//追加
        'Html' => Collective\Html\HtmlFacade::class　//追加
    ],

$ composer require laravelcollective/html

フォーム画面の作成

/resouces/views/ディレクトリにcontactディレクトリを作成し、create.blade.phpを作成します。

/resources/views/contact/create.balde.php

@extends('app')

@section('content')

<h1>Contact WeDewLawns</h1>

@if (count($errors) > 0)
    <div class="alert alert-danger">
        Please correct the following errors:<br />
        <ul>
            <!--エラーの表示-->
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<!--novalidate属性が存在すると、フォームの入力内容の検証を無効にする。-->
{!! Form::open(array('route' => 'contact_store', 
  'class' => 'form', 'novalidate' => 'novalidate')) !!}

<div class="form-group">
    {!! Form::label('Your Name') !!}
    {!! Form::text('name', null, 
        array('required', 
              'class'=>'form-control', 
              'placeholder'=>'Your name')) !!}
</div>

<div class="form-group">
    {!! Form::label('Your E-mail Address') !!}
    {!! Form::text('email', null, 
        array('required', 
              'class'=>'form-control', 
              'placeholder'=>'Your e-mail address')) !!}
</div>

<div class="form-group">
    {!! Form::label('Your Message') !!}
    {!! Form::textarea('message', null, 
        array('required', 
              'class'=>'form-control', 
              'placeholder'=>'Your message')) !!}
</div>

<div class="form-group">
    {!! Form::submit('Contact Us!', 
      array('class'=>'btn btn-primary')) !!}
</div>
{!! Form::close() !!}

@endsection

また、ルーティング設定を変更します。

Route::resource('about', 'AboutController', ['only' => ['index']]);
Route::get('contact', ['as' => 'contact', 'uses' => 'ContactController@create']);
Route::post('contact', ['as' => 'contact_store', 'uses' => 'ContactController@store']);

これで、/createでアクセスし、以下のような画面が表示されていればOKです。
f:id:nekorokkekun:20190815160656p:plain

バリデーション設定

次にメールフォームのバリデーション設定を行います。

$ php artisan make:request ContactFormRequest

/app/Http/Requests/ContactFormRequest.php

class ContactFormRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true; // 変更
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
        'name' => 'required',
        'email' => 'required|email',
        'message' => 'required',
        ];
    }
}

これでバリデーション設定はできたので、次にメール送信時のstoreアクションを作成します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests\ContactFormRequest; //追加
class ContactController extends Controller
{
    public function create(){
        return view('contact.create');
    }
    public function store(ContactFormRequest $request){
        $data = [
            'name' => $request->get('name'),
            'email' => $request->get('email'),
            'user_message' => $request->get('message'),
        ];
    
        \Mail::send('emails.contact', $data, function($message)
        {
            $message->from(env('MAIL_FROM'));
            $message->to(env('MAIL_FROM'), env('MAIL_NAME'));
            $message->subject('WeDewLawns.com Inquiry');
        });
        return \Redirect::route('contact')
          ->with('message', 'Thanks for contacting us!');
    }
}

メール受信viewの作成

/resources/views/emailsディレクトリを作成し、その直下に以下のファイルを作成してください。

/views/emails/contact.blade.php

<p>
A prospective customer named {{ $name }} ({{ $email }}) 
has submitted an inquiry through WeDewLawns.com:
</p>

<p>
{{ $user_message }}
</p>

これでメールフォームは完成です。