
九保すこひです(フリーランスのITコンサルタント、エンジニア)
さてさて、まだまだマーケティング勉強の余韻が残っている今日この頃です。
こういった勉強をすると、日常から「あ、これってアレに使えるんじゃない??」って思ったりします。
そして、そんな中思いついたのが、
カレンダー連携できるメール
です。
どういうことかと言うと、メールに.ics
ファイルを添付しておいて
メールを開いたときにカレンダーに登録をさせるようにするわけです。
例えば、商品やサービス、セミナーの日時って
忘れられてしまったりしますが、これを予防するための機能です。
流れはこんなカンジです。
- イベント参加フォームから送信
- 完了メールを送信
- ics が添付しているので以下のようにカレンダー登録できる
※ これは、gmail
の例です。
そこで
今回はLaravel
でこのics
ファイル付きメールを送信し、
「少しでも参加人数を増やす」というマーケティングに関連した実装をしてみます。
ぜひ何かの参考になりましたら嬉しいです。
「ツイッター教材を買ったので、
投稿するツイートを大量生産してます!」
開発環境: Laravel 11.x
パッケージをインストールする
.ics
を作成するためのパッケージをSpatie
さんが提供していますので、
これをインストールしておきましょう。(いつもありがとうございます)
composer require spatie/icalendar-generator
これで準備は完了です。
ここからは実際にコードを書いていきましょう
コントローラーをつくる
では、今回はDB
周りは不要なので、
いきなりコントローラーからつくっていきます。
以下のコマンドを実行してください。
php artisan make:controller ApplicationController
するとファイルが作成されるので、
中身を以下のようにします。
app/Http/Controllers/ApplicationController.php
<?php
namespace App\Http\Controllers;
use App\Mail\EventApplied;
use Carbon\Carbon;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
use Spatie\IcalendarGenerator\Components\Calendar;
use Spatie\IcalendarGenerator\Components\Event;
use Spatie\IcalendarGenerator\Properties\TextProperty;
class ApplicationController extends Controller
{
private $event;
public function __construct()
{
$dt = Carbon::now();
$start_dt = $dt->addDays(7)->setTime(19, 0, 0); // 1週間後の19時からイベント開始
$end_dt = $start_dt->copy()->addHours(2); // 開始から2時間後にイベント終了
$this->event = [
'name' => '新サービス「Console dot Log」参加説明会',
'description' => '新サービス「Console dot Log」の参加説明会です。',
'location' => [
'address' => '東京都●●区丸●●1−2−34',
'address_name' => 'SUKOHI タワービル 27階',
'coordinates' => [
'lat' => 35.123456,
'lng' => 139.123456,
],
],
'organizer' => [
'name' => '株式会社 九保すこひ',
'email' => 'sukohi@example.com',
],
'start_dt' => $start_dt,
'end_dt' => $end_dt,
];
}
public function create()
{
return view('application.create', [
'event' => $this->event,
]);
}
public function store(Request $request)
{
// 注: バリデーションは省略してます
// 本来はここでデータベースに保存する処理を書く
// ics データを作成
$ics_event = Event::create()
->name($this->event['name'])
->description($this->event['description'])
->startsAt($this->event['start_dt'])
->endsAt($this->event['end_dt'])
->address($this->event['location']['address'])
->addressName($this->event['location']['address_name'])
->coordinates(
$this->event['location']['coordinates']['lat'],
$this->event['location']['coordinates']['lng'],
)
->organizer(
$this->event['organizer']['email'],
$this->event['organizer']['name'],
);
$ics_calendar = Calendar::create()
->appendProperty(
TextProperty::create('METHOD', 'REQUEST')
)
->event($ics_event);
$ics_content = $ics_calendar->get();
// メール送信
Mail::to($request->email)->send(
new EventApplied(
event: $this->event,
ics_content: $ics_content,
)
);
return '申し込みが完了しました!';
}
}
なお、ics
データの最後の部分で「METHOD:REQUEST」を追加していますが、これは以下のような選択ボタンを表示するためのものです。
※ 実際の内容はこんなカンジになります。
BEGIN:VCALENDAR
VERSION:2.0
PRODID:spatie/icalendar-generator
METHOD:REQUEST <---ここ
...
なお、もし「METHOD:REQUEST」をつけない場合だと、
以下のように「カレンダーに追加」リンクが表示されますが、
あまり目立たないので、よりカレンダー登録を訴求したい場合はセットしておくほうがいいでしょう。
ビューをつくる
次にコントローラー内でセットしたビューをつくります。
コマンドを実行して下さい。
php artisan make:view application.create
すると、ビューファイルが作成されるので、
中身を以下のようにします。
resources/views/application/create.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{{ $event['name'] }}</title>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>
</head>
<body class="bg-gray-100 flex justify-center items-center h-screen">
<div class="w-full max-w-md p-8 bg-white shadow-lg rounded-lg">
<h2 class="text-md font-bold text-center mb-6">{{ $event['name'] }}<br>登録フォーム</h2>
<form action="{{ route('application.store') }}" method="POST" class="space-y-6">
@csrf
<input type="text" name="name" placeholder="お名前" class="w-full p-2 border border-gray-300 rounded-md">
<input type="email" name="email" placeholder="メールアドレス" class="w-full p-2 border border-gray-300 rounded-md">
<button type="submit" class="w-full p-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">送信</button>
</form>
</div>
</body>
</html>
メール送信部分をつくる
では、こちらもコントローラー内でセットした
Mailable
をつくっていきます。
コマンドを実行して下さい。
php artisan make:mail EventApplied
するとMailable
ファイルが作成されるので、
中身を以下のようにします。
app/Mail/EventApplied.php
<?php
namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;
use Illuminate\Mail\Mailables\Attachment;
class EventApplied extends Mailable
{
use Queueable, SerializesModels;
/**
* Create a new message instance.
*/
public function __construct(
private array $event,
private string $ics_content
){}
/**
* Get the message envelope.
*/
public function envelope(): Envelope
{
return new Envelope(
subject: '参加申し込みありがとうございます!',
);
}
/**
* Get the message content definition.
*/
public function content(): Content
{
return new Content(
view: 'emails.event_applied',
with: [
'event' => $this->event,
],
);
}
/**
* Get the attachments for the message.
*
* @return array<int, \Illuminate\Mail\Mailables\Attachment>
*/
public function attachments(): array
{
return [
Attachment::fromData(fn() => $this->ics_content, 'event.ics', 'text/calendar')
];
}
}
この中で重要なのは、添付ファイルをデータからつくっているところです。
fromData()
で実装できます。
resources/views/emails/event_applied.blade.php
php artisan make:view emails.event_applied
ビューが作成されるので中身を変更します。
resources/views/emails/event_applied.blade.php
この度は、{{ $event['name'] }} への参加申し込みをいただき、<br>誠にありがとうございます。<br><br>
以下の内容で申し込みを受け付けました。<br><br>
詳細は以下の通りです。<br>
時間:{{ $event['start_dt']->format('Y年m月d日') }} ({{ $event['start_dt']->format('H:i') }}〜 {{ $event['end_dt']->format('H:i') }})<br>
場所: {{ $event['location']['address_name'] }}<br><br>
当日お会いできるのを楽しみにしております。<br>
ぜひカレンダーへの予定の追加をお願いいたします。<br><br>
{{ $event['organizer']['name'] }}
ルートをつくる
では、最後にルートです。
routes/web.php
// 省略
use App\Http\Controllers\ApplicationController;
// 省略
Route::prefix('application')->group(function () {
Route::get('/create', [ApplicationController::class, 'create'])->name('application.create');
Route::post('/', [ApplicationController::class, 'store'])->name('application.store');
});
これで作業は完了です。
お疲れ様でした
テストしてみる
では、実際にテストしてみましょう
まずはブラウザで「https://******/application/create」へアクセスします。
すると、フォームが表示されるので、
名前とメールアドレスを入力して送信してみます。
すると・・・・・・
はい
完了メッセージが表示されました。
では、メールの方も見てみましょう。
はい
ちゃんと到着していて、ics
ファイルも添付されています。
ただし、このメール表示は開発用のmailcatcher
のものなので、
ics
ファイルをダウンロードして自分自信のgmail
へ送信して確認してみます。
どうなるでしょうか・・・・・・
はい
gmail
にメールが届いたので、開封してみると、
「カード」が表示されていました。
そこで、参加を表明する「はい」ボタンをクリックしてみます。
そして、「Google カレンダー」の方で見てみると・・・・・・
はい
きちんと登録されていて、
さらに30分前にアラームがなるようになっています。
すべて成功です
企業様へのご提案
今回のようにics
ファイルを使ったメールを送信すると、
カレンダーへの登録やアラームを鳴らすなどができます。
となると、顧客がよりイベントに参加するようにすることが期待できます。
もしこのシステムを使って集客数を増やしたい場合は
ぜひお問い合わせからご相談ください。
お待ちしております。
おわりに
ということで、今回はLaravel
を使ってics
ファイル付きのメールを送信してみました。
もしかすると、より集客につながるパーセンテージは少ないかもしれませんが、
母数が大きくなればなるほど集客数自体は増えていくので、少しでもプラスになる施策はやるべきですね。
ぜひ今回のメールを参考にして他にもいろいろと研究してみてくださいね。
ではでは〜
「マーケティングのセミナー
参加したことあります」