エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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設定の基本形です。
 

 
 
「アンカーテキスト」は、「<a></a>」で囲まれたリンクが設定される個所のテキストです。
 
具体的には、下記のように記述すると、その下にある HTMLが生成されます。
 

 
「/samples/view/1」の指定は、「/」から記述を始め、ドキュメントルートからのパスを指定します。
相対パスの設定はできません。
 
 

CakePHP3の HtmlHelperのリンクに URLを指定する場合

 
URLを指定してリンクを設定する方法は、基本形でパスを指定するのと同様に 2つめのパラメーターに URLを指定することで設定できます。
 

 
 
URLを記述する方法は、前項の基本形の設定を理解していれば分かるだろうとも思いますが、Cookbookに説明がないため、私はこの方法が分からずかなりの期間悩んでいました。
 
 

アンカーリンクを翻訳対象とする方法

 
アンカーテキストの部分を翻訳対象にする場合は下記の様に「__(" ")」でテキストを囲みます。
 

 
CakePHP3の日本語翻訳機能については下記の記事を参考にしてください、。
CakePHP3のメッセージ日本語化の設定(国際化と地域化の機能の使い方の解説)
 
 


 
 

HtmlHelperで Controller、Actionを指定してリンクを設定する方法

 
前項のリンク設定は基本形ではあるものの、一般的にはこちらの Controller、Actionを指定してリンクを設定するほうが多いでしょう。
 

 
 
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)を設定します。
 

 
前項で書きましたが、「null」の代わりに「false」と記述しても問題ありません。
 
また、「"action"=>"/"」の部分は、「"action"=>null」としても問題ない場合が多くあります。
ただ、ルーティングの設定によっては正しくトップページにリンクされない場合がありますので、「"action"=>"/"」としておくほうが無難なようです。
コントローラーの指定も「"controller"=>"/"」としても問題ありません。
 
 
また、トップページにリンクを貼る際、ルーティングでトップページに指定しているコントローラー、アクションを指定する方法もあります。
 

 
上記のように「/config/routes.php」に設定してある場合は、下記のようにそのコントローラー、アクションを指定することでトップページにリンクが設定されます。
 

 
ただ、この記述方法の場合は、ルーティングのトップページの設定を変更した場合に、リンク先がトップページではなくなってしまいますので注意が必要です。
 
 

リンクを絶対 URLで記述する場合は「"_full"=>false」を指定

 
また、生成されるリンクを絶対 URLにしたい場合は「"_full"=>true」を追加します。(デフォルトは「"_full"=>false」となっています。)
 

 
 

リンクのパラメーターはいくつでも追加できる

 
前項のパラメーターは「12345」だけでしたが、パラメーターは複数設定することもできます。
例えば、下記は検索のパラメーターとして 2つの条件を付与する想定です。
 

 
また、上記のパラメーターを受け取るアクション側は下記の様になります。
 

 
 

リンクに class、id、targetを指定する場合

 
リンク設定の基本形に対して、class、id、targetを指定する場合は、3つ目のパラメーターとして配列で指定します。
 
具体的には、下記のように記述すると、その下にある HTMLが生成されます。
 

 
 
最初に解説をしたリンク設定の基本形の場合も 3つ目のパラメータとして指定をします。
 

 
 

リンクに JavaScriptの確認ダイアログを表示する設定

 
CakePHP3ではレコードを削除するリンクをクリックすると表示される「このレコードを削除しますか?」のダイアログですが、これをリンクに設定する方法が用意されています。
 
下記のように 3つ目のパラメーターとして「"confirm"=>""」を指定します。
 

 
 
また、3つ目のパラメーターとして「class」などの指定をしている場合は、3つ目のパラメーターの配列の中に追記します。
 

 
 


 
 

画像にリンク設定をする方法

 
リンクを設定するアンカーテキスト部分に画像を設定するときは下記のように設定します。
 

 
ポイントは、3つ目のパラメーターとして設定する「"escape"=>false」です。
これを追加することで、1つ目のパラメーターとして設定している画像の設定がエスケープされずに処理されます。
 
 
"escape"=>false」を設定しないと、画像のリンク(imgタグ)がエスケープ処理されるため、imgタグがタグとして認識されなくなります。
 

 
 

画像にリンクを設定するけどエスケープする範囲を限定する方法

 
前項で設定する「"escape"=>false」は、リンクの属性もエスケープ対象としてしまいます。
そのため、「"escapeTitle"=>false」を使い、タイトルだけをエスケープすることもできます。
 

 
 
"escape"=>false」のままだと、下記のように「title="hi "howdy""」の部分が正しくエスケープされていませんので、想定している title属性の設定になっていません。
 

 
 

mailtoのリンクを設定する方法

 
mailtoのリンクを設定する場合は下記の様に設定します。
 

 
この mailtoの設定方法は、最初に紹介したリンク設定の基本形の理解ができていれば、この記述方法にたどり着ける可能性はあるようにも思いますが、URLのリンクを設定する方法と同じく、Cookbookに設定方法が記載されていないため、かなり悩みました。
 
そして、この「mailto」のリンク設定方法を知ったときの驚きで、この記事を書いたと言っても過言ではありません。
 
 

テキスト内のメールアドレスに自動的に mailtoリンクを設定する方法

 
前項の設定は、あらかじめメールアドレスを表示することが分かっている個所に mailtoのリンクを設定する方法です。
 
CakePHP3では、それに加えて、文章内にあるメールアドレスに自動的に mailtoのリンクを設定する方法も用意されています。
 

 
上記のように、メールアドレスを含む文章を「autoLinkEmails()」に通すことで自動的に mailtoのリンクを設定してくれます。
 
この「autoLinkEmails()」は、非常に便利な機能ですが、個人的には前項の普通の mailtoのリンクの解説を Cookbookに書いていてほしかったです...
 
 

CakePHP3の関連記事

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のOGPはHTMLヘルパーの$this->Html->meta()を使って設定
 
その他の「CakePHP3」に関する記事一覧
 
 

 - CakePHP 2.x 3.x

GoogleAdwords

GoogleAdwords

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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

  関連記事

CakePHP 2.3 Search Pluginで検索処理 その5入力項目に複数項目入力した場合の AND検索、OR検索

CakePHPの検索プラグイン Search Pluginの検索処理の中で複数項目を入力した場合の AND検索、OR検索についての解説です。

CakePHP3で静的ページの作成は webrootか pagesを使う。トップページを参考に解説
CakePHP3で静的ページの作成は webrootか pagesを使う。トップページを参考に解説

CakePHP3で静的なページを設置する場合の方法(webrootとpagesとを活用する方法)を解説。pagesの解説はデフォルトのトップページがどう表示されているかを参考に解説。ルーティングの機能も。

CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定
CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定

CakePHP3でOGPを設定する方法を解説。metaタグを編集するHTMLヘルパーを利用してOGPのタグを編集する。また、エレメントとして分割することでメンテナンス性も向上させる。

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

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

CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説

CakePHP3にjQuery UIのDatePickerを実装する手順を説明。併せて、デイトピッカーを設置に関連するCakePHP3の解説と、テーマを変更したり、表記を変更するカスタマイズする方法なども紹介。

CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する
CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する

CakePHP3のkeywordsとdescriptionを設定する方法の解説。CakePHP3にはmetaタグを編集するHTMLヘルパーが用意されているためそれを利用すればOK!ポイントはブロック化を有効にすること。

CakePHP 2.3で PDFを作成する方法を調査「mpdf」「TCPDF」「FPDF」

CakePHPで PDFを編集、出力するには「mpdf」「TCPDF」「FPDF」といったプラグインがあり、使い勝手を比較検討しました。TCPDFが一番良さそうでした。

CakePHP3で環境変数を設定して本番環境と開発環境を分けて処理をする場合
CakePHP3で環境変数を設定して本番環境と開発環境を分けて処理をする場合

CakePHP3で開発環境と本番環境とで違う設定ファイルを読み込ませて環境ごとに定数を切り替える方法を解説。Apacheのhttpd.confに環境変数を設定し、それを読み込み判別する。

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

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

CakePHP3でデータを保存する save()で発生するエラーを確認する方法を解説
CakePHP3でデータを保存する save()で発生するエラーを確認する方法を解説

CakePHP3でデータ保存処理のログを取得する方法。save()では true、falseの戻り値しか取得できないが、saveOrFail()と try…catch文を使いエラーログ、エンティティを取得し、不具合の解析を行う。