CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説

2019/09/23 2019/09/28

CakePHP3でページごとに必要となる処理や変数などを編集する処理

　
前回の記事「CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定」では、あらかじめ用意されている HTMLヘルパーを利用して OGPを設定しました。
　
HTMLヘルパーは便利なのでこれを利用しない理由はありませんので、実際に実装する場合は HTMLヘルパーを利用する方法を使用してください。
ですが、今回の記事は、同じことを「fetch()」「assign()」を利用して実装することもできます、という実験的な内容の記事になります。
　
　
この方法は下記の記事で書いている「fetch()」「assign()」を利用する方法です。
CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法
　
この仕組は、下記の記事に書いている、JavaScriptや CSSを使用するページごとに指定する方法などにも活用することができます。
CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
　
いずれの処理も、レイアウトファイルに変数を指定しておき、各ページのテンプレートファイル側でそのレイアウトファイルの変数に埋め込む変数の値を指定する、という仕組みです。
　
　

CakePHP3で OGPを設定する具体的な設定方法

　
それでは、以下はサンプルソースを利用した具体的な設定方法を解説していきます。
　
　

レイアウトファイル default.ctpを編集

　
まず最初は、レイアウトファイル「default.ctp」を編集します。
　
パス付きのファイルは以下になります。
/src/Template/Layout/default.ctp
　

<head>
    <?= $this->Html->charset() ?>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <?= $cakeDescription ?>:
        <?= $this->fetch('title') ?>
    </title>
    <?= $this->Html->meta('icon') ?>

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

    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('script') ?>

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

<head>

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

<title>

<?= $cakeDescription ?>:

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

</title>

<?= $this->Html->meta('icon') ?>

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

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

<?= $this->fetch('meta') ?>

<?= $this->fetch('css') ?>

<?= $this->fetch('script') ?>

<?= $this->fetch('ogp') ?>

</head>

　
17行目の「$this->fetch('ogp')」を追記します。
追記した箇所に OGPのタグが編集されます。
　
　

各ページのテンプレートファイル view.ctpを編集

　
各テンプレート側では、OGPのタグとそのタグに編集する変数を指定します。
　
パス付きのファイル名は以下になります。
/src/Template/Topics/view.ctp
　
　
「fetch(‘ogp’)」で指定した箇所に編集する値は、「assign(“ogp”, “値”)」という形式で指定します。
ここではサンプルとして、URLだけを変数で指定しています。
　

<?php
$url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

$ogpHtml  = '<meta property="og:site_name" content="サイト名" />';
$ogpHtml .= '<meta property="og:title" content="タイトル" />';
$ogpHtml .= '<meta property="og:type" content="トップページは website、個別ページは article" />';
$ogpHtml .= '<meta property="og:url" content="' . $url . '" />';
$ogpHtml .= '<meta property="og:image" content="サムネイル画像の URL" />';
$ogpHtml .= '<meta property="og:description" content="記事の description（記事概要）"/>';
$ogpHtml .= '<meta property="fb:app_id" content="FacebookのアプリID" />';
$ogpHtml .= '<meta property="og:locale" content="ja_JP" />';

$this->assign("ogp", $ogpHtml);
?>

<?php

$url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

$ogpHtml = '<meta property="og:site_name" content="サイト名" />';

$ogpHtml .= '<meta property="og:title" content="タイトル" />';

$ogpHtml .= '<meta property="og:type" content="トップページは website、個別ページは article" />';

$ogpHtml .= '<meta property="og:url" content="' . $url . '" />';

$ogpHtml .= '<meta property="og:image" content="サムネイル画像の URL" />';

$ogpHtml .= '<meta property="og:description" content="記事の description（記事概要）"/>';

$ogpHtml .= '<meta property="fb:app_id" content="FacebookのアプリID" />';

$ogpHtml .= '<meta property="og:locale" content="ja_JP" />';

$this->assign("ogp", $ogpHtml);

　
　
ただ、上記の方法ではやや見にくいため、下記のように「assign」を使わず「start」～「end」で指定する方法もあります。
　

<?php
$url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$this->start("ogp");
echo '<meta property="og:site_name" content="サイト名" />';
echo '<meta property="og:title" content="タイトル" />';
echo '<meta property="og:type" content="トップページは website、個別ページは article" />';
echo '<meta property="og:url" content="' . $url . '" />';
echo '<meta property="og:image" content="サムネイル画像の URL" />';
echo '<meta property="og:description" content="記事の description（記事概要）"/>';
echo '<meta property="fb:app_id" content="FacebookのアプリID" />';
echo '<meta property="og:locale" content="ja_JP" />';
$this->end();
?>

<?php

$url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

$this->start("ogp");

echo '<meta property="og:site_name" content="サイト名" />';

echo '<meta property="og:title" content="タイトル" />';

echo '<meta property="og:type" content="トップページは website、個別ページは article" />';

echo '<meta property="og:url" content="' . $url . '" />';

echo '<meta property="og:image" content="サムネイル画像の URL" />';

echo '<meta property="og:description" content="記事の description（記事概要）"/>';

echo '<meta property="fb:app_id" content="FacebookのアプリID" />';

echo '<meta property="og:locale" content="ja_JP" />';

$this->end();

　
これで、ページごとの OGPを設定することができます。
　
　
ちなみに、サンプルソース中に出てくる「Topics」は、「お知らせ情報」が入っているテーブルで、テーブルレイアウトは「CakePHP3で保存前にバリデーション結果を取得する2つの方法」の記事にあるような内容を想定してください。
　
　

OGPの部分をエレメントとして別ファイルにする方法

　
先に解説した内容でも OGPとして機能はしますが、いくつものテンプレートに同じ内容を記述する必要があり、メンテナンス性が高くありませんので、OGPの部分はエレメント（パーツ）として別ファイルとして管理したほうが便利でしょう。
　
　

OGPのタグをエレメントファイル ogpElement.ctpとして編集

　
まず最初に、OGPとして記述する内容をエレメントとして取り出します。
　
生成するファイルのパス付きファイル名は以下になります。
/src/Template/Element/ogpElement.ctp
　
そこに下記の内容を記述します。
　

<?php
$this->start("ogp");
echo '<meta property="og:site_name" content="サイト名" />';
echo '<meta property="og:title" content="' . $ogpTitle . '" />';
echo '<meta property="og:type" content="トップページは website、個別ページは article" />';
echo '<meta property="og:url" content="' . $ogpUrl . '" />';
echo '<meta property="og:image" content="サムネイル画像の URL" />';
echo '<meta property="og:description" content="' . $ogpDescription . '"/>';
echo '<meta property="fb:app_id" content="FacebookのアプリID" />';
echo '<meta property="og:locale" content="ja_JP" />';
$this->end();
?>

<?php

$this->start("ogp");

echo '<meta property="og:site_name" content="サイト名" />';

echo '<meta property="og:title" content="' . $ogpTitle . '" />';

echo '<meta property="og:type" content="トップページは website、個別ページは article" />';

echo '<meta property="og:url" content="' . $ogpUrl . '" />';

echo '<meta property="og:image" content="サムネイル画像の URL" />';

echo '<meta property="og:description" content="' . $ogpDescription . '"/>';

echo '<meta property="fb:app_id" content="FacebookのアプリID" />';

echo '<meta property="og:locale" content="ja_JP" />';

$this->end();

　
ここでは「og:title」「og:url」「og:description」を変数としていますが、実際に設定する場合は「og:type」「og:image」も変数として指定する必要があります。
　
　

テンプレートファイル view.ctpの変更

　
そして、各ページのテンプレート側は下記のように修正します。
　
パス付きのファイル名は以下になります。
/src/Template/Topics/view.ctp
　

<?php
$url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$title = "タイトル1";
$description = "記事の description（記事概要）1";

echo $this->element("ogpElement",["ogpUrl"=>$url,"ogpTitle"=>$title,"ogpDescription"=>$description]);
?>

<?php

$url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

$title = "タイトル1";

$description = "記事の description（記事概要）1";

echo $this->element("ogpElement",["ogpUrl"=>$url,"ogpTitle"=>$title,"ogpDescription"=>$description]);

　
先程作成したエレメントファイルを「$this->element()」で読み込みます。
　
1つ目のパラメーターが、エレメントのファイル名になります。
2つ目のパラメーターが、エレメントに渡す変数を指定箇所になります。配列で指定できますので、必要に応じていくつでも指定することができます。
　
　

サイト全体に共通する処理をページごとに切り替える処理

　
今回は、サイト全体に共通して指定をする必要はあるものの、ページごとにそれぞれ違うテキストを切り替えて編集していく必要がある metaタグの一種である OGPを指定する方法を解説しました。
　
　
同じような考え方をする仕組みとして、下記の記事で書いている titleタグ、h1タグの値を指定する方法や、使用する JavaScriptや CSSをページごとに設定する方法、パンくずを指定する方法、metaタグの「keywords」「description」を指定する方法などにも活用することができます。
CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法
 CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
 CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する
 CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定
 CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説
　
　
これらは、レイアウトファイルに変数を指定しておき、そこに編集する値を各ページ用のテンプレートファイルで指定する、という仕組みです。
　
　

- CakePHP 3.x 4.x 5.x CakePHP3

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: CakePHP3のプラグイン「CakeDC/Users」を日本語化・翻訳ファイルもダウンロード可

CakePHP3のユーザ管理、ログイン認証プラグインである「CakeDC/Users」のメッセージを日本語にする手順の解説とともに、日本語の翻訳ファイルを提供。ファイルを設置すれば日本語になる！

: CakePHPのFlashエラーは出るが入力項目ごとのメッセージが出ないエラーの原因

Bakeして自動生成した入力フォーム処理を元に少し処理を追加したら、入力エラーがあってもエラーメッセージが表示されなくなった。原因はリダイレクトの処理にあった。

: CakePHP3の検索プラグイン「friendsofcake/search」の設置方法・CakePHP3.6対応

CakePHP3で検索を担うプラグイン「friendsofcake/search」の紹介。基本的な設置方法の紹介のほか、処理の記述方法のバリエーション、エラーの解説など。CakeDC/searchより導入は簡単！

: CakePHP 2.3　ID以外のカラムでアソシエーション（連携）をさせる場合の詳細ページの注意点

ID以外のカラムでアソシエーション（連携）させて詳細ページを表示させる際の考え方と注意点をサンプルソースを用いて解説しています。

: CakePHPのバリデーションを入力値・項目の条件によって変える方法を解説

入力された値によってバリデーション（入力チェック）の内容を切り替える。その処理をCakePHPで実装する方法を解説。条件ごとに unset関数を使ってバリデーションを削除する、という方法を採る。

: CakePHP3チュートリアルで日付と時刻のDateTimeでエラーが出たときの対処方法

CakePHP3のブックマークチュートリアルには記載ミスもあり、そのまま動かない個所もある。CakePHP3では namespaceを使うようになったので、classを呼び出すときに￥を追加する必要が！

: CakePHP 2.3　Search Pluginで検索処理　その１設置方法

CakePHPの検索プラグイン Search Pluginの設置方法と基本的な検索処理の解説です。

: CakePHP4系、CakePHP5系のexists()でカラムを指定して値の有無をチェックする方法解説

CakePHP4、5で指定したカラムに特定の値に該当のレコードの有無をチェックするにはexists()を使う。単純にカラムを指定する方法から複数条件をand、orで探すこともできる。

: CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。

CakePHP3でajaxを利用する処理の実装方法を解説。プルダウンを変更するとデータベースの値を取得し検索結果の内容を変更するというような処理を想定。CakePHP3.6以降の CSRF対策対応済。

: CakePHP3にWYSIWYGエディタのCKEditor4を設置、カスタマイズ方法を解説

WYSIWYGエディタであるCKEditor4をCDNを利用して簡単にCakePHP3に導入する方法とカスタマイズする方法を解説。CakePHP3にはページごとの振り分けを行うブロック化を利用する。