Laravelの基本はこちらから学べます

Laravel でスレッド掲示板を作成(中級)。14,15 章 Slack 通知 〜 終章




今回は前回に続けて開発を進めていきましょう。
前章をまだご覧になっていない方は以下から開発を始めましょう。

14 章:Slack 通知機能

お疲れ様です。いよいよ最後の章まで来ました。
Slack 通知機能まで実装できたらクライアントさんに提出できますね。

自分の Slack ワークスペースを作成する

まず、通知をする Slack のワークスペースを作成しましょう。
実際の案件ですと、クライアントさんに Webhook URL を取得していただくことになりますが、今回はご自身のワークスペースを作成し、そちらに通知を飛ばす実装をしていきましょう。

Slack ワークスペースを作成するリンク
https://slack.com/get-started#/create

私は、Slack で todo 管理や、RSS を活用した情報収集を行なっているので少し皆さんと画面が違う可能性がありますが、Slack のワークスペースにアクセスするとこのような画面を確認できると思います。

ダークモードはやはりいいですね

では、通知用のチャンネルを作成しましょう。

チャネル横の + マークから、チャンネル作成をクリック。

名前、説明を加えて作成しましょう。

Webhook URL を取得する

次に、Webhook URL を取得しましょう。
https://slack.com/services/new/incoming-webhook

上記のリンクにアクセスし、チャンネルの投稿で先ほど作成したチャンネルを選択しましょう。

インテグレーションの追加をクリック後、webhook URL の設定画面に遷移することができます。
こちらでは、通知する際の名前、画像、通知先チャンネルの変更などを行うことができます。

今回は、そちらの設定は一先ず置いておき、Webhook URL を copy しましょう。

まずは、.env ファイルにこちらの URL を設定しましょう。

.env

// 追加
SLACK_URL=https://hooks.slack.com/services/xxxxxxxxx/xxxxxxxxxxxxxxxxxxxxxxxxx

次に env ファイルを読み込むために、config ファイルにコードを追加していきます。

config\app.php

    'slack_url' => env('SLACK_URL'), // 追加

Laravel と Slack をつなげる

それでは実際に、Laravel から Slack 通知を送れるように設定していきましょう。

公式ドキュメントを読みながら進めていきましょう。
https://readouble.com/laravel/6.x/ja/notifications.html

まずは、Notification クラスを作成しましょう。

laradock tt% docker-compose exec workspace php artisan make:notification SlackNotification    

コマンドで SlackNotification クラスを作成します。
このクラスでは、文字列の $message を受け取り、Slack に通知する処理を記入していきましょう。

公式ドキュメント「Slack通知」を参考に進めていきます。

App\Notifications\SlackNotitication

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Notifications\Messages\SlackMessage;

class SlackNotification extends Notification
{
    use Queueable;

    protected $message;

    /**
     * Create a new notification instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the notification's delivery channels.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function via($notifiable)
    {
        return ['slack']; // 'mail'から今回利用する'slack'に変更しましょう。
    }

    /**
     * 通知のSlackプレゼンテーションを取得
     *
     * @param  mixed  $notifiable
     * @return SlackMessage
     */
    public function toSlack($notifiable)
    {
        $message = (new SlackMessage)
                ->content($this->message);

        return $message;
    }

    /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function toArray($notifiable)
    {
        return [
            //
        ];
    }
}

次に、Slackの通知チャンネルをインストールしていきます。

Slackを通して通知を送れるようにするには、ComposerでSlackの通知チャンネルをインストールしてください。

Slack通知  https://readouble.com/laravel/6.x/ja/notifications.html
laradock % docker-compose exec workspace composer require laravel/slack-notification-channel

Slack 通知チャンネルのインストールが完了しました。
それでは次に、Slack の通知サービスを作成していきましょう。

Services の中に SlackNotificationService.php を新規ファイルとして作成しましょう。

App\Services\SlackNotificationService.php

<?php

namespace App\Services;

use App\Notifications\SlackNotification;
use Illuminate\Notifications\Notifiable;

class SlackNotificationService
{
    use Notifiable;
    
    public function send($message)
    {
        $this->notify(new SlackNotification($message));
    }

    /**
     * Slackチャンネルに対する通知をルートする
     *
     * @param  \Illuminate\Notifications\Notification  $notification
     * @return string
     */
    public function routeNotificationForSlack($notification)
    {
        return env('SLACK_URL');
    }
}

メソッドを 2 つ作成しました。

1 つは、send メソッドです。Notifiable トレイトの notify メソッドを使用して Slack 通知を行います。

2 つ目は、routeNotificationForSlack メソッドです。こちらは先ほど取得した、Webhook URL を返すように設定をしました。

ここまでで準備が完了しましたので、実際に Controller で保存処理を行う際に Slack 通知をしてみましょう。

ThreadController.php

// 省略
    /**
     * The ThreadService implementation.
     *
     * @var SlackNotificationService
     */
    protected $slack_notification_service; // 追加

    /**
     * Create a new controller instance.
     *
     * @param  ThreadService  $thread_service
     * @return void
     */
    public function __construct(
        ThreadService $thread_service,
        ThreadRepository $thread_repository,
        SlackNotificationService $slack_notification_service // 追加
    ) {
        $this->middleware('auth')->except('index');
        $this->thread_service = $thread_service;
        $this->thread_repository = $thread_repository;
        $this->slack_notification_service = $slack_notification_service; // 追加
    }

// 省略
public function store(ThreadRequest $request)
    {
        try {
            $data = $request->only(
                ['name', 'content']
            );
            $this->thread_service->createNewThread($data, Auth::id());
            $this->slack_notification_service->send('new thread'); // 追加
        } catch (Exception $error) {
            return redirect()->route('threads.index')->with('error', 'スレッドの新規作成に失敗しました。');
        }

        // redirect to index method
        return redirect()->route('threads.index')->with('success', 'スレッドの新規作成が完了しました。');
    }

// 省略

store メソッド内の処理で先ほど作成した通知メソッドを追加しました。
今回は、文字列で「new thread」という通知を送信してみましょう。

それでは、新規の thread を作成してみましょう。
すると。。。

new thread がメッセージとして送られてきました。

14 章での変更点は以下からご確認いただけます。
https://github.com/t-aburasoba/thread-board/pull/13/files

Thread の名前を通知するようにする。

現状は、ハードコーディングしているので「new thread」の文字列のみ通知がされるようになっています。Thread の題名を通知するようにしましょう。

ThreadController.php

// 省略

 $this->slack_notification_service->send($request->name); // 変更

// 省略

「new thread」と記入している箇所を $request->name とすることで、Thread のタイトルを Slack に通知することができるようになりました。

Slackに届きますかというThreadを作成した際の通知

また、下記のように変更をすると

ThreadController.php

// 省略

$this->slack_notification_service->send(Auth::user()->name . ' が ' . $request->name . 'を立てました!');
 // 変更

// 省略

このように「誰が」「何を」立てたかを通知することができるようになりました。

15 章:終章

開発を終えた、「あなた」。
クライアントへアプリケーションの最終確認に向かいます。
あなた

お世話になっております。
今回は先日から開発させていただいたアプリケーションが完成しましたので、ご確認をいただきたいです。

クライアント

ありがとうございます!
どれどれ。。(確認する)
想定通りのものができていますね!ありがとうございます。

あなた

ありがとうございます。
今後ですが、UI 等の改善を進めていければと思っております。

クライアント

確かにデザインはもう少し整えたいですね。
機能としては使用できるので、保守運用の中でよろしくお願いいたします!

あなた

承知いたしました!

15 章までお疲れ様でした。
Docker を用いた環境構築、Service and Repository パターンでの実装、S3 への画像投稿、Slack Webhook の利用と様々なことを学んできました。

どの機能も実際の案件で使用するタイミングが出てくると思いますので、皆さんの何かしらの力に慣れていれば幸いです。

一旦、15 章で終了となりますが「番外編」として UI を整える章も今後作成していきたいと思いますので、そちらも完成次第投稿させていただきます。

お疲れ様でした!




コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です