Friction River Software - CakePHP5入門【CakePHP5応用編⑨】ブラッシュアップ

Ｂ美

完成したWebアプリケーションを本番環境に設置デプロイして、本格的に運用を始めるよ

ただ、その前にテストが必要だけどね

Ａ子

テストって何をやるの？

てか、これまでもコードを書いてはテストして、動作確認してきたじゃん

Ｃ菜

ですです～

Ｂ美

「テスト計画書」と「テスト仕様書」を作成して、テスト結果を文書ドキュメントとして残しておくってわけ

まぁ、この程度の規模ならそこまで本格的にやる必要はないんだけどね（苦笑）

Ａ子

その二つの違いは何なのよ？

Ｂ美

「テスト計画書」ってのは、言うなれば「5W1H」ね

誰が（Who）何を（What）いつ（When）どこで（Where）なぜ（Why）どのように（How）行うのか…ってこと
（具体的なテスト項目やその結果じゃなくて、全体的・俯瞰的な話ね…要するに「概要」）

で、「テスト仕様書」がまさに具体的なテスト項目ってわけ
（この二つの中間に「テスト設計書」を設ける場合もあるけど…）

Ｃ菜

書き方のお手本はあるのでしょうか～？

Ｂ美

ネット上にはたくさんテンプレートが落ちてるわよ
（それらをダウンロードして書き換えれば良いだけね）

ただ、「テスト計画書」のほうは別に要らないかな？
「テスト仕様書」だけを作っていきましょう

Ｃ菜

「単体テスト」「結合テスト」「システムテスト」等々、いくつもテストの種類があるみたいなんですけど、どれを実施するのでしょう～？

まさか全部ですか～？

Ｂ美

「単体テスト」はモジュールごとのテストで、オブジェクト指向であれば「クラスごとのテスト」と思っておけば良いわ
「結合テスト」は複数のモジュール間の連携（具体的には「モジュール間インタフェース」）のテストね
「システムテスト」はそのアプリケーションの総合的なテスト、要するに「要件定義の確認」ってわけ

大規模開発ではこれらを順番にやっていくわけだけど、今回の「画像投稿掲示板」程度であれば「システムテスト」だけで十分よ

Ａ子

要するに「この操作をしたらこうなるべき」というテスト項目をいくつも作っておいて、その通りに動くかどうかを全て検証していく…って理解でOK？

Ｂ美

そういうこと

別に、決められた書式フォーマットがあるわけじゃないし、やったこととその結果が分かれば良いのよ
（複数のテストケースを列挙していく過程で、コーディングしながらのテストでは検証できていなかったことがちょこちょこ見つかったりもするのよね）

Ａ子

あっ！その前にさ

細かい仕様の確定をやってなかったよね？
（ページネーションの１ページあたりの件数とか、主に表示回り…）

Ｃ菜

そうでした～

【修正項目】

①アプリケーション名を「」とする
②１ページあたりの件数を「」にする
③バージョンを「1.0.0」にする
④メール送信は同じサーバ内にあるメールサーバを用いる
⑤投稿画面の項目表示を上下中央揃えにする

という感じで、どうでしょうか～？
（①と②はとりあえず空欄です～）

Ａ子

うん、良いね

あと、投稿画面の項目部分の色については、別の定数を定義しようか？

Ｃ菜

分かりました～

【修正項目】

①アプリケーション名を「」とする
②１ページあたりの件数を「」にする
③バージョンを「1.0.0」にする
④メール送信は同じサーバ内にあるメールサーバを用いる
⑤投稿画面の項目表示を上下中央揃えにする
⑥投稿画面の項目の色について、新たな定数を定義する

それで、①と②はどうします～？

Ａ子

①は「BBS with Image」でどうかな？
②は個人的には10件くらいで良いと思うんだけど…

あっ、そうだ！
表示される画像のサイズだけど、小さめの表示にしておいて、それをクリックすると別ウィンドウに大きく表示する…なんてできるかな？

Ｂ美

ん？
もちろんできるわよ

Ｃ菜

分かりました～

【修正項目】

①アプリケーション名を「BBS with Image」とする
②１ページあたりの件数を「10」にする
③バージョンを「1.0.0」にする
④メール送信は同じサーバ内にあるメールサーバを用いる
⑤投稿画面の項目表示を上下中央揃えにする
⑥投稿画面の項目の色について、新たな定数を定義する
⑦画像表示は縦または横のサイズの最大値を「200」ドットにして、アスペクト比は変えない
⑧画像をクリックすると、別ウィンドウに大きく表示する
⑨「bbsapp/templates/Posts」の中の「edit.php」と「view.php」を削除する

⑨はbakeコマンドで自動生成したやつですけど、削除するのを忘れてました～

あと、⑦のサイズはこれで良いでしょうか～？

Ａ子

そのくらいで良いと思うけど、それもついでに定数化しておこうか

さってと、それじゃできることから始めていくとしますか…
まずは「bbsapp/config」の中にある「const.php」ね

Ａ子

これで①、②、③、⑥は完了よ

Ｃ菜

次は「bbsapp/templates/Posts」の中の「add.php」を修正するです～

Ａ子

これで⑤が完了ね

あと⑨については、削除を実行したわ

Ｃ菜

「bbsapp/config」の中の「app.php」を書き換えました～

これで④も完了です～
（危険だから「isp」項目の値は消しておきますね～）

Ａ子

ってことは、残りは⑦と⑧だけね

Ｂ美

ふむ、そうねぇ

それに関しては生成AIを解禁しましょう
ChatGPTに尋ねても良いから、自分たちでやってみなさい

Ｃ菜

わかりました～

やってみますね～

Ａ子

苦労した…

自分の安易な発言を後悔するほどには…（笑）

Ｂ美

いや、そこまでか？（苦笑）

まぁ、良いわ
それじゃ成果を発表してね

Ｃ菜

まずは「bbsapp/templates/Posts」の中の「index.php」です～

画像をクリックするとURL「…/bbsapp/posts/imageview/（投稿番号）」へ跳びます～
（「PostsController.php」の「imageview」メソッドを呼び出すってことです～）

ちなみに、JavaScriptで別ウィンドウを開きますよ～

Ａ子

んで、その「imageview」メソッドがこれね

シンプルにファイルパスを取得してるだけ…

Ｃ菜

それに伴い、「bbsapp/templates/Posts」の中に新たなファイル「imageview.php」を作りました～

Ｂ美

ふむふむ、なかなかよくできてるわね
ちょっと試してみましょうか

うん、画像がきちんと右端に縮小表示されてる

Ｂ美

んで、この画像をクリックすると…

おぉ、別ウィンドウが開いたわね
（オリジナルサイズで…）

Ａ子

どうよ！
完璧じゃない？

Ｂ美

うーん、そうねぇ

改良の余地があるとすれば、別ウィンドウ表示の際のレイアウトかな？
あと、画像へのパスが「相対パス」になってることは、何らかの問題を発生させるかもしれない…

Ｃ菜

あ、「default.php」のレイアウトをそのまま使ってますけど、別のものを新たに作ったほうが良いってことでしょうか～？

Ｂ美

まぁ、そのあたりは好き好きなんだけど、私だったら別レイアウトにするかな？

「bbsapp/templates/layout」の中に「image_layout.php」というファイルを新規作成して、「PostsController.php」の「imageview」メソッドの中に以下の一文を書くだけでOKよ

$this->viewBuilder()->setLayout('image_layout');

Ａ子

「image_layout.php」って、「default.php」からヘッダーやフッターを削っただけじゃん

Ｂ美

そういうこと（苦笑）

でも、これで余分な情報がなくなるから、画像だけを表示するには良いんじゃないかしら？
（この辺は本当に好き好きなんだけどね）

Ｃ菜

あと、画像ファイルへのパスが「相対パス」だと問題が生じる…というのは、どういうことでしょう～？

Ｂ美

このWebアプリのトップページのURLは「http://（ドメイン名）/bbsapp」よね？

でもこれって、「http://（ドメイン名）/bbsapp/posts/index」でもあるのよ
（「bbsapp/config」の「routes.php」で設定したわよね？）

$builder->connect('/', ['controller' => 'Posts', 'action' => 'index']);

Ａ子

ん？
もちろん、ちゃんと憶えてるよ

Ｃ菜

あっ！
URLに「http://（ドメイン名）/bbsapp/posts/index」を入れてみるです～

Ａ子

あれ？画像が出ない…

ブラウザ（Edge）で「ページのソース表示」をやってみると、中身は「<img src="./files/29.jpg" />」で、確かに「相対パス」なんだけどさ
これって別に問題ないよね

Ｃ菜

いえ、URLから考えると、ドキュメントルート（bbsapp/webroot）の下にある「posts/files/29.jpg」にアクセスしようとしてますよ～

そんなディレクトリは存在しないですけどね～

Ａ子

ん？あっ、そうなるのか…
（「.」がドキュメントルートじゃなく、カレントディレクトリだとすれば…）

んー、だったらどうすりゃ良いのさ

Ｂ美

「相対パス」でダメなら「絶対パス」にすれば良いのよ

<img src="<?= $post->filepath ?>" />

の箇所を

<img src="<?= $this->Url->build(ltrim($post->filepath, '.'), ['fullBase' => true]) ?>" />

に変更するだけね

Ｃ菜

「imageview.php」のほうは現状こうなってますけど、変えるべきですかね～？

Ｂ美

こっちは「routes.php」と絡まないから、どっちでも良いわよ
まぁ、変えるとしたらこうね

<img src="<?= $this->Url->build(ltrim($post->filepath, '.'), ['fullBase' => true]) ?>" />

てか、さっきのと全く同じよ

あと、これは余談なんだけど…
「$post->filepath」の値って「./（ファイル名）」にしてるから「ltrim」関数で左端の「.」を削除してるの

…ってことは、データベースへの格納時にそもそも「.」を先頭に付けないほうが良かったかもしれない…（苦笑）

Ａ子

そういえば、いつか言おうと思ってたんだけどさ

右下にある赤いアイコンって何なのよ？

Ｂ美

クリックすると分かるんだけど、デバッグ用の便利なツールよ
（今まで全然使ってなかったけど…（苦笑））

もちろん「リリース時には非表示にすべき」だけどね

Ｃ菜

消したいです～

どうすれば良いですか～？

Ｂ美

デバッグモードをOFFにするだけよ
「bbsapp/config」の中にある「app.php」及び「app_local.php」の中をこう書き換えてね

'debug' => filter_var(env('DEBUG', true), FILTER_VALIDATE_BOOLEAN),

の箇所を

'debug' => filter_var(env('DEBUG', false), FILTER_VALIDATE_BOOLEAN),

に変更
（要するに「true」を「false」にするだけ）

ちなみに「app.php」のほうは、最初から「false」の状態になってるかもしれない…

Ｃ菜

バッチリですぅ～
（右下の赤いアイコンが消えました～）

これで細かい修正は終わりですね～

Ａ子

こっから最初に言ってたシステムテストをやっていく…ってわけかー

面倒くせぇ（苦笑）

Ｂ美

予想外に長くなっちゃたから、今回はここまでにしておきましょうか

うーん、そうねぇ
次回までに「テスト仕様書」を作成しておく…ってのを宿題にしましょう
（書式フォーマットは自由に決めて良いし、テンプレートをネット上からダウンロードしてもOKよ）

Ａ子

それはＣ菜にお願いするよ

私はそういう作業に向いてない（苦笑）

Ｃ菜

Ａ子社長、ダメですよ～

一緒にやるです～

Ａ子

うへぇー