記念すべき第１００回目です！
色々考えましたが、１００回目だからと言って特別な内容ではなく、いつもの流れの延長での開発進行となります。ご了承ください。
今回は、何人かのプレイユーザーの声も参考にしながら、ユーザビリティをあげるための機能追加を進めていきます。
Toastr（トースト）とは
バトル中のメッセージはほとんどの人が目を通してくれていますが、ホーム画面ではメッセージエリアよりも画面が更新されて「何も起こっていない」と感じてしまう人が多いようなので、jQueryのライブラリ「Toastr.js（トースト）」を使ったメッセージの表示を実装します。
toastr（github）
簡単に説明すると、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 = [];
}
}
引き継ぎ等の必要は今のところなさそうなので、トーストメッセージの格納、取得、初期化の基本的な３種類を用意しました。
デザインの選択
トーストでは、success、error、warning、infoの４つのデザインがあります。これはトーストを格納する際に指定する必要があるため、格納時にはメッセージより優先して第１引数指定で受け取ります。
// トーストへの登録
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で１つずつ設置、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が用意されている４つに該当しているかどうかを確認してからtoastrにセットしました。
toastrへの格納は簡単で、toastrオブジェクトからデザインをキー指定、第１引数にメッセージを格納するだけです。第２引数に文字列を格納することで、タイトル表示させることもできるので、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];
}
}
}
第３引数でトーストのデザインを指定できるようにしました。一括登録時に全てトーストを利用することは考えにくいので、単発登録時の分岐内に、トーストの指定があるかを確認して格納するようにしました。格納方法はトースト単発と同じです。
では、PHPポケモン開始時のメッセージ表示でinfoのデザインを使用してみましょう。
ホームコントローラー（/App/Controllers/Home/HomeController.php）
// branchメソッド内
response()->setMessage('ようこそ！PHPポケモンの世界へ', null, 'info');
メッセージエリアと同じメッセージをトーストでも表示することができましたね。
これでトースト機能の実装は完了です。
まとめ
いかがだったでしょうか。
今回のPHPポケモンでは「jQueryライブラリ Toastr（トースト）」の活用方法についてご紹介しました。
当初使用予定は有りませんでしたが、多くの人に利用してもらうことで足りない部分が浮き彫りになり、導入することになりました。ゲームでもシステムでもサイトでも、多くの人に見てもらい、使ってもらい、意見をもらうことでより良いものへと仕上がっていきます。
一方、ただ人の意見にばかり耳を傾けてしまえば、当初の予定とは全く違ったもの、目的自体がずれてしまうことにもなりかねないので注意しなければなりません。
サイト制作、プログラミング学習に取り組んでいる人は、ぜひ参考にしてみてくださいね。
