Friction River Software

  • お問い合わせ

CakePHP5入門【CakePHP5実用編⑬】ブラッシュアップ

Ｂ美

さて、だいたいの開発は完了かな？

そろそろインターネット上に公開する？

Ａ子

そだね

いや、もう少し機能強化を進めていこう

Ｃ菜

どうするんですか～？

Ａ子

チャットルームについては、「text」型の説明文を追加したいんだよね

あと、テーブルのフェッチをスーパークラスである「AppController」クラスにまとめちゃおう
（今は各クラスの「initialize」メソッドで個別にフェッチしてるけど…）

Ｂ美

リファクタリングってわけね

Ａ子

り…何だって？

Ｂ美

「リファクタリング」…

プログラムの動作を変えずに、ソースコードのムダを省いたり、効率化することよ

Ｃ菜

たしかにテーブルフェッチを親クラスで行ったほうが良いかもです～

あと、Webアプリケーションの名称を正式決定しましょう～
（バージョンを「1.0.0」にしたり、「DebugKit」アイコンを消したりも…）

Ｂ美

システム名称だけど「Beビー Chatteringチャタリング」なんてどうかな？
（「おしゃべりしよう」って意味で…）

あ、それから前回（チャットルームの入室制限）は口出ししなかったけど、例外リストに表示するユーザの並び（表示順）はあれで良いの？

Ｃ菜

そういえば、並べ替えをやってなかったですね～

「ユーザID（メールアドレス）」か「ハンドルネーム」の昇順にしたほうが良いかもです～

Ａ子

日本語の並べ替えがうまく働くか分かんないから、「ユーザID（メールアドレス）」の昇順にしようか

よし、それじゃ、まとめるよ

１．「chat_rooms」テーブルに「text」型の項目（description）を追加する
２．テーブルのフェッチを「AppController」クラスで行う（フィールドは「protected」にする）
３．「config/const.php」でシステム名称を「Be Chattering」に、バージョンを「1.0.0」にする
４．「DebugKit」アイコンを非表示にする
５．例外リストに表示するユーザの一覧を「ユーザID（メールアドレス）」の昇順でソートする

…くらいかな？

Ｃ菜

良いと思います～

あ、各ユーザの人物アイコンって、チャット画面上に表示できないでしょうか～？
（LINEみたいに…）

Ｂ美

画像を「ファイルとして保存」する方法って、前にやったの憶えてるかしら？
（掲示板アプリのときの話）

Ｃ菜

大丈夫です～

あれを応用すれば良いんですね～

Ａ子

画像の保存方法って、ほかにもあるの？

Ｂ美

データベース内にBLOBブロブ型のデータとして記録する方法もあるわよ

まぁ、画像ファイルのようにブラウザキャッシュも効きかないし、画像データ読み出しの処理が（システムにとっての）負担になるからお勧すすめしないけど…

Ａ子

なるほどねぇ

あ、「users」テーブルの主キーである「id」の値を使ってファイル名を付けるのはどうかな？
（「1.png」とか「2.png」のように）

Ｃ菜

あっ！
それなら「users」テーブル内にファイル名（及びファイルパス）を保存するための項目を追加しなくて済みますね～

Ａ子

そういうこと

人物アイコンの画像ファイルを格納するディレクトリは固定しておいて、かつファイル形式（拡張子）もPNGに決め打ちしておけば、さっきの「idをファイル名にする方法」でいけるじゃん

Ｂ美

ふむ
だったら、ユーザの新規作成時にデフォルトの画像を割り当てるって方法が良いかもね

そうすればファイルの存在確認（file_exists関数）も不要になるし…

Ｃ菜

良いと思います～

それって、Windowsのユーザアイコンと同じ考え方ですよね～


…って、やつです～

Ａ子

うん、良いね
まとめると

１．「chat_rooms」テーブルに「text」型の項目（description）を追加する
２．テーブルのフェッチを「AppController」クラスで行う（フィールドは「protected」にする）
３．「config/const.php」でシステム名称を「Be Chattering」に、バージョンを「1.0.0」にする
４．「DebugKit」アイコンを非表示にする
５．例外リストに表示するユーザの一覧を「ユーザID（メールアドレス）」の昇順でソートする
６．各ユーザの人物アイコンを実装する

…ってことだね

６番以外はすぐにできるから、ちゃっちゃとやっちゃおう

Ｃ菜

では、最初は１番ですね～

１．「chat_rooms」テーブルに「text」型の項目（description）を追加する

「chat_rooms」テーブルのテーブル定義はこうしましょう～

create table chat_rooms (
    id int auto_increment primary key,
    theme varchar(255) not null,
    description text,
    admin_id int not null,
    delete_flag int not null,
    access_policy int,
    created datetime,
    modified datetime,
    foreign key(admin_id) references users(id)
) charset=utf8mb4;

んで、「ALTER TABLE」はこうです～

mysql -u root -p chatdb[Enter]

ALTER TABLE chat_rooms
    ADD description text AFTER theme;[Enter]

Ａ子

データベース構造を変更したから、念のためキャッシュクリアもやっておこう

cd html/authapp[Enter]
bin/cake cache clear_all[Enter]

Ｃ菜

「src/Model/Entity」の中にある「ChatRoom.php」の$_accessibleに以下の一文を追加しておきますね～
（忘れないうちに…）

'description' => true,

Ａ子

よし、あとは掲示板アプリのソースコードを流用して、「templates/ChatRooms」の中にある「add.php」を修正しよう

Ｃ菜

やってみました～

こんな感じでいかがでしょうか～？

↓

Ａ子

うん、良いね

「edit.php」のほうも全く同じで良いかな？

Ｃ菜

良いと思います～

あとは「index.php」と「view.php」ですけど、これで良いでしょうか～？
（「index.php」のほうは、narrow表示のときだけ説明文を表示しています～）


Ｂ美

うん、問題は無さそうね（多分だけど…）
んじゃ、次は２番よ

２．テーブルのフェッチを「AppController」クラスで行う（フィールドは「protected」にする）

Ａ子

調べてみたら、４つのControllerコントローラーでフェッチをやってたよ

具体的には「ApplicantsController.php」「ChatController.php」「ChatRoomsController.php」「TopController.php」の４つだね
これを「AppController.php」に集約するよ

protected $Users;
protected $Comments;
protected $ChatRooms;
protected $Exceptions;

public function initialize(): void
{
    ・・・

    $this->Users = $this->fetchTable('Users');
    $this->Comments = $this->fetchTable('Comments');
    $this->ChatRooms = $this->fetchTable('ChatRooms');
    $this->Exceptions = $this->fetchTable('Exceptions');
}

あ、もちろん「ApplicantsController.php」「ChatController.php」「ChatRoomsController.php」「TopController.php」のほうは、privateフィールドと「initialize」メソッドを削除したからね


Ｃ菜

次は３番です～

３．「config/const.php」でシステム名称を「Be Chattering」に、バージョンを「1.0.0」にする

これはすぐに済みますね～
あ、「HEAD_MAIN」だけじゃなく「APPLICATION_NAME」も同じ名前にしていますよ～


Ａ子

んじゃ、４番だね

４．「DebugKit」アイコンを非表示にする

これもすぐに終わるよ
「config」の中にある「app_local.php」を書き換えるだけ…

Ｃ菜

それでは５番です～

５．例外リストに表示するユーザの一覧を「ユーザID（メールアドレス）」の昇順でソートする

「src/Controller」の中にある「ChatRoomsController.php」の「add」メソッドと「edit」メソッドの記述を書き換えますね～

$users = $this->Users->find()->all();
        ↓
$users = $this->Users->find()->order(['email' => 'ASC'])->all();


Ｂ美

OKよ
さて、最後は６番ね

６．各ユーザの人物アイコンを実装する

これが一番の問題なわけだけど…

Ａ子

まずは画像のサイズ（縦横のドット数）を決めよう

LINEの場合はどうだったっけ？

Ｃ菜

ググってみました～

最低でも480ドット×480ドットらしいですよ～

Ｂ美

もっと小さくても良いのではないかしら

例えば100ドット×100ドットくらいで…

Ａ子

だねー

単なるアイコン画像なんだから、もっと小さくても良いくらいだね

Ｃ菜

あまり小さすぎてもアレなんで、Ｂ美部長の案でいきましょうよ～

というわけで、Windowsの「ペイント」を使ってデフォルト画像を作ってみたです～

Ａ子

うん、良いんじゃない？

てか、Windowsアイコンの丸パクリだけど（笑）

Ｃ菜

でも、何もないところから自作しましたよ～

創作性の有無が微妙なので、著作権は発生しないかもしれませんけど～（苦笑）

Ａ子

それじゃ、画像ファイルの置き場所を作ろうか

cd html/authapp/webroot[Enter]
mkdir personal[Enter]

で良いかな？

Ｃ菜

次に「WinSCP」を使ってWindowsパソコンからSCP接続するです～
で、さっき「ペイント」で作った画像ファイルをアップロードしますね～

同じファイルをアップロードするつど、ファイル名を変更していくことで、５つのファイルを作りましたよ～
（現時点で４人のユーザがいるので、それぞれの分と、あとデフォルト画像として…）

Ａ子

今後ユーザが追加されるたびに、「default.png」を元に「（新規ユーザのid）.png」が作られるってわけだね

うーん、その処理も書かないと…

Ｂ美

「src/Controller」の中にある「UsersController.php」及び「ApplicantsController.php」を修正しないといけないわね

具体的には、「UsersController.php」のほうは「firstUser」メソッドと「add」メソッド、「ApplicantsController.php」のほうは「finalCheck」メソッドね

Ａ子

あ、だったら親クラスである「AppController.php」の中に、privateメソッドとして（画像ファイルをコピーする処理を）記述すれば良いんじゃない？
（子クラスである「UsersController.php」や「ApplicantsController.php」から呼び出せるように…）

Ｃ菜

「private」ではダメだと思うです～

「protected」じゃないと～

Ｂ美

Ｃ菜正解！

それじゃ、やってみなさい

Ａ子

ChatGPTから教えてもらったコードをアレンジして、こんな感じで作ってみたよ
（もちろん、「AppController.php」の中ね）

protected function copyImage($id = null): void
{
    if (!is_null($id)) {
        $webroot = WWW_ROOT;
        $src = $webroot.'personal'.DS.'default.png';
        $dst = $webroot.'personal'.DS.$id.'.png';
        copy($src, $dst);
    }
}

で、このメソッドを「UsersController.php」や「ApplicantsController.php」から、こう呼び出すよ

$this->copyImage($user->id);

Ｂ美

ふむ、エラーチェックをやってないのは、まぁ良いとしても…

コード自体に問題は無いわ（多分…）
でも、これって必ず失敗するわよ

Ａ子

え？
なんでよ

Ｃ菜

コードに問題ないのに失敗する…

あっ、パーミッションです～

Ｂ美

そういうこと

さっき作ったディレクトリって、Webサーバ（www-data）の書き込み権限が無いのよね
（パーミッションを変更するか、ディレクトリのオーナーを変更しないと…）

さらに言えば、さっきコピーしたテストデータのパーミッションも問題よ
（Webサーバが上書き処理できないから…）

Ｃ菜

ディレクトリとファイルのオーナーをWebサーバにしてみましょう～

cd html/authapp/webroot[Enter]
su[Enter]
chown www-data:www-data personal[Enter]
cd personal[Enter]
chown www-data:www-data *[Enter]
exit[Enter]

で、どうでしょうか～

Ａ子

おぉ、さすがはＣ菜だね

んじゃ、あとは「UsersController.php」の「firstUser」メソッドと「add」メソッド、「ApplicantsController.php」の「finalCheck」メソッドに追記するよ



Ｂ美

うん、良いんじゃないかしら

次は、チャット画面の中に人物アイコンを表示する処理を書いてみなさいね

Ｃ菜

了解です～
「templates/Chat」の中にある「index.php」を書き換えますね～

・・・

Ｃ菜

・・・

ふぅ～、めちゃくちゃ大変でした～
まずは過去の履歴を表示する箇所ですけど～

<!-- 他人の発言 -->
<div class="fixed-size-image">
    <figure class="image"><?= $this->Html->image("/personal/{$comment->user->id}.png", [
        'width' => '100',
        'height' => '100',
        'class' => 'is-rounded'
    ]) ?></figure>
</div>
<div class="message received">
    <p><strong><?= $comment->user->handle_name ?></strong></p>
    <p><?= $comment->content ?></p>
</div>

これに絡めてCSSのクラス定義を追加します～

.fixed-size-image {
    width: 100px;
    height: auto;
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
}

んで、JavaScriptの関数部分がこれです～

function addMessage(senderId, user, message) {
    const chatBox = document.getElementById("chat-box");
    const msgDiv = document.createElement("div");

    msgDiv.classList.add("message");
    if (senderId == userId) {
        msgDiv.classList.add("sent"); //自分のメッセージ
    } else {
        msgDiv.classList.add("received"); //他人のメッセージ

        const image = document.createElement('img');
        image.src = `/authapp/personal/${senderId}.png`;
        image.width = 100;
        image.height = 100;
        image.classList.add("is-rounded");

        const imgDiv = document.createElement("div");
        imgDiv.classList.add("fixed-size-image");
        const figure = document.createElement("figure");
        figure.classList.add("image");
        figure.appendChild(image);
        imgDiv.appendChild(figure);

        chatBox.appendChild(imgDiv);
    }

    msgDiv.innerHTML = `<p><strong>${user}</strong></p><p>${message}</p>`;
    chatBox.appendChild(msgDiv);

    chatBox.scrollTop = chatBox.scrollHeight;
}













Ａ子

うわっ、複雑さ（大変さ）が半端ねぇ…

さすがはＣ菜と言うべきか（苦笑）

Ｂ美

それじゃ、テストしてみましょうか

私とＡ子でチャットしてみるわね
まずは私から発言してみましょう
（左側が私で、右側がＡ子よ）

Ａ子

んじゃ、次は私ね
（以下、交互に発言…）

↓

↓

Ｃ菜

どうやら大丈夫みたいですね～

個別の（異なる）アイコン画像にしないと、成功か失敗かが今一つわかりませんけど～（苦笑）

Ｂ美

うん、まぁ大丈夫でしょう
んで、ちょっと長くなっちゃったから、今回はここまでね
（キリの良いところで…）

次回は、人物アイコン画像の変更処理をやっていきましょう

Ａ子

OK

たしかにちょっと疲れたよ…
（充実感はあるけどね（苦笑））