9
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

PHPファイルをプレビューする

Last updated at Posted at 2023-11-06

PHPのPの字も知らないですが、プレビューしたい場面があったので色々と試してみました。
メリット・デメリットあるのでそれぞれ確認してお試しください。

2つ方法があります

方法 1 VSCodeの拡張機能PHP Serverを使う

メリット:VSCodeからかんたんに起動できる
デメリット:APIは使えない(やりようでは使えるけど試してない)

1 ターミナルでPHPをインストールされているか確認
下記コマンドを実行します。インストールされていたら手順4に移ります。

php -v

2 ターミナルでHomebrewが入っているか確認します
入っていなければ手順3へ、入っていれば手順4へ移ります。

brew -v

3 Homebrewをインストールします
https://chigusa-web.com/blog/homebrew/

4 PHP Ver. 7.4 をインストールします

brew install php@7.4

下記コマンドでPHPが入ったことが確認できたらターミナルでの操作は完了です!

php -v

5 VSCodeの拡張機能からPHP Serverを追加
スクリーンショット 2023-11-02 18.57.56.png

使い方

1 PHPファイル内で右クリック
スクリーンショット 2023-11-02 19.01.57.png

2 PHP Server: Serve projectを押下

起動できたら成功です!

メモ

  • 修正後の確認はPHP Server: Reload serverを実行する

方法 2 MAMPを使う

メリット:API使える
デメリット:プレビューの際に少し手間がかかる

1 MAMPをインストール

MAMP の公式サイト(https://www.mamp.info/en/)にアクセスします。
上部の [ダウンロード] にアクセスし、「OK」をクリックし、インストールを実行

スクリーンショット 2023-11-06 15.40.40.png

2 MAMPを起動する
スクリーンショット 2023-11-06 15.42.30.png

3 左上 PreferencesからDocument rootを設定する
ChooseからプレビューしたいPHPファイルが存在するファイルを選択する
スクリーンショット 2023-11-06 15.48.09.png

4 MAMPをStartする
手順2の画面、右上のStartを押下しMAMPをスタート。
ブラウザ上でMAMPのページが展開します。
スクリーンショット 2023-11-06 15.57.07.png

5 起動したページに遷移する
「localhost:8888/MAMP/?language=English」 から 「MAMP/?language=English」を削除してエンターキー押下。
削除前
スクリーンショット 2023-11-06 16.02.13.png

削除後にこのアドレスに遷移する
スクリーンショット 2023-11-06 16.02.50.png

手順3で指定したDocument rootに対応する画面が開かれると思います!あとは必要なファイルにアクセスしてPHPファイル等を確認できます。

メモ

  • デベロッパツールはcommand + option + I で開く

終わりに

よりよい方法あればご教示ください!

9
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?