LaravelのJetstream Livewire版のカスタマイズ方法をご紹介します。
インストール方法は下記で解説しています。
Jetstream版で利用できる認証機能は、下記で紹介しています。
ほんと、びっくりするぐらいの高機能がデフォルトで使えちゃいます。
デモサイトもご用意しているので、良かったらお試しください。
ビューファイルのコンポーネントをセット
デフォルトのままだと、ロゴなど、ビュー部分のカスタマイズができません。
下記を実行すると、コンポーネントをセットしてくれます。
1 |
php artisan vendor:publish --tag=jetstream-views |
コンポーネントとは、部品別になっているテンプレートファイル一式、といった感じです。
上記コマンドを実行後、下図のようなファイルがesources/views/vendor/jetstream/componentsの中にできます。
このファイルを操作することで、ボタン部分やロゴ部分など、デフォルトで用意されている部分を編集できます。
ロゴの変更方法
ロゴを変更するには、下記のファイルを編集します。
- authentication-card-logo.blade.php
- application-mark.blade.php
変更するには、元々のコードを無効にして、imgタグで画像を入れるだけでOK。
authentication-card-logo.blade.phpファイルに変更を加えると、ユーザー登録・ログイン時のロゴが変わります。
application-mark.blade.phpファイルに手を加えると、ログイン後の左上の部分が変わります。
認証機能の有効化・無効化設定変更
認証機能は便利ながら、場合に応じて有効化するかどうか、変更したいですよね。
新しい認証機能は、Jetstreamとfortifyの2つによって提供されています。
公式マニュアルによると、fortifyとJetstreamの役割分担は次のとおり。
Laravel Fortifyは、Laravelのヘッドレス認証バックエンドであり、このドキュメントにある多くの機能を実装しています。Laravel Jetstreamは、Tailwind CSS、Laravel Livewire、Inertia.jsを使い、美しくモダンなUIでFortifyの認証サービスを利用および公開するUIです。
・引用元:Laravelマニュアル:https://readouble.com/laravel/8.x/ja/authentication.html
このように分かれているため、機能によって、どちらのファイルを変更するか異なってきます。
機能の有効化・無効化はconfigフォルダの fortify.phpファイル または jetstream.phpファイルで行います。
fortifyファイルで設定変更
fortifyはパスワード・二段階認証・登録などの機能を提供しています。
fortifyの設定は、config/fortify.php ファイルで変更できます。
ファイル内の【features】は、ユーザープロフィールに関する項目となります。
たとえば、下記のようにコメントアウトすれば「二段階認証は使わない」設定にできます。
機能そのものが、画面上に表示されなくなります。
ほかにもパスワードを何回間違えたら制限をかけるか、などの設定を fortify.php ファイルを通じて変更できます。
Jetstreamファイルで設定変更
config/jetstream.php では、ユーザーのアバター(プロフィールフォト)や、APIコードに関する部分を有効・無効化できます。
たとえば【api】をコメントアウトすれば、API Tokens機能が無効にになります。
画面にも表示されません。
【APIコメントアウト前】
【APIコメントアウト後】
日本語化の設定
Laravelのエラーメッセージを日本語するには、GitHubからファイルをダウンロードし、さらにconfig/appで、デフォルト言語を【ja】に変更する必要があります。
詳しくは、こちらのファイルの「Laravelの初期設定を変更する」をご確認ください。
翻訳関連のファイルは、langに入れていきます。
さいごに
Laravel Jetstreamのインストールと設定方法を解説しました。
ほかにも色々ご紹介しているので、関連記事も見ていってくださいね。