プログラミング

PHPポケモン「アクション制御編」27

JavaScript jQuery PHP PHPポケモン ポケモン
PHPポケモン「アクション制御編」27

 

今回のPHPポケモンでは主に画面の作り込みをしていきます。

とは言っても、ガッチリCSSを書いてよりゲームらしい見た目にするわけではなく、あくまで「ゲームシステムを再現するため」だけに整えていくのが目的です。

 

ということで、今回はPHPよりもBootstrapさんとjQueryさんに活躍してもらいます。

 

メッセージの表示

現在、攻撃時のメッセージ等をすべて一括出力をしていますが、実際のゲームではメッセージに合わせて動きがあり、すべて読み終わればアクションを選択できるという仕様です。これが再現できれば、各メッセージのタイミングでアクションを起こしたり、ひんし判定が行いやすくなるので上手く活用しながら今後のシステムづくりにつなげていきます。

 

まずはメッセージの出力について変更します。

 

バトル画面(/battle.php
<div class="col-12 col-sm-6">
    <div class="message-box border p-3 mb-3">
        <?php foreach($controller->getMessages() as $key => list($msg, $status)): ?>
            <?php $class = $key === $controller->getMessageFirstKey() ? 'active' : ''; ?>
            <?php $msg_id = $key === $controller->getMessageLastKey() ? 'last-message' : ''; ?>
            <p class="result-message <?=$class ?? ''?>" id="<?=$msg_id ?? ''?>"><?=$msg?></p>
        <?php endforeach; ?>
        <span class="message-scroll-icon">▼</span>
    </div>
</div>

 ※result-boxをmessage-boxに変更しました

 

今まではforeachを使ってメッセージを1行づつ出力しているだけでしたが、最初のメッセージにはactiveというクラス最後のメッセージにはlast-messageというidを割り当てるようにしました。

コントローラーから呼び出しているgetMessageFirstKeygetMessageLastKeyというメソッドはレスポンストレイトに追加しています。

 

レスポンストレイト(/Traits/ResponseTrait.php
/**
* メッセージの最初のキーを取得
*
* @return void
*/
public function getMessageFirstKey()
{
    return array_key_first($this->msgs);
}
 
/**
* メッセージの最後のキーを取得
*
* @return void
*/
public function getMessageLastKey()
{
    return array_key_last($this->msgs);
}

 

array_key_firstarray_key_lastの関数を使用して、メッセージの最初と最後を判別しています。こちらで分岐をかけ、それぞれに必要な値を割り当てているという仕組みです。

 

CSSもメッセージの出力に合わせて簡単に追記しています。

 

スタイルシート(/Resources/Assets/css/style.css
.message-box{
    position: relative;
    height: 90px;
    overflow-y: scroll;
    cursor: pointer;
}
.result-message{
    display: none;
}
.result-message.active{
    display: block;
}
.message-scroll-icon{
    position: absolute;
    right: 8px;
    bottom: 8px;
}

 

基本的にメッセージはdisplay:noneで非表示にしておき、activeが付けば表示させるという単純な仕様です。こうすることで、出力時には最初のメッセージのみが表示されるようになります。

 

 

アクションの制御

 メッセージが最初の一つだけ表示されても、次のメッセージへ以降できなければ意味がありません。なので、メッセージを進めていく処理をjQueryを使って作成します。

合わせて、アクションの制御もかけます。メッセージが最後(id=”last-message)であればアクションを選択可能、そうでなければ無効化(disabled)にします。

 

バトル画面(/battle.php
<div class="col-12 col-sm-6">
    <div class="row">
        <div class="col-6 mb-2">
            <button type="button" class="btn btn-outline-light btn-block action-btn" data-toggle="modal" data-target="#select-move-modal" id="action-btn-fight">たたかう</button>
        </div>
        <div class="col-6 mb-2">
            <button type="button" class="btn btn-outline-light btn-block action-btn" id="action-btn-item">どうぐ</button>
        </div>
        <div class="col-6 mb-2">
            <button type="button" class="btn btn-outline-light btn-block action-btn" id="action-btn-pokemon">ポケモン</button>
        </div>
        <div class="col-6 mb-2">
            <form action="" method="post">
                <div class="input-group mb-3">
                    <input type="hidden" name="action" value="run">
                    <input class="btn btn-outline-light btn-block action-btn" id="action-btn-run" type="submit" value="逃げる">
                </div>
            </form>
        </div>
    </div>
</div>

 

せっかくなので、メッセージの右側に配置してどうぐとポケモンのボタンを追加しました。この2つはまだ未実装ですが見た目だけのために用意しています。

 

次にjQueryを使った制御です。

 

メッセージ用js/Resources/Assets/js/Battle/message.js
/*----------------------------------------------------------
// 初期化する関数
----------------------------------------------------------*/
/**
* 画面読み込み時の関数
* @function ready
* @return void
**/
var startInit = function(){
    // 現在のメッセージ
    var now = $('.result-message.active');
    if((now.length === 0) || (now.attr('id') === 'last-message')){
        doLastMsg();
        return;
    }
    doNotLastMsg();
}
 
/**
* メッセージボックスクリック時の関数
* @function click
* @return void
**/
var clickMsgBoxInit = function(){
    $('.message-box').click(function(){
        // 現在のメッセージ
        var now = $('.result-message.active');
        // 最終メッセージかどうか確認
        if((now.length === 0) || (now.attr('id') === 'last-message')){
            doLastMsg();
            return;
        }
        // 現在のメッセージのactiveを解除
        now.removeClass('active');
        // 次のメッセージにactiveを付与
        var next = now.next();
        next.addClass('active');
        // 最後のメッセージであれば操作ボタンを有効可
        if(next.attr('id') === 'last-message'){
            doLastMsg();
            return;
        }
        doNotLastMsg();
    });
}
 
/*----------------------------------------------------------
// 処理内で呼び出す関数
----------------------------------------------------------*/
 
/**
* 最終メッセージの処理
* @return void
**/
var doLastMsg = function(){
    // スクロールアイコンを非表示
    $('.message-scroll-icon').hide();
    // 操作ボタンの無効化解除
    $('.action-btn').prop('disabled', false);
    // ボタンに色付け
    $('.action-btn').each(function(){
        $(this).removeClass('btn-outline-light');
        $(this).addClass('btn-outline-success');
    });
}
 
/**
* 最終メッセージではない場合の処理
* @return void
**/
var doNotLastMsg = function(){
    // スクロールアイコンを非表示
    $('.message-scroll-icon').show();
    // 操作ボタンの無効化
    $('.action-btn').prop('disabled', true);
    // ボタンの色消し
    $('.action-btn').each(function(){
        $(this).removeClass('btn-outline-success');
        $(this).addClass('btn-outline-light');
    });
}
 
 
/*----------------------------------------------------------
// 初期化
----------------------------------------------------------*/
jQuery(function($){
    startInit();
    clickMsgBoxInit();
});

 

まずは読み込み時の処理とクリック時の処理についてです。

メッセージボックス内がクリックされればメッセージを進めるという仕組みになっています。もし、最後のメッセージ(#last-message)でなければボタンを無効化、最後のメッセージであれば有効化させるという単純な処理です。見た目で判断できるように、クラスを割り当てて表現していますが、このあたりは好みに合わせてください。

 

出力結果は以下の通りです。

 

 

 

 

※メッセージの最後にコントローラーで「行動を選択してください」をセットしています

 

これで大分わかりやすくなり、簡易ながら画面の制御もできるようになりました。

 

モーダルの活用

 今までは技選択がそのままできていましたが、ゲーム再現のため「たたかう」を選択したら技のウィンドウを表示させるという仕様に変更しましょう。Bootstrapではおなじみのモーダルウィンドウを使用します。

 

技選択モーダル(/Resources/Partials/Battle/Modals/move.php
<!-- Modal -->
<div class="modal fade" id="select-move-modal" tabindex="-1" role="dialog" aria-labelledby="select-move-modal-title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="select-move-modal-title">技を選択</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <?php include(__DIR__.'/../Forms/move.php'); # たたかう ?>
      </div>
    </div>
  </div>
</div>

 

battle.phpの記述量が多くなってきたのでパーツ分けしました。bodyの最後で読み込んでおいてください。

※jsやmetaなどもパーツ分けして読み込むように変更しています

 

 

 

モーダルを活用することで、画面の余裕が出てきました。アイテムやポケモンの選択を作る際にもモーダルを使用する予定です。

 

見た目の作り込み

 処理そのものとは大きく関係ありませんが、見た目もそれらしく整えていきましょう。見た目が良くなれば、それだけで「ゲームらしさ」が演出できますし、より楽しく感じさせるための重要なポイントの一つです。

 

HPバー

 前回input rangeの使いみちについて舞い上がっていましたが、Bootstrap4.2の公式マニュアルをじっくり読んでいくと、よりそれらしいProgressというものが見つかったのでそちらを採用します。 

これこそHPバーを再現するためだけに用意されたようなものです。ただ、rangeと違って値を割り当てるだけでは残ゲージは表示されず、結局widthを指定しなければならないという仕様だということが発覚したので、これに合わせて「残りHPの割合」を取得するためのメソッドを用意します。

 

Get格納トレイト
/**
* 残りHPを取得
* @return string $param
* @return integer
*/
public function getRemainingHp($param='')
{
    if($param === 'per'){
        // 最大HPとの比率を%で取得(数値で返却)
        return $this->remaining_hp / $this->getStats('HP') * 100;
    }else{
        return $this->remaining_hp;
    }
}

 

残りHPを取得するgetRemainingHpというメソッドに引数を追加し、%の状態にして返却する機能を追加しました。これをwidthに突っ込めばProgressバーでも十分にHPが再現可能です。

 

バトル画面(/battle.php
<div class="row mb-3">
    <?php # 自ポケモン詳細 ?>
    <div class="col-6 text-center">
        <img src="Resources/Assets/img/pokemon/dots/back/<?=get_class($pokemon)?>.gif" alt="<?=$pokemon->getName()?>">
    </div>
    <div class="col-6">
        <p><?=$pokemon->getNickName()?> Lv:<?=$pokemon->getLevel()?> <?=$pokemon->getSaName()?></p>
        <div class="form-group">
            <div class="progress">
                <?php if($pokemon->getRemainingHp('per') <= 50) $hp_bar_class = 'bg-warning'; ?>
                <?php if($pokemon->getRemainingHp('per') <= 20) $hp_bar_class = 'bg-danger'; ?>
                <div class="progress-bar <?=$hp_bar_class ?? 'bg-success'?>" role="progressbar" style="width:<?=$pokemon->getRemainingHp('per')?>%;" aria-valuenow="<?=$pokemon->getRemainingHp()?>" aria-valuemin="0" aria-valuemax="<?=$pokemon->getStats('HP')?>"></div>
            </div>
            <p class="text-right px-3"><?=$pokemon->getRemainingHp()?> / <?=$pokemon->getStats('HP')?></p>
        </div>
    </div>
</div>

 

最新世代と同じように、残りHPが50%以下なら黄色ゲージ20%以下なら赤ゲージで表示されるようにクラスを振り分けました。この辺りは動的に再現するとjQueryでの処理になりますが、現状はこのまま進めていきます。ゲージ色の変化は敵ポケモンには不要です。

 

 

 

 

 

色ゲージの判定が完成しました。改めてBootstrapの優秀さが実感させられます。

 

 

ホーム画面

 ホーム画面もせっかくなのでモーダルやプログレスバーを使って見やすく整えていきます。

 

ホーム画面(/home.php
<?php
require_once(__DIR__.'/Classes/Controller/HomeController.php');
require_once(__DIR__.'/Resources/Lang/Translation.php');
session_start();
$controller = new HomeController();
$pokemon = $controller->getPokemon();
$_SESSION['pokemon'] = $pokemon->export(); # ポケモンの情報をセッションに格納
?>
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
    <?php
    # metaの読み込み
    include(__DIR__.'/Resources/Partials/Layouts/Head/meta.php');
    # cssの読み込み
    include(__DIR__.'/Resources/Partials/Layouts/Head/css.php');
    ?>
</head>
<body>
    <header>
        <div class="container">
            <section>
                <div class="row">
                    <div class="col-12">
                        <h1 class="py-3">PHPポケモン</h1>
                    </div>
                </div>
            </section>
        </div>
    </header>
    <main>
        <div class="container">
            <section>
                <div class="row my-5">
                    <div class="col-3 offset-md-2 text-center">
                        <img src="Resources/Assets/img/pokemon/dots/front/<?=get_class($pokemon)?>.gif" alt="<?=$pokemon->getName()?>" style="cursor:pointer;" data-toggle="modal" data-target="#pokemon-details-modal">
                    </div>
                    <div class="col-9 col-md-5">
                        <p><?=$pokemon->getNickName()?> Lv:<?=$pokemon->getLevel()?> <?=$pokemon->getSaName()?></p>
                        <div class="form-group">
                            <div class="progress">
                                <?php if($pokemon->getRemainingHp('per') <= 50) $hp_bar_class = 'bg-warning'; ?>
                                <?php if($pokemon->getRemainingHp('per') <= 20) $hp_bar_class = 'bg-danger'; ?>
                                <div class="progress-bar <?=$hp_bar_class ?? 'bg-success'?>" role="progressbar" style="width:<?=$pokemon->getRemainingHp('per')?>%;" aria-valuenow="<?=$pokemon->getRemainingHp()?>" aria-valuemin="0" aria-valuemax="<?=$pokemon->getStats('HP')?>"></div>
                            </div>
                            <p class="text-right px-3"><?=$pokemon->getRemainingHp()?> / <?=$pokemon->getStats('HP')?></p>
                        </div>
                    </div>
                </div>
            </section>
            <section>
                <div class="row">
                    <div class="col-12 col-sm-6">
                        <div class="message-box border p-3 mb-3">
                            <?php foreach($controller->getMessages() as list($msg, $status)): ?>
                                <p><?=$msg?></p>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6">
                        <?php include('Resources/Partials/Home/Forms/change_nickname.php'); # ニックネームの変更?>
                        <?php include('Resources/Partials/Home/Forms/add_exp.php'); # 経験値の取得 ?>
                        <?php include('Resources/Partials/Home/Forms/battle.php'); # バトル ?>
                        <?php include('Resources/Partials/Home/Forms/reset.php'); # リセット ?>
                    </div>
                </div>
            </section>
        </div>
    </main>
    <?php
    # JSの読み込み
    include(__DIR__.'/Resources/Partials/Layouts/Foot/js.php');
    ?>
    <?php
    # モーダルの読み込み
    include(__DIR__.'/Resources/Partials/Home/Modals/details.php');
    ?>
</body>
</html>

 

詳細モーダル(/Resources/Partials/Home/Modals/details.php
<!-- Modal -->
<div class="modal fade" id="pokemon-details-modal" tabindex="-1" role="dialog" aria-labelledby="pokemon-details-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pokemon-details-modal-title">ポケモン詳細</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body overflow-auto my-2" style="height:360px;">
                <div class="row my-3">
                    <div class="col-5 offset-1 text-center">
                        <img src="Resources/Assets/img/pokemon/dots/front/<?=get_class($pokemon)?>.gif" alt="<?=$pokemon->getName()?> 前">
                    </div>
                    <div class="col-5 text-center">
                        <img src="Resources/Assets/img/pokemon/dots/back/<?=get_class($pokemon)?>.gif" alt="<?=$pokemon->getName()?> 後">
                    </div>
                </div>
                <nav class="nav nav-pills nav-justified btn-group mb-3" id="pokemon-details-tab">
                    <a class="btn btn-outline-secondary nav-item nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">詳細</a>
                    <a class="btn btn-outline-secondary nav-item nav-link" id="stats-tab" data-toggle="tab" href="#stats" role="tab" aria-controls="stats" aria-selected="true">ステータス</a>
                    <a class="btn btn-outline-secondary nav-item nav-link" id="move-tab" data-toggle="tab" href="#move" role="tab" aria-controls="move" aria-selected="true">使える技</a>
                </nav>
                <div class="tab-content" id="pokemon-details-tabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <?php # 詳細 ?>
                        <table class="table table-bordered table-sm table-hover">
                            <tbody>
                                <?php foreach($pokemon->getDetails() as $key => $val): ?>
                                    <tr>
                                        <th scope="row" class="w-50"><?=transJp($key)?></th>
                                        <td><?=$val?></td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade show" id="stats" role="tabpanel" aria-labelledby="stats-tab">
                        <?php # ステータス ?>
                        <table class="table table-bordered table-sm table-hover">
                            <tbody>
                                <?php foreach($pokemon->getStats() as $key => $val): ?>
                                    <tr>
                                        <th scope="row" class="w-50"><?=transJp($key)?></th>
                                        <td><?=$val?></td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade show" id="move" role="tabpanel" aria-labelledby="move-tab">
                        <?php # 覚えている技 ?>
                        <table class="table table-bordered table-sm table-hover">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col">覚えている技</th>
                                    <th scope="col">タイプ</th>
                                    <th scope="col">PP</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach($pokemon->getMove() as $move): ?>
                                    <tr>
                                        <th scope="row" class="w-50"><?=$move->getName()?></th>
                                        <td><?=$move->getType()->getName()?></td>
                                        <td><?=$move->getPp()?>/<?=$move->getPp()?></td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 

 

 

Bootstrapは(ry

 

所有者判定

 最後に所有者の判定を追加します。これは対戦時に「相手の〇〇のなきごえ」というのを表示させるために使います。こちらも使いやすさ重視でポケモンに対してプロパティを用意し、引き継ぎの対象としましょう。

 

ポケモンクラス(/Classes/Pokemon.php
/**
* ポケモンの立場
* @var string (enemy:敵|friend:味方)
*/
protected $position = 'enemy';

 

初期値には相手(enemy)をセットしています。ポケモンをゲットした段階で味方(friend)をセットしましょう。

 

Set格納トレイト(/Traits/Pokemon/SetTrait.php
/**
* ポケモンの立場をセットする
* @param string (friend|enemy)
* @return void
*/
public function setPosition($param='friend')
{
    // 入力制限
    if(in_array($param, ['enemy', 'friend'], true)){
        $this->position = $param;
    }
}

 

ホームコントローラー(/Classes/Controller/HomeController.php
/**
* ポケモンクラスの存在チェック
*
* @param string $pokemon(class_name)
* @var void
*/
private function checkPokemon($pokemon)
{
    if(class_exists($pokemon)){
        $this->pokemon = new $pokemon;
        // Pokemonのインスタンスに溜まったメッセージを取得
        $this->setMessage($this->pokemon->getName().'をゲットした!', 'success');
        // ポケモンの立場を味方にする
        $this->pokemon
        ->setPosition();
    }else{
        $this->setMessage('選択されたポケモンは存在しません', 'error');
    }
}

 

技や行動に合わせて「相手の」を分岐させて付与するのも大変なので、接頭語付きの名称を取得できるようにメソッドを作成します。

 

Get格納トレイト(/Traits/Pokemon/GetTrait.php
/**
* 名前の手前に接頭語を付ける(相手の)
* @return string
*/
public function getPrefixName()
{
    if($this->position === 'enemy'){
        return '相手の'.$this->name;
    }else{
        return $this->name;
    }
}

 

あとは、状態異常や技のメッセージを生成する際に、getPrefixNameを使って名前を取得するだけです。もし味方であればそのままnameプロパティに格納された値が返却されるので、それぞれの処理で分岐を作成する必要がありません。

 

  

まとめ

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

今回のPHPポケモンでは、メッセージの制御と画面の作り込みを重点的にご紹介しました。画面制御ができるようになれば、これから作成する処理と組み合わせてより動的且つゲームを再現することができるようになります。

ゲームづくりに興味がある人、プログラミング学習中の方はぜひ参考にしてみてくださいね。

 

注目の記事

ブログで生活するための7つの道のり 〜収益化と拡散の方法教えます〜
ライティング
Facebook,Google AdSense,Twitter,ノマドワーク
ブログで生活するための7つの道のり 〜収益化と拡散の方法教えます〜

  ブログで生活したい   毎日数時間、ブログを書くだけで生きていける、そんな夢のような生活を実現させたいと思い描く人は多いですが、簡単なことでは有りません。 ですが、やらなければいけないことがわかっていれば、収益化するのは簡単です。   今回は「ブログで生活するための7つの道のり」をテ...

HPバー色変更編(アニメーション) PHPポケモン53
プログラミング
PHP,PHPポケモン,ポケモン
HPバー色変更編(アニメーション) PHPポケモン53

HPバーの色変更 残りHPの割合に合わせて色クラスをセットしていましたが、ダメージを受けた際の判定処理(動的は変更)が未実装でしたので、今回はコチラを対応します。   残数(割合)の判定 HPの色判定は、HTMLの描画時とJSによるHP変動時に行います。animateメソッド前や後に行うと変更のズレが生じるため、a...

動画編集に役立つ基本的な考え方【Adobe AfterEffects】
動画編集
Adobe,AfterEffects,PremierePro,YouTube
動画編集に役立つ基本的な考え方【Adobe AfterEffects】

  YouTubeの人気に合わせて、動画編集の需要も高まってきましたが、その大変さから挫折してしまう人も続出しています。 動画編集は奥が深く、技術的な部分に関してはプロのクリエイターであっても自分がよく使うような一部しか把握していないのが普通であり、調べても該当する情報が出てきにくいということもあ...

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

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

命中率補正と交代技編 PHPポケモン 45
プログラミング
PHP,PHPポケモン,ポケモン
命中率補正と交代技編 PHPポケモン 45

命中率補正とは ダメージ計算や行動順判定には補正(ランク)を計算した結果を反映していましたが、命中率補正についてはまだ未実装だったため、今回はこちらを作成していきたいと思います。 まずはwikiを参考に、計算方法を見ていきましょう。 命中(ポケモンwiki) https:// wiki.ポケモン.com/wiki/命中 ...

わざマシン編 作成 PHPポケモン104
プログラミング
PHP,PHPポケモン,ポケモン
わざマシン編 作成 PHPポケモン104

わざマシンとは ポケモンはレベルアップ以外でも技を習得することができます。それが「わざマシン」というアイテムです。  わざマシン(ポケモンwiki) https://wiki.ポケモン.com/wiki/わざマシン   最新世代では「技レコード」というものが有り、使い切りとなっています。初代ではわざマシン自体も使い...

【脱初心者向けプログラミング学習】処理を追え!「今、変数には何が入ってる?」
プログラミング
HTML,PHP,プログラミング学習
【脱初心者向けプログラミング学習】処理を追え!「今、変数には何が入ってる?」

  初心者から中々抜け出せない 1から処理をかけない   そんな悩みを抱えたプログラミング学習者に向けて、「脱初心者のためのプログラミング学習」についてPHPを例にまとめました。 やり方自体は同じですので、他の言語をメインとしている人は自分の環境に置き換えながら学習して、初心者から抜け出しましょ...

千利休から学ぶビジネスモデルの作り方3ステップ!守破離とは
ビジネスモデル
千利休から学ぶビジネスモデルの作り方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 fortify function Google Google AdSense Honeycode htaccess HTML IEEE 802.11ax Illustrator Instagram IoT JavaScript jetstream jQuery jQuery UI keyword LAN Laravel Linux MacBook MAMP meta MLM MySQL NoCode note OS OSI参照モデル Paypal Photoshop PHP phpMyAdmin PHPポケモン PremierePro rss 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 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 認証 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力