CakePHP3のHtmlHelperのLink設定のまとめ。mailto、URL、Root/Homeのリンクなども
2019/07/22
CakePHP3で HtmlHelperを使ってリンクを設定する方法をまとめてみた
Webサイト開発にはリンクは付き物。その設定方法を再確認してみた
CakePHP3で開発するサイト、アプリに限らず、Webサイトにはリンクがつきものです。
というわけで、この記事では、CakePHP3の HtmlHelperを使ってリンクを設定することに特化して解説していきます。
【参考】CakePHP3 Cookbook HtmlHelper
https://book.cakephp.org/3.0/ja/views/helpers/html.html
【参考】CakePHP3 Cookbook UrlHelper
https://book.cakephp.org/3.0/ja/views/helpers/url.html
フォームを作成する際に利用する FormHelperについては下記の記事を参考にしてください。
CakePHP3のForm Helperの使い方のまとめ
また、JavaScript、cssを読み込む設定については下記に記事を書いていますので参考にしてください。
CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
CakePHP3の HtmlHelperの Link設定の基本形
まず、CakePHP3の HtmlHelperの Link設定の基本形です。
1 2 |
$this->Html->link("アンカーテキスト", "リンクのパス"); |
「アンカーテキスト」は、「<a></a>」で囲まれたリンクが設定される個所のテキストです。
具体的には、下記のように記述すると、その下にある HTMLが生成されます。
1 2 3 4 5 6 |
// sample.ctpへの記述 <?= $this->Html->link("アンカーテキスト", "/samples/view/1") ?> // 生成される HTML <a href="/samples/view/1">アンカーテキスト</a> |
「/samples/view/1」の指定は、「/」から記述を始め、ドキュメントルートからのパスを指定します。
相対パスの設定はできません。
CakePHP3の HtmlHelperのリンクに URLを指定する場合
URLを指定してリンクを設定する方法は、基本形でパスを指定するのと同様に 2つめのパラメーターに URLを指定することで設定できます。
1 2 3 4 5 6 |
// sample.ctpへの記述 <?= $this->Html->link("アンカーテキスト", "http://example.com/test.html") ?> // 生成される HTML <a href="http://example.com/test.html">アンカーテキスト</a> |
URLを記述する方法は、前項の基本形の設定を理解していれば分かるだろうとも思いますが、Cookbookに説明がないため、私はこの方法が分からずかなりの期間悩んでいました。
アンカーリンクを翻訳対象とする方法
アンカーテキストの部分を翻訳対象にする場合は下記の様に「__(" ")
」でテキストを囲みます。
1 |
<?= $this->Html->link(__("Anchor Text")) ?> |
CakePHP3の日本語翻訳機能については下記の記事を参考にしてください、。
CakePHP3のメッセージ日本語化の設定(国際化と地域化の機能の使い方の解説)
HtmlHelperで Controller、Actionを指定してリンクを設定する方法
前項のリンク設定は基本形ではあるものの、一般的にはこちらの Controller、Actionを指定してリンクを設定するほうが多いでしょう。
1 2 3 4 5 6 7 8 9 |
// sample.ctpへの記述 <?= $this->Html->link("アンカーテキスト", ["plugin"=>"CakeDC/Users", "controller"=>"UsersLinks", "action"=>"newView", 12345]) ?> // 生成される HTML <a href="/users/users-links/new-view/12345">アンカーテキスト</a> |
cakephp3の規約では、プラグイン名、コントローラー名は「パスカルケース(頭文字を大文字にする)」で、アクション名は「キャメルバック(1単語目はすべて小文字で2単語目以降は頭文字を大文字にする)」となっていますので、「"controller"=>"UsersLinks","action"=>"newView"
」と記述することが正しい記述方法です。
ですが、Controllerも Actionも「UsersLinks」のほか、「usersLinks」「users-links」と記述しても正しいリンクが設定されます。
CakePHP3 Cookbook CakePHPの規約
https://book.cakephp.org/3.0/ja/intro/conventions.html
「"plugin"=>""
」「"controller"=>""
」は任意です。
設定しない場合は、現在のプラグイン、コントローラーがデフォルトとして設定されます。
また、プラグインが使用されているページから使用していないページにリンクを貼る場合は、「"plugin"=>null
」もしくは「"plugin"=>false
」を記述します。
トップページにリンクを設定する方法
トップページ(そのサイトのドキュメントルートのページ)にリンクを貼りたい場合は、下記のように null(もしくは false)を設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// sample.ctpへの記述 <?= $this->Html->link("アンカーテキスト", ["plugin"=>null, "controller"=>null, "action"=>"/"]) ?> // もしくは <?= $this->Html->link("アンカーテキスト", ["plugin"=>null, "controller"=>"/"]) ?> // 生成される HTML <a href="/">アンカーテキスト</a> |
前項で書きましたが、「null」の代わりに「false」と記述しても問題ありません。
また、「"action"=>"/"
」の部分は、「"action"=>null
」としても問題ない場合が多くあります。
ただ、ルーティングの設定によっては正しくトップページにリンクされない場合がありますので、「"action"=>"/"
」としておくほうが無難なようです。
コントローラーの指定も「"controller"=>"/"
」としても問題ありません。
また、トップページにリンクを貼る際、ルーティングでトップページに指定しているコントローラー、アクションを指定する方法もあります。
1 2 3 4 |
// routes.phpの設定 <?= $routes->connect("/", ["controller"=>"UsersLinks", "action"=>"newView"]) ?> |
上記のように「/config/routes.php」に設定してある場合は、下記のようにそのコントローラー、アクションを指定することでトップページにリンクが設定されます。
1 2 3 4 5 6 7 |
// sample.ctpへの記述 <?= $this->Html->link("アンカーテキスト", ["controller"=>"UsersLinks", "action"=>"newView"]) ?> // 生成される HTML <a href="/">アンカーテキスト</a> |
ただ、この記述方法の場合は、ルーティングのトップページの設定を変更した場合に、リンク先がトップページではなくなってしまいますので注意が必要です。
リンクを絶対 URLで記述する場合は「"_full"=>false
」を指定
また、生成されるリンクを絶対 URLにしたい場合は「"_full"=>true
」を追加します。(デフォルトは「"_full"=>false
」となっています。)
1 2 3 4 5 6 7 8 9 10 |
// sample.ctpへの記述 <?= $this->Html->link("アンカーテキスト", ["plugin"=>"CakeDC/Users", "controller"=>"UsersLinks", "action"=>"newView", 12345, "_full"=>true]) ?> // 生成される HTML <a href="http://example.com/users/users-links/new-view/12345">アンカーテキスト</a> |
リンクのパラメーターはいくつでも追加できる
前項のパラメーターは「12345」だけでしたが、パラメーターは複数設定することもできます。
例えば、下記は検索のパラメーターとして 2つの条件を付与する想定です。
1 2 3 4 5 6 7 8 9 10 |
// sample.ctpへの記述 <?= $this->Html->link("アンカーテキスト", ["plugin"=>"CakeDC/Users", "controller"=>"UsersLinks", "action"=>"search", 鈴木, スズキ]) ?> // 生成される HTML <a href="/users/users-links/search/鈴木/スズキ">アンカーテキスト</a> |
また、上記のパラメーターを受け取るアクション側は下記の様になります。
1 2 3 4 |
// UsersLinksController.php 内の searchアクションの設定 public function search ($user_name, $user_kana){ アクションの処理 } |
リンクに class、id、targetを指定する場合
リンク設定の基本形に対して、class、id、targetを指定する場合は、3つ目のパラメーターとして配列で指定します。
具体的には、下記のように記述すると、その下にある HTMLが生成されます。
1 2 3 4 5 6 7 8 9 10 11 12 |
// sample.ctpへの記述 <?= $this->Html->link("アンカーテキスト", ["plugin"=>"CakeDC/Users", "controller"=>"UsersLinks", "action"=>"newView", 12345], ["class"=>"button", "id"=>"view", "target"=>"_blank"]) ?> // 生成される HTML <a href="/users/users-links/new-view/12345" class="button" id="view" target="_blank" rel="noopener noreferrer">アンカーテキスト</a> |
最初に解説をしたリンク設定の基本形の場合も 3つ目のパラメータとして指定をします。
1 2 3 4 5 6 7 8 9 |
// sample.ctpへの記述 <?= $this->Html->link("アンカーテキスト", "/samples/view/1", ["class"=>"button", "id"=>"view", "target"=>"_blank"]) ?> // 生成される HTML <a href="/samples/view/1" class="button" id="view" target="_blank" rel="noopener noreferrer">アンカーテキスト</a> |
リンクに JavaScriptの確認ダイアログを表示する設定
CakePHP3ではレコードを削除するリンクをクリックすると表示される「このレコードを削除しますか?」のダイアログですが、これをリンクに設定する方法が用意されています。
下記のように 3つ目のパラメーターとして「"confirm"=>""
」を指定します。
1 2 3 4 5 6 7 8 9 10 |
// sample.ctpへの記述 <?= $this->Html->link("アンカーテキスト", ["plugin"=>"CakeDC/Users", "controller"=>"UsersLinks", "action"=>"newView", 12345], ["confirm"=>"このレコードを削除してよろしいですか?"]) ?> // 生成される HTML <a href="/users/users-links/new-view/12345" onclick="if (confirm("このレコードを削除してよろしいですか?")) { return true; } return false;">アンカーテキスト</a> |
また、3つ目のパラメーターとして「class」などの指定をしている場合は、3つ目のパラメーターの配列の中に追記します。
1 2 3 4 5 6 7 8 |
// classも同時に設定する場合 <?= $this->Html->link("アンカーテキスト", ["plugin"=>"CakeDC/Users", "controller"=>"UsersLinks", "action"=>"newView", 12345], ["class"=>"button", "confirm"=>"このレコードを削除してよろしいですか?"]) ?> |
画像にリンク設定をする方法
リンクを設定するアンカーテキスト部分に画像を設定するときは下記のように設定します。
1 2 3 4 5 6 7 8 |
// sample.ctpへの記述 <?= $this->Html->link($this->Html->image("cake.power.gif"), ["action"=>"newView", 1], ["escape"=>false]) ?> // 生成される HTML <a href="/cake3_1/topics/new-view/1"><img src="/cake3_1/img/cake.power.gif" alt=""/></a> |
ポイントは、3つ目のパラメーターとして設定する「"escape"=>false
」です。
これを追加することで、1つ目のパラメーターとして設定している画像の設定がエスケープされずに処理されます。
「"escape"=>false
」を設定しないと、画像のリンク(imgタグ)がエスケープ処理されるため、imgタグがタグとして認識されなくなります。
1 2 3 4 5 6 7 8 9 10 |
// sample.ctpへの記述 <?= $this->Html->link($this->Html->image("cake.power.gif"), ["action"=>"newView", 1]) ?> // 生成される HTML <a href="/users/users-links/new-view/1"><img src="/img/cake.power.gif" alt=""/></a> // ブラウザに表示される文字列 <img src="/img/cake.power.gif" alt=""/> |
画像にリンクを設定するけどエスケープする範囲を限定する方法
前項で設定する「"escape"=>false
」は、リンクの属性もエスケープ対象としてしまいます。
そのため、「"escapeTitle"=>false
」を使い、タイトルだけをエスケープすることもできます。
1 2 3 4 5 6 7 8 9 |
// sample.ctpへの記述 <?= $this->Html->link($this->Html->image("cake.power.gif"), ["action"=>"newView", 1], ["escapeTitle"=>false, "title"=>'hi "howdy"']) ?> // 生成される HTML ><a href="/cake3_1/topics/new-view/1" title="hi "howdy""><img src="/cake3_1/img/cake.power.gif" alt=""/></a> |
「"escape"=>false
」のままだと、下記のように「title="hi "howdy""
」の部分が正しくエスケープされていませんので、想定している title属性の設定になっていません。
1 2 3 4 5 6 7 8 9 |
// sample.ctpへの記述 <?= $this->Html->link($this->Html->image("cake.power.gif"), ["action"=>"newView", 1], ["escape"=>false, "title"=>'hi "howdy"']) ?> // 生成される HTML ><a href="/cake3_1/topics/new-view/1" title="hi "howdy""><img src="/cake3_1/img/cake.power.gif" alt=""/></a> |
mailtoのリンクを設定する方法
mailtoのリンクを設定する場合は下記の様に設定します。
1 2 3 4 5 |
// sample.ctpへの記述 <?= $this->Html->link("アンカーテキスト", "mailto:" . "メールアドレス") ?> // 生成される HTML <a href="mailto:メールアドレス">アンカーテキスト</a> |
この mailtoの設定方法は、最初に紹介したリンク設定の基本形の理解ができていれば、この記述方法にたどり着ける可能性はあるようにも思いますが、URLのリンクを設定する方法と同じく、Cookbookに設定方法が記載されていないため、かなり悩みました。
そして、この「mailto」のリンク設定方法を知ったときの驚きで、この記事を書いたと言っても過言ではありません。
テキスト内のメールアドレスに自動的に mailtoリンクを設定する方法
前項の設定は、あらかじめメールアドレスを表示することが分かっている個所に mailtoのリンクを設定する方法です。
CakePHP3では、それに加えて、文章内にあるメールアドレスに自動的に mailtoのリンクを設定する方法も用意されています。
1 2 3 4 5 6 7 8 9 |
// sample.ctpへの記述 <?php $myText = 'For more information regarding our world-famous ' . 'pastries and desserts, contact info@example.com'; $linkedText = $this->Text->autoLinkEmails($myText); echo $linkedText; ?> // 生成される HTML For more information regarding our world-famous pastries and desserts, contact <a href="mailto:info@example.com">info@example.com</a> |
上記のように、メールアドレスを含む文章を「autoLinkEmails()」に通すことで自動的に mailtoのリンクを設定してくれます。
この「autoLinkEmails()」は、非常に便利な機能ですが、個人的には前項の普通の mailtoのリンクの解説を Cookbookに書いていてほしかったです...
CakePHP3の関連記事
CakePHP4のCSS、JavaScript、画像のブラウザへのキャッシュをコントロールするCakePHP3でレコードを保存(追加、更新、Insert、Update)する複数の方法を紹介
CakePHP3でモデルなしフォームからCSVをアップロードしレコードを更新する方法解説
CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングする方法
CakePHP3のInsert On Duplicate Key Update(upsert)構文を解説・バルク処理も
CakePHP3の1対多での連携を中間テーブルを使った多対多の連携に変更するときの手順
CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法
CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。
CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説
CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
その他の「CakePHP3」に関する記事一覧
GoogleAdwords
GoogleAdwords
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!
関連記事
-
-
CakePHP4で「app_local.php」「.env」を利用して環境ごとの定数を振り分ける方法
CakePHP4で.env、app_local.phpに定数を定義してそれを呼び出す方法の解説。Gitでは管理せず本番環境と開発環境とで異なる定数を定義するためそれを利用する方法。
-
-
CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法
CakePHP3でtitleタグ、h1タグのテキストをデフォルトから変更する方法を解説。テンプレートファイルに「$this->assign()」でテキストを指定して「/Layout/defult.ctp」で受け取る。
-
-
CakePHP 2.3 テーブルの項目を演算した結果を条件として抽出する方法
アソシエーション(連携)している先のテーブルの項目で演算をする場合の考え方と注意点をサンプルソースを用いて説明しています。分かってしまえば簡単です。
-
-
CakePHP 2.3で PDFを作成する方法を調査「mpdf」「TCPDF」「FPDF」
CakePHPで PDFを編集、出力するには「mpdf」「TCPDF」「FPDF」といったプラグインがあり、使い勝手を比較検討しました。TCPDFが一番良さそうでした。
-
-
CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
CakePHP3にjQuery UIのDatePickerを実装する手順を説明。併せて、デイトピッカーを設置に関連するCakePHP3の解説と、テーマを変更したり、表記を変更するカスタマイズする方法なども紹介。
-
-
CakePHP3のCakeDC/UsersのUserHelperでログアウトやreCAPTCHAをカスタマイズ
CakeDC謹製Usersプラグインの紹介。UserHelperを利用し、ログアウトのリンクや権限があるときのみ表示されるリンク、プロフィールページへのリンク、reCAPTCHAの設置方法などを解説。
-
-
CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法
CakePHP3でデフォルトのソート条件を設定しつつ画面上でユーザがソート条件を選択したときもソート処理を実行させる方法を解説。ソート条件はページネーションの処理として実装。
-
-
CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。
CakePHP3でajaxを利用する処理の実装方法を解説。プルダウンを変更するとデータベースの値を取得し検索結果の内容を変更するというような処理を想定。CakePHP3.6以降の CSRF対策対応済。
-
-
CakePHP 2.3でファイルをアップロード・その2 ファイル名を乱数で設定
CakePHPのアップロードするファイル名を乱数で変更しセキュリティを高める方法を解説。
-
-
CakePHP 2.3 Search Pluginで検索処理 その5入力項目に複数項目入力した場合の AND検索、OR検索
CakePHPの検索プラグイン Search Pluginの検索処理の中で複数項目を入力した場合の AND検索、OR検索についての解説です。