前のパートに戻る 完了して次のパートへ  

  2-1 新規ユーザ登録・ログイン機能の開発

Laravel認証機能の導入


この章ではユーザーの新規登録・ログイン機能を開発していきます。

Laravelはユーザー登録やログイン機能などの認証に必要な機能をあらかじめ用意しています。

公式ドキュメントはこちらです。

https://readouble.com/laravel/5.5/ja/authentication.html

laravelでは基本的にartisanコマンドを使ってアプリケーションを作っていきます。$ php artisan listコマンドを打つと使えるコマンド一覧を表示してくれます。興味がある方はlistコマンドを入力してみましょう!

参考) Laravel 5.0 Artisanコマンドライン


認証機能を追加


artisanコマンドを使って認証機能を追加します。下記コマンドを実行してください。

$ php artisan make:auth

マイグレートしてログイン認証機能用のテーブルを作成します。下記コマンドを実行してください。

$ php artisan migrate

以上で認証機能が追加できました!


Laravelのシステム構成

認証機能が有効になっているか確認する前にLaravelのシステム構成について簡単に説明します。

Laravelは以下のような要素で構成されています。

詳しくは次の章で解説しますが、こういった要素で構成されているのだということをイメージして下さい。


認証機能のルート定義の確認

上記で確認したイメージを踏まえ、まずはルート定義を確認します。

「routes/web.php」に下記2行が追加されていることを確認します。

kanban
  └─routes
     └── web.php


認証機能のコントローラの確認

下記ファイルが追加されていることを確認します。 「app/Http/Controller/HomeController.php」

kanban
  └─app
     └─Http
       └─Controller
          └─HomeController.php  # 追加されたファイル


画面の確認

これだけで認証機能は追加されます。ローカルサーバを立ち上げてプレビューで画面を確認しましょう。

画面右上に「LOGIN」、「REGISTER」リンクが追加されていればOKです。


LOGINリンクをクリックしてログイン画面を表示してみてください。

・自動的に生成されたログイン画面

REGISTERリンクをクリックしてユーザ登録画面を表示してみてください。

・自動的に生成されたユーザ登録画面


このままでも新規ユーザ登録・ログイン機能は使用できますが、デザインをアプリオリジナルのものに修正します。artisanコマンドで作成された以下のテンプレートファイルを修正していきます!



画面をオリジナルのデザインに修正


Laravel標準の画面のデザインをオリジナルのものに修正していきます。

以下のサイトにBootstrapを活用したフォームのデザインがまとまっているので、以下を参考にしながら作ると素早く作ることが出来ます。

https://bootsnipp.com/search?q=form


ログイン画面のデザイン修正

以下のファイルを下記の内容で上書きしてください。

/kanban/resources/views/auth/login.blade.php

kanban
  └─resources
     └── views
          └──auth
              └──login.blade.php


ユーザ登録画面のデザイン修正

以下のファイルを下記の内容で上書きしてください。

/kanban/resources/views/auth/register.blade.php

kanban
  └─resources
     └── views
          └──auth
              └──register.blade.php


Sassのインストール

SassとはCSSの上位言語です。本システムではSassを使ってデザインしますのでSassをLaravelで使えるようにします。Sassの書き方は"Sass記法"と”SCSS記法”の2種類がありますが、今回は主流となっている"SCSS記法"を使用します。

Sassの概要を知りたい人は下記のページがおすすめです。

Sass 入門


composerの設定ファイルにSASSを追加

まず、composerでSASSをインストールするため設定ファイルに定義を追加します。

kanbanのディレクトリ直下のcomposer.jsonというファイルを開きます。

require-dev"panique/laravel-sass": "dev-master"を追加します。

つまり以下のように編集します。※行を追加するときに前の行の後ろにカンマを入れ忘れないで下さい。

kanban
  └─composer.json

(変更前)/kanban/composer.json

(変更後)/kanban/composer.json

SCSSをCSSに変換する処理を追加

以下のファイルの最終行に下記を追加します。

/kanban/public/index.php

kanban
  └─public
     └── index.php


SCSS格納ディレクトリを作成

/kanban/public/scssディレクトリを作成します。

下記コマンドを実行します。

$ mkdir -p ~/environment/kanban/public/scss


kanban
  └─public
     └── scss #このファイルを作成(コマンドで作成)



composerからSassのインストールを実行

下記コマンドを実行します。

$ composer update

以上でSassを使う準備ができました。

SCSSファイルの作成

SCSS記法でデザインファイルを作成していきます。

下記のSCSSファイルを作成します。

/kanban/public/scss/sign_in.scss

kanban
  └─public
     └──scss
         └──sign_in.scss #このファイルを作成


下記のSCSSファイルを作成します。

/kanban/public/scss/sign_up.scss

kanban
  └─public
     └──scss
         └──sign_up.scss #このファイルを作成


下記の内容で上書きします。

/kanban/resources/views/layouts/app.blade.php

kanban
  └─resources
     └──views
         └──layouts
             └──app.blade.php


ソースコード解説

上記のソースコードの解説をしていきます。


CSS読み込み

CSSを読み込む場合は、以下のようにします。secure_assetはpublicディレクトリへのパスを返すヘルパー関数です。自分で作成したCSSはpublicディレクトリに格納しますが、そのディレクトリへのパスを返してくれます。注意点として、Cloud9の場合、SSLで接続するのでsecure_assetヘルパーを使いますが、ローカルで開発する(自分のPCでサーバーを起動して開発する)場合は、SSLで接続できないのでassetヘルパーを使う必要があるという点です。今回はCloud9での開発を前提としているのでsecure_assetヘルパーを使います。

詳しくはコチラ


Bladeディレクティブ

@authのようなタグをBladeディレクティブといい、@authは、ユーザが認証しているかどうかを判断させることができます。

その他のBladeディレクティブについては下記のページを参考ください。

Laravel:5つの便利なBladeディレクティブ


Font Awesome

Font AwesomeとはWebアイコンフォントを表示できるフォントのことです。今回は手軽に導入するため、CDNを使って導入しています。

Font Awesomeの詳しい使い方は下記のページを参考にして下さい。

参考)

Font Awesome5 の使い方

Font Awesomeの使い方


Bootstrap

Bootstrapはレスポンシブサイトと呼ばれるPCでもスマホでもきれいに見るためのサイトを作るためのフレームワークです。こちらも手軽に導入するためにCDNを使って導入しています。

Bootstrapについての概要はこちらのサイトを参考にしてください。

BootstrapのCDNを利用しての導入の仕方


コントローラの修正

ログイン後のページ遷移先をルートにするため、コントローラを下記のように編集します。

/kanban/app/Http/Controllers/HomeController.php

kanban
  └─app
     └──Http
         └──Controllers
             └──HomeController.php


動作確認


ここまで出来たら、サーバーを起動してプレビューしてページを表示しましょう。

$ php artisan serve --port=8080

ログイン画面が以下のようになっていたらOKです。

ユーザ登録画面が以下のようになっていたらOKです。

初回ページアクセス時に「/kanban/public/css」ディレクトリの中にcssファイルが作成されていたらSassが有効になっています。

以上でこのパートは終了です。Laravelフレームワークの力を借りたことで、簡単にユーザ登録機能が出来ました。

※実際に運用している世の中のサービスではLaravelの認証機能を使っている場合もあれば使っていない場合もあります。なぜかと言うと、フレームワークの機能を使うとスピーディーに開発出来て便利という一面、0から自分で開発していないために出来ることに制約があります。そういった面も踏まえて、フレームワークの認証機機能を使うか使わないかの判断はした方がいいと思います。

議論

6 質問

このコースの評価は?