未ログイン時のページの共通レイアウトログイン画面の日本語化cssの置き場所まとめユーザー認証を行うためにBreezeを導入したものの,そのあとページをどう書けばいいのか迷子になったので,備忘録として。開くと上の画面が表示される。このページはresources/views/welcome.blade.phpである。トップページをhome/indexに変えてみる。view('home.index');});に書き換える。bladeテンプレートのファイルはコマンドで生成できないので,フォルダとファイルを自分で作る。welcome.blade.phpを踏襲してトップページを書いてみた。<h1>トップページです。トップページが変更された。}}">は言語を指定している。ここで,言語とタイムゾーンを変更しておく。'Asia/Tokyo',に変更。TailwindCSSBreezeを入れるとTailwindCSSも使えるようになる。classの中に色々書かれている部分がそれ。TilwinsCSSの実際の書き方は以下を参考に。devでコンパイルする必要がある。上のコードのようにCDNを入れておくと便利。src="https://cdn.tailwindcss.com"></script>本番環境に移すときにこの部分は削除する。警告が出ていることを確認しておくと良い。TailwindCSSはCSSフレームワークの一つ。cssファイルを書かなくてもhtml上でレイアウトの設定が直接書けるので便利。BladeテンプレートBladeテンプレートについては以下を参照。テンプレートこれをもとに,上で書いたindex.blade.phpの解説。「ルーティングにloginが含まれるなら」という意味。ルーティングを確認してみる。->name('login');とある。auth.phpを見るとその他にもユーザー認証に関わる様々なページが作られていることが分かる。ルーティングにloginが含まれているので,ログインや新規登録のリンクが表示されることになる。(Route::has('hoge'))などに書き換えてみるとリンクが表示されないことが確認できると思う。実際のところこの@if文は無くても動くが,「誤って消してしまった」など何らかの原因でloginページへのルーティングが見つからないときに例外処理でエラーになるのを防ぐことができる。ログインしているときだけ表示される。ログインしていないとき@endauth上のコードではログインしているときはダッシュボードのリンクが表示されるようになっている。実際にユーザー登録&ログインして確かめると良い。レイアウトと部分テンプレートの構造を理解するログインしてダッシュボードのページに移動すると,上部にナビゲーションメニューが表示されている。</div></x-app-layout>ダッシュボードのbladeテンプレートファイルを見ると,<x-app-layout>~</x-app-layout>で囲まれている。このように書いておくとapp.blade.phpが呼び出され,dashboard.blade.phpがレイアウトの一部として表示されるようになる。個人的にはこの部分の理解に少し苦労した。普通はルーティングから<head>~</head>や<body>~</body>を持つ本体ファイルのビューを呼び出してその中に部分テンプレートが入っている構造だと思うのだが,Bladeの場合は話が逆でルーティングで部分テンプレートのビューを呼び出して,そこから本体を呼び出すようになっている。慣れるとこっちの方が合理的だと思えてくる。ダッシュボードの画面を作り変えてみる構造を理解したところでダッシュボードの画面を作り変えてみる。ヘッダーの表示はいらないので削除し,メッセージを変える。ダッシュボードの画面です。name="header">~</x-slot>を削除すると,ヘッダーが削除された。ナビゲーションメニューに項目を追加してみるナビゲーションメニューはnavigation.blade.phpに書かれている。}"など書かれていて意味不明かもしれない。ナビゲーションメニューはAlpine.jsを使うことでドロップダウンメニューなどを動かしている。レスポンシブ対応のために表示が切り替わるように書かれているのでなおさら複雑なことになっている。Alpine.jsはVueやReactのような動的なページを作るための軽量フレームワーク。Alpine.jsによるリッチなアニメーションを放棄すればナビゲーションメニューをもっとシンプルに書くこともできるが,ここでは元のコードをなるべくそのままにしておく。</x-nav-link></div>元のコードで表示されているダッシュボードのリンクは↑の部分。}}とすれば日本語表示になる。:active="request()->routeIs('dashboard')"は項目の下の青い線の表示に関係する部分。「HTTPリクエストの中にdashboardページのアドレスが存在していたらアクティブ状態にしてね」という意味。現在のページがdashboardなら下線が表示され,それ以外のページのときには表示されない。別ページのリンクを表示させるために,コードを追加する。</x-nav-link></div>web.phpに以下を追加。view('customer.index');})->name('customer');bladeテンプレートを新規作成しておく。顧客管理のindexです。</div></x-app-layout>これで新しいページが追加された。ログイン状態のときだけ表示するページ実は上のコードには問題がある。一度ログアウトして,アドレスバーにlocalhost/customerと入力して直接アクセスすると例外処理が発生してエラーとなるのが確認できる。このように<x-app-layout>~</x-app-layout>を用いたビューはログイン状態のときしか表示できない。この問題に対処するためにweb.phpを修正する。view('customer.index');})->middleware(['auth'])->name('customer');ルーティングにミドルウェアを挿入した。localhost/customerにアクセスすると,ログイン画面に飛ばされることが確認できるだろう。このように->middleware(['auth'])を挿入することで,未ログイン状態でこのページにアクセスしようとすると,自動的にログインページに移動させることができる。スマホ向けレイアウトの編集navigation.blade.phpの後半にはスマホ向けのナビゲーションメニューのコードがあるので,こちらも修正しておく。</div>ブラウザのウィンドウの横幅を最小にするとナビゲーションメニューの表示が切り替わるのが確認できる。未ログイン時のページの共通レイアウト未ログイン時のページの共通レイアウトはguest.blade.phpになる。中身を見ると分かるがこちらにはナビゲーションメニューは含まれない。このレイアウトはログインページなどに用いられている。手を加えて動作を確認しておく。</div></body>画面の下に追加の情報が表示された。未ログイン状態でアクセスできるページを作ってみる。web.phpにルーティングを追加。view('home.inquiry');});bladeテンプレートを新規作成する。<div>お問い合わせのページ</div></x-guest-layout>画面に「お問い合わせのページ」と「追加の情報」が表示されることが確認できる。このように<x-guest-layout>~</x-guest-layout>で囲むとguest.blade.phpのレイアウトが読み込まれる。ちなみにこのページはログイン状態でもアクセスすることができる。lang:publish詳しくはこちらのページから。これで日本語化できるが,完全に日本語化できるわけではない。cssの置き場所cssファイルはpublic/css以下に置く(resource/cssではない)。sub.cssなどを作った場合,テンプレートから呼び出すのを忘れないように。}}"></head>まとめ本稿ではBreezeをインストールした状態から実際にwebサイトを構築していくための手掛かりを示した。構造の理解が進めばレイアウトを大幅に変更できるようになるだろう。