CakePHP3でPCのビューテンプレート（PC表示）とスマホのビューテンプレート（スマホ表示）を分けたい

PCとスマホの表示って現代のWebにおける課題ですよね。

自分は最初レスポンシブにしようと思ったんですけど、難易度が高すぎてやめました。

その代わりPCとスマホで表示画面を切り替えるようにしました。

HTML/CSSをPC用とスマホ用、2つ書くやり方です。

CakePHP3でどのようにやるのかを見ていきます。

【自分の環境】
macOS Catalina
PHP7.4.2
CakePHP3.8
MAMP5.7
Apache2.2
MySQL5.7

PC版はそのまま

当たり前かもしれませんが、PC版はそのままのディレクトリで大丈夫です。

パスで言えば、/[アプリ名]/src/Templateと来て、その後はUsersだったりPhotosだったり各コントローラのディレクトリに分かれます。

そのまま使えば大丈夫です。

スマホ版はpluginsディレクトリをいじる

スマホ版のビューテンプレート等を入れるためにpluginsディレクトリをいじります。

以下のようにします。

plugins
→Sp
↓→src
↓→webroot

ディレクトリ構成、伝わるでしょうか…？

※SpというのはSmartPhoneという意味です。

さらに言うと、srcディレクトリにTemplateディレクトリを入れ、その中に各コントローラのディレクトリを入れます。

Templateから中の構成はPC版からコピペでOKです。

src
→Template
↓→Users
↓→Photos

そして、webrootにはcssやjsなどのディレクトリを入れます。

Template同様、webrootから中の構成はPC版からコピペでOKです。

注意点としてはHTML/CSSが完成した状態でコピペしてください。

そうじゃないとPC版もスマホ版も両方いじらなくちゃいけないことになります。

これでpluginsディレクトリをいじるのは終わりです。

コントローラは共通でOK

コントローラは分けないの？と思うかもしれませんが、共通でOKです。

AppコントローラのbeforeRenderファンクションに分岐処理を書く

ただしやっておくことがあります。

beforeRenderファンクションに「スマホ版の時はpluginsを読み込ませる」という処理を書きます。

コピペでOKです。

（AppControllerの一番下）

public function beforeRender(Event $event) {
        // ----- 処理 -----

        // PC／スマホのview切り替え
        if ($this->request->isMobile()) {
                // plugins/Sp/src/Template内のviewが読み込まれる
                $this->viewBuilder()->theme('Sp');
        }
    }

このように記述すると、スマホの時はスマホのビューテンプレートが読み込まれるようになります。

終わりに

以上となります。

自分が思っていたより簡単にできたので良かったと思いました。

レスポンシブデザインが難しいという方は、試してみてください。

ありがとうございました。