イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

Laravel+NexmoでSMSを配信してみた

Hello~~一年生のアヤンです。

最近Laravelのメール配信の機能を触ることが多くて、SMSで同じようなことを試して見ました。 また、先週サンクスギビングデーというアメリカの祝日があって、料理をする機会がありました〜

その日のために、様々な料理を作りたくて、気づいたらブラウザーのタブを20個以上開いてありました…​ どの料理がどれだけ焼けばいいかをほぼ忘れてしまって、気づいたらパンを肉の加熱する時間分焼いてしまって焦げてしまいました(泣) それを避けるためこれを考えました!

目的

レシピサイトでタイマーを押して、調理時間が終わったらユーザーの携帯に携帯メールが飛んでくる

使ったツール

Laravel 5.7

Nexmo (アカウント登録が必要)

1. 環境構築

composerでPHPClientLibraryをインストールする

composer require nexmo/client

config.appのファイルのProvidersにNexmoServiceProviderを追加

    'providers' => [

        /*
         * Laravel Framework Service Providers...
         */
	//他のProviders
        Illuminate\View\ViewServiceProvider::class,
       //NexmoのProvider
        Nexmo\Laravel\NexmoServiceProvider::class,

次は.envファイルにNexmoのアカウント情報の追加→Nexmoからコピーペースト

NEXMO_KEY= Nexmoのアカウントページに書いてあるAPI Key(「(Master)」なし
NEXMO_SECRET= Nexmoのアカウントページに書いてあるAPI secret

それで環境構築完成! 希望があればconfig/app.phpファイルにAlliasを設定ができます

2. SMS用のコントローラー作成

php artisanでコントローラークラスを作成しましょう

php artisan make:controller SMSController

Nexmoのクラスを使いたいのでnamespaceの下にNexmoのFacadeを追加

<?php

namespace App\Http\Controllers;

//↓
use Nexmo\Laravel\Facade\Nexmo;
use Illuminate\Http\Request;

次はメッセージの内容と送る先に関数で指定しましょう

    public function sendFinishedCookingSMS()
    {
        Nexmo::message()->send([
            'to' => '',
            'from' => 'Fooood Time',
            'text' => 'ビーフシチュー出来上がりました!'
            'type' => 'unicode'
        ]);
    }

テストのため、送る先の'to'のところでNexmoに登録されている携帯番号を追加しました。

送る側の方でお好きな値を入れても構わないのですが、携帯の画面で数字になります。

'text'のところでメッセージ内容を書きます。

日本語のメッセージを書きたい場合では'type'⇒'unicode'も必要です。

3. Vueとコントローラーのルーティングを設定する

web.phpのファイルでget('好きなURL', 'コントローラー名@関数名')のように指定します。

Route::get('/sms/send', 'SMSController@sendFinishedCookingSMS');
4. 最後にVue側から呼び出す
        sendFinishSms() {
            axios
                .get('/sms/send')
                .then(response => {
                    this.textResult = '携帯メールを送りました!'
                }).catch(error => {
                    this.textResult = '携帯メールにはエラーが起きました。。。'
                });
        }

今回作ってみたページに関してはページに表示されているタイマーが終わったら、 SMSを送る関数を呼ぶ出すようにしています。

携帯の画面はこちらです↓

Screenshot_20181127-143037.png

まとめ

Even though I still have thousands of questions about Laravel with the help of certain very smart person everything is becoming more and more clear!

最近Laravelの勉強はとても面白くて、毎回新しいFeatureや機能を使えるようにお楽しみしています〜 もっと勉強頑張りまーす! ぜひLaravelの勉強をチャレンジしてみてください〜