MENU
  • 思考THINKING
  • 未来への備えFUTURE
  • 旅行TRAVEL
  • スマートフォンPHONE
  • お問い合わせCONTACTUS
さらりーぱん
  • 思考THINKING
  • 未来への備えFUTURE
  • 旅行TRAVEL
  • スマートフォンPHONE
  • お問い合わせCONTACTUS
さらりーぱん
  • 思考THINKING
  • 未来への備えFUTURE
  • 旅行TRAVEL
  • スマートフォンPHONE
  • お問い合わせCONTACTUS
  1. ホーム
  2. 時短
  3. パソコン
  4. 【Mac】AtomでPHPデバッグ環境を構築する方法

【Mac】AtomでPHPデバッグ環境を構築する方法

2022 6/06
広告
パソコン
2022年6月6日

ホームページやサイトを立ち上げるにあたり、どうデバッグを進めればいいか悩んでいました。
PHPやHTML言語で制作したコードをサーバー上で動作確認した場合、コードをアップロードするまで動作を確認できません。
もし動作不具合があった場合、PC内で一度コードを編集する必要があります。
しかし、PC内で動作確認できませんので、アップロードするまで動作結果が分かりません。
あとは、その作業の繰り返しになります。
イメージしただけ効率が悪そうですね。
一方、PC内で動作確認できれば、正しいデータを一度だけアップロードするだけで済みます。
前者と後者を比べると、後者の方が圧倒的に作業効率が良いです。

今回は、macOSを使ってPHPやHTML言語をデバッグする方法を紹介します。

MAMPをインストールする

まず、MAMP( Macintosh Apache MySQL PHP の略、マンプと読む )をインストールします。
最初の「M」に、Macintosh とあるので、macOSだけのサポートになります。
Windowsでは、XAMPP( X Apache MySQL PHP Perl. の略、ザンプと読む )を利用します。
最初の「X」は、クロスプラットフォームの略で、Windows、macOS版がそれぞれあります。
もしかすると、XAMPPでも動作できると思いますが、著者は動作確認できていません。
今回は「MAMP」での紹介とします。

MAMPをダウンロード

下記にアクセスし、MAMPをダウンロードします。
https://www.mamp.info/de/mac/

サイトにアクセスすると、右上に「Downloads」が表示されているので、タップします。

「M1」チップのMacbookを利用してる方は、黄色の枠をタップしダウンロードします。

ファイルサイズが大きいので、ダウンロードが完了するまで約5分くらいかかりますので、気長に待ってください。

MAMPをインストール

ダウンロードしたファイルを実行します

「続ける」をタップする

注意事項を確認し、「続ける」をタップします。

言語選択をしますが、残念ながら日本語がありません。
ここは大人しく英語で読んでください。

ライセンス条項を確認し、承諾する場合は「Agree」をタップします

1.75GBと比較的大きなファイルになりますので、ディスクの空き容量を確認してください。
良ければ、「インストール」をタップします。

Touch IDかパスワードで認証し、インストールを許可してください

インストールされたことを確認し、「閉じる」をタップします

使用したインストーラーは不要ですので、「ゴミ箱に入れる」をタップします

MAMP Proをアンインストール

MAMPをインストールすると、無償版MAMPと有償版MAMP PROがインストールされます。
ファイルサイズが大きくなるので、無償版と有償版を分けてダウンロードさせてくれると助かるのですが。。。
んー、無償で使えるだけありがたいと思うようにします。
ということで有償版は今回不要ですので、早速アンインストールさせていただきます。

アンインストール方法は下記で紹介してますので、分からない方は参考にしてください。

あわせて読みたい
【Mac】アプリに×印が表示されないので削除できない。アンインストールする方法は? Windowsなら、アプリ一覧からアプリケーションを削除することができます。しかし、Macにはアプリ一覧などありません。では、どのようにアプリケーションを削除すればい...

Atomをインストール

これでMAMPのインストールは完了しました。
特にMAMPの設定は不要です。
次に「Atom」をインストールします。
Atom(アトム)とは、端的に言うと拡張できるテキストエディタです。
アトム自体は普通のテキストエディタですが、いろいろな機能をトッピングすることでカスタマイズができます。
今回は、PHPが動作できるカスタマイズ方法を紹介します。

Atomをダウンロード

下記にアクセスし、Atomをダウンロードします。
https://atom.io

サイトにアクセスすると、右側に「Download」が表示されているので、タップします。

Atomをインストール

ダウンロードした後に、インストール作業はありません。
「ダウンロード」フォルダにAtomがダウンロードされます。
ここで、「アプリケーション」フォルダに移動させておきましょう。

Atomを起動させると、開いて良いか確認画面が出てきます。
右側の「開く」をタップします。

必須パッケージをインストール

Atomにはパッケージと呼ばれるアドインが可能です。
パッケージは無数にありますので、自分に合ったパッケージを探してみるのも楽しいでしょう。
今回はPHPを動作させるための最低限のパッケージを紹介します。

1japanese-menuメニューバーとコンテキストメニュー、設定画面を日本語化します。
2php-serverPHPを動作させます。
必須パッケージ

この2つのパッケージをインストール方法を説明します。
まず、Atomを起動させます。
画面上部のメニューバーにある「Atom」をタップし、「環境設定」の場所にある「Preferences…」をタップします。

開くと、左側のリストに「インストール」の場所にある「install」をタップします。
検索バーに「japanese-menu」と入力すると、1件ヒットします。
その中に「install」ボタンがあるのでタップし、インストールさせます。
インストールすると、自動的に有効化されます。

同様に「php-server」と入力し、パッケージをインストールしましょう。
一度Atomを終了し、再起動するとメニューバーも日本語化されます。

パッケージの設定

さきほどインストールした「php-server」は、設定する必要があります。
Atomを起動し、再度「設定」を開きます。
左側の「パッケージ」をタップし、検索バーに「php-server」と入力すると、インストールした「php-server」が表示されます。
その中に、歯車マークがある「設定」をタップします。

設定の中に「Path to PHP Executable」にあるので、ここにPHPのパスを入力します。
インストールしたPHPバージョンによって異なりますが、「7.4.21」をインストールした場合、下記のようになります。

/Applications/MAMP/bin/php/php7.4.21/bin/php

違うバージョンをインストールした場合は、この数字だけ変更すれば動作すると思います。
では、このパスをコピーして下図のように入力します。

入力後は、特に保存ボタンはないので、タブを閉じて大丈夫です。
これで設定は終わりました。
次に動作を確認してみましょう。

動作確認

まず、サンプルファイルを作成しましょう!
Atomを開いて、メニューバーの「ファイル」から「新規ファイル」をタップします。
もし日本語になってない人は、「japanese-menu」のパッケージをインストールしてください。

下記をコピーしてAtomに貼り付けてください。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Hello World</title>
</head>
<body>
<?php
echo “Hello World!”;
?>
</body>
</html>

貼り付けが終わったら、一旦保存しましょう。
ショートカットキー「commandキー+S」で保存が可能です。
保存先は下記にしてください。
他のPHPファイルを作成する場合も同様です。

/Applications/MAMP/htdocs

保存したら、実行します。
メニューバーの「パッケージ」の「PHP Server」から「Start in folder of current file」をタップします。

すると、Safariが自動的に立ち上がって、下記のように表示されるはずです。
このように表示されたら、正常に動作しています。

もし表示されない場合、すべての設定を終えてるか確認してください。

後はコードを完成させて、サーバー上にアップロードすればいいだけです。

トップページに戻る

\ 楽しい記事がいっぱいあるよ! /

さらりーぱんの世界
TOPに戻る

友達に広めてね♪

「さらりーぱん」の2次元コード
パソコン
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする コメントをキャンセル

CAPTCHA


さらぱん
サイト運営者
●レビュー依頼などはお気軽に「お問い合わせ」やX(旧:Twitter)からご連絡ください。
運営者情報はコチラ
人気記事
  • 【OPPO】Reno9AとReno7Aを比較してみた。Reno9Aは買いか?
  • 【OPPO】Reno7AとReno5Aを比較してみた。Reno7Aは買いか?
  • 【Google vs OPPO】 Pixel6aとReno7Aを比較してみた。Pixel6aは買いか?
  • 【Google】Pixel7aとPixel6aを比較してみた。Pixel7aは買いか?
  • 【AQUOS vs OPPO】 sense7とReno7Aを比較してみた。sense7は買いか?
目次
タグ
#nearme#ニアミー冷凍食品小学生でもわかる
  • メニュー
  • ホーム
  • 検索
  • トップへ