プログラミング

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ポケモン「コントローラー編」〜POSTとSESSIONの活用〜 10
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「コントローラー編」〜POSTとSESSIONの活用〜 10

  今回のPHPポケモンでは、今まで作った機能用のコントローラーになるインターフェースを作成します。ポケモンやメソッドを選択できるようにして、よりゲーム性の高いアプリケーションを実装しましょう。   第1回から学習したい方はコチラ     コントローラーの実装   それでは実装したアクション...

ピカチュウから学ぶオブジェクト指向 〜入門編〜 1
プログラミング
PHP,PHPポケモン,オブジェクト指向,ポケモン
ピカチュウから学ぶオブジェクト指向 〜入門編〜 1

オブジェクト指向とは  オブジェクト指向プログラミング https://ja.wikipedia.org/wiki/オブジェクト指向プログラミング オブジェクト指向プログラミングとは、互いに密接な関連性を持つデータとメソッドをひとつにまとめてオブジェクトとし、それぞれ異なる性質と役割を持たせたオブジェクトの様々な定...

PHPポケモン「バトルシステム実装編〜ダメージ計算〜」20
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「バトルシステム実装編〜ダメージ計算〜」20

バトルシステムの実装  今回はバトルシステムの中でもメインとなるダメージ計算と、命中判定の部分を実装していきます。   ダメージ計算  ポケモンのダメージ計算は初代から現在までそこまで大きな変化はありません。最新世代ではダメージに関係する要素(アイテム等)が多く、それにより補正値の修正はあります...

あばれる編(あばれる・はなびらのまい)PHPポケモン52
プログラミング
PHP,PHPポケモン,ポケモン
あばれる編(あばれる・はなびらのまい)PHPポケモン52

あばれる状態とは 技を使うと、しばらくの間その技のみしか使用できなくなる技があります。その状態を「あばれる状態」と言います。 あばれる状態(ポケモンwiki) https://wiki.ポケモン.com/wiki/あばれる_(状態変化) あばれるの効果 2~3ターンの間攻撃し続け、交換したり、他の指示を出すことが出...

デザインとブランディングが生み出す本当の価値とは
デザイン
UCC
デザインとブランディングが生み出す本当の価値とは

  商品やHPなど様々なところで価値を提供している「デザイン」ですが、それがもつ本当の意味や価値というものは意外と知られていません。 一般的にはイメージを作る・伝えるということで要求されるものですが、突き詰めた先には人間の深層心理に働きかけるブランディングという要素が潜んでいるのです。   今...

そらをとぶ&あなをほる編 PHPポケモン46
プログラミング
PHP,PHPポケモン,ポケモン
そらをとぶ&あなをほる編 PHPポケモン46

チャージ中の回避技 以前は「ロケットずつき」や「ソーラービーム」をサンプルとしてチャージ技を実装しましたが、今回は少し特別な効果をもったチャージ技を実装します。それが「そらをとぶ」と「あなをほる」です。これらは初代ポケモンでも重宝される技であり、チャージ中に相手からの攻撃を回避することができま...

ノーコード開発で将来プログラミングは不要?我々は何を学ぶべきなのか
プログラミング
amazon,AWS,Honeycode,NoCode,プログラミング学習
ノーコード開発で将来プログラミングは不要?我々は何を学ぶべきなのか

  近年、プログラミングの需要は増え勢いを増していますが、それ以上にノーコードというソースコードを打たなくでもアプリ開発ができるというソフトウェアやプラットフォームが普及してきました。 これにより一部の期待感とは別に、プログラマーという職業は今後不要になるのではないかと危機感を抱く人が出て...

たった10分!?読むだけでプログラミングが上達する3原則
プログラミング
jQuery,プログラミング学習,初心者
たった10分!?読むだけでプログラミングが上達する3原則

  プログラミングがなかなか身につかない   学習をしているけど、自分で書くとなれば思うようにいかなかったり、覚えたはずなのにその使い方や応用方法がわからない人のほとんどが、作り方そのものが間違っている傾向にあります。   今回は、プログラミング初学者や、なかなかスキルアップができない人...

カテゴリ

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