Zenn
🦀

laravel6.2￤サイドバーやメニューにプロフィール画像を常に表示する！

2020/10/08に公開
Laravel
PHP
初心者
tech

やりたいこと

view画面でサイドバーやメニューにプロフィール画像やユーザー名などを表示する場合、viewごとにコントローラーにプロフィール画像を取得するメソットを書くのはページが多くなってくると大変…
ということで、共通で処理できすようにしたメモです。

💡 目指すこと
・viewに対してコントローラーとは別に、view用の共通の変数を作成
・view用の共通の変数を使用し、プロフィール画像とユーザー名を表示する

環境

・laravel 6.2
・php 7.2
LaravelのViewComposerでViewで使用する共通のデータを設定するを参考にさせていただきました！
ViewComposerをクラス化して外部ファイルにする を実装していきます。

ComposerServiceProvider用のProfileImageServiceを作る

最初はComposerServiceProvider内でなんとかならないかと思って試行錯誤してみたのですが、読みづらい上にうまくいかなかったので外部ファイルにしました。

⚠️ user_profilesテーブルにはid,user_name,image_file などのカラムがあり、プロフィール画像を登録している場合はimage_fileカラムにパスが入っている状態です。

use Illuminate\View\View;
use Illuminate\Support\Facades\Auth;
use App\ApplicationServices\UserImageService;
use App\Model\UserProfile;

class ProfileImageService
{
    protected $userName;
    protected $mimeType = ‘gif’;
    protected $file = ‘’;
    
    public function __construct(
        UserImageService $userImageService
    ) {
        $userProfile = UserProfile::where(‘auth_id’, Auth::id())->first();
        // user_nameがない場合は‘’にする
        $this->userName = $userProfile->user_name ?? ‘’;
        if (isset($userProfile->image_file)) {
            // image_fileカラムにパスが登録されている場合 $this->fileにbase64の画像の文字列、$this->mimeTypeに画像のmimeタイプを代入する
            list($this->file, $this->mimeType) = $userImageService->show($gymUserProfile);
        }
    }
    
    public function compose(View $view)
    {
        $view->with([
            ‘userName’ => $this->userName,
            ‘file’     => $this->file,
            ‘mimeType’ => $this->mimeType,
        ]);
    }
}

ComposerServiceProviderに追記

View::composerの第一引数に表示するviewを指定できます。

LaravelのViewComposerでViewで使用する共通のデータを設定するにあるとおり複数のファイルにProfileImageServiceの変数を使用したい場合、View::composerに配列で指定します。

public function boot()
{
    View::composer([‘layouts/top’,‘layouts/sidebar’], ‘App\Http\ViewComposers\ProfileImageService’);
}

追記したらprovider登録 → 1度php artisan config:clearを実行

viewファイルの修正

ProfileImageServiceのcomposeメソッドで定義した変数が使用できるようになっているので、ComposerServiceProviderで指定したlayouts/topとlayouts/sidebarを修正していきます。

$fileが空だった場合、/storage/app/public/iconに保存したプロフィール初期画像が表示するようにしています💡

@if($file)
    <img src=“data:image/{{$mimeType}};base64,{{$file}}” alt=“User Image”/>
@else
    <img src=“{{ asset(‘/storage/icon/profile_image.png’) }}” alt=“User Image”/>
@endif
@if($userName)<span class=“user-name”>{{ $userName }}</span>@endif

今回はlayoutにあるメニューバーとサイドバーのファイルを修正したのですが、このファイルを各bladeファイルが@extendsディレクティブを使用するようにすれば完了です👏

今回は@if($file)にしていますが、もしかしたら明示的に@if(!empty($file))の方がわかりやすくて良いのかもです🤔（詳しくなくてごめんなさい…詳しくなったら修正するかもしれません）

🎩🎩🎩

LaravelのViewComposerでViewで使用する共通のデータを設定するの内容が大変わかりやすかったので、うまく表示でき処理もスッキリできてよかったです(‘ᴗ’　)

Discussion