プログラミング

Toastr(トースト)活用編 PHPポケモン 100

JavaScript PHP PHPポケモン ポケモン
Toastr(トースト)活用編 PHPポケモン 100

記念すべき第100回目です!

 

色々考えましたが、100回目だからと言って特別な内容ではなく、いつもの流れの延長での開発進行となります。ご了承ください。

今回は、何人かのプレイユーザーの声も参考にしながら、ユーザビリティをあげるための機能追加を進めていきます。

 

Toastr(トースト)とは

バトル中のメッセージはほとんどの人が目を通してくれていますが、ホーム画面ではメッセージエリアよりも画面が更新されて「何も起こっていない」と感じてしまう人が多いようなので、jQueryのライブラリ「Toastr.js(トースト)」を使ったメッセージの表示を実装します。

 

簡単に説明すると、jsでポップアップメッセージを表示させるためのライブラリです。メッセージエリア自体はそのままとして、ページ読み込み時に正常更新されたことがわかるような補助的な役割が今回のメインとなります。

 

トースト情報の格納

まずはトースト情報を格納するために、Responseクラスを拡張していきましょう。メッセージやモーダルと同じ要領で、配列に追加していく方式です。

 

レスポンスクラス(/Classes/Response.php
<?php
class Response
{
 
--省略
 
    /**
    * トーストメッセージの格納用
    * @var array
    */
    private $toastrs = [];
 
--省略
 
    /**
    * トーストの登録
    * @param design:string
    * @param msg:string::info|error|success|warning
    * @return void
    */
    public function setToastr(string $design, string $msg): void
    {
        // トーストへの登録
        if(in_array($design, ['info', 'error', 'success', 'warning'], true)){
            $this->toastrs[] = [$design, $msg];
        }
    }
 
    /**
    * トーストの取得
    * @return array
    */
    public function getToastrs(): array
    {
        return $this->toastrs ?? [];
    }
 
    /**
    * トーストの初期化
    * @return void
    */
    public function initToastr(): void
    {
        $this->toastrs = [];
    }
 
}

 

引き継ぎ等の必要は今のところなさそうなので、トーストメッセージの格納、取得、初期化の基本的な3種類を用意しました。

 

デザインの選択

トーストでは、success、error、warning、infoの4つのデザインがあります。これはトーストを格納する際に指定する必要があるため、格納時にはメッセージより優先して第1引数指定で受け取ります

// トーストへの登録
if(in_array($design, ['info', 'error', 'success', 'warning'], true)){
    $this->toastrs[] = [$design, $msg];
}

 

指定された値をそのままjsへ渡して使用するため、エラーを防ぐためにもin_arrayで他の値が入らないように制限しています。

 

では、格納したメッセージをjs側へ渡すために、ライブラリのjsを読み込んでfooter部分にinput hiddenを生成しましょう。

 

js読み込み用ファイル(/Resources/Partials/Layouts/Foot/js.php
// 追記
<script type="text/javascript" src="/Assets/js/Lib/toastr.min.js" defer></script>

 

フッター(/Resources/Partials/Layouts/Foot/footer.php
# トースト用メッセージの出力
foreach(response()->getToastrs() as $toastr){
    echo '<input type="hidden" data-toastr="'.$toastr[0].'" value="'.$toastr[1].'">';
}

 

foreachで1つずつ設置、data-toastr要素にデザイン、値にメッセージを格納しました。ではjs側の処理を見ていきましょう。

 

共通JS/Public/Assets/js/common.js
/**
 * トーストの表示
 * @function each
 */
var showToastrs = function() {
    $(document).ready(function() {
        $('[data-toastr]').each(function(){
            var design = $(this).data('toastr');
            if(0 <= $.inArray(design, ['success', 'info', 'error', 'warning'])){
                // 指定されたデザインのトーストを表示
                toastr[design]($(this).val());
            }
        });
    });
}

 

ページ読み込み時にdata-toastrが付与されたノードをeachで順番に処理、もし見つかればこちらでもdesignが用意されている4つに該当しているかどうかを確認してからtoastrにセットしました。

toastrへの格納は簡単で、toastrオブジェクトからデザインをキー指定、第1引数にメッセージを格納するだけです。第2引数に文字列を格納することで、タイトル表示させることもできるので、toastrをエラーメッセージなどのメインとして活用する際は重宝します。

 

では表示を確認するために、ポケモンセンター利用時のメッセージとしてセットしてみましょう。

 

ポケモンセンター用サービス(/App/Services/Home/RecoveryService.php
<?php
require_once(app_path('Services').'Service.php');
 
/**
 * ポケモンセンター
 */
class RecoveryService extends Service
{
 
    /**
    * @return void
    */
    public function __construct()
    {
        //
    }
 
    /**
    * @return void
    */
    public function execute()
    {
        // 全回復
        foreach(player()->getParty() as $partner){
            $partner->recovery();
        }
        response()->setMessage([
            ['お預かりしたポケモンたちは、皆元気になりましたよ'],
            ['またのご利用お待ちしております']
        ]);
        response()->setToastr('success', 'ポケモンの状態が万全になった!');
    }

}

 

しっかり右上に表示されましたね。

メッセージ自体は下のメッセージエリアにも表示されていますが、こちらは残す方向で考えています。

 

メッセージとの連携

ポケモンセンターでは異なるメッセージを表示させましたが、全く同じメッセージを表示したいというケースも出てきます。その度にメッセージとトーストの両方を用意するのも手間なので、メッセージの格納と連携させて、指定があればトーストも併用できるようにしましょう。

 

レスポンスクラス(/Classes/Response.php
/**
* メッセージの格納
* @param msg:string|array
* @param param:mixed
* @param toastr:string::info|error|success|warning
* @return array
*/
public function setMessage($msg, $param=null, $toastr='')
{
    if(empty($msg)){
        // 空の場合はスキップ
        return;
    }
    if(is_array($msg)){
        $messages = array_map(function($message){
            // 要素が配列でなければ、メッセージ用配列形式に変換して返却
            if(!is_array($message)){
                $message = [$message, '', ''];
            }
            return $message;
        }, $msg);
        // 一括登録
        $this->messages = array_merge($this->messages, $messages);
    }else{
        // 単発登録
        $this->messages[] = [$msg, $param, ''];
        // トーストへの登録
        if(in_array($toastr, ['info', 'error', 'success', 'warning'], true)){
            $this->toastrs[] = [$toastr, $msg];
        }
    }
}

 

第3引数でトーストのデザインを指定できるようにしました。一括登録時に全てトーストを利用することは考えにくいので、単発登録時の分岐内に、トーストの指定があるかを確認して格納するようにしました。格納方法はトースト単発と同じです。

 

では、PHPポケモン開始時のメッセージ表示でinfoのデザインを使用してみましょう。

               

ホームコントローラー(/App/Controllers/Home/HomeController.php
// branchメソッド内
response()->setMessage('ようこそ!PHPポケモンの世界へ', null, 'info');

 

メッセージエリアと同じメッセージをトーストでも表示することができましたね。

これでトースト機能の実装は完了です。

  

まとめ

いかがだったでしょうか。

今回のPHPポケモンでは「jQueryライブラリ Toastr(トースト)」の活用方法についてご紹介しました。

 

当初使用予定は有りませんでしたが、多くの人に利用してもらうことで足りない部分が浮き彫りになり、導入することになりました。ゲームでもシステムでもサイトでも、多くの人に見てもらい、使ってもらい、意見をもらうことでより良いものへと仕上がっていきます

一方、ただ人の意見にばかり耳を傾けてしまえば、当初の予定とは全く違ったもの、目的自体がずれてしまうことにもなりかねないので注意しなければなりません

 

サイト制作、プログラミング学習に取り組んでいる人は、ぜひ参考にしてみてくださいね。

 

注目の記事

プレイヤー情報作成編 PHPポケモン72
プログラミング
PHP,PHPポケモン,ポケモン
プレイヤー情報作成編 PHPポケモン72

プレイヤー情報の作成 少し前よりプレイヤーをホーム画面に表示させるようにしましたが、ただイメージとして配置しただけでプレイヤー情報自体は設定していませんでした。なので、今回はプレイヤーとして持たせる必要のある情報を作成していきましょう。   クラスの作成 初代ポケモンではプレイヤー情報として閲...

ポケモン図鑑編 PHPポケモン 88
プログラミング
PHP,PHPポケモン,ポケモン
ポケモン図鑑編 PHPポケモン 88

ポケモン図鑑とは ポケモンに出会ったり、仲間にしたりすると、ポケモン図鑑のデータがどんどんと埋まっていきます。PHPポケモンでもこの仕組みを実現させるために、ポケモン図鑑を作成していきましょう。   クラスによる管理 ポケモン図鑑はクラス管理をしていきます。プレイヤー1人に対して1つのポケモン図...

なぜ、お金を配るの?悪質メール・SNSを利用した詐欺的手法への対処法とは
ネットワーク
amazon,SNS,Twitter,お金配り,楽天,迷惑メール
なぜ、お金を配るの?悪質メール・SNSを利用した詐欺的手法への対処法とは

定期的に書きたくなるコラムのコーナー! 今回は、迷惑メールやSNSのDMを活用した悪質な勧誘、巷で流行っているお金配りを隠れ蓑のした巧妙な詐欺的手法などをいくつかご紹介、その対策・リクス回避の方法をまとめました。   まず結論からお伝えすると 「怪しいと思うなら手を出すな」 です。その詳細を知りたい...

PHPポケモン「状態異常+逃走編〜ねむり・こおり・やけど・どく〜」24
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「状態異常+逃走編〜ねむり・こおり・やけど・どく〜」24

状態異常の実装  今回は、前回作成した「まひ」を参考に、「ひんし」を除いた残りの状態異常も実装していきます。    クラスの作成  まずはそれぞれのクラスを作成します。前回解除時のメッセージを設定出来ていなかったので、まひと合わせて実装していきましょう。   状態異常:やけど(...

売れるECサイトになるために必要な3つの戦略
マーケティング
ECショップ,コンサルティング
売れるECサイトになるために必要な3つの戦略

  ECサイトで全く売れない・・・   ネットショップのオープンが手軽で安価になり、クレジット決済も主流の今ECサイトを立ち上げるお店も増えてきました。 しかし期待感とは裏腹に、思ったような売上が出なかったり、お客さんが1人も獲得できていないケースも少なくありません。   今回はそういった「...

レベニューシェアとは?利益報酬・共同事業に潜む罠
フリーランス
レベニューシェアとは?利益報酬・共同事業に潜む罠

  レベニューシェアという言葉を聞いたことがありますか?   ビジネスの世界にいる人なら、意味は知らなくてもやったことがある方が意外と多いはずです。特にフリーランスの人や、プログラミングやデザインといったスキルを持っている人はレベニューシェアでは重宝されるため多い傾向があります。ここ最近...

フリーランスになるなら知っておきたい!無料サービス3選
フリーランス
フリーランスになるなら知っておきたい!無料サービス3選

  「フリーランスになる前に何を準備すればいいの?」 「フリーランス向けの便利なサービスが知りたい」   今回はそんな悩みを抱えた人へ向けて「フリーランスになるなら知っておきたい!無料サービス3選」をご紹介します。 この記事を読んで、フリーランスにとっての悩みである以下の3つの問題を一緒...

【Laravel】論理削除対応型existsバリデーションの実装方法
プログラミング
Laravel,PHP
【Laravel】論理削除対応型existsバリデーションの実装方法

  Laravelでは多くのバリデーションが提供されていますが、論理削除を使用している場合はそのままでは使えないものが複数あります。 今回は紐付けをする際に存在チェックで使用するexistsのソフトデリート対応のバリデーションを実装する方法をご紹介します。     カスタムバリデーションの追加   存...

カテゴリ

SEO対策 イベント デザイン ネットワーク ビジネスモデル フリーランス プログラミング マーケティング ライティング 動画編集 雑記

タグ

5G Adobe AfterEffects AI ajax amazon Animate api artisan atom Automator AWS Bluetooth CSS CVR description EC-CUBE4 ECショップ ESLint Facebook feedly foreach function Google Google AdSense Honeycode htaccess HTML IEEE 802.11ax Illustrator Instagram IoT JavaScript jQuery jQuery UI keyword LAN Laravel Linux MacBook MAMP meta MLM MySQL NoCode note OS OSI参照モデル Paypal Photoshop PHP phpMyAdmin PHPポケモン PremierePro rss SEO SEO対策 Sequel Pro Skype SNS SSH Symfony TCP/IP title Toastr Trait Twig Twitter UCC V系 WAN WebSub Wi-Fi wiki Windows WordPress XAMPP xml Xserver YouTube YouTuber Zoom アーティスト アウトプット アクセス層 アニメーション アフィリエイト イーブイ インターネット インプット エンジニア オブジェクト指向 お金配り クリック単価 クリック数 コミュニケーション能力 コロナ コンサルティング サムネイル システムエンジニア スタートアップ スタイルシート スパム データベース ディープフェイク デザイナー デザイン テレワーク ナンパ ニュース ネットワークモデル ノマドワーク バナー ピカチュウ ビジネス フィード フリーランス ブロガー ブログ プログラマー プログラミング プログラミング学習 プログラミング教育 プロトコル ホームページ制作 ポケモン マークアップ マーケティング メール リモートワーク レンダリング 三井住友 三宮 仕事依頼 児童デイ 児童デイサービス 児童発達支援 公開鍵 初心者 助成金 勉強法 営業 広告 広告収入 必勝マニュアル 放課後等デイサービス 朝活 楽天 深層学習 無線LAN 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力