03. チャットページの作成

チャットページを作成します。チャットメッセージの送受信はまだできません。

解説

チャットページの表示について、すべきことは以下です。

• チャットページ用のコントローラーを作成する。
• チャットページ用のコントローラーを編集する。。
• チャットページを表示するためのルーティングを編集する。
• チャットページ用のテンプレートファイルを作成し編集する。

前提

「02. ユーザー認証機能の追加」を実施していない場合は、実施します。

空のページの作成

まず、空のページ（≒内容のほとんどないページ）を表示するコードを記述します。

チャットページ用のコントローラーの作成

以下のコマンドを実行し、「ChatController」という名前のコントローラーを作成します。

php artisan make:controller ChatController

チャットページ用のコントローラーの編集

作成した「ChatController」の内容を編集します。

以下のコマンドを実行し、「ChatController.php」ファイルを開きます。

nano app/Http/Controllers/ChatController.php

内容を以下のようにします。

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class ChatController extends Controller { public function __construct() { // 認証されたユーザーだけが、このコントローラのページにアクセスすることができる。 $this->middleware('auth'); } public function index() { return 'chat'; } }

解説）

• ChatControllerクラスに、コンストラクタ関数 __construct() を追加します。
• __construct() 関数は、認証されたユーザーだけがアクセスできるようにするためのコードを記述します。
• ChatControllerクラスに、メンバー関数 index() を追加します。
• index() 関数は、「Chat」 という文字列を返すようにします。

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

チャットページを表示するためのルーティングの編集

チャットページが表示されるように、ルーティングファイルを編集します。

以下のコマンドを実行し、「routes/web.php」ファイルを開きます。

nano routes/web.php

内容を以下のようにします。

<?php use Illuminate\Support\Facades\Route; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { return view('welcome'); }); Route::get('/dashboard', function () { return view('dashboard'); })->middleware(['auth'])->name('dashboard'); require __DIR__.'/auth.php'; Route::get('/chat', [App\Http\Controllers\ChatController::class, 'index']);

解説）

• ファイルの末尾に、チャットページを表示するためのルーティング情報を追記します。

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

ダッシュボードページ用のコントローラーの編集

ダッシュボードページからクリックしてチャットページに移動できるように、ダッシュボードページにリンク作成します。

以下のコマンドを実行し、ダッシュボードページ用のテンプレートファイルを開きます。

nano resources/views/dashboard.blade.php

内容を以下のようにします。

<x-app-layout> <x-slot name="header"> <h2 class="font-semibold text-xl text-gray-800 leading-tight"> {{ __('Dashboard') }} </h2> </x-slot> <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg"> <div class="p-6 bg-white border-b border-gray-200"> You're logged in! <br><a href="{{ url('/chat') }}">Chat</a> </div> </div> </div> </div> </x-app-layout>

解説）

• 「You're logged in!」行のすぐ下に、「<br><a href="{{ url('/chat') }}">Chat</a>」を追加します。

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

空のページの動作確認

テスト用のWebサーバーの起動

以下のコマンドを実行し、テスト用のWebサーバーを起動します。

php artisan serve --host 0.0.0.0

チャットページにアクセス

ブラウザで、以下のURLにアクセスする。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000



ログインするとダッシュボードページが表示される。

「Chat」をクリックします。



「chat」と表示されるページが表示されます。

テスト用のWebサーバーの終了

動作を確認したら、「ctrl + c」を押下し、起動した開発用のWebサーバーを終了します。

メッセージ入力フォームとメッセージリストの表示

続いて、作成した空のページの内容として、メッセージ入力フォームとメッセージリストを追加します。

チャットページ用のテンプレートファイルの作成と編集

以下のコマンドを実行し、チャットページ用のテンプレートファイルを新規作成し、開きます。

nano resources/views/chat.blade.php

内容を以下のようにします。

<x-app-layout> <x-slot name="header"> <h2 class="font-semibold text-xl text-gray-800 leading-tight"> Chat </h2> </x-slot> <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg"> <div class="p-6 bg-white border-b border-gray-200"> {{-- エンターキーによるボタン押下を行うために、 <button type="button">ではなく、<form>と<button type="submit">を使用。 ボタン押下(=submit)時にページリロードが行われないように、 onsubmitの設定の最後に"return false;"を追加。 (return false;の結果として、submitが中断され、ページリロードは行われない。）--}} <form method="post" action="" onsubmit="return false;"> メッセージ : <input type="text" id="input_message" autocomplete="off" /> <button type="submit" class="text-white bg-blue-700 px-5 py-2">送信</button> </form> <ul class="list-disc" id="list_message"> <li><strong>太郎</strong><div>こんにちは</div></li> <li><strong>次郎</strong><div>ハロー</div></li> <li><strong>三郎</strong><div>こんばんわ</div></li> </ul> </div> </div> </div> </div> </x-app-layout>

解説）

• 「dashboard.blade.php」の内容をコピーします。
• <h2>要素の内容を、「{{ __('Dashboard') }}」から「Chat」に変更します。
• 「You're logged in!」が書かれていた部分に、チャットぺージの内容である、メッセージ入力フォームとメッセージリストの表示のコードを記述します。

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

コントローラーの編集

作成したチャットページ用のテンプレートファイルが表示されるようにコントローラーを書き換えます。

以下のコマンドを実行し、「ChatController.php」ファイルを開きます。

nano app/Http/Controllers/ChatController.php

内容を以下のようにします。

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class ChatController extends Controller { public function __construct() { // 認証されたユーザーだけが、このコントローラのページにアクセスすることができる。 $this->middleware('auth'); } public function index() { return view('chat'); } }

解説）

• index() 関数は、view('Chat')を返すようにします。

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

cssファイルとjsファイルのリビルト

以下のコマンドを実行し、cssファイルとjsファイルをリビルドします。

npm run build

チャットページの動作確認

テスト用のWebサーバーの起動

以下のコマンドを実行し、テスト用のWebサーバーを起動します。

php artisan serve --host 0.0.0.0

チャットページにアクセス

ブラウザで、以下のURLにアクセスします。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000/chat



「メッセージ入力フォーム」と「（ダミーの）メッセージリスト」が表示されます。

テスト用のWebサーバーの終了

動作を確認したら、「ctrl + c」を押下し、起動した開発用のWebサーバーを終了します。

関連ページ

前項目：02. ユーザー認証機能の追加

次項目：04. Pusherチャンネルの作成