テスト用Webサイトを立てよう


こんにちは,masART STUDIOのカワグチです。

Adobe Dreamweaver(アドビ ドリームウィーバー)のような,いわゆるWebページ作成ソフトは,HTML,CSSなどのWebページを構成するファイルの編集に便利なデザインツールです。

 特に,Dreamweaverは非常に優れたWebページ作成ソフトで,HTMLやCSSだけなくサーバサイド言語であるPHPの編集と構文チェックもできます。

しかし,サーバサイド言語を使用した動的ページを開発する場合は,作業中に動的コンテンツの生成や表示を行うためのサーバ環境が必要となります。

とは言うものの,テストもしないでいきなり本番のWebサーバに上げるのは,やはり怖いものです。

そこで,本番環境に影響を与えることを防ぐため,テストサーバを構築することをおすすめします。

サーバの構築と聞くと難しいように思うかもしれませんが,MAMP(マンプ)というApache,MySQL,PHP,などをひと纏まりにしたパッケージを利用するば,比較的簡単にローカルサーバ環境を立ち上げることができます。

MAMPには,無料で使用できるMAMPと,有料版のMAMP PROの2種類がありますが,本稿では無料版のMAMPでテストサーバを構築する手順をご紹介します。

なお,今回紹介する作業手順はMac OS版となります。Windowsユーザの方は手順が異なる可能性がありますので,あらかじめご了承ください。


MAMPのダウンロード

それでは,MAMPの公式ページ(https://www.mamp.info/)にアクセスしてMAMPをダウンロードします。

1. MAMPのトップページ:MAMPのアイコンの右側にある「Free Download」ボタンを押下すると,ダウンロード画面に遷移します。(上の画像は,平成31年1月1日現在のものです)。
2. ダウンロード画面:「MAMP & MAMP PRO 5.2」を押下すると,「MAMP_MAMP_PRO_5.2.pkg」のダウンロードが開始します。

MAMPのインストール

ダウンロードが完了したら,MAMPのインストールをおこないます。英語のメッセージが表示されても焦らずゆっくりと進みましょう。

3. ダウンロードフォルダ:先ほどダウンロードした「MAMP_MAMP_PRO_5.2.pkg」を起動します。 3
4. はじめに:「続ける」を押下すると,インストールが開始します。
5. 大切な情報:『このインストーラは、MAMPフォルダとMAMP PROアプリケーションをアプリケーションディレクトリにインストールします。MAMPフォルダを移動したりリネームしないでください』
『インストーラが既存のインストールを検出した場合、「/ Applications / MAMP / htdocs」および「/ Applications / MAMP / conf / ssl」のデータを保存し、既存のデータベースを新しいインストールにコピーして古いMAMPフォルダのリネームします』といった内容が書いてあります。
問題なければ「続ける」を押下します。
6. 使用許諾契約:MAMPとMAMP PROのライセンス契約(「GNU一般公衆利用許諾契約書」やパッケージ含まれている製品のライセンスに関する注意事項)について記載されています。かなりの長文ですが英語とオランダ語しか選択できません。問題なければ「続ける」を押下してください。
7. ソフトウエア使用許諾契約の同意画面:インストールを続けるには,ソフトウエア使用許諾契約の条件に同意する必要があります。
8. インストールの種類:標準インストールで1.42GBの領域が必要となります。インストール先の空き容量を確認し,「インストール」を押下します。
9. パスワード入力画面:パスワードを入力して「ソフトウエアをインストール」を押下します。
10. インストール:インストール中です。しばらく待ちましょう。
11. 概要:お疲れさまです。これでインストール完了です。「閉じる」を押下します。
12. インストーラの削除確認:MAMPのインストーラを今後使用しない場合は,「ゴミ箱に入れる」を押下してください。

MAMPの起動

MAMPを起動して,ドキュメントルートの変更(必要に応じて)および各種サーバを立ち上げます。

13. アプリケーションフォルダ:アプリケーションフォルダよりMAMPフォルダを開きます。
14. MAMPフォルダ:MAMPフォルダ内にあるMAMPのアイコンをダブルクリックして,MAMPを起動します。
15. MAMPの初期設定:MAMPが起動したら,アプリケーションメニューの[MAMP] > [Preferences…]を選び,初期設定画面を表示してください。「Web Server」タブに移動して,必要に応じてドキュメントルートを変更します。ドキュメントルートを変更したい場合は,「Select」を押下して任意の場所を選択します。変更後,「OK」を押下します。初期値(/Applications/MAMP/htdocs)で問題ない場合は「Cancel」を押下します。
16. MAMP(サーバ起動前):Start Serversを押下してサーバを起動します。
17. MAMP(サーバ起動後):「Apache Server」「MySQL Server」とも右横に緑色の丸が表示されればサーバが起動した印となります。

Dreamweaverの設定

引き続き,Dreamweaverにテストサーバを設定します。Dreamweaverが起動していない場合は,Dreamweaverを起動してください。

18.  サイトの管理:Dreamweaverのアプリケーションメニューより[サイト] > [サイトの管理…]を選択して,サイトの管理画面を表示します。テストサーバを設定したいサイトを選択してダブルクリックします。
19. サイト設定(テストサーバ追加前):サイト設定画面で「サーバー」カテゴリを選択して,新規サーバーの追加アイコンを押下します。
20. テストサーバの追加:サーバー名を「localhost」,使用する接続を「ローカル/ネットワーク」,サーバーフォルダーを「/Applications/MAMP/htdocs」(MAMPのドキュメントルート),Web URLを「http:localhost:8888/」(8888はMAMPのApache Port)に設定して「保存」を押下します。
21.  サイト設定(テストサーバ追加後):localhostが追加されていることを確認し,テストサーバとして指定します。

以上,MAMPを使用したテストサーバの構築と,Dreamweaverにテストサーバを設定する方法をご紹介しました。

最後までご高覧いただきましてありがとうございました。


広告