Laravel Jetstream インストールとロゴ変更・日本語化などカスタマイズ方法

Laravelと日本語
スポンサーリンク

LaravelのJetstream Livewire版のインストール方法をカスタマイズ方法を解説していきます。

インストールと設定は15分から20分程度で可能です。

ただ機能をチェックしたり、Laravelが初めてという場合には、もっと時間がかかります。

時間を確保して、テストしてみてください。

なお最新の認証機能は、下記で紹介しているので、何ができるかは、こちらをご覧ください。

じゅんこ
じゅんこ

ほんと、びっくりするぐらいの高機能がデフォルトで使えちゃいます。

スポンサーリンク

Laravel8 Jetstream Livewire のインストール方法

まずは、新たなプロジェクトでJetstream Livewire版をインストールする手順を説明します。

①Laravelの新規プロジェクトを作成

Laravelをインストールしたいフォルダで、次のコマンドを入力してプロジェクトを作成します。

bbsはプロジェクト名なので、お好きなものでOK。

なお、Laravelを初めてインストールする場合には、コンポーザやNode.jsを入れる必要があります。

詳しい手順は下記で解説しているので、参考にしてくださいね。

②phpMyAdminにデータベースを作成

プロジェクト作成後、phpMyAdminにログインして、新たにデータベースを作成します。

Laravelをインストールしたフォルダ内の .env ファイル内の【DB_DATABASE】にデータベース名を入れます。

③Jetstreamをインストール

プロジェクトを作成した後、Laravelをインストールしたフォルダに移動します。

下記のコマンドを実行し、Jetstreamをインストールします。

④LiveWire をインストール

インストール後、LiveWire(ライブワイヤー)またはinetia(イナーシャ)のどちらかひとつをインストールします。

Laravelベースで進めたい場合はLiveWire, Vueを使いたい場合はinertiaを選びます。

本記事では、わたしが使っているLiveWire版を解説していきます。

下記コマンドを入力。

★なお、チームを作って役割や権限を分けたい場合には、【team】機能を一緒に入れておきましょう。

次のように、最後に --teams をいれます。

インストール後に npm install && npm run devを実行。

最後にマイグレートを行います。

⑤ビューファイルのコンポーネントをセット

ここまでで、認証機能は使えるようになりました。

ですがこのままでは、ロゴなど、ビュー部分のカスタマイズができません。

下記を実行するとコンポーネントをセットしてくれて、カスタマイズが可能になります。

コンポーネントとは、部品別になっているテンプレートファイル一式、といった感じです。

⑥インストール後の画面をチェック

新しいプロジェクトを開いてみると、下記のような画面になっています。

右上のRegisterを押すと登録画面が出てきます。

ログイン画面はこちら。

ログイン後、右上のDashboardを押すと、Dashboard画面に切り替わります。

ファイル本体では resources/views/dashboard.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】は、ユーザープロフィールに関する項目となります。

たとえば、下記のようにコメントアウトすれば「二段階認証は使わない」設定にできます。

機能そのものが、画面上に表示されなくなります。

ほかにも

・ユーザー名とメールアドレスのどちらをログイン時の【username】に入れるべきか、

・パスワードを何回間違えたら制限をかけるか、

などの設定を fortify.php ファイルを通じて変更できます。

ちなみにデフォルトではメールアドレスがusername。

パスワードミスは1分間に5回までOKです。

Jetstreamファイルで設定変更

Jetstreamでは、ユーザーのアバターや、APIコードに関する部分を有効・無効化できます。

たとえば【api】をコメントアウトすれば、API Tokens機能が無効にになります。

画面にも表示されません。

【APIコメントアウト前】

【APIコメントアウト後】

ロゴ・言語の変更

次にロゴや言語の変更方法です。

ロゴの変更方法

ロゴ部分など見た目に関する変更は、コンポーネント内で行います。

コンポーネントは、resources/views/vendor/jetstream/componentsフォルダに入っています。

ロゴを変更するには、下記の3つのファイルを変える必要があります。

  • application-logo.blade.php
  • authentication-card-logo.blade.php
  • application-mark.blade.php

変更するには、元々のコードを無効にして、imgタグで画像を入れるだけでOK。

application-logo.blade.phpを変更すると、ダッシュボードのこの部分にロゴが入ります。

authentication-card-logo.blade.phpファイルも同じように変えてみます。

このファイルに変更を加えると、ログイン時のロゴが変わります。

application-mark.blade.phpファイルの変更後はこちら。

これだと、application-logo.blade.php で設定したロゴとかぶっちゃっいますね^^;

じゅんこ
じゅんこ

ファイルによってロゴのデザインを変えるか、どちらかだけ表示するほうが良さそうですね。このあたりは、お好みで。

メッセージの日本語化

Laravelのエラーメッセージを日本語するには、GitHubからファイルをダウンロードし、さらにconfig/appで、デフォルト言語を【ja】に変更する必要があります。

詳しくは、こちらのファイルの「Laravelの初期設定を変更する」をご確認ください。

ただ、翻訳がすべて終わっているわけではないようで、ちょっとまだらな感じも・・・

自分で修正/追記する必要がありそうですね。

なおエラーメッセージ以外の部分を変更したい場合は、bladeファイルを変更します。

認証関連のファイルはresources/views/authに入っています。

たとえばログイン画面であれば、resources/views/auth/login.blade.phpファイルを変更します。

ファイル内の {{ __('Password') }} を下記のように変更してみます。

【変更前】

【変更後】

すると、ログイン画面の【Password】が【パスワード】と日本語になりました。

このように、authフォルダ内のファイルを変更して、日本語にできます。

なお {{ route('login') }} など、(‘ ‘) の前に単語が入っている部分は機能に関する部分なので、うっかり変更しないように気を付けてくださいね。

さいごに

Laravel Jetstreamのインストールと設定方法を解説しました。

1記事では伝えきれないほど、本当に高機能で、設定の変更が可能な部分も多い!

良かったら、ほかのLaravel認証機能 カテゴリーの記事も併せてご覧ください。

コメント

タイトルとURLをコピーしました