ホームページやサイトを立ち上げるにあたり、どうデバッグを進めればいいか悩んでいました。
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がインストールされます。
ファイルサイズが大きくなるので、無償版と有償版を分けてダウンロードさせてくれると助かるのですが。。。
んー、無償で使えるだけありがたいと思うようにします。
ということで有償版は今回不要ですので、早速アンインストールさせていただきます。
アンインストール方法は下記で紹介してますので、分からない方は参考にしてください。
Atomをインストール
これでMAMPのインストールは完了しました。
特にMAMPの設定は不要です。
次に「Atom」をインストールします。
Atom（アトム）とは、端的に言うと拡張できるテキストエディタです。
アトム自体は普通のテキストエディタですが、いろいろな機能をトッピングすることでカスタマイズができます。
今回は、PHPが動作できるカスタマイズ方法を紹介します。
Atomをダウンロード
下記にアクセスし、Atomをダウンロードします。
https://atom.io
サイトにアクセスすると、右側に「Download」が表示されているので、タップします。
Atomをインストール
ダウンロードした後に、インストール作業はありません。
「ダウンロード」フォルダにAtomがダウンロードされます。
ここで、「アプリケーション」フォルダに移動させておきましょう。
Atomを起動させると、開いて良いか確認画面が出てきます。
右側の「開く」をタップします。
必須パッケージをインストール
Atomにはパッケージと呼ばれるアドインが可能です。
パッケージは無数にありますので、自分に合ったパッケージを探してみるのも楽しいでしょう。
今回はPHPを動作させるための最低限のパッケージを紹介します。
| 1 | japanese-menu | メニューバーとコンテキストメニュー、設定画面を日本語化します。 |
| 2 | php-server | PHPを動作させます。 |
この２つのパッケージをインストール方法を説明します。
まず、Atomを起動させます。
画面上部のメニューバーにある「Atom」をタップし、「環境設定」の場所にある「Preferences…」をタップします。
開くと、左側のリストに「インストール」の場所にある「install」をタップします。
検索バーに「japanese-menu」と入力すると、１件ヒットします。
その中に「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が自動的に立ち上がって、下記のように表示されるはずです。
このように表示されたら、正常に動作しています。
もし表示されない場合、すべての設定を終えてるか確認してください。
後はコードを完成させて、サーバー上にアップロードすればいいだけです。
コメント