プログラミング

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(トースト)」の活用方法についてご紹介しました。

 

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

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

 

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

 

注目の記事

Laravel7系でTraitのmakeコマンドを作成する方法
プログラミング
artisan,Laravel,Linux,PHP,Trait
Laravel7系でTraitのmakeコマンドを作成する方法

Laravel7がリリースされて、さっそくそれを使った開発の機会がやってきましたので、使用頻度の高いものをまとめていきたいと思います。 5系や6系の情報は多く出回っていますが、6系がLTSということもあって7系の情報は少なめですね。   今回は「Laravel7系でTraitのmakeコマンドを作成する方法」をご紹介します...

ブラウザで遊べる「PHPポケモン」
プログラミング
PHP,PHPポケモン,ポケモン
ブラウザで遊べる「PHPポケモン」

PHPポケモン 約1ヶ月半をかけて作り込んできたPHPポケモンですが、ある程度遊べるぐらいのレベルになったので、みなさまにも体験・楽しんでいただけるよう本日(2020年10月12日)より一般公開します。   PHPポケモンへのリンクは本記事の最後に用意しておりますので、プレイする前に注意事項等に目を通し...

PHPポケモン「オートロード編(修正版)」17 おまけ:日本語化
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「オートロード編(修正版)」17 おまけ:日本語化

  前回実装したオートローダーの使い方が盛大に間違っていたので、今回その間違いの説明をしながら、正しい実装方法をご紹介します。 申し訳ありません。(誠意)    オートロードについて(再)  必要なタイミングで必要なファイルをrequireまたはincludeするあれです。   前回spl_autoload_reg...

動画編集で知っておくべき基本的な3工程
動画編集
Adobe,AfterEffects,Illustrator,Photoshop,PremierePro
動画編集で知っておくべき基本的な3工程

  YouTubeに動画を投稿したいけど、動画の基本的な作成手順がわからない・・・   動画作成をするためのソフトは色々ありますが、有料なものであればやはりAdobe製品に軍配が上がります。 しかし準備したは良いものの、いろんなソフトが合ってどれを使えばよいか分からないという悩みを抱えている方は非常...

具体的にフリーランスで生きていくには -独立してからの働き方を徹底解説-
フリーランス
フリーランス,独立
具体的にフリーランスで生きていくには -独立してからの働き方を徹底解説-

  安定した仕事に就きたい。。。   多くの人がそう思っていた時代はどんどんと変化して、今やフリーランスでいることの方が安定しているのではないかと言えるような時代です。 そう、もはや会社員でいる人の大半が安定ではなくなってきているのです。 フリーランスでいる人も、根本的に安定という...

ピカチュウから学ぶオブジェクト指向 〜レベルアップ編〜 5
プログラミング
PHP,PHPポケモン,オブジェクト指向,ポケモン
ピカチュウから学ぶオブジェクト指向 〜レベルアップ編〜 5

  第3回でレベルシステムを導入し、第4回では経験値システムの導入をしたので、今回はそれを合わせたレベルアップのシステムを導入します。 第1回から作成しているコードを使用しているので、もし最初から学習したい人は第1回の入門編をご覧ください。     レベルアップシステムの導入   レベル...

【PHP7】はてな2つとは??Null合体演算子を使った存在チェック
プログラミング
PHP,プログラミング学習
【PHP7】はてな2つとは??Null合体演算子を使った存在チェック

  PHP Notice:  Undefined variable: 変数名 in /***/***.php on line 2   PHPで変数や対象のキーが存在しない配列を使おうとすれば、上記のようなエラーが吐き出されますね。PHP5.6までは初期値を設定したり、issetで判定したりしてそれを回避していましたが、2015年末にリリースされたPHP7からは新しくN...

YouTuber・ブロガー必見!知る人ぞ知るサムネイルの重要性とは
デザイン
Facebook,Instagram,Twitter,YouTuber,サムネイル,ブロガー
YouTuber・ブロガー必見!知る人ぞ知るサムネイルの重要性とは

  サムネイルって本当に重要? ブログの場合はフリー画像でもいいんじゃない?   そう考えている人はいませんか? 残念ですが、それは大きな間違いです。サムネイルを作り込むことは非常に重要であり、集客ポイントを拡大させるのはもちろん、ブランディングにもつながるのです。   今回は「知る人ぞ...

カテゴリ

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 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力