baserCMSでイベント処理に挑戦!おみくじを表示させて、花火を打ち上げるまで

こんにちは!エンジニアの河瀬です!

今回は、baserCMS初心者向け第二弾ということで、プラグインを作成してイベント処理を実装してみたいと思います!

第一弾の記事はこちら↓
オープンソースにプルリクエストを送ってみよう!

イベント処理をマスターすれば、できることが更に多くなるみたいなので、勉強しながらやってみます!

みなさんもこの記事を参考にしながら、一緒にやってみましょう!

プラグインを作成する

まずは、どんなイベントを実装するか考えてみましょう

今回は初心者向けの記事ということで、簡単なプラグインを作成して、その中でイベント処理を挟もうかと思います

具体的には、その日初めてサイトを表示したときに今日の運勢が出るような「おみくじ」プラグインを作成してみます

完成イメージはこんな感じ

さて、作成するプラグインが決まったので、まずはbaserCMSにプラグインを認識させましょう!

plugins/{プラグイン名}/config.phpを作成し、画像のように記述します

baserCMS5では、テーマもplugins/配下に設置するため、'type' => 'Plugin'で、プラグインであることを明示します

その他に必要な情報を記載すると…


 'Plugin',
    'title' => __d('baser_core', 'おみくじ'),
    'description' => __d('baser_core', 'ログイン時に運勢を占います。'),
    'author' => 'kawase',
];

管理画面に表示されました!

早速インストールしたいところですが、このままではまだ有効化できません

もう一つ必要な工程があるので頑張ってみましょう


namespace Fortune;
use BaserCore\BcPlugin;
class FortunePlugin extends BcPlugin
{
}

plugins/{プラグイン名}/src/{プラグイン名}Plugin.phpを作成し、画像のように記述します

BcPluginを継承するだけで、中身はひとまず空で問題ありません

この状態で管理画面からプラグインをインストールすることで、プラグインを有効化できます!

イベントを実装しよう!

さて、ここからが本題、プラグインを有効化しても、なんの処理も作成していないのでただ有効化されただけの状態

baserCMSのイベントについて解説している公式ドキュメントを参考に、イベント処理を実装していきます!
https://baserproject.github.io/5/plugin/event

公式ドキュメントの第一章では、イベントキーの作成について解説していますが、今回は、画面描画時のイベント処理なので、新たなイベントのキーの作成は必要なさそうです

あまりイメージは湧いてないけど、次のコールバック処理の登録をやってみます!

コールバック処理の登録

イベントリスナークラス、イベントキーの定義、コールバック処理の定義など、命名規則がきっちり決められているようです

今回は初心者向けということで、シンプルにいきましょう

  1. beforeRenderイベントをフックしてエレメントを差し込む
  2. 呼び出したエレメントでHTML、CSS、JavaScript、PHPの処理を完結させる

簡単2ステップですね!(?)

beforeRenderイベントについて簡単に説明します

baserCMS(CakePHP)ではMVCの「Controller」がリクエストを受け取り、最終的に「View」を表示(レンダリング)します。
この流れの中で、「Viewを表示する直前」に発火するイベントです!
レイアウトを動的に切り替えたい場合やテンプレートの選択を変更したい場合などに使用します!

ということで、命名規則に則ったファイルを作成し、以下の記述をしてみる

/plugins/Fortune/src/Event/FortuneViewEventListener.php


    /**
     * events
     * @var string[]
     */
    public $events = ['beforeRender'];

    /**
     * Before Render
     * @param Event $event
     */
    public function beforeRender(Event $event): void
    {
      $view = $event->getSubject();
      echo $view->element('Fortune.my_template');
    }

plugins/Fortune/templates/element/my_template.php


echo 'エレメントが読み込まれました。';

しっかり読み込んでくれていますね!

あとはこのエレメント内に諸々の処理を書いていきましょう!
必要なのは主に以下の処理です

  • HTML・CSS:表示調整、その他アニメーションなど
  • PHP:ランダムで運勢を決定し、動的に表示する
  • JS:表示・非表示処理、1度表示したら次の日まで表示しないようクッキーへフラグを保存

ChatGPTやGoogle先生の力を借りて作っていきます!

完成!!

ChatGPTと議論を重ねて、無事完成しました!

イベント実装がメインなので、細かいコードは省きますが、1日にはじめてアクセスすると運勢とメッセージが5秒間表示されます!

分かりづらいですが、背景に花火を上げて、運勢によって花火の数も変わります笑
(参考:https://zenn.dev/yurukei20/articles/30f6fb5bbd91e3)

ちなみに、今回の実装ではフロント、管理画面関係なく、その日初めてアクセスした画面でイベントが発火してしまいます
ですがイベントを実装するときは、特定のアクションや特定のページでのみ処理を挟みたい、ということがほとんどです

例えば、管理画面でのみイベントを発火させたい場合はイベント処理の冒頭に以下の記述をします

if (!BcUtil::isAdminSystem()) {
  return;
}

イベント処理は便利なものですが、影響範囲を考えずに実装すると思わぬところで不具合が起きる原因になることを意識して実装しましょう!

まとめ

今回はbaserCMS初心者の方向けにイベントの処理を紹介しました!

イベントを使えるようになるとできることの幅がかなり広がって、開発がさらに楽しくなりそうですね!

他にもたくさんのイベントがあって、今回のような遊び心のあるものから、便利で実用的な機能の作成にもイベントの実装は不可欠になります

この記事を参考に挑戦してもらえると嬉しいです!

ではまた次回、お会いしましょうノシ

  • このエントリーをはてなブックマークに追加

AUTHOR

河瀨 竜馬

河瀨 竜馬 エンジニア

2002年宮崎県宮崎市生まれ
専門学校でHTML・CSSを学び、Webの道へ
キャッチアップに入社をきっかけに福岡に来ました!

好きな食べ物は甘い物!とオムライスとお好み焼きとハンバーグとお寿司と…美味しいものなら何でも好きです!笑
趣味はゲーム、お酒、音楽で、一番好きなお酒はハイボールです✨
とにかく楽しく生きてます!

失敗を恐れず、何でもチャレンジしてみたいです。
あと、褒められて伸びるタイプです←\_(・ω・`)ココ重要!
よろしくお願いします!!

こんな記事も書いています