laravel8 入力した内容をSlackの任意のチャンネルに投稿するアプリを作成する

# 目的

- 入力した内容をそのままSlackの任意のチャンネルに投稿するアプリを作成してみる

# 環境

- ハードウェア環境

| 項目 | 情報 |
| --- | --- |
| OS | macOS Big Sur(11.5) |
| ハードウェア | MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) |
| プロセッサ | 2 GHz クアッドコアIntel Core i5 |
| メモリ | 32 GB 3733 MHz LPDDR4 |
| グラフィックス | Intel Iris Plus Graphics 1536 MB |

- ソフトウェア環境

| 項目 | 情報 | 備考 |
| --- | --- | --- |
| PHP バージョン | 7.4.8 | Homebrewを用いてこちらの方法で導入→[Mac HomebrewでPHPをインストールする](https://qiita.com/miriwo/items/cd54077aad7e139cf518) |
| Laravel バージョン | 8.X | commposerを用いてこちらの方法で導入→[Mac Laravelの環境構築を行う](https://qiita.com/miriwo/items/adaaaeecae69d6392e08) |
| MySQLバージョン | 8.0.19 for osx10.13 on x86_64 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでMySQLをインストールする](https://qiita.com/miriwo/items/ef6a064bc545fbea29d9) |

# 情報

- 下記のリンク先に当該のアプリのコードが有る。
    - [https://github.com/miriwo0104/laravel8_easy_crud/tree/slack](https://github.com/miriwo0104/laravel8_easy_crud/tree/slack)

# 概要

- テスト用に作成したSlackのワークスペースの「generalチャンネル」にlaravelアプリ側のinputBoxに入力した内容を投稿するlaravelアプリを作成する。

# 準備

1. 下記の方法で自分専用のSlackチャンネルを作成した。
    - [https://miriwo.hatenablog.com/entry/2021/05/26/211701?_ga=2.109489477.1506577295.1640607309-1716617805.1610676179](https://miriwo.hatenablog.com/entry/2021/05/26/211701?_ga=2.109489477.1506577295.1640607309-1716617805.1610676179)
1. 下記の方法で先に作成したSlackチャンネルのWebhook URLを取得する。
    - [https://www.yukibnb.com/entry/slack_incoming_webhook_url#%E7%B0%A1%E5%8D%98Slack%E3%81%AEIncoming-Webhook-URL%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95](https://www.yukibnb.com/entry/slack_incoming_webhook_url#%E7%B0%A1%E5%8D%98Slack%E3%81%AEIncoming-Webhook-URL%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95) 

# 方法

1. 下記コマンドを実行してライブラリを導入する。

    ```terminal
    $ composer require laravel/slack-notification-channel -vvv
    ```

1. SlackチャンネルのWebhook URLを下記の様に.envに追記する。（実際に皆さんが取得したWebhook URLを記載してください。）

    ```.env
    SLACK_URL="https://hooks.slack.com/services/XXXXXXXXXXXX/YYYYYYYYYYYY/ZZZZZZZZZZZZ"
    ```

1. 下記の内容を`/config/app.php`のどこかに記載する。

    ```アプリ名ディレクトリ/config/app.php
    'slack_url' => env('SLACK_URL'),
    ```

1. 下記の内容をルーティングファイルに記載する。

    ```アプリ名ディレクトリ/routes/web.php
    Route::prefix('slack')->group(function() {
        Route::get('/index', [SlackController::class, 'index'])->name('slack.index');
        Route::post('/send', [SlackController::class, 'send'])->name('slack.send');
    });
    ```

1. 下記コマンドを実行してリクエストファイルを作成する。

    ```terminal
    $ php artisan make:request SlackRequest
    ```

1. 先に作成したSlackRequestクラスは下記の様に修正する

    ```アプリ名ディレクトリapp/Http/Requests/SlackRequest.php
    <?php
    
    namespace App\Http\Requests;
    
    use Illuminate\Foundation\Http\FormRequest;
    
    class SlackRequest extends FormRequest
    {
    
        /**
         * Get the validation rules that apply to the request.
         *
         * @return array
         */
        public function rules()
        {
            return [
                'str' => ['required'],
            ];
        }
    }
    ```

1. 下記コマンドを実行して新たにコントローラークラスが記載されたファイルを作成する。

    ```terminal
    $ php artisan make:controller SlackController
    ```

1. 先に作成したSlackControllerは下記のように記入する。

    ```アプリ名ディレクトリ/app/Controllers/SlackController.php
    <?php
    
    namespace App\Http\Controllers;
    
    use Illuminate\Notifications\Notifiable;
    use App\Http\Requests\SlackRequest;
    use App\Notifications\Slack;
    
    class SlackController extends Controller
    {
        use Notifiable;
    
        /**
         * Slackに通知する文字列入力ページの表示
         *
         * @return view
         */
        public function index()
        {
            return view('slacks.index');
        }
    
        /**
         * Slackへの通知
         *
         * @param SlackRequest $request
         * @return redirect
         */
        public function send(SlackRequest $request)
        {
            $requestBody = $request->validated();
            $this->notify(new Slack($requestBody['str']));
        
            return redirect(route('slack.index'));
        }
    
        /**
         * 通知を行うWebhook URLの設定
         *
         * @param mix $notification
         * @return slackWebhookUrl
         */
        public function routeNotificationForSlack($notification)
        {
            return config('app.slack_url');
        }
    }
    ```

1. 下記コマンドを実行してNotificationを継承するSlackクラスが記載されたファイルを作成する。

    ```terminal
    $ php artisan make:notification Slack
    ```

1. 先のコマンドで作成されたSlackクラスのファイルは下記の様に記載する。

    ```アプリ名ディレクトリ/app/Notification/Slack.php
    <?php
    
    namespace App\Notifications;
    
    use Illuminate\Bus\Queueable;
    use Illuminate\Notifications\Notification;
    use Illuminate\Notifications\Messages\SlackMessage;
    
    class Slack extends Notification
    {
        use Queueable;
    
        /**
         * @var string $str
         */
        private $str;
    
        /**
         * Create a new notification instance.
         *
         * @return void
         */
        public function __construct($str)
        {
            $this->str = $str;
        }
    
        /**
         * Get the notification's delivery channels.
         *
         * @param  mixed  $notifiable
         * @return array
         */
        public function via($notifiable)
        {
            return ['slack'];
        }
    
        /**
         * Slack通知
         *
         * @param mixed $notifiable
         * @return SlackMessage
         */
        public function toSlack($notifiable)
        {
            return (new SlackMessage)->content($this->str);
        }
    
        /**
         * Get the array representation of the notification.
         *
         * @param  mixed  $notifiable
         * @return array
         */
        public function toArray($notifiable)
        {
            return [
                //
            ];
        }
    }
    ```

1. viewsディレクトリ直下にslacksディレクトリを作成し、その中にindex.blade.phpを作成し下記のように記載する。

    ```アプリ名ディレクトリ/resources/view/slacks/index.blade.php
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <header></header>
        <main>
            <form action="{{ route('slack.send') }}" method="post">
                @csrf
                @error('str')
                    {{ $message }}
                    <br>
                @enderror
                <input type="text" name="str">
                <button type="submit">送信</button>
            </form>
        </main>
        <footer></footer>
    </body>
    </html>
    ```

1. ローカルサーバーを起動して下記にアクセスする。
    - [http://127.0.0.1:8000/slack/index](http://127.0.0.1:8000/slack/index)
1. 表示されているinputに任意の内容を入力して「送信」をクリックする。

    ![Document.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/51108327-f2f2-a853-c385-09591e8e4b26.png)

1. 下記のようにSlackのチャンネルに入力した文字列が表示された。

    ![Slack_____general___laravel-test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/d6607edf-a0d1-9ccf-1774-b7b25dc29c38.png)