MAMP起動中でブラウザにコードだけが表示される原因と解決方法

MAMPが起動中にもかかわらずブラウザ表示が上手くいかないとムズムズしちゃいますよね。。

初心者がこういう状況に陥ってしまう主な原因はズバリ、URLの打ち間違いです。

localhost…から始まるURLにしないと、たとえMAMPを起動していてもブラウザ上にはファイルにあるコードだけが表示されてしまうんですね。

仮に現時点で「なんのこっちゃ?」状態だったとしても大丈夫です◎

このページでは、MAMPを起動してからブラウザ上でWebページを見れるまでの手順をサクッとご紹介します^^

MAMPに緑色のランプが点灯しているかチェックする

アプリケーションの中にあるMAMP(MAMP.appではない)を起動したら、まずランプが正常に点いているかを確認しましょう。

ここで重要なのは、

  • Apache Server
  • MySQL Server

この2つが緑色になっているかどうかです。

正常であれば、以下のようにランプがグリーンに変わっているはずです。

MAMPのランプが点灯

ここさえスムーズにできたら、後はめっちゃ簡単です^^

Open WebStart pageを開きlocalhostアドレスを確認する

ランプが正常に点いていたら、その下の中心にある「Open WebStart page」をクリックしてください。

Open WebStart Pageをクリック

すると、以下のようなページが出てきます。

Welcome to MAMPページ

本来であれは、MAMPを起動して、Apache ServerとMySQL Serverが動きはじめると自動で開かれるページですので、すでにブラウザにWelcome to MAMPが見えていたらもう一度開く必要はありません。

ここで注目していただきたいのは、ブラウザ上に出てきたURLアドレスです。

localhostのURL

今回はlocalhost…から始まるアドレスになっていますよね。

おそらく、ファイルのコードしか表示されなかったときのアドレスとは違っているはずです。

これはどうしてかというと、

  • 緑色のランプが点いたApacheがWebサーバーの役割を果たしている。(Webサイトを動かすにはサーバーが必須。)
  • localhostとアドレスに入力することでApacheのwebサーバーにアクセスできた。

…からなんですね。

ちなみに、ファイルの中身のコードしか見えなかった時のアドレスは「ファイルパス」と言って、ファイルの置き場所である位置を表したものになります^^

MY WEBSITEを開き当該ファイルをクリックすれば解決◎

次にMY WEBSITEの部分をクリックします。

MY WEBSITEを押下

すると、以下のようにファイル名が出てきます。

ファイル名表示

この時点でブラウザ上に表示させたい大元のファイルやフォルダ名が確認できるはずです。

万が一、この段階で当該ファイルを収めたフォルダ名が見当たらない場合、MACの「Finder」→ サイドバーにある「アプリケーション」→「MAMP」→「htdocs」の順に追っていきながら、「htdocs」の中に自分の作成ファイルが収納されているかどうか改めてチェックしてみてください。

MAMPはその特性上、「htdocs」の中に各ファイルを置くことでWebサーバーにファイルを設置したかのように扱ってくれます。

あとは、MY WEBSITEのボタンを押してからクリックを重ねて当該ファイルを開けば大丈夫です。

ここではサンプルとしてhello.phpファイルをブラウザ上で開いてみますね。

MAMPでブラウザ上にWEBサイトを表示

はい。アドレスからもわかるように、phpフォルダ → 2-3 → hello.phpと当該ファイルを探した結果、ちゃんとブラウザ上に反映したいWebページを表示できたことがわかりますね。

このように、あなたも表示したいファイルを探してlocalhostから始まるURLを入力するだけで、同じようにWEBサイトページを見れるようになるはずです^^

プログラミングをマスターする
最速ステップ

プログラミングをマスターしたい!という大切な夢を最速で達成しませんか?今すぐ下のボタンをクリックして理想の環境を手に入れてください◎

team
MAMPのランプが点灯
最新情報をチェックしよう!
>プログラミングをマスターする最速ステップ

プログラミングをマスターする最速ステップ

プログラミングをマスターしたい!という大切な夢を最速で達成しませんか?今すぐ下のボタンをクリックして理想の環境を手に入れてください◎

CTR IMG