プログラミング

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

 

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

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

 

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

 

注目の記事

【Adobe Animate CC】モーショントゥイーンを使ったアニメーション作成
動画編集
Adobe,Animate,Illustrator,Photoshop,アニメーション
【Adobe Animate CC】モーショントゥイーンを使ったアニメーション作成

    今回はキャラクターがうちわを扇いでいるアニメーションのAdobe Animateを使った作成方法をご紹介します。 完成イメージは以下の通りです。   Photoshopなどを使ってもgifアニメーションの作成はできますが、Adobe Animateのモーショントゥイーンを使えば、変化するポイントだけを設定す...

PHPポケモン「アクション制御編」27
プログラミング
JavaScript,jQuery,PHP,PHPポケモン,ポケモン
PHPポケモン「アクション制御編」27

  今回のPHPポケモンでは主に画面の作り込みをしていきます。 とは言っても、ガッチリCSSを書いてよりゲームらしい見た目にするわけではなく、あくまで「ゲームシステムを再現するため」だけに整えていくのが目的です。   ということで、今回はPHPよりもBootstrapさんとjQueryさんに活躍してもらいます。   ...

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

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

ゆびをふる編 PHPポケモン 69
プログラミング
PHP,PHPポケモン,ポケモン
ゆびをふる編 PHPポケモン 69

ゆびをふるとは 今回PHPポケモンで実装する技は「ゆびをふる」です。  ゆびをふる(ポケモンwiki) https://wiki.ポケモン.com/wiki/ゆびをふる   「ゆびをふる大会」というゆびをふるのみを使った大会なども開催されているということもあり、ポケモンの技の中でも初代から長く愛されてきた1つです。で...

【税金は貰うもの】知って得する!お金を稼ぐための実践的な3要素
マーケティング
【税金は貰うもの】知って得する!お金を稼ぐための実践的な3要素

  「お金を稼ぐための基本的な3要素」に続く、「実践的な3要素」です。 前回は、単価、頻度、客数の関係を理解すれば、お金を稼ぐ仕組みがどのように成立しているのか、そしてどういったアプローチをすればお金を稼げるのかがわかりました。   今回は、直接お金に関係する実践的な3要素です。どう...

短期間でライティングスキルを高める虎の巻!7日間集中トレーニング法
ライティング
ブロガー,ブログ
短期間でライティングスキルを高める虎の巻!7日間集中トレーニング法

  毎日のんびり続けていると、気づけば結果につながっている   そんな幸せな理想を多くの人は抱いてしまいますが、そう甘いものではありません。ブログ収益化などコンテンツ配信業におけるライティングスキルを高めるためにも、夏合宿のような集中トレーニング法が存在し、一定期間で本格的な結果を求める...

レビューがアフィになる!?SNS式ECサイトとは【ビジネス企画書】
ビジネスモデル
ECショップ,SNS
レビューがアフィになる!?SNS式ECサイトとは【ビジネス企画書】

  多くの人が利用しているSNS 副業やフリーランスに人気なアフィリエイト   それぞれの良い点を上手く利用すれば、完成するビジネスはないか?と考えて思い浮かんだ企画です。 今回は「レビューがアフィになる!?SNS式ECサイトとは」について、新時代のショッピングモール式ネットショップの企画をご紹...

LANとWANについて【第2回 ド素人のためのネットワーク講座】
ネットワーク
IoT,LAN,WAN,Wi-Fi
LANとWANについて【第2回 ド素人のためのネットワーク講座】

  YQUALがお送りする、ド素人のためのネットワーク講座。 栄えある第2回は「LANとWANについて」です。   フロントエンジニアや現在プログラミングを学習中の方を中心に、ネットワークについての基礎的理解を深めていくための内容になっています。 ざっくりとした説明で物足りない、または細かく見ていった...

カテゴリ

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