こざさのぶろぐ

アプリケーション開発における備忘録や思ったこと

買わせるの心理学で参考になった4つのこと

今回はこちらの本を読んでみました。
[買わせる]の心理学 消費者の心を動かすデザインの技法61

題名の通り、商品を買ってもらうためにどうすれば良いかが書かれてある本です。
こちらの本の素晴らしいところは、技法が61個紹介されているのですが、
WEBサイトで活用するためにはどうすれば良いか、具体例として書いてあるところです。

例えば、人は目線を向ける方向が左の場合は過去、右を向ける場合は未来を想像しているといいますが、
こちらをWEBサイトとして活用するのであれば左は過去である戻るボタンを、右は未来である進むボタンをつける方が
矛盾などないためこの設計は間違えないこと。
など具体例を記載しています。

今回はその読んだ本の個人的に参考になった点を紹介します。

人は多くを選べない

日常で何かを買うときに選べるものが多すぎて何を買えば良いのかわからない!となった経験はないでしょうか?
本書に記載の研究結果では、
ECサイトにて商品を6種類並べたときは30%の人が購入し、24種類では3%の人が購入する
と記載されていました。

こちら確かに納得で、選ぶものが多ければ多いほど何が良いのかさっぱりで購入しなくなるなと思います。
商品を並べる際はできる限り少なく、ユーザーが選びやすいようにしましょう。
ただ、例外はあってユーザーが商品を検索したりなどできる限り多くの商品をみたいと思うケースもあるので
ケースバイケースとなりそうです。

返報性の原理

こちらは、何かを受け取った時にお返しをしなければならないという原理で、
ユーザーは思っていたよりもより良いサービスを受けたらもっと良い気分になって
お返しをしたくなると言った原理となります。

ECサイトなどで商品を買ってもらって送った際に、手書きの手紙を入れておくなどすれば、
良い意味で想定外でユーザーはより良い気分になってリピートしてくれる可能性があると言ったことが紹介されていました。

## 努力する人を人は応援したくなる よく店頭などで、「発注ミスで在庫抱えすぎました」とか書いてある商品って見たことないですか?
それを見て同情して商品を買ってあげること人って多そうですが、
それがこちらの心理を利用した販売方法みたいです。

人は頑張ってる人を応援したくなる性質があるので、
発注ミスして頑張って売ってるんだなと同情して商品を購入してくれたりするそうです。 また、商品を売るときに商品の製造過程を載せておくと、
努力を見てもらい商品を買いたくなると書かれていました。

タイトルに情報は全て載せない

ブログだったり、Youtubeとかで「〜をするためには??」とか答えをあえて書かないタイトルが多いです。
これはあえてタイトルから記事または動画に飛ばして内容を確認してもらう手法で、
商品に興味を持ってもらうためにつけるとアクセス数が伸びるとのことでした。

商品がよかったとしても、そもそも興味を持ってくれない、見てくれないのであればどうしようもないので、
こういう手法を使ってアクセスして興味を持ってもらう方法を知っておくのも良いですね。

第一印象でがっかりさせない

やっぱり第一印象はとても重要です。
第一印象で今後の接し方、印象がグッと変わってくるもので、
例えばECサイトのトップページにアクセスしたときに、90年代のWEBサイトみたいな感じで出てきたら、
商品も古そうだなとか、かっこよくないなとか思ってしまうと思います。

例え商品がよかったとしても、なんだか悪い印象がなかなか取れなかったりして
せっかくの商品を揃えてたとしても無駄になってしまいそうです。

なので、第一印象、WEBサイトでいえばTOPページの見栄えは特に気をつけた方が良さそうです。 4

終わりに

以上、僕が本書で個人的に参考になった5つの点を紹介させていただきました。
手法が61個ある中5つをすごいざっくりと説明させていただいたので、
ちゃんとじっくり読んでもらった方が良いと思います。
よかったら読んで見てくださいね。

本を読む時に記憶に残りやすい3つの方法

個人的に最近ハマっているDAIGOのYoutube動画配信 ちょっと前になりますが、読書をする時に読んだ内容が記憶に残りやすくする方法を3つほど紹介していましたので、 こちらで内容をまとめておきます。

youtubeで見たい方は下記をどうぞ 10分くらいの動画なので、見ることをお勧めします。

www.youtube.com

要約

本を読む時に読んだ内容が記憶に残りやすい方法

  1. 本を読む前に、目次を読んでどんな内容が書いてあるか想像し、メモする  →人は想定外のことが起こった時に記憶に残りやすいため、目次から想定をしておき想定外のきっかけを作る
  2. 読んでいる最中に「おぉー」と思った点は書いてある内容と自分の感情を交えた感想をメモする
     →読んだ内容について感情を交えた自分ごととして捉える(人は他人事のことは記憶に残さない)
  3. 読んだ後にメモした内容からどんなことが書いてあったか思い出す
     →忘れていることを思い出そうとすることによって記憶に定着する
      メモから思い出せない場合は本の内容を再度読み直しても良いができる限り思い出そうとすること

本は定期的に読んでいるのでもっと早いうちに知りたかった。

Vagrantの仮想環境にphpMyAdminをインストール

Vagrantを用いた仮想環境でphpMyAdminを使用する方法を解説します。
とはいっても、phpMyAdminの公式サイトからダウンロードしてアップロードするだけでした。。

動作環境

Mac OS 10.13.1
Vagrant 2.0.1
VirtualBox 5.2.2
仮想環境 CentOS 7.1
Apache/2.4.6
PHP 7.1.12
mysqld 5.7.20

前提

VagrantVirtualBoxはインストール済
Vagrantを使って仮想サーバの構築は完了している
yumがインストール済
mysqlパッケージがインストール済

そこまでいってない!って方は下記リンクを参照してください
MacOSで仮想環境(Vagrant)の開発環境を構築するまとめ - こざさのぶろぐ

1.phpMyAdminをダウンロード

下記の公式サイトからphpMyAdminをダウンロードしてください

phpMyAdmin - Donate

f:id:sasdfe:20180121163213p:plain Downloadボタンをクリックしてzipをダウンロード

解凍をすると中身はこんな感じ
f:id:sasdfe:20180121163327p:plain

2.仮想環境のドキュメントルートへアップロード

次に、解凍したスクリプトをドキュメントルートへアップロードしてください。
今回の場合はドキュメントルート(/var/www/html/)にphpMyAdminフォルダを作成して
その中にスクリプトファイルを格納します。

f:id:sasdfe:20180121163837p:plain

3.phpMyAdminを開く

アップロードしたパスへブラウザを用いてアクセスしてみましょう
今回の場合は、ドキュメントルートへphpMyAdminフォルダを作成したので、

http://192.168.33.10/phpMyAdmin/ へアクセスします。
このように表示されていればOKです。 f:id:sasdfe:20180121164358p:plain

あとは設定したユーザでログインしてみましょう

MacOSで仮想環境(Vagrant)の開発環境を構築するまとめ

MacOSを使った開発環境(仮想)の構築手順についてまとめています。
※ 仮想環境(Vagrant)の開発環境構築の記事が多くなってしまったため作成

はじめに

こちらの記事では、仮想環境を使った開発環境構築について解説しています。
仮想環境を用いることで、開発中に環境を壊してしまったときなどにすぐに環境を壊し、
再度作り直すことが安易となります。

また、こちらで紹介している手順通りで進めることで、
PHPフレームワークCakePHPVSCodeを用いてデバッグ実行が行える状態まで行えます。

1.Vagrantのインストール

sasdfe.hatenablog.com

2.仮想環境の構築

sasdfe.hatenablog.com

3.仮想環境にPHPMySQLをインストール

sasdfe.hatenablog.com

4.VSCodePHPデバッグを行えるようにする

sasdfe.hatenablog.com

5.仮想環境にCakePHPをインストール

sasdfe.hatenablog.com

macOSで開発用の仮想環境が作れるVagrantをインストール

macOSで開発する際に、いままでローカルで開発することは多かったけど
色々なパッケージとかを入れてしまって取り返しの付かないことになってしまった方や
どんなパッケージをいれたか覚えていないという方に必見なVagrantのインストール手順です。

動作環境

Mac OS 10.13.1

1.VirtualBoxをインストール

まず仮想化ソフトウェア・パッケージであるVirtualBoxをインストールします。
下記リンクを開きましょう

Oracle VM VirtualBox

下記の画面が表示されるため、Downloadリンクをクリック
f:id:sasdfe:20171227231553p:plain

OS X hostsをクリックしてdmgファイルをダウンロード f:id:sasdfe:20171227231450p:plain

ダウンロードしたdmgファイルを手順に従ってインストールしてください。

2.Vagrantをインストール

次にVagrantをインストールします。 下記リンクを開きましょう

Vagrant by HashiCorp

リンクを開くと下記のような画面が表示されます。
Download2.0.1をクリックします

f:id:sasdfe:20171227230757p:plain

今回はMacOSを使っているため、MacOS版をダウンロードしましょう

f:id:sasdfe:20171227231651p:plain

dmgファイルをダウンロードしたらファイルを開いてインストールしましょう

さいごに

とてもざっくりとした解説となりましたが、
他のブログなどで詳しいインストール方法など記載されているためこれくらいで勘弁してください・ω・

Vagrantインストール後はターミナルのコマンドで仮想環境を構築しますが、
その手順についてはこちらの記事を参考にどうぞ!

sasdfe.hatenablog.com

VagrantでデバッグができるCakePHPの開発環境を構築する

Vagrantを用いてCakePHPの開発環境を構築する方法について今回は解説します。

動作環境

Mac OS 10.13.1
Vagrant 2.0.1
VirtualBox 5.2.2
仮想環境 CentOS 7.1
Apache/2.4.6
PHP 7.1.12
mysqld 5.7.20

前提

  • VagrantVirtualBoxはインストール済
  • Vagrantを使って仮想サーバの構築は完了している
  • yumがインストール済
  • ローカル環境と仮想環境のディレクトリ共有を設定済

終わっていないという方は下記の記事を参考にしてください。

sasdfe.hatenablog.com
sasdfe.hatenablog.com
sasdfe.hatenablog.com

0.はじめに

ターミナルでローカル環境と仮想環境のディレクトリ共有の自動化をコマンド入力している場合は停止してください。
vagrant rsync-auto
今回はCakePHPのプロジェクトをサーバ上に作成するため、
ディレクトリ共有の自動化コマンドが実行されている場合、
ローカル側が優先となりプロジェクトが削除されてしまう事があります。

1.Composerのインストール

仮想環境へログインしてComposerをインストールしましょう
Composerとは、PHPのパッケージ管理システム(各種ソフトウェアの導入や削除をしたり依存関係を管理するもの)です。

https://getcomposer.org/img/logo-composer-transparent.png

今回はComposerをつかってCakePHPのプロジェクトを作成するため、
必要となります。

[vagrant@localhost ~]$ curl -sS https://getcomposer.org/installer | php

次にComposerを/usr/local/bin/へ移動させましょう。
移動することで、composerコマンドとして使用することができます。

[vagrant@localhost ~]$ sudo mv composer.phar /usr/local/bin/composer

composerコマンドを実際に実行してみて、
下記のように表示すればOKです。
※もしならないばあいは、vagrantをリロードしてください。

[vagrant@localhost ~]$ composer --version
Composer version 1.5.6 2017-12-18 12:09:18

2.zip unzipをインストール

圧縮、解凍を行うコマンドですが、今回composerを使用する際に必要となるためインストールします。

[vagrant@localhost ~]$ sudo yum install -y zip unzip

3.CakePHPのプロジェクトを作成

CakePHPのプロジェクトをComposerを使って作成します。
まずはCakePHPのプロジェクトを作成するフォルダまで移動しましょう
/var/www/htmlフォルダまで移動してください

[vagrant@localhost ~]$ cd /var/www/html

次にcomposerを使ってCakePHPのプロジェクトを作成します。
今回はsamplecakeという名前にします。

[vagrant@localhost html]$ composer create-project cakephp/app samplecake --prefer-dist

途中下記の質問が入ります。
フォルダのパーミッションをセットしても良いですか?
と聞いているため、Yとしましょう

Set Folder Permissions ? (Default to Y) [Y,n]? Created `config/app.php` file
Created `/var/www/html/samplecake/tmp/cache/views` directory

4.CSSのデザイン反映

一旦インストールできましたので、実際の画面を見てみましょう
今回の場合は、下記URLを開きます

http://192.168.33.10/samplecake/

すると下記のように表示されるかと思います。

f:id:sasdfe:20171226230231p:plain

CSSが反映されておらず、URLの書き換えが正しく行われていませんと怒られています。

URL rewriting is not properly configured on your server.

そのため、仮想環境の/etc/httpd/conf/httpd.confを編集してデザインが反映されるようにしましょう

[vagrant@localhost html]$ sudo vi /etc/httpd/conf/httpd.conf
#57行目あたりに下記を追記
LoadModule rewrite_module modules/mod_rewrite.so 

#131行目あたりの<Directory "/var/www/html">タグ内を下記にする
<Directory "/var/www/html">
    Options FollowSymLinks
    AllowOverride All
</Directory>

#ドキュメントルートが/var/www/html ではない場合、変更する必要がある。
#今回は/var/www/htmlのため、変更する必要はなし
DocumentRoot "/var/www/html"

設定が終わったらApacheを再起動します

[vagrant@localhost html]$ sudo service httpd restart

再度ブラウザで確認しましょう。
デザインが反映されています。

f:id:sasdfe:20171226231528p:plain

5.MYSQLの設定

次にCakePHPとデータベースのリンクを行います。
現状では下記のようにデータベースとコネクトができていないとエラーになります。

f:id:sasdfe:20171226231749p:plain

まず、mysqlの初期設定を行いますが、
初期設定をする際にパスワードを聞かれるため、パスワードを調べる必要があります。
パスワードはログに出力されるため、そのログを出力します。

[vagrant@localhost html]$ sudo grep 'temporary password' /var/log/mysqld.log
2017-12-25T15:51:53.563358Z 1 [Note] A temporary password is generated for root@localhost: Y2sh4T(gJr<w

root@localhost:の後ろがパスワードとなります。
次に初期設定をします。

[vagrant@localhost html]$ sudo mysql_secure_installation

#早速パスワードを聞かれるため、さきほど取得したパスワードを入力してください
#初期状態の場合、パスワードは最低 1 つの数値文字を含み、1 つの小文字および大文字を含み、
#1 つの特殊文字 (英数字以外) を含む必要があるという条件でなければ通りません。
Enter password for user root: 

#次に新しいパスワードを聞かれます。
The existing password for the user account root has expired. Please set a new password.

New password: 

#再度入力します
Re-enter new password: 

#ルートのパスワードを変更しますか?と聞かれるためせっかくなのでyと入力します
Change the password for root ? ((Press y|Y for Yes, any other key for No) : y

New password: 

Re-enter new password: 

# 提供されたパスワードを続行しますか?と聞かれるためy
Do you wish to continue with the password provided?(Press y|Y for Yes, any other key for No) : y

# 匿名ユーザを削除しますか?と聞かれるためy
Remove anonymous users? (Press y|Y for Yes, any other key for No) : y

# ローカルホスト以外からアクセス可能な root アカウントを削除しますか?と聞かれるためy
Disallow root login remotely? (Press y|Y for Yes, any other key for No) : y

# テスト用のデータベースを削除しますか?と聞かれるためy
Remove test database and access to it? (Press y|Y for Yes, any other key for No) : y

# 今すぐ特権テーブルを再ロードしますか?と聞かれるためy
Reload privilege tables now? (Press y|Y for Yes, any other key for No) : y

mysqlの初期設定は完了となります。

6.MySQLのユーザとデータベースを作成する

次にCakePHPで使用するMySQLのユーザとデータベースを作成します。
まずはユーザから作成しましょう
mysqlにrootでログインします
パスワードを聞かれるため、設定したパスワードを入力しましょう

[vagrant@localhost html]$ sudo mysql -u root -p 
Enter password: 

ユーザの作成を行います。
今回はmy_appというユーザを作成します
パスワードはユーザ(今回の場合はmy_app)のログインパスワードを入力してください

mysql> create user my_app@localhost identified by 'パスワード';
Query OK, 0 rows affected (0.00 sec)

次にDBを作成します。
今回はtest_app_dbという名前にします

mysql> create database test_app_db;
Query OK, 1 row affected (0.00 sec)

次に、作成したデータベースに権限を付与します。

mysql> GRANT ALTER ON test_app_db.* TO my_app@localhost;
Query OK, 0 rows affected (0.00 sec)

確認のため、作成したユーザでログインを行い、データベースに接続をしてみましょう。 まず、mysqlをログアウトします

mysql> exit

作成したユーザでログインします

[vagrant@localhost html]$ sudo mysql -u my_app -p 

作成したデータベースに接続します

mysql> use test_app_db;

データベースに接続したか確認します。

mysql> SELECT database();
+-------------+
| database()  |
+-------------+
| test_app_db |
+-------------+
1 row in set (0.00 sec)

上記のように表示ができていれば接続確認ができていることになります。

7.CakePHPのデータベース設定

次にCakePHPのデータベース設定を行います。
先程の手順で作成したユーザとデータベースを設定ファイルに書き込む作業となります。
作成したCakePHPプロジェクト内部のconfig/app.default.phpを開きます。

[vagrant@localhost config]$ sudo vi app.php

220行目あたりのDatasourcesを修正します。

     'Datasources' => [
         'default' => [
             'className' => 'Cake\Database\Connection',
             'driver' => 'Cake\Database\Driver\Mysql',
             'persistent' => false,
             'host' => 'localhost',
             /**
              * CakePHP will use the default DB port based on the driver selected
              * MySQL on MAMP uses port 8889, MAMP users will want to uncomment
              * the following line and set the port accordingly
              */
             //'port' => 'non_standard_port_number',
             'username' => 'my_app', //作成したユーザネームを入れます
             'password' => 'xxxxxxx', //設定したユーザのパスワードを入れます
             'database' => 'test_app_db', //作成したデータベース名を入れます
             'encoding' => 'utf8',
             'timezone' => '+09:00', //日本時間を入れます
             'flags' => [],
             'cacheMetadata' => true,
             'log' => false,

ブラウザにてCakePHPとデータベースがリンクできているか確認しましょう

f:id:sasdfe:20171227005746p:plain

リンクできている場合、上記のようにCakePHP is able to connect to the database.と表示されます。

8.CakePHPのプロジェクトをローカルへコピーする

仮想環境に作成したCakePHPのプロジェクトをローカルのディレクトリ共有をしているフォルダへコピーします。 まず、SSH接続の設定ファイルを作成します。
ローカル環境の対象の仮想環境のディレクトリ内へ移動して下記コマンドを実行します。

$ vagrant ssh-config > ssh.config

次にscpコマンドを利用して仮想環境からローカル環境へCakePHPプロジェクトのコピーを行います
今回はsamplecakeというCakePHPプロジェクトをdataフォルダ(ローカルと仮想の共有フォルダ)へコピーします。

$ scp -F ssh.config -r vagrant@default:/var/www/html/samplecake/ ../data/

lsコマンドなどでコピーできているか確認しましょう。

9.デバッグの実行確認

実際にMSCodeを使ってデバッグをしてみましょう。
一度ローカル環境の共有フォルダを仮想環境へ反映するために、仮想環境の再起動を実施します。
ローカルで仮想環境のフォルダへ移動して再起動してください

$ vagrant reload

再起動が終わったらCakePHPプロジェクトのトップを開いてみましょう
おそらく、warningエラーがたくさん出ていると思います。
SplFileInfo::openFileエラーがたくさん出ていると思いますが、
tmp/cacheディレクトリのパーミッションの関係で出るようです。
そのため、tmpフォルダのパーミッションを777に設定しましょう
(セキュリティ上よろしくないので、本番で行う場合は対処方法を考えましょう
今回は開発環境なので、一時的にそうします)

ローカル環境のCakePHPプロジェクトフォルダ内のtmpフォルダのパーミッションを変更します。

$ chmod -R 777 tmp/

変更後に仮想環境フォルダ内で自動共有を実施します。

$ vagrant rsync-auto

再度CakePHP プロジェクトのページを開いたときに下記のように正しく表示できていればOKです。

f:id:sasdfe:20171228004648p:plain

次にVSCodeを使って実際にデバッグができるか確かめてみましょう
VSCodeを開き、ローカルの共有フォルダを開きます。
その後CakePHPプロジェクトフォルダ内部のindex.phpを開いてください

f:id:sasdfe:20171228004831p:plain

上記のようにブレークポイントを貼り付けて、
CakePHPプロジェクトの画面をブラウザで開いてみましょう

f:id:sasdfe:20171228004939p:plain

このようになっていればOKです。
以上で手順は完了となります。

VSCode + Vagrant でPHPをデバッグする環境構築

ここ最近盛り上がりをみせるVSCode(Visual Studio Code)ですが、
今回はVagrantで作成した仮想サーバ上でデバッグを行う方法について解説します。

動作環境

Mac OS 10.13.1
Vagrant 2.0.1
VirtualBox 5.2.2
仮想環境のOSはCentOS 7.1

前提

  • VagrantVirtualBoxはインストール済
  • Vagrantを使って仮想サーバの構築は完了している
  • yumがインストール済

完了してないという方は下記リンクにてここまでの環境構築について
解説していますので、参考にどうぞ

sasdfe.hatenablog.com sasdfe.hatenablog.com

1.ローカル環境と仮想環境のディレクトリ共有

ローカル環境と仮想環境のディレクトリ共有を行うことで、
ローカル環境で編集したファイルを仮想環境のWebサーバへ同期を行うことができます。
Vagrantを用いる場合、少ない手順でディレクトリ共有が行えます。

ディレクトリ共有を行いたい仮想サーバのVagrantfileを開きましょう

$ vi Vagrantfile 

Vagrantfileの46行目あたりに書いてあるconfig.vm.synced_folderのコメントアウトを行い、 ローカル環境と仮想環境のパスを設定しましょう

config.vm.synced_folder "ローカル環境のパス", "仮想環境のパス",type: "rsync"

次に再起動して設定を反映しましょう

$ vagrant reload

次にそのままでは自動的に同期が行われないため、
自動同期のコマンドを実行しましょう

$ vagrant rsync-auto

自動同期コマンドを実行したターミナルが起動している以上
自動同期され続けます。

2. Xdebugを仮想環境へインストール

yumを使ってXdebugを仮想環境へインストールします。 まず、仮想環境へログインします

$ vagrant ssh

Xdebugを仮想環境へインストールします

$ sudo yum --enablerepo=remi-php71 -y install php-pecl-xdebug

インストールできたか確認します

$ php -i | grep xdebug

下記のような文字列が表示されたらインストールは正常完了しています。

xdebug support => enabled
xdebug.auto_trace => Off => Off
xdebug.cli_color => 0 => 0

3. Xdebugの設定を変更

Xdebugを正常インストールできたら設定ファイルができているため、
そのファイルの修正を行いましょう
/etc/php.d/15-xdebug.iniを開いて下記の修正を行いましょう

;628行目
xdebug.remote_autostart = 1

;680行目
xdebug.remote_enable = 1

;709行目 PHPサーバへリクエストを送る側のIDアドレス phpファイルにecho $_SERVER['REMOTE_ADDR'] で確認できます。
xdebug.remote_host = 192.168.33.1

4. Apacheを再起動

修正が終わったらApacheを再起動して修正を反映させましょう

$ sudo systemctl restart httpd

5. Visual Studio Codeの設定

Visual Studio Codeの設定について解説します。
Visual Studio Codeを起動して、PHP Debugエクステンションをインストールしましょう
拡張機能の画面で「PHP Debug」と検索→インストール

次に、1.ローカル環境と仮想環境のディレクトリ共有で設定したディレクトリを
Visual Studio Codeで開きます。
ファイル→開く で設定したディレクトリを開いてください

次にデバッグウィンドウを開いてください。
左にあるメニューバーの虫のアイコンです。

次にPHP Debugの設定をします。
左上に歯車のマークがあり、クリック→PHPを選択します。
その後、launch.jsonが開かれるので修正しましょう

congihurationsのノードの一つ目のオブジェクトに

"serverSourceRoot": "/var/www/html" と
"localSourceRoot": "${workspaceRoot}" を追記します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "serverSourceRoot": "/var/www/html",
            "localSourceRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

以上で設定は完了となります。

実行確認

実際に動くかどうか確認してみましょう。
phpファイルを作成し、簡単なプログラムを作成します。

<?php

$php = "tanosi";

if($php == "tanosi")
{
    echo "That Good!!";
}else{
    echo "So Bad!!";
}

作成後にVisual Studio Codeのデバッグウィンドウを開いて、左上の▶ボタンをクリックします。
さらにPHPの行番号の左隣をクリックするとブレークポイントが設定できます。

その状態で、ブラウザからPHPを実行してみましょう。
正常に設定できていれば、ブレークポイントで処理が止まっています。