またどこかでCTOっぽいことやってる人のブログ

フリーランスを経て、またどこかでCTOっぽいことをやってる人が書いてます。何か色々やってます。

FlashメッセージをBootStrap風味にしてみた。

2016年も早いもので8月になりました。
気が付いたら今年も半年以上終わってるんですね。

恐ろしい。

今日は小ネタです。
CakePHPを使っているとエラーメッセージにFlashを使う機会があると思います。
使い方は至って単純で、Controller側でメッセージをセットしてView側でレンダリングするだけです。
CakePHP3だとこんな風に書きます。

<?php
  // Controller側
  public function test() {
    $this->Flash->error('エラーですよ');
  }


例えばこんな感じでエラーメッセージをセットして

<?php
  <!-- ここにメッセージが出ます -->
  <?php echo $this->Flash->render(); ?>


View側でこのようにレンダリングします。
このエラーメッセージはCakePHP3が最初から準備しているテンプレートで、Elementの下にあります。
Element\Flashディレクトリの下ですね。
何もしていなければ「default.ctp」、「error.ctp」、「success.ctp」があると思います。

上の方で「エラーですよ」とメッセージをセットしたテンプレートは今回だと「error.ctp」です。
なので、「$this->Flash->success('成功ですよ');」と書けば「success.ctp」が呼び出されるわけです。

他のテンプレートを使いたかったら「error_special.ctp」なんてのを例えば作成して、メッセージをセットする時に

<?php
  // Controller側
  public function test() {
    $this->Flash->errorSpecial('すごいエラーですよ');
  }

なんて書けばOKです。


で。
個人的な趣味なんでしょうが、自分はBootStrapを使っている時はアラートコンポーネントを使う傾向にあります。
ですのでいつもこんな感じで書き換えています。

<?php
  // 元々のElement\Flash\error.ctp
  <div class="message error" onclick="this.classList.add('hidden');"><?= h($message) ?></div>

これを

  <div class="alert alert-warning" role="alert">
    <p class="text-danger">
      <?php echo h($message); ?>
    </p>
  </div>

例えばこんな風に変更すると、BootStrapのアラートコンポーネントを使ったエラーメッセージエリアができます。

もし、複数のエラーを改行コード入れつつ全部出力したい時は、Controller側で配列をセットしてループさせればいいと思います。
配列セットする時に改行コードを埋め込むか、View側で出力する時に改行コードを出すかはお好みで。
改行コードを埋め込んだ配列をセットした場合だと、error.ctpはこんな感じになると思います。

<?php
  <div class="alert alert-warning" role="alert">
    <p class="text-danger">
      <?php foreach($message as $msg): ?>
        <?php echo $msg; ?>
      <?php endforeach; ?>
    </p>
  </div>

hをつけたままだと改行されなくて頭を抱えるかもしれないので注意してください。
小ネタと冒頭に書きつつ、何でこんなネタを書いた理由は自分が頭を抱えた張本人だからです。

戒めというやつですね。