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

ビュー(Template)

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

投稿日：2018年11月9日

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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// 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>

-ビュー(Template)
-JavaScript, HtmlHelper, script, defer, async

執筆者：管理人

comment コメントをキャンセル

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

関連記事

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

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

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

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>

1

2

3

4

5

6

7

8

9

// 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>

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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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

<?= $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>

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;
}
}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

// ファイル名「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;

}

}

}

…

PREV: Chrome(クローム) すべてのCookieとサイトデータを表示する方法
NEXT: CakePHP3 Template用にsetした値を参照する方法

: 2022/07/28
PHPフレームワーク Laravel Webアプリケーション開発バージョン8.x対応 [ 竹澤有貴 ] のメモ

: 2022/06/19
楽天ふるさと納税とは？

: 2022/06/19
Binance Chainとは

: 2022/06/19
Bybit(バイビット) 紹介

: 2021/10/02
Bybit (バイビット) でクラウドマイニングしてみた

人気の記事

CakePHP3 よく使うfindメソッドまとめ - 23,554 views
CakePHP3のレコード更新方法まとめ (save・updateAll) - 16,675 views
CakePHP3 フォームからのPOSTデータ取得方法 - 15,368 views
CakePHP3 本番環境用にデバッグモード無効にする方法 - 11,164 views
CakePHP3のレコード削除方法まとめ (delete・deleteAll) - 9,639 views
CakePHP3 フラッシュメッセージの設定・表示方法 - 9,060 views
CakePHP3 セッション(session)使い方 - 7,478 views
CakePHP3 バージョン確認方法 - 6,890 views
CakePHP3 GETメソッドのクエリストリングを取得する方法 - 5,473 views
CakePHP3 コントローラーでのリダイレクト処理 - 4,728 views

最近の投稿

カテゴリー

イーサリアムアドレス【ETH】