CakePHP3歴 1年のWEBエンジニアの備忘メモです。ブログ内容はCakePHP3.5 (PHP7.1) で検証しています。

CakePHP3 フラッシュメッセージを4秒後に非表示にする方法

投稿日：2017年12月1日更新日：2017年12月7日

CakePHP3 フラッシュ(flash)メッセージを4秒後に非表示にするサンプルコードです。

// ctpファイルに追記する
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
$('div.message').fadeIn('slow', function() {
$(this).delay(4000).fadeOut('slow');
});
});
</script>

// ctpファイルに追記する

$(function(){

$('div.message').fadeIn('slow', function() {

$(this).delay(4000).fadeOut('slow');

});

</script>

-ビュー(Template)
-サンプルコード, フラッシュメッセージ, 非表示, fadeOut, fadeIn, delay

執筆者：管理人

comment コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

CakePHP3 scriptタグ(HTMLヘルパー)のdefer・async属性設定方法

CakePHP3 scriptタグ(HTMLヘルパー)のdefer・async属性オプションの設定方法です。

// CakePHP3 HTMLヘルパー（$this->Html->script - defer属性）
<?= $this->Html->script(['jquery.min.js', 'bootstrap/bootstrap.min.js'], ['defer' => true])?>
// 生成されるHTML
<script src="/js/jquery.min.js" defer="defer"></script>
<script src="/js/bootstrap/bootstrap.min.js" defer="defer"></script>
// CakePHP3 HTMLヘルパー（$this->Html->script - async属性）
<?= $this->Html->script(['jquery.min.js', 'bootstrap/bootstrap.min.js'], ['async' => true])?>
// 生成されるHTML
<script src="/js/jquery.min.js" async="async"></script>
<script src="/js/bootstrap/bootstrap.min.js" async="async"></script>

// CakePHP3 HTMLヘルパー（$this->Html->script - defer属性）

<?= $this->Html->script(['jquery.min.js', 'bootstrap/bootstrap.min.js'], ['defer' => true])?>

// 生成されるHTML

// CakePHP3 HTMLヘルパー（$this->Html->script - async属性）

<?= $this->Html->script(['jquery.min.js', 'bootstrap/bootstrap.min.js'], ['async' => true])?>

// 生成されるHTML

: HTML特殊文字をエスケープする (htmlspecialchars)
CakePHP3のTemplate(View)でHTML特殊文字をエスケープ(htmlspecialchars)する方法。 ※ クロスサイトスクリプティング対策 [crayon-6422743b437 …

: CakePHP3 ビューからエレメント(Element)に値渡す方法
CakePHP3 ビューからエレメントに値渡す(パラメーターアサイン)方法です。 ※ エレメント(Element)：画面デザインのパーツを再利用できるように定義できる機能です。 [cray …

CakePHP3.5 HTMLヘルパーまとめ (charset・css・fetch)

◯ CakePHP3.5 HTMLヘルパーまとめ

// 文字セットのタグを作成
<?= $this->Html->charset() ?>
//// 生成されるHTML
<meta charset="utf-8"/>
// CSSファイルへのリンク
<?= $this->Html->css('base.css') ?>
//// 生成されるHTML
<link rel="stylesheet" href="/css/base.css"/>
// Viewファイルからタイトル取得
//// Layoutファイル
<title><?= $this->fetch('title') ?></title>
//// Viewファイル(ctp)
<?php
$this->assign('title', 'トップページ');
?>
//// 生成されるHTML
<title>トップページ</title>

// 文字セットのタグを作成

<?= $this->Html->charset() ?>

//// 生成されるHTML

// CSSファイルへのリンク

<?= $this->Html->css('base.css') ?>

//// 生成されるHTML

// Viewファイルからタイトル取得

//// Layoutファイル

<title><?= $this->fetch('title') ?></title>

//// Viewファイル(ctp)

<?php

$this->assign('title', 'トップページ');

//// 生成されるHTML

<title>トップページ</title>

CakePHP3 ビュー(Template)から独自Helperを使うサンプルコード

CakePHP3 ビュー(Template)から独自Helperを使うサンプルコードです。 ◯ 独自Helper

// ファイル名 「src/View/Helper/Cake3Helper.php」
<?php
namespace App\View\Helper;
use Cake\View\Helper;
class Cake3Helper extends Helper
{
public function initialize(array $config)
{
parent::initialize($config);
}
// trailing slash(末尾スラッシュの統一)
public function addslash($url)
{
if (preg_match('/\/$/', $url)) {
return $url;
} else {
return $url.DS;
}
}
}