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

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

解説

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

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

前提

「01. Laravelプロジェクトの作成」を実施していない場合は、実施します。

空のページの作成

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

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

以下のコマンドを実行し、「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 index() { return 'chat'; } }

解説）

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('/chat', [App\Http\Controllers\ChatController::class, 'index']);

解説）

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

「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

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

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Chat app</title> </head> <body> <h1>Chat app</h1> {{-- エンターキーによるボタン押下を行うために、 <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_nickname" autocomplete="off" /> <br /> メッセージ : <input type="text" id="input_message" autocomplete="off" /> <button type="submit">送信</button> </form> <ul id="list_message"> <li><strong>太郎</strong><div>こんにちは</div></li> <li><strong>次郎</strong><div>ハロー</div></li> <li><strong>三郎</strong><div>こんばんわ</div></li> </ul> </body> </html>

「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 index() { return view('chat'); } }

解説）

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

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

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

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

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

php artisan serve --host 0.0.0.0

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

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

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

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

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

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

解説

前提

空のページの作成

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

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

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

空のページの動作確認

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

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

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

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

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

コントローラーの編集

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

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

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

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

関連ページ