BETA

laravel6.2¦ViewComposerを使用してサイドバーにプロフィール画像を常に表示する

投稿日:2020-05-08
最終更新:2020-05-08

やりたいこと

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

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

環境
・laravel 6.2
・php 7.2
参考にさせていただきました!
LaravelのViewComposerでViewで使用する共通のデータを設定する

大まかな流れ

①UserImageService:S3から画像をbase64で取得する(今回は省略)
②ProfileImageService:view用の変数設定
③ComposerServiceProvider:それぞれのbladeファイルに値を紐付ける
④view画面の設定

LaravelのViewComposerでViewで使用する共通のデータを設定するのViewComposerをクラス化して外部ファイルにするの流れになります。

ComposerServiceProvider用のProfileImageServiceを作る

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

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)) {  
            // DBの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,  
        ]);  
    }  
}  

list関数は複数の変数への代入ができるので便利です...!💫

ComposerServiceProviderに追記

View::composerの第一引数に表示するviewを指定できます。
LaravelのViewComposerでViewで使用する共通のデータを設定するにあるとおり、View::composerに配列でレイアウトにあるメニューに摘要するようにしました。

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

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

viewファイルの修正

ProfileImageServiceのcomposeメソットで定義した変数が使用できるようになっているので修正していきます。
$fileが空だった場合、@elseになり、/storage/app/public/iconに保存したプロフィール画像がまだない人用の画像が表示するようにしています:電球:

    @if (!empty($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(!empty($userName))<span class=“user-name”>{{ $userName }}</span>@endif  

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

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

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

メモしていきますφ('ᴗ'」)

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう