Laravel いいね機能の実装方法・ログイン版とログインなし版

「いいね」機能をつける場合、ログインユーザーのみが「いいね」できるようにする方法が一般的ですが、ログインなしの場合でも可能です。

今回は、前半はログインしているユーザー用の「いいね」機能について解説します。

後半は、ここにログインなしユーザーの「いいね」も反映されるようにしていきます。

ログインなしの場合は、IPアドレスを使って、ユーザーを識別します。

じゅんこ

Laravelの醍醐味のひとつは、リレーション。

今回はリレーションをフル活用して、機能を搭載していきますね。

Laravel いいね機能追加・ログインユーザー用
Laravel いいね機能追加・ログインなしでも可能にする

Laravel いいね機能追加・ログインユーザー用

まずはログインユーザーのみが「いいね」できる機能を搭載します。

今回は、すでにUserモデルとPostモデルがあるとします。

ここに「Nice」モデルを追加して、Userモデル、Postモデルとリレーションを設定していきます。

① Niceモデルを作成

Niceモデルをマイグレーションと共に作成します。

php artisan make:model Nice -m

1	php artisan make:model Nice -m

マイグレーションファイルには、次のようにいれます。

    public function up()
    {
        Schema::create('nices', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('post_id')->nullable();
            $table->unsignedBigInteger('user_id')->nullable();
            $table->timestamps();
        });
    }

public function up()

{

Schema::create('nices', function (Blueprint $table) {

$table->id();

$table->unsignedBigInteger('post_id')->nullable();

$table->unsignedBigInteger('user_id')->nullable();

$table->timestamps();

});

}

マイグレートを実行します。

php artisan migrate

1	php artisan migrate

② リレーションを設定

Userモデル・Postモデル・Niceモデルにリレーションを設定します。

【Userモデルファイル】

1人ユーザーがたくさん投稿をし、さらに「いいね」をする可能性があります。

そこで、PostモデルとNiceモデルに対して、hasManyメソッドを設定します。

    public function posts() {
        return $this->hasMany('App\Models\Post');
    }

    public function nices() {
        return $this->hasMany('App\Models\Nice');
    }

public function posts() {

return $this->hasMany('App\Models\Post');

}

public function nices() {

return $this->hasMany('App\Models\Nice');

}

【Postモデルファイル】

ひとつの投稿は、ひとりのユーザーに紐づくので、Postモデルに対してはbelongsToメソッドを設定します。

ですが、ひとつの投稿は、たくさんの「いいね」を獲得する可能性があるので、Niceモデルに対してはhasManyメソッドを設定します。

    public function user() {
        return $this->belongsTo('App\Models\User');
    }

    public function nices() {
        return $this->hasMany('App\Models\Nice');
    }

public function user() {

return $this->belongsTo('App\Models\User');

}

public function nices() {

return $this->hasMany('App\Models\Nice');

}

【Niceモデルファイル】

ひとつの「いいね」は1人のユーザー、ひとつの投稿に紐づくので、UserモデルとPostモデルそれずれに対して、belongsToメソッドを設定します。

    public function user() {
        return $this->belongsTo('App\Models\User');
    }

    public function post() {
        return $this->belongsTo('App\Models\Post');
    }

public function user() {

return $this->belongsTo('App\Models\User');

}

public function post() {

return $this->belongsTo('App\Models\Post');

}

③ ルートファイルの設定

今回は既にある投稿表示用の画面に「いいね」機能を搭載することにします。

新たに「いいね」用と、「いいね」取消用の２つのルート設定を作ります。

【routes/web.php】

use App\Http\Controllers\NiceController;

（省略）

// いいねボタン
    Route::get('/community/nice/{post}', [NiceController::class, 'nice'])->name('nice');
    Route::get('/community/unnice/{post}', [NiceController::class, 'unnice'])->name('unnice');

use App\Http\Controllers\NiceController;

（省略）

// いいねボタン

Route::get('/community/nice/{post}', [NiceController::class, 'nice'])->name('nice');

Route::get('/community/unnice/{post}', [NiceController::class, 'unnice'])->name('unnice');

④ コントローラーの作成

「いいね」を付け足し消したりする処理を記述するため、NiceContollerを作ります。

php artisan make:controller NiceController

1	php artisan make:controller NiceController

NiceControllerを開き、上部に、次の３つのuse宣言を追加しておきましょう。

namespace App\Http\Controllers;
use Illuminate\Http\Request;
// use宣言追加
use App\Models\Post;
use App\Models\Nice;
use Illuminate\Support\Facades\Auth;

namespace App\Http\Controllers;

use Illuminate\Http\Request;

// use宣言追加

use App\Models\Post;

use App\Models\Nice;

use Illuminate\Support\Facades\Auth;

次に「いいね」をつけるためにniceメソッドを入れます。

【NiceController niceメソッド】

    public function nice(Post $post, Request $request){
        $nice=New Nice();
        $nice->post_id=$post->id;
        $nice->user_id=Auth::user()->id;
        $nice->save();
        return back();
    }

public function nice(Post $post, Request $request){

$nice=New Nice();

$nice->post_id=$post->id;

$nice->user_id=Auth::user()->id;

$nice->save();

return back();

}

もうひとつ「いいね」を取り消すunniceメソッドを入れます。

【NiceController unniceメソッド】

    public function unnice(Post $post, Request $request){
        $user=Auth::user()->id;
        $nice=Nice::where('post_id', $post->id)->where('user_id', $user)->first();
        $nice->delete();
        return back();
    }

public function unnice(Post $post, Request $request){

$user=Auth::user()->id;

$nice=Nice::where('post_id', $post->id)->where('user_id', $user)->first();

$nice->delete();

return back();

}

⑤ 投稿表示用のコントローラーに記述を追加

「いいね」ボタンを表示する投稿表示用のコントローラーにも、コードを少し追加します。

ログインユーザーが、個別投稿に「いいね」をしてある場合、$niceに値が入ります。

この$niceをビューファイルに受け渡します。

投稿を表示させるためのコントローラーのメソッドに、下記のコードを追加してください。

なお、ファイルの上部にuse宣言 use App\Models\Nice; も入れておきましょう。

【書き方例（showメソッドに記述する場合）】

    public function show(Post $post)
    {  

        $nice=Nice::where('post_id', $post->id)->where('user_id', auth()->user()->id)->first();
        return view('post.show', compact('post', 'nice'));
    }

public function show(Post $post)

{

$nice=Nice::where('post_id', $post->id)->where('user_id', auth()->user()->id)->first();

return view('post.show', compact('post', 'nice'));

}

⑥ビューファイルの作成

最後は、見える部分を作っていきます。

既にある投稿表示用のビューファイルに、次のように、「いいね」ボタンを設置します。

ちなみに、「いいね」は、こちらのハートマーク使っております。

<span>
<img src="{{asset('img/nicebutton.png')}}" width="30px">

<!-- もし$niceがあれば＝ユーザーが「いいね」をしていたら -->
@if($nice)
<!-- 「いいね」取消用ボタンを表示 -->
	<a href="{{ route('unnice', $post) }}" class="btn btn-success btn-sm">
		いいね
		<!-- 「いいね」の数を表示 -->
		<span class="badge">
			{{ $post->nices->count() }}
		</span>
	</a>
@else
<!-- まだユーザーが「いいね」をしていなければ、「いいね」ボタンを表示 -->
	<a href="{{ route('nice', $post) }}" class="btn btn-secondary btn-sm">
		いいね
		<!-- 「いいね」の数を表示 -->
		<span class="badge">
			{{ $post->nices->count() }}
		</span>
	</a>
@endif
</span>

@if($nice)

</a>

@else

</a>

@endif

⑦ テストしてみる

では、テストしてみます。

「いいね」前は、こんな表示。

「いいね」をすると、こうなります。

もう1回ボタンを押すと、「いいね」が取り消されます。

もちろん、他のユーザーの「いいね」もカウントされます。

Laravel いいね機能追加・ログインなしでも可能にする

上記を加工して、次に「ログインなし」のユーザーの「いいね」も反映されるようにしていきましょう。

① ipアドレス用のカラムを追加

Niceのデータベースに、ipアドレス用のカラムを追加します。

一度、マイグレーションを取り消します。

php artisan migrate:rollback

1	php artisan migrate:rollback

niceのマイグレーションファイルに、ipアドレス用カラムを付け足します。

【nice マイグレーションファイル】

    public function up()
    {
        Schema::create('nices', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('post_id')->nullable();
            $table->unsignedBigInteger('comment_id')->nullable();
            $table->unsignedBigInteger('user_id')->nullable();
            // このカラムを追加
            $table->string('ip')->nullable();
            $table->timestamps();
        });
    }

public function up()

{

Schema::create('nices', function (Blueprint $table) {

$table->id();

$table->unsignedBigInteger('post_id')->nullable();

$table->unsignedBigInteger('comment_id')->nullable();

$table->unsignedBigInteger('user_id')->nullable();

// このカラムを追加

$table->string('ip')->nullable();

$table->timestamps();

});

}

再度マイグレートします。

php artisan migrate

1	php artisan migrate

② 投稿表示用のコントローラーに記述を追加

次に、投稿を表示するためのコントローラーに処理を追加します。

ユーザーのipアドレスを取得。

このipアドレスで投稿に「いいね」をしてある場合、$niceに値が入ります。

この$niceをビューファイルに受け渡します。

【show.blade.php】

    public function show(Post $post)
    {  
        $request=request();
        $ip = $request->ip();
        $nice=Nice::where('post_id', $post->id)->where('ip', $ip)->first();
        return view('post.show', compact('post', 'nice'));
    }

public function show(Post $post)

{

$request=request();

$ip = $request->ip();

$nice=Nice::where('post_id', $post->id)->where('ip', $ip)->first();

return view('post.show', compact('post', 'nice'));

}

③コントローラーの作成

最後にコントローラーです。

NiceControllerのniceメソッドは、次のように書き替えます。

ユーザーが「いいね」をすると、新しくNiceのインスタンスができます。

ユーザーのipアドレスが、nicesデータベースの ipカラムに入ります。

もしユーザーがログインしていれば、ユーザーのidが、nicesデータベースのuser_idに入ります。

【NiceController niceメソッド】

    public function nice(Post $post, Request $request){
        $nice=New Nice();
        $nice->post_id=$post->id;
        $nice->ip = $request->ip();

        if(Auth::check()){
            $nice->user_id=Auth::user()->id;
        }

        $nice->save();
        return back();
    }

public function nice(Post $post, Request $request){

$nice=New Nice();

$nice->post_id=$post->id;

$nice->ip = $request->ip();

if(Auth::check()){

$nice->user_id=Auth::user()->id;

}

$nice->save();

return back();

}

unniceは、次のように書き替えます。

【NiceController unniceメソッド】

    public function unnice(Post $post, Request $request){
        $user=$request->ip();
        $nice=Nice::where('post_id', $post->id)->where('ip', $user)->first();
        $nice->delete();
        return back();
    }