laravel学んで2か月で自サービスを開発した話 Part10

qiitaの草を増やした結果、githubの草が除草されました私です

<a href="https://qiita.com/k-hayack884/items/e571138e8bf7f35f7502">胡蝶蘭を捨てるくらいならワイが欲しいので、サービス開発する編</a>
<a href="https://qiita.com/k-hayack884/items/720c7a6300139317deac">公式ドキュメントの言う通り、パッケージをインストールされたら、Inertia.jsが導入されて？？？になった編</a>
<a href="https://qiita.com/k-hayack884/items/dccb9d479bd162144559">マルチログインを作ってみた編</a>
<a href="https://qiita.com/k-hayack884/items/0354c0ddecee58272e46">デザインをtailwindcssに丸投げする編</a>
<a href="https://qiita.com/k-hayack884/items/e4c691041373a97afd97">デザイナーに怒られないために、画像をリサイズする編</a>
<a href="https://qiita.com/k-hayack884/items/ab8ddbb97b035c55fd1b">AWS×リボ払いで破産へGO編</a>
<a href="https://qiita.com/k-hayack884/items/cefae022df84a57df53f">Google MAPに無人島に飛ばされる編</a>
<a href="https://qiita.com/k-hayack884/items/ea97f393140c764e41d8">エンジニアはやせ型が好き編</a>
<a href="https://qiita.com/k-hayack884/items/2c5eeee93b8bfd7db7be">APIがよくわからなかった編</a>

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323238313934362f35313633323064392d653838642d346662312d366263662d6439623831343638373839362e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/b15713b8-6afe-9f56-4825-9ca747f08a3d.png)

# 今回やること
-　SendGridの導入
-　自動送信メールの実装

# SendGridの導入
まずはメールサーバーを調達しに、<a href="https://sendgrid.kke.co.jp/">SendGrid</a>で自動登録します。
![necchusyou_face_boy1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/baec6247-69c2-b786-294a-86f3440dbbdd.png)
### 登録も済んだし、さっそく使うぞ～！
![send.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/e70bafdd-9dba-144a-5144-af6b4cbd82e8.png)
**・・・**
![sleep_futene_man.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/f5f02cf3-1093-9906-1439-5981da31178b.png)
### 今日の記事は終わりですね、おやすみなさい！

![job_chef_man.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/44426734-6b01-af9f-ced7-15f8e3794ad5.png)
### そんなこともあろうと思って、今回は既に登録をし終えたものを用意しています！
![FireShot Capture 007 - SendGrid - app.sendgrid.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/bcd1ad4c-10a5-9ad0-7ddd-6527d02eef4f.png)
左側のSettingのAPIkeyからAPIKeyをコピーしてきます。
envファイルを書き換えます
```.env
MAIL_MAILER=smtp
MAIL_HOST=smtp.sendgrid.net
MAIL_PORT=587
MAIL_USERNAME=apikey
MAIL_PASSWORD={SendGridから入手したAPIキー}
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=自サイトのアドレス
MAIL_FROM_NAME="${APP_NAME}"
SENDGRID_API_KEY={SendGridから入手したAPIキー}
```
composerを使ってSendGridライブラリをインストール
```composer require "sendgrid/sendgrid"```

## SendGridのメール送信のコード
準備はできたので、コードを書いていきましょう
```MailController.php
use SendGrid;
use SendGrid\Mail\Mail;

public function create($id)
    {
        $user = Auth::id();
        $product = Product::with('user')->findOrFail($id);
        return view('user.emails.create', compact('user', 'product'));
    }

    public function send(Request $request)
    {
        $request->validate([
            'name' => ['string', 'max:20', 'required'],
            'message' => ['string', 'max:200', 'required'],
        ]);
        $user = User::findOrFail(Auth::id());
        $product = Product::with('user')->findOrFail($request->product_id);
//Sendgridの部分はここから
        $email = new Mail();
        $email->setFrom('運営のメールアドレス', '運営');
        $email->setSubject('取引ありがとうございます');
        $email->addTo($user->email);
        $email->addContent("text/html",  strval(
            view(
                'emails.mail',
                compact('user', 'product', 'request')
            )
        ));

        $sendgrid = new SendGrid(env('SENDGRID_API_KEY'));

        $ownerEmail = new Mail();
        $ownerEmail->setFrom('運営のメールアドレス', '運営');
        $ownerEmail->setSubject('取引ありがとうございます');
        $ownerEmail->addTo($product->user->email);
        $ownerEmail->addContent("text/html",  strval(
            view(
                'emails.ownermail',
                compact('user', 'product', 'request')
            )
        ));
        try {
            $sendgrid->send($email);
            $sendgrid->send($ownerEmail);
            return redirect()
                ->route('user.trades.show', ['trade' => $request->product_id])
                ->with([
                    'message' => 'メールを送信しました',
                    'status' => 'info'
                ]);
        } catch (Exception $e) {
            Log::debug($e->getMessage());
            return '送信に失敗しました';
        }
//Sendgridの部分はここまで

    }
}
```
内容を説明していくと、一番最初のcreateメゾットは送信フォームです、表には出せない情報（お届け先など）をこちらのフォームで秘密裏に行います
sendメゾットの内容ですが、まずはmailオブジェクトをインスタンス化します
setFromはサイトのメールアドレスとサイト名、setSubjectはメールのタイトルです。
addToは送り先です。今回はフォームが贈られると購入者と出品者の両方に自動送信メールを送ります。
addContentはメール本文の内容ですが、**strval**を使うことによってviewファイルや変数を送ることもできます。
そのあと、SENDGRID_API_KEYを利用して、キーのインスタンス化を行います。
あとはtrycatch構文で、購入者と出品者の双方にメールを自動送信するシステムです。

## viewファイルの設定
viewファイルを準備しましょう
resources\views\emails\ownermail.blade.phpとmail.blade.phpを作成します
```mail.blade.php
{{ $user->name }}様
<h1>取引の希望をしました</h1>
出品者からの発送を今しばらくお待ちください

<h1>注文情報</h1>

<p>商品名:{{ $product->name }}</p>
<p>出品者:{{ $product->user->name }}</p>
<p>商品説明:{{ $product->comment }}</p>
<p>注文日時:<?php echo date('Y/m/d'); ?></p>

<h1>入力情報</h1>
<p>名前:{{ $request->name }}</p>
<p>送り先:{{ $request->address }}</p>
<p>メッセージ:{{ $request->message }}</p>

<h1>取引後のお願い</h1>
<p>取引ユーザーを評価してください</p>
http://127.0.0.1:8000/profiles/show/{{ $product->user->id }}

<p> このメールはシステムにより自動送信されています。返信されても出品者との連絡はできません。</p>
またのご利用をお待ちしております。
今後ともflower-giftをよろしくお願いいたします。

```
```ownermail.blade.php
{{ $product->user->name }}様
<h1>相手から取引のリクエストがありました</h1>
<p>希望相手の送付先へ商品を発送してください</p>

<h1>注文情報</h1>

<p>商品名:{{ $product->name }}</p>
<p>商品説明:{{ $product->comment }}</p>
<p>注文日時:<?php echo date('Y/m/d'); ?></p>

<h1>送り先情報</h1>
<p>名前:{{ $request->name }}</p>
<p>送り先:{{ $request->address }}</p>
<p>メッセージ:{{ $request->message }}</p>

<h1>取引後のお願い</h1>
<p>取引ユーザーを評価してください</p>
http://127.0.0.1:8000/profiles/show/{{ $user->id }}
<p>商品状態を取引終了にしてください</p>

<p> このメールはシステムにより自動送信されています。返信されても出品者との連絡はできません。</p>
またのご利用をお待ちしております。
今後ともflower-giftをよろしくお願いいたします。

```
## テスト
さっそくテストをします！
![テスト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/125a61c6-7e5c-c16a-f985-789c11c2428d.png)
![necchusyou_face_boy1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/55044690-4fd1-289c-2db1-583455a50929.png)
### どんな感じに送られるか楽しみだね！
![necchusyou_face_boy3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/fd08cea5-bf41-2e29-fbef-7e80ae7f37b4.png)
### あれっ、メールが届いていないぞ　コード間違えたのかな？
### １時間後・・・
![spam_mail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/8aee6e23-e5a3-37b3-ac62-aaef7a191f74.png)
### 迷惑メールに入ってた・・・
みんなも、メールが届かないなと思ったら迷惑メールを確認してみよう！
#### というわけで、届いたメールがこちら
![ユーザー側.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/9797e9be-f4a0-1552-3c76-2a8338a8dd7c.png)
#### オーナー側
![オーナー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/40719700-2eba-96c6-d58d-f47a9e3c4412.png)
### やりますねぇ！！
# 終わりに
メールコントローラーが太っているのが気になりますねえ・・・
![himan05_man.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281946/f9e4f768-4dde-eab6-ef48-39bc9ce5a376.png)
~~エンジニアは太ったもの（女性以外）は嫌いです~~
余裕があれば分離するコードを書いてみようか

**これで、登録から取引までの最低限の動きは実装できました。次は付随的な機能を実装していきます！**