プログラミング

ポケモン預かりシステム編 システムの実装 PHPポケモン 87

PHP PHPポケモン ポケモン
ポケモン預かりシステム編 システムの実装 PHPポケモン 87

ポケモン預かりシステムの実装

システムの仕様とクラスも整ってきたので、いざ実装をしていきましょう。

前回までに作成した項目で、いくつか変更になったものがあるので、まずはじめに挙げておきます。

 

シャットダウン機能

ボックスの選択を解除するというものでしたが、こちらを不採用にしました。ボックスは常にどれかが選択された状態にしておき、シャットダウンそのものはグローバルで行っている1つだけにしました。

 

選択ボックスの初期値

初期値を0としました。nullと0が混在すると判定がややこしくなるため、シャットダウン機能と合わせて常にどれかのボックスが選択されている状態にしています。

 

それでは、順を追ってPHPポケモンに実装していきましょう。

 

コントローラーの作成

まずは主軸となるコントローラーの作成です。作成する分岐は以下の5つです。 

  1. ボックス切り替え
  2. ボックス追加
  3. ポケモンを預ける
  4. ポケモンを引き取る
  5. ボックス操作の終了

 

ポケモン預かりシステムコントローラー(/App/Controllers/Pokeox/PokeboxController.php
<?php
$root_path = __DIR__.'/../../..';
require_once($root_path.'/App/Controllers/Controller.php');
// サービス
require_once($root_path.'/App/Services/Pokebox/SwitchService.php');
require_once($root_path.'/App/Services/Pokebox/DepositService.php');
require_once($root_path.'/App/Services/Pokebox/ReceiveService.php');
require_once($root_path.'/App/Services/Pokebox/AddBoxService.php');
 
// ポケモンボックス用コントローラー
class PokeboxController extends Controller
{
 
    /**
    * @return void
    */
    public function __construct()
    {
        // 親コンストラクタの呼び出し
        parent::__construct();
        // ボックスの起動
        startPokebox();
        // 分岐処理
        $this->branch();
        // 親デストラクタの呼び出し
        parent::__destruct();
    }
 
    /**
    * @return void
    */
    public function __destruct()
    {
        // ボックスの保存
        savePokebox();
        // 親デストラクタの呼び出し
        parent::__destruct();
    }
 
    /**
    * アクションに合わせた分岐
    * @return void
    */
    private function branch()
    {
        switch (request('action')) {
            /******************************************
            * ボックスの切り替え
            */
            case 'switch':
            $service = new SwitchService;
            $service->execute();
            break;
            /******************************************
            * ポケモンを預ける
            */
            case 'deposit':
            $service = new DepositService;
            $service->execute();
            break;
            /******************************************
            * ポケモンを引き取る
            */
            case 'receive':
            $service = new ReceiveService;
            $service->execute();
            break;
            /******************************************
            * ボックスの追加
            */
            case 'add_box':
            $service = new AddBoxService;
            $service->execute();
            break;
            /******************************************
            * ボックス終了
            */
            case 'shutdown':
            shutdownPokebox();
            $_SESSION['__route'] = 'home';
            // 画面移管
            $this->redirect();
            break;
            /******************************************
            * アクション未選択・ボックス起動
            */
            default:
            response()->setMessage('ようこそ、ポケモン預かりシステムへ');
            break;
        }
    }
 
}

 

ボックス操作の終了は、ホーム画面へ移管させるだけのものなのでサービスは不要です。ポケモン預かりシステムの操作画面では毎回ボックスの起動が必要になるので、こちらはコンストラクタ内で、保存処理はデストラクタ内で行なっています

 

ボックス切り替え

まずはボックス切り替えから見ていきましょう。原則としてボックス操作はアクセス中のものしかできないようにしているため、管理画面で見られるのはパーティーと1つのボックスのみになります。なので、別ボックスのポケモンを確認、引き取るなどの処理を行う場合は、アクセス中のボックスを切り替える必要があります。

 

ボックス切り替えサービス(/App/Services/Pokebox/SwitchService.php
<?php
$root_path = __DIR__.'/../../..';
// 親クラス
require_once($root_path.'/App/Services/Service.php');
 
/**
* ボックスの切り替え
*/
class SwitchService extends Service
{
 
    /**
    * @return void
    */
    public function __construct()
    {
        //
    }
 
    /**
    * @return void
    */
    public function execute()
    {
        // ボックスの切り替え
        if(pokebox()->selectBox(request('box'))){
            response()->setMessage(
                'ボックス'.pokebox()->getSelectedBoxNumber().'を起動しました'
            );
        }else{
            response()->setMessage('ボックスの起動に失敗しました');
        }
    }
 
}

 

POSTでボックスの値を受け取り、そのボックスの存在確認をしてから結果を返却しています。selectBoxではボックスが見つかればselectedプロパティに値をセット、返り値としてbooleanを返しています。

 

ボックス追加

次にボックスの追加処理についてです。ポケモンをボックス分けしたい時などに、満杯で無くても他のボックスを使用したい場合がありますね。そんなときに新規でボックスが追加できるようにサービスを用意しておきます。

 

ボックス追加サービス(/App/Services/Pokebox/AddBoxService.php
<?php
$root_path = __DIR__.'/../../..';
// 親クラス
require_once($root_path.'/App/Services/Service.php');
 
/**
* ボックスの追加
*/
class AddBoxService extends Service
{
 
    /**
    * @return void
    */
    public function __construct()
    {
        //
    }
 
    /**
    * @return void
    */
    public function execute()
    {
        // ボックスの追加
        if(count(pokebox()->getPokebox()) < 10){
            $box = pokebox()->addBox();
            response()->setMessage('ボックス'.($box + 1).'を追加しました');
        }else{
            response()->setMessage('これ以上は追加できません');
        }
    }
 
}

 

こちらはPOSTによる値は不要です。リクエストがあればaddBoxメソッドを使って空の配列を最後尾に追加しています。ただし、ボックスが無限に増やすわけにもいかないので、現段階では最大数を10ボックスとしています。

  

ポケモンを預ける

こからがポケモン預かりシステムの本格的な実装となります。まずは、手持ちのポケモンを預けるための処理を作成します。

 

ポケモンを預ける(/App/Services/Pokebox/DepositService.php
<?php
$root_path = __DIR__.'/../../..';
// 親クラス
require_once($root_path.'/App/Services/Service.php');
 
/**
* ポケモンを預ける
*/
class DepositService extends Service
{
 
    /**
    * 預けるポケモン
    * @var object::Pokemon
    */
    private $pokemon;
 
    /**
    * @return void
    */
    public function __construct()
    {
        //
    }
 
    /**
    * @return void
    */
    public function execute()
    {
        if($this->validation()){
            // 預け入れ処理
            $this->migratePartyToBox();
            // 接続成功
            response()->setMessage(
                $this->pokemon->getNickname().'をボックス'.pokebox()->getSelectedBoxNumber().'へ預けた'
            );
        }
    }
 
    /**
    * 検証
    * @return boolean
    */
    private function validation(): bool
    {
        /**
        * ボックスの検証
        */
        // 空きチェック
        if(!pokebox()->isSelectedBoxSpace()){
            response()->setMessage('ボックス'.pokebox()->getSelectedBoxNumber().'には空きがありません');
            return false;
        }
        /**
        * ポケモンの検証
        */
        // 手持ちが1匹以下
        if(count(player()->getParty()) <= 1){
            response()->setMessage('手持ちのポケモンが、いなくなってしまいます');
            return false;
        }
        // 手持ちポケモンの存在チェック
        $this->pokemon = player()->getPartner(request('pokemon_id'), 'id');
        if(empty($this->pokemon)){
            response()->setMessage('選択されたポケモンは預けることができません');
            return false;
        }
        // 検証成功
        return true;
    }
 
    /**
    * ポケモンをボックスへ預ける
    * @return void
    */
    private function migratePartyToBox(): void
    {
        // パーティー内のポケモン情報を削除
        player()->releasePartner(request('pokemon_id'));
        // ボックスへ追加
        pokebox()->addPokemon($this->pokemon);
    }
 
}

 

ポケモンを預ける際には、パーティー内のポケモンを判別するためのポケモンIDを受け取っています。

※こちらがorder値でない理由は後ほど画面実装の際に説明します

 

まずバリデーションで、ボックスの空きチェック、手持ちポケモンの数をチェックして預けられる状態かどうかを確認します。その後、requestで受け取ったポケモンIDが手持ちに存在しているかを確認し、問題がなければポケモンを移動します。

 

ポケモンの移動では、パーティー内からの削除とボックスへのポケモン追加を同時に行なっています。ここに不具合があるとポケモンが消失したり、第2世代のように複製される原因となりかねませんので注意です。

 

ポケモンを引き取る

最後に、ボックスに預けたポケモンを手持ちに加えるための引き取り処理です。こちらは、預けるとは逆の工程を踏むことで実装していきます。

 

ポケモンを引き取る(/App/Services/Pokebox/ReceiveService.php
<?php
$root_path = __DIR__.'/../../..';
// 親クラス
require_once($root_path.'/App/Services/Service.php');
 
/**
* ポケモンを引き取る
*/
class ReceiveService extends Service
{
 
    /**
    * 引き取るポケモン
    * @var array
    */
    private $pokemon;
 
    /**
    * @return void
    */
    public function __construct()
    {
        //
    }
 
    /**
    * @return void
    */
    public function execute()
    {
        if($this->validation()){
            // 引き取り処理
            $this->migrateBoxToParty();
            // 接続成功
            response()->setMessage(
                $this->pokemon
                ->getNickname().'を連れて行くことにした'
            );
        }
    }
 
    /**
    * 検証
    * @return boolean
    */
    private function validation(): bool
    {
        /**
        * パーティーの検証
        */
        if(count(player()->getParty()) >= 6){
            response()->setMessage('これ以上は連れていけません');
            return false;
        }
        /**
        * ボックス内のポケモンの検証
        */
        $pokemon = array_filter(pokebox()->accessSelectedBox(false), function($pokemon){
            return $pokemon['id'] === request('pokemon_id');
        });
        if(empty($pokemon)){
            response()->setMessage('指定されたポケモンは存在しません');
            return false;
        }
        // 検証成功
        $this->pokemon = unserializeObject(array_shift($pokemon)['object']);
        return true;
    }
 
    /**
    * ボックスからパーティーへの移動
    * @return void
    */
    private function migrateBoxToParty(): void
    {
        // ボックスからポケモンを削除する
        pokebox()->releasePokemon(request('pokemon_id'));
        // 取り出したポケモンをパーティーへセットする
        player()->setParty($this->pokemon);
    }
 
}

 

こちらでも預けると同様に、引き取るポケモンのIDをリクエストすることで、対象のポケモンを判別しています。

まず初めにパーティーが上限に達していないかを確認、その後ボックス内にポケモンが存在しているかどうかを確認しています。

 

では、ボックス内のポケモンにアクセスするためのaccessSelectedBoxメソッドの中身を見てみましょう。

 

ポケモン預かりシステム ボックス操作用トレイト(/App/Traits/Class/Pokebox/ClassPokeboxTrait.php
/**
* 選択中のボックスへアクセス(復号化して返却)
* @param serialize:boolean
* @return array
*/
public function accessSelectedBox($serialize=true): array
{
    if($serialize){
        // 復号化して返却
        return array_map(function($pokemon){
            return unserializeObject($pokemon['object']);
        }, $this->pokebox[$this->selected] ?? []);
    }else{
        // 復号化せずに返却
        return $this->pokebox[$this->selected];
    }
}

 

もし引数でtrue(初期値)が指定された場合は、ポケモン情報を復号化して選択中のボックスのポケモン一覧を返却します。falseが指定された際にはそのままの状態で返却するため、対象ポケモン1匹だけが欲しい場合などは、復号化せずに検証、通れば取り出したポケモンだけを復号化することで、余計な処理をする必要がなくなります。

  

画面の作成

最後に画面の作成です。画面上がボックスの管理画面となるように作成し、パーティーと現在選択中のボックスのポケモン一覧が表示されるようにします。

 

ポケモン預かりシステム画面(/Resources/Pages/Pokebox.php
<?php
$root_path = __DIR__.'/../..';
?>
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
    <?php
    # metaの読み込み
    include($root_path.'/Resources/Partials/Layouts/Head/meta.php');
    # cssの読み込み
    include($root_path.'/Resources/Partials/Layouts/Head/css.php');
    ?>
</head>
<body>
    <?php
    # headerの読み込み
    include($root_path.'/Resources/Partials/Layouts/Head/header.php');
    ?>
    <main>
        <div class="container">
            <section>
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="mb-0">
                            <img src="/Assets/img/icon/pokebox.png" class="mr-2" alt="ポケモン預かりシステム" />ポケモン預かりシステム
                        </h5>
                        <button type="button" class="btn btn-danger rounded-circle p-0" style="width:40px;height:40px;" data-submit_remote="shutdown" title="終了する">
                            <i class="fas fa-power-off"></i>
                        </button>
                    </div>
                    <div class="card-body py-0 px-3">
                        <div class="row">
                            <?php include($root_path.'/Resources/Partials/Pokebox/body.php'); ?>
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-center" data-pokebox="controls">
                        <?php include($root_path.'/Resources/Partials/Pokebox/foot.php'); ?>
                    </div>
                    <div class="card-footer p-3 overflow-auto bg-white" style="height: 90px;">
                        <?php foreach(response()->messages() as list($message)): ?>
                            <p class="mb-0"><?=$message?></p>
                        <?php endforeach; ?>
                    </div>
                </div>
            </section>
        </div>
    </main>
    <?php
    # footerの読み込み
    include($root_path.'/Resources/Partials/Layouts/Foot/footer.php');
    # モーダルの読み込み
    include($root_path.'/Resources/Partials/Pokebox/Modals/deposit.php');
    include($root_path.'/Resources/Partials/Pokebox/Modals/receive.php');
    include($root_path.'/Resources/Partials/Pokebox/Modals/switch.php');
    # JSの読み込み
    include($root_path.'/Resources/Partials/Layouts/Foot/js.php');
    ?>
    <script src="/Assets/js/Pokebox/pokebox.js" type="text/javascript" defer></script>
</body>
</html>

 

ポケモン預かりシステムcard-body部分(/Resources/Partials/Pokebox/body.php
<div class="col-12 bg-purple">
    <p class="text-white text-center mb-0 small">ボックス<?=pokebox()->getSelectedBoxNumber()?> 接続中...</p>
</div>
<div class="col-12 col-md-4 py-3 bg-light">
    <div class="overflow-auto" style="height:300px;">
        <div class="nav flex-column nav-pills" id="pokebox-tab" role="tablist" aria-orientation="vertical" data-list="pokebox">
            <?php # 手持ち ?>
            <a class="nav-link d-flex justify-content-between btn-sm btn-secondary text-left m-1" id="pokebox-party-tab" href="#pokebox-party" role="tab" aria-controls="pokebox-party" aria-selected="true" data-toggle="pill" data-category="party">
                <span>手持ち</span>
                <span class="badge badge-light d-flex align-items-center"><?=count(player()->getParty())?></span>
            </a>
            <?php # ボックス ?>
            <?php foreach(pokebox()->getPokebox() as $num => $box): ?>
                <?php if(pokebox()->getSelectedBox() === $num): ?>
                    <?php # 起動中のボックス ?>
                    <a class="nav-link d-flex justify-content-between btn-sm btn-orange text-left m-1 active" id="pokebox-<?=$num?>-tab" href="#pokebox-<?=$num?>" role="tab" aria-controls="pokebox-<?=$num?>" aria-selected="true" data-toggle="pill" data-category="pokebox">
                        <span class="pokebox-name">ボックス<?=$num+1?><i class="fas fa-check-circle ml-2"></i></span>
                        <span class="badge badge-light d-flex align-items-center"><?=count($box)?></span>
                    </a>
                <?php else: ?>
                    <?php # 未接続のボックス ?>
                    <a class="nav-link d-flex justify-content-between btn-sm btn-secondary text-left m-1 cursor-pointer" data-toggle="modal" data-target="#pokebox-switch-modal" data-box="<?=$num?>">
                        <span class="pokebox-name">ボックス<?=$num+1?></span>
                        <span class="badge badge-light d-flex align-items-center"><?=count($box)?></span>
                    </a>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>
    </div>
</div>
<div class="col-12 col-md-8 py-3 bg-light-success">
    <div class="tab-content overflow-auto" id="pokebox-tabContent" style="height:300px;">
        <?php # 手持ち ?>
        <div class="tab-pane fade show" id="pokebox-party" role="tabpanel" aria-labelledby="pokebox-party-tab">
            <div class="row table-selected" data-list="pokemon">
                <?php foreach(player()->getParty() as $party): ?>
                    <figure class="col-6 col-sm-4 col-md-3 col-lg-2 d-flex">
                        <div class="d-flex w-100 flex-column justify-content-between table-selected-row border rounded" data-place="party" data-pokemon_id="<?=$party->getId()?>">
                            <div class="p-1">
                                <p class="mb-0" id="pokebox-pokemon-name-<?=$party->getId()?>"><?=$party->getNickname()?></p>
                                <p>Lv.<?=$party->getLevel()?></p>
                            </div>
                            <div class="text-center mb-2">
                                <img id="pokebox-pokemon-img-<?=$party->getId()?>" src="/Assets/img/pokemon/dots/front/<?=get_class($party)?>.gif" alt="<?=$party->getName()?>">
                            </div>
                        </div>
                    </figure>
                <?php endforeach; ?>
            </div>
        </div>
        <?php # ボックス ?>
        <div class="tab-pane fade show active" id="pokebox-<?=pokebox()->getSelectedBox()?>" role="tabpanel" aria-labelledby="pokebox-<?=pokebox()->getSelectedBox()?>-tab">
            <div class="row table-selected" data-list="pokemon">
                <?php foreach(pokebox()->accessSelectedBox() as $pokemon): ?>
                    <figure class="col-6 col-sm-4 col-md-3 col-lg-2 d-flex">
                        <div class="d-flex w-100 flex-column justify-content-between table-selected-row border rounded" data-place="pokebox" data-pokemon_id="<?=$pokemon->getId()?>">
                            <div class="p-1">
                                <p class="mb-0" id="pokebox-pokemon-name-<?=$pokemon->getId()?>"><?=$pokemon->getNickname()?></p>
                                <p>Lv.<?=$pokemon->getLevel()?></p>
                            </div>
                            <div class="text-center mb-2">
                                <img id="pokebox-pokemon-img-<?=$pokemon->getId()?>" src="/Assets/img/pokemon/dots/front/<?=get_class($pokemon)?>.gif" alt="<?=$pokemon->getName()?>">
                            </div>
                        </div>
                    </figure>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>

 

ポケモン預かりシステムcard-footer部分(/Resources/Partials/Pokebox/foot.php
<?php if(count(pokebox()->getPokebox()) < 10): ?>
    <button type="button" class="btn btn-sm btn-purple mx-1" data-submit_remote="add_box">ボックス追加</button>
<?php endif; ?>
<?php # 共通 ?>
<button type="button" class="btn btn-sm btn-secondary mx-1" data-category="common" data-btn="default" disabled>様子を見る</button>
<?php foreach(array_merge(player()->getParty(), pokebox()->accessSelectedBox()) as $pokemon): ?>
    <button type="button" class="btn btn-sm btn-purple d-soft-none mx-1" data-category="common" data-btn="details" data-pokemon_id="<?=$pokemon->getId()?>" data-toggle="modal" data-target="#pokemon<?=$pokemon->getId()?>-details-modal">様子を見る</button>
    <?php
    # 詳細モーダルの読み込み
    include($root_path.'/Resources/Partials/Common/Modals/pokemon-details.php');
    ?>
<?php endforeach; ?>
<?php # パーティー用のボタン ?>
<button type="button" class="btn btn-sm btn-secondary mx-1 d-soft-none" data-category="party" data-btn="default" disabled>預ける</button>
<button type="button" class="btn btn-sm btn-purple mx-1 d-soft-none" data-category="party" data-btn="deposit" data-target="#pokebox-deposit-modal" data-toggle="modal">預ける</button>
<?php # ボックス移動ボタン ?>
<button type="button" class="btn btn-sm btn-secondary mx-1" data-category="pokebox" data-btn="default" disabled>連れて行く</button>
<button type="button" class="btn btn-sm btn-purple mx-1 d-soft-none" data-category="pokebox" data-btn="receive" data-target="#pokebox-receive-modal" data-toggle="modal">連れて行く</button>

 

前述したポケモンの並び順(order)で管理しない理由が、ボックス内のポケモンとパーティーのポケモンでの番号重複です。詳細画面を開く際などにこれが原因で共通詳細が使用できなくなるため、共通詳細にもポケモンIDを使用、判別にもIDを使用することで対応しました。

 

専用JSではボックスやポケモンの選択に合わせて、操作ボタンやモーダルの画像やボタンを切り替えるようにします。

 

ポケモン預かりシステムJS/Public/Assets/js/Pokebox/pokebox.js
/*----------------------------------------------------------
// 初期化する関数
----------------------------------------------------------*/
 
/**
* ボックス選択
* @function on click
*/
var selectPokeboxInit = function() {
    $('[data-list="pokebox"] > [role="tab"]').on('click', function(){
        var category = $(this).data('category');
        var name = $(this).find('.pokebox-name')
        .text();
        // ボックスリストボタンの色変更
        $('[data-list="pokebox"] > .nav-link').removeClass('btn-orange')
        .addClass('btn-secondary');
        $(this).removeClass('btn-secondary')
        .addClass('btn-orange');
        // ボックス操作ボタンの表示・非表示
        $('[data-pokebox="controls"] [data-category="common"]').hide();
        $('[data-pokebox="controls"] [data-category][data-category!="' + category + '"]').hide();
        $('[data-pokebox="controls"] [data-category="' + category + '"][data-btn="default"]').show();
        $('[data-pokebox="controls"] [data-category="common"][data-btn="default"]').show();
        // 選択中のポケモンを解除
        var row = $('.table-selected[data-list="pokemon"]')
        .find('.table-selected-row')
        .removeClass('active');
    });
}
 
/**
* ポケモンの選択
* @function on click
*/
var selectPokemonInit = function() {
    $('[data-list="pokemon"] .table-selected-row').on('click', function(){
        var place = $(this).data('place');
        var pokemon_id = $(this).data('pokemon_id');
        // ボックス操作関係のフォーム・ボタンを非表示
        $('[data-category="' + place + '"]').hide();
        $('[data-btn="default"]').hide();
        // 「様子を見る」の有効化
        $('[data-btn="details"]').hide();
        $('[data-btn="details"][data-pokemon_id="' + pokemon_id + '"]').show();
        // 選択されたポケモン情報を取得
        var name = $(this).find('#pokebox-pokemon-name-' + pokemon_id)
        .text();
        var img = $(this).find('#pokebox-pokemon-img-' + pokemon_id)
        .attr('src');
        // パーティー、ボックス内ポケモンの分岐
        if(place === 'party'){
            var action = 'deposit';
        }else if(place === 'pokebox'){
            var action = 'receive';
        }
        // 「預ける」または「引き取る」を有効化
        $('[data-btn="' + action + '"]').show();
        // モーダルに選択されたポケモン情報をセット
        $('form#pokebox-' + action + '-form [name="pokemon_id"]').val(pokemon_id);
        $('#' + action + '-pokemon-name').text(name);
        $('#' + action + '-pokemon-img').attr('src', img);
    });
}
 
/**
* ボックス切り替え
* @function on click
*/
var switchPokeboxModalInit = function() {
    $('[data-target="#pokebox-switch-modal"]').on('click', function(){
        var box = $(this).data('box');
        var name = $(this).find('.pokebox-name').text();
        // ボックス名と番号をセット
        $('#switch-pokebox-name').text(name);
        $('#pokebox-switch-form [name="box"]').val(box);
    });
}
 
/*----------------------------------------------------------
// 初期化
----------------------------------------------------------*/
jQuery(function($){
    selectPokemonInit();
    selectPokeboxInit();
    switchPokeboxModalInit();
});

 

ボックス切り替え、預ける、引き取るではモーダルによる確認を挟むため、それぞれモーダルを用意しておきましょう。

 

ボックス切り替え確認モーダル(/Resources/Partials/Pokebo/Modals/switch.php
<div class="modal fade" id="pokebox-switch-modal" tabindex="-1" role="dialog" aria-labelledby="pokebox-switch-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <figure class="text-center p-3 mb-0">
                    <p class="mb-0"><span id="switch-pokebox-name"></span>に切り替えても良いですか?</p>
                </figure>
            </div>
            <div class="modal-footer justify-content-center">
                <form id="pokebox-switch-form" method="post">
                    <?php input_token(); ?>
                    <input type="hidden" name="action" value="switch">
                    <input type="hidden" name="box">
                    <button type="submit" class="btn btn-sm btn-primary">切り替える</button>
                </form>
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">やめる</button>
            </div>
        </div>
    </div>
</div>

 

預ける確認モーダル(/Resources/Partials/Pokebo/Modals/deposit.php
<div class="modal fade" id="pokebox-deposit-modal" tabindex="-1" role="dialog" aria-labelledby="pokebox-deposit-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <figure class="text-center p-3 mb-0">
                    <img class="mb-3" id="deposit-pokemon-img" src="" alt="預けるポケモン" />
                    <p class="mb-0"><span id="deposit-pokemon-name"></span>をボックスに預けますか?</p>
                </figure>
            </div>
            <div class="modal-footer justify-content-center">
                <form id="pokebox-deposit-form" method="post">
                    <?php input_token(); ?>
                    <input type="hidden" name="action" value="deposit">
                    <input type="hidden" name="pokemon_id">
                    <button type="submit" class="btn btn-sm btn-primary">預ける</button>
                </form>
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">やめる</button>
            </div>
        </div>
    </div>
</div>

 

引き取る確認モーダル(/Resources/Partials/Pokebo/Modals/receive.php
<div class="modal fade" id="pokebox-receive-modal" tabindex="-1" role="dialog" aria-labelledby="pokebox-receive-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <figure class="text-center p-3 mb-0">
                    <img class="mb-3" id="receive-pokemon-img" src="" alt="引き取るポケモン" />
                    <p class="mb-0"><span id="receive-pokemon-name"></span>を引き取りますか?</p>
                </figure>
            </div>
            <div class="modal-footer justify-content-center">
                <form id="pokebox-receive-form" method="post">
                    <?php input_token(); ?>
                    <input type="hidden" name="action" value="receive">
                    <input type="hidden" name="pokemon_id">
                    <button type="submit" class="btn btn-sm btn-primary">引き取る</button>
                </form>
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">やめる</button>
            </div>
        </div>
    </div>
</div>

 

では実際にボックスの挙動を見てみましょう。

 

ポケモンの預け入れから引き取りまで正常に動作しましたね。アクセスは原作寄せでポケモンセンターからできるようにしました。

ジョーイさんの中(大)サイズのgifが見当たらなかったので、PHPポケモンではラッキーさんが受付対応してくれます。

 

以上で、ポケモン預かりシステムの実装は完了です。

 

まとめ

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

今回のPHPポケモンでは「ポケモン預かりシステム」の実装方法をご紹介しました。

これで、ポケモンを捕まえていくための最低限の準備が整いました。

近日中に本番環境へ反映予定ですので、乞うご期待ください。

 

注目の記事

お金を稼ぐためは理解しておきたい基本的な3要素【お客さんを増やす前に知っておかなければならないことって?】
マーケティング
お金を稼ぐためは理解しておきたい基本的な3要素【お客さんを増やす前に知っておかなければならないことって?】

  お客さんを増やすためにはどうすればいいんだろう?   ビジネスをやっている人で儲かっている一部を除けば、誰もが抱いている共通の悩みですね。 ですが、ただお客さんを増やすために安易な広告を打ったりするのは、実は危険なことなんです。   今回は「お金を稼ぐためには理解しておきた...

毎日継続をするためのコツ
雑記
毎日継続をするためのコツ

定期的にコラムを書きたくなるので、今回は「毎日継続をするためのコツ」というテーマで自分が意識していることや、感じたことを書き綴っていきます。 決して開発や業務で追われていたり、PHPポケモンの大幅見直しを迫られているわけではありません。   毎日継続するために  ブログや学習など、毎日継続...

今からできる!ブログのアクセスを爆UPさせる3大SNS活用法
マーケティング
Facebook,Instagram,Twitter,ブロガー,ブログ
今からできる!ブログのアクセスを爆UPさせる3大SNS活用法

  ブログを収益化させたいけど、なかなかアクセス数が増えない 記事の質は高いのに、その良さをどうやって伝えれば良いかわからない   SEO対策をする上でも、収益化するためにも記事のクオリティは重要です。 しかし、せっかく良い記事を書いていても、そのブログや記事の存在を伝えることができなけれ...

AIが人類にもたらす驚異!深層学習が与える影響とは
ネットワーク
AI,ディープフェイク,深層学習
AIが人類にもたらす驚異!深層学習が与える影響とは

  海外の記事でAIについて記述した興味深いものが掲載されました。   今回は「AIが人類にもたらす驚異!深層学習が与える影響とは」について、上記サイトを参考にまとめましたのでご紹介します。 ※直訳ではありません、あくまで記事の内容を参考にして自らの考えを記述したものです     AIの驚異と...

起業・独立を考えている人に向けた具体的なアドバイス3選
雑記
起業・独立を考えている人に向けた具体的なアドバイス3選

  「どのタイミングで起業すべき?」 「会社を作るためにはどういったことをすればいいの?」   あなたはこんな悩みを抱えていませんか? 今回は、これから独立・起業をしようと考えている方や、そういった野望をいだいている人に向けて、自らの経験を元に具体的なアドバイスを3つピックアップしてご紹...

投稿タイトルを自動生成する方法【WordPressを便利にカスタマイズ】
プログラミング
PHP,WordPress
投稿タイトルを自動生成する方法【WordPressを便利にカスタマイズ】

  カスタムフィールドを含む投稿の場合、わざわざタイトルを設定する必要がないものもあります。 そういったときに、カスタムフィールド値を使ってタイトルを自動生成してくれると楽ですし、一覧で見てもわかりやすい状態にすることができます。   今回はWordPressで「投稿タイトルを自動生成する方法」につ...

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

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

EC-CUBE4内にWordPressを設置(共存)する方法
SEO対策,プログラミング
EC-CUBE4,PHP,Symfony,Twig,WordPress
EC-CUBE4内にWordPressを設置(共存)する方法

今回使用したバージョン EC-CUBE4.0.5 WordPress5.6 ※EC-CUBE4、WordPressのカスタマイズは自己責任でお願いします。また、現在稼働中のサイトで試す際には、必ずバックアップを取ってから行なうようにしてください。   EC-CUBE4とは ネットショップを作るとなれば、様々なサービスが出回っ...

カテゴリ

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