常連

### 実現したいこと
LaravelでCSSを反映させたい

### 発生している問題・分からないこと
CSSを記述したが反映されない

### エラーメッセージ
```error
エラーは出ていないません
```

### 該当のソースコード

```app.blade.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    @yield('content')
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

```

```/test/resources/css/app.css
body{
    background-color: #000;
}

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
https://tekito-style.me/columns/laravel-css-changes
を参考にしました
キャッシュを切ったりしたがダメでした


### 補足
Laravel9
PHP8.1
Cloud9
GoogleChrome
上記が環境です

Laravel9でCSSが反映されない

### 実現したいこと
chat機能で作成しているのですが、メッセージを投稿後のリダイレクト先が同じチャットページなのですが、メッセージ投稿後に登校したメッセージが表示されませんでした。


### 発生している問題・エラーメッセージ
投稿後に投稿したメッセージが表示されません。

### 該当のソースコード

```views/rooms/show
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ $room->name }}
        </h2>
        <p>会議コード：{{$room->room_code}}</p>
    </x-slot>
    @if($room->host_id==$user->id || isset($member))
        <div class="romm-chat">
            <div class="room-chat-message">
                @foreach($messages as $message)
                    <div class="member-message>
                        <div class="chat-message">
                            {!! nl2br(e($message->content)) !!}</br>
                        </div>
                        <div class="message-sub">
                            <div class="message-time">
                                {{ $message->created_at->format("Y年m月d日 h:i")}}
                            </div>
                            <div class="message-user">
                                {{ $message->user->name }}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class=="room-chat-form">
                <form method="POST" action="{{ route('message.store') }}">
                    @csrf
                    
                    
                    <div>
                        <x-text-input id="content" class="block mt-1 w-full" type="text" name="content" :value="old('content')" required autofocus autocomplete="content" />
                        <x-input-error :messages="$errors->get('content')" class="mt-2" />
                    </div></br>
                    <input type="hidden" id="user_id" name="user_id" value="{{$user->id}}">
                    <input type="hidden" id="room_id" name="room_id" value="{{$room->id}}">
                    
                    <div class="flex items-center justify-end mt-4">
                        <x-primary-button class="ms-4">
                            提案
                        </x-primary-button>
                    </div>
                    
                </form>
            </div>
        </div>
    @else
        <h1>入室許可を得るために、入室パスワードを入力してください</h1>
        <form method="POST" action="{{ route('member.store') }}">
            @csrf
            <div>
                <input type="hidden" id="member_id" name="member_id" value="{{$user->id}}">
                <input type="hidden" id="room_id" name="room_id" value="{{$room->id}}">
                <input type="text" id="room_password" name="room_password" >
                <x-primary-button class="ms-4">
                    入室
                </x-primary-button>
            </div>
        </form>
    @endif
</x-app-layout>
```

```MessageController
public function store(Request $request)
    {
        $user = Auth::user();
        $room = Room::find($request->room_id);
        $member = Member::where('room_id', '=', $room->id)
                        ->where('member_id', '=', $user->id)
                        ->first();
        $messages = Message::where('room_id',$room->id)
                           ->get();
        $message = new Message;
        $message->user_id = $request->user_id;
        $message->content = $request->content;
        $message->room_id = $request->room_id;
        $message->save();
        return view('rooms/show', ['user'=>$user, 'room'=>$room, 'member'=>$member, 'messages'=>$messages]);
    }
```

```web.php
Route::get('room', [App\Http\Controllers\RoomController::class, 'index'])->name('room.index');
Route::get('room/create', [App\Http\Controllers\RoomController::class, 'create'])->name('room.create');
Route::post('room', [App\Http\Controllers\RoomController::class, 'store'])->name('room.store');
Route::get('/room/{id}', [App\Http\Controllers\RoomController::class, 'show'])->name('room.show');
Route::put('room/update/{id}', [App\Http\Controllers\RoomController::class, 'update'])->name('room.update');
Route::resource('member', App\Http\Controllers\MemberController::class);
Route::resource('message', App\Http\Controllers\MessageController::class);
```

### 試したこと
chat機能に関して検索してみたのですが、Pusherを使ったリアルタイムのチャット機能もあったのですが、こちらは今回の質問に関係しますか？
それともPusherを使わずに、投稿後に投稿したメッセージを表示させることは可能でしょうか？

### 補足情報（FW/ツールのバージョンなど）
PHP8
Laravel10

chat機能のメッセージを投稿後、投稿したメッセージが表示されません。

### 実現したいこと
検索機能を作成しており、indexページで検索し、そのまま同一ページで検索結果が表示されるようにしたいのですが、すでに$roomsが表示されてしまいます。
検索が行われてから表示するようにしたいです。

### 発生している問題・エラーメッセージ
検索前からすでに$roomsに入っているレコードが全て表示されている状態です。

### 該当のソースコード

```views/rooms/index
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            検索
        </h2>
    </x-slot>
    <div>
      <form action="{{ route('room.index') }}" method="GET">
        <input type="text" name="keyword" value="{{ $keyword }}">
        <x-primary-button class="ms-4">
            <input type="submit" value="検索" class="search-btn">
        </x-primary-button>
      </form>
    </div>
    
    <div class="search-list">
        <div class="search-card-list">
          @forelse ($rooms as $room)
            <div class="search-card">
                <div class="search-post-content">
                    {{$room->name}}
                    {{$room->room_code}}
                    {{ $room['created_at']->format('Y年m月d日') }}
                    @if($room->host_id == $user->id)
                    @else
                    <form method="POST" action="{{ route('member.store') }}">
                        @csrf
                        <div>
                            <input type="hidden" id="member_id" name="member_id" value="{{$user->id}}">
                            <input type="hidden" id="room_id" name="room_id" value="{{$room->id}}">
                            <input type="text" id="room_password" name="room_password" >
                            <x-primary-button class="ms-4">
                                入室
                            </x-primary-button>
                        </div>
                    </form>
                    @endif
                </div>
            </div>
          @empty
            <div class="no-search-post">
              <h4>お探しのものは見つかりませんでした</h4>
            </div>
          @endforelse
          <div class="search-post-paginate">
            {{ $rooms->links('pagination::bootstrap-4') }}
          </div>
        </div>
    </div>
    
</x-app-layout>
```

```RoomController
public function index(Request $request)
    {
        $keyword = $request->input('keyword');

        $query = Room::query();

        if(!empty($keyword)) {
            $query->where('name', 'LIKE', "%{$keyword}%")
                ->orWhere('room_code', 'LIKE', "%{$keyword}%");
        }
        $user = Auth::user();
        $rooms = $query->paginate(10);
        return view('rooms/index', compact('rooms', 'keyword', 'user'));
    }
```

### 試したこと
@forelseを@foreachに変更したのですが、エラーによって表示させられませんでした。

### 補足情報（FW/ツールのバージョンなど）
PHP8
Laravel10


同一ページで検索を表示したいが、すでにデータが表示されてしまう。

### 実現したいこと
多人数チャットを作成しているのですが、パスワード入力して入室ボタンをクリックした後にupdateメソッドで入力したユーザーのidが記載されるようにしているのですが、複数のidをmember_idに入れることが出来ません。
複数のidを入れるにはカラムのデータ型を変更する必要があるのでしょうか？

### 発生している問題・エラーメッセージ
一旦、現状のコードで試したところ、更新されて追加ではなく上書きのようになりました。

### 該当のソースコード

```Roomデータベース
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('rooms', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('room_code');
            $table->string('room_password');
            $table->unsignedBigInteger('host_id')->constrained();
            $table->unsignedBigInteger('member_id')->constrained()->nullable(true);
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('rooms');
    }
};
```

```RoomController@update
public function update(Request $request, $id)
    {
        $user = Auth::user();
        $room = Room::find($id);
        $rooms = Room::all();
        if($room->room_password == $request->room_password){
            $room->member_id = $request->member_id;
            $room->save();
            return view('rooms/show', ['room'=>$room, 'user'=>$user, 'rooms'=>$rooms])->with('flash_message', 'パスワード認証を完了しました');
        }
        return view('rooms/index', ['user'=>$user, 'rooms'=>$rooms])->with('flash_message', 'パスワードが違います');
    }
```

```rooms/index.php
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            会議検索
        </h2>
    </x-slot>
    {{$user}}
    @foreach ($rooms as $room)
        <a href="/room/{{$room['id']}}/" class="card-post-a">
            {{ $room->name }}</br>
            {{ $room->room_code }}</br>
            {{ $room->room_password }}</br>
            {{ $room->host_id }}</br>
            {{ $room->member_id }}</br>
        </a>
        <form action="/room/update/{{ $room->id }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div>
                <input type="hidden" id="member_id" name="member_id" value="{{$user->id}}">
                <input type="text" name="room_password">
            </div>
            <x-primary-button>
                <input type="submit" value="入室">
            </x-primary-button>
        </form></br>
    @endforeach
</x-app-layout>
```
### 試したこと
複数のidを収める場合のカラムのデータ型を調べています。
配列型を使うのは分かったのですが、初めて配列型を使うので、マイグレーションファイルでの記述の仕方がまだ分かっていません。

### 補足情報（FW/ツールのバージョンなど）
PHP8
Laravel10


リレーションで複数のidを収めるデータ型はありますか？

### 実現したいこと
多人数チャット機能を作成しているのですが、room@showページでチャットを作成しているのですが、多人数チャットということでmemberという名前で中間テーブルを作成しまして、room@showメソッドでroom_idとroom->id、member_idとuser->idが一致したmember変数を作成しまして、showページでその変数が存在したらチャットを表示、無かったら「入室できていません」と表示するようにしたのですが、中間テーブルに無い新しく作ったアカウントでもチャットが表示されたので、controllerの記述またはshowページのifが機能していない可能性があるので原因を知りたいです。


### 発生している問題・エラーメッセージ
中間テーブルにないユーザーもチャットを閲覧できるようになっています。

### 該当のソースコード

```roomデータベース
Schema::create('rooms', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('room_code');
            $table->string('room_password');
            $table->unsignedBigInteger('host_id')->constrained();
            $table->timestamps();
        });
```

```memberテーブル
public function up(): void
    {
        Schema::create('members', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('room_id')->constrained();
            $table->unsignedBigInteger('member_id')->constrained();
            $table->timestamps();
        });
    }
```

```RoomController@show
public function show($id)
    {
        $user = Auth::user();
        $room = Room::find($id);
        $member = Member::where('room_id', '=', $room->id)
                        ->where('member_id', '=', $user->id)
                        ->get();
        $messages = Message::where('room_id', '=', $room->id)
                           ->get();
        return view('rooms/show', ['user'=>$user, 'room'=>$room, 'member'=>$member, 'messages'=>$messages]);
    }
```

```views/rooms/show
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ $room->name }}
        </h2>
    </x-slot>
    {{$member}}
    @if(isset($member))
        <div class="romm-chat">
            <div class="room-chat-message">
                
            </div>
            <div class=="room-chat-form">
                <form method="POST" action="{{ route('message.store') }}">
                    @csrf
                    
                    
                    <div>
                        <x-text-input id="content" class="block mt-1 w-full" type="text" name="content" :value="old('content')" required autofocus autocomplete="content" />
                        <x-input-error :messages="$errors->get('content')" class="mt-2" />
                    </div></br>
                    <input type="hidden" id="user_id" name="user_id" value="{{$user->id}}">
                    <input type="hidden" id="room_id" name="room_id" value="{{$room->id}}">
                    
                    <div class="flex items-center justify-end mt-4">
                        <x-primary-button class="ms-4">
                            提案
                        </x-primary-button>
                    </div>
                    
                </form>
            </div>
        </div>
    @else
        入室許可を得ていません。
    @endif
</x-app-layout>
```
### 試したこと
controllerからのデータの検索方法を調べたのですが、whereが不適切なデータの検索の仕方だったりするでしょうか。

### 補足情報（FW/ツールのバージョンなど）
PHP8
Laravel10

中間テーブルに入っているデータをControllerから検索・抽出したいです。

### 実現したいこと
下記の質問からBreezeを利用した認証機能を作成しているのですが、デザインの箇所でロゴが大きくなり、フォームのデザインがいびつになってしまいました。
認証機能ページに関わるファイルを調べたところ、cssの箇所でunknown at rule @tailwindの表示があったので、ここが原因になっているのではないかと思いました。

[sassが適用されません【Laravel】](https://teratail.com/questions/92sxwhd9pzuh9h#reply-i2ni9eyhp38re9)


### 発生している問題・エラーメッセージ
!追記!
下記のエラーはエディター箇所で表示されていました。
赤い箇所を触ると、下記のエラーが表示されました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-03-06/0ce8030e-5cf2-4e5e-acfe-57a21fecaac0.png)
```
unknown at rule @tailwind
```

！追記！
上記のエラーを開所してもデザインは崩れたままでした。
コンソールに書いてある、エラーを載せさせていただきます。
```
Mixed Content: The page at 'https://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/login' was loaded over HTTPS, but requested an insecure stylesheet 'http://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/build/assets/app-CB8Dc99X.css'. This request has been blocked; the content must be served over HTTPS.
login:15 Mixed Content: The page at 'https://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/login' was loaded over HTTPS, but requested an insecure script 'http://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/build/assets/app-CjgZ9Ty2.js'. This request has been blocked; the content must be served over HTTPS.
login:15 Mixed Content: The page at 'https://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/login' was loaded over HTTPS, but requested an insecure stylesheet 'http://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/build/assets/app-CB8Dc99X.css'. This request has been blocked; the content must be served over HTTPS.
login:29 Mixed Content: The page at 'https://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/login' was loaded over a secure connection, but contains a form that targets an insecure endpoint 'http://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/login'. This endpoint should be made available over a secure connection.
```

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-03-04/24cfbcda-4704-4a73-bb86-09c901b2c54f.png)
### 該当のソースコード

```resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

```resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            @include('layouts.navigation')

            
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif

            
            <main>
                {{ $slot }}
            </main>
        </div>
    </body>
</html>
```

### 試したこと
下記決方法を調べたのですが、どれもVSCodeで利用している方法なのですが、Cloud9でも活用できるのかが分かりません。

### 補足情報（FW/ツールのバージョンなど）
PHP8
Laravel10

unknown at rule @tailwindのエラーの解消方法

### cloud9のプレビューを正常に機能させたい

シラバスという学習サービスで簡易2chアプリを作成していました。
最初は普通にプレビューも機能しており学習自体順調に進んでいたのですが
突然プレビュー画面に次のようなメッセージが表示されるようになりました。
直接リンクからアクセスしても結果は同じでした。

![イメージ説明](847bf8d85521b8d34adc3a439dfe5c96.png)

### 発生している問題・エラーメッセージ

$ rails s
でサーバーを起動したところ
=> Booting Puma
=> Rails 5.2.0 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.11.4 (ruby 2.4.1-p111), codename: Love Song
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:8080
Use Ctrl-C to stop
となってます。

次にPreview →　Preview Running Application
を開くと先の画面が表示されます。

### 試したこと

$ rails s
$ rails s -b $IP -p $PORT
rails s -b 0.0.0.0
を入力しても結果は変わりませんでした。

### 補足情報

OS: windows10
AWSのcloud9を使ってます。

cloud9のPreviewでVFS connection does not existと表示されてしまいます

### 実現したいこと
下記の質問でBreezeを使ったLaravelの認証のデザインが崩れているのが解消できると思ったのですが、解消されなかったので、新しく質問を立てさせていただきました。
原因が分からずに困っています。
同様の問題の解決法が載っているサイトを探しているのですが、まだ見つかっていません。

[unknown at rule @tailwindのエラーの解消方法](https://teratail.com/questions/h8umh6vbmikvcl#reply-d0loi5w2r56ma4)


### 発生している問題・エラーメッセージ
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-03-10/e8163b2b-6039-4f3b-851a-24ce9415af2a.png)

### 該当のソースコード

```resoures/views/layouts/app
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            @include('layouts.navigation')

            
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif

            
            <main>
                {{ $slot }}
            </main>
        </div>
    </body>
</html>
```

```resources/views/auth/login
<x-guest-layout>
    
    <x-auth-session-status class="mb-4" :status="session('status')" />

    <form method="POST" action="{{ route('login') }}">
        @csrf

        
        <div>
            <x-input-label for="email" :value="__('Email')" />
            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
            <x-input-error :messages="$errors->get('email')" class="mt-2" />
        </div>

        
        <div class="mt-4">
            <x-input-label for="password" :value="__('Password')" />

            <x-text-input id="password" class="block mt-1 w-full"
                            type="password"
                            name="password"
                            required autocomplete="current-password" />

            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        
        <div class="block mt-4">
            <label for="remember_me" class="inline-flex items-center">
                <input id="remember_me" type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500" name="remember">
                <span class="ms-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
            </label>
        </div>

        <div class="flex items-center justify-end mt-4">
            @if (Route::has('password.request'))
                <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('password.request') }}">
                    {{ __('Forgot your password?') }}
                </a>
            @endif

            <x-primary-button class="ms-3">
                {{ __('Log in') }}
            </x-primary-button>
        </div>
    </form>
</x-guest-layout>
```

```resources/css/app
@tailwind base;
@tailwind components;
@tailwind utilities;
```

```resources/js/app
import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();
```

```resources/js/bootstrap
import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
```
### 試したこと
上記の質問の通り、cssがエラーが出ていたので対処し、エラーを消して再度テスト環境で確認をしてみたのですがデザインが崩れたままでした。

！追記！
調べたところ、下記のサイトが見つかったので、試したのですが、レイアウト崩れが解決しませんでした。
[Laravel+Breeze+Vite+Dockerでのレイアウト崩れ対応](https://zenn.dev/anchan/articles/3a82d9936fdf79)

!追記!
下記のサイトでviewの方の変更を行いましたが、```Mix manifest not found ```のエラーが発生し、```npm install && npm run dev```を実行したのですが、エラーは解消されませんでした。
[LaravelでBreezeを使った時にログイン画面が崩れるのを直す](https://newsite-make.com/breeze-screen-crash/)

### 補足情報（FW/ツールのバージョンなど）
PHP8
Laravel10