WEBデザイナーの常識！？Xamppでローカル開発環境の構築

11チャンネルグループ定期ブログマガジン
Elevens

こちらは「これから風俗大手グループで “社会人として” 新たな一歩を踏み出す未来のアナタ」に送る定期ブログマガジンです。

これから羽ばたく新米WEBデザイナーさんの為に！

はいこんにちは！本社WEB制作部スタッフの345(みよこ)です。好きなノートパソコンはThinkPadシリーズ。IBMなんでレノボに身売りしてしまうん … 。

さて、今回はいつもと少し志向を変えて、当業界でWEBデザイナーを目指すヒト向けの技術系TIPSを書いてみたいと思います。

WEBデザイナーってどんな仕事なの？ってヒトは、こちらの記事を参考にしてみてくださいね↓

風俗業界ってどんな人が働いてるの？新米WEBデザイナーAさんの転機

この記事を書いてるヒト

名前：345(みよこ)
所属：本社WEB制作スタッフ
好きなことば：「動いてる間は触るな」

WEBサイト制作とローカル開発環境

さて、WEBサイトの制作にかかわっているヒトと、切っても切れない関係にあるのがHTML/CSSやJavaScriptなどのコーディングと呼ばれる作業ですよね。

WEB制作は一般的に、以下のような流れで制作していきます。

ローカルでファイルをコーディング
ブラウザによる動作確認
サーバー上にファイルをFTPでアップロード
WEB上のファイルをブラウザで最終確認

しかし、PHPなどのサーバサイドスクリプト言語を使ったプログラミングや、MySQLなどのRDBMSを使った少し複雑なサイトとなると、通常ローカルでは動作確認をすることができません。

かと言って、「コーディング→FTPへアップ→ブラウザ確認→またコーディング」なんて繰り返していたら、とっても非効率的。そんなときに便利なのがローカル開発環境なのです。

「ローカル」と「WEBサーバ」の違いって？

ここで言うローカルとは、インターネットなどのネットワーク上ではないという意味です。

個人のPC内部にあるエクセルなどのファイルを操作する　＝　「ローカルで作業している」と言い換えることが出来ます。

反対に、インターネットに接続され、誰でもブラウザでアクセスできるパソコンのことを「サーバー」と呼び、このサーバーコンピュータ（＝パソコン）へファイルを転送することを「アップロード」と読んでいます。

ローカル開発環境(仮想化)をする背景

上記で説明したサーバコンピュータの多くは「Linux」というOSが使われており、このLinuxOSは私たちが普段使っているWindowsやMacのような個人向けOSと比べると、大きく異なった仕様になっています。

Linuxには、WindowsやMacには入っていないようなアプリケーションがたくさん収録されており、WEB上(つまりLinuxOSが入ったWEBサーバコンピュータ上)のウェブサイトやウェブアプリケーションは、このLinuxOSに収録された様々なアプリケーションに依存して動作するようになっています。

つまり、私たちのWindowsやMacパソコンのローカルで、同じ環境を構築して動作確認をしようと思ったら、「Windows上にLinuxOS(とそれに付随するWEBサービス用アプリケーション群)をインストール」して「仮想WEBサーバの中で開発」する必要があるのです。

これらの仮想化・仮想開発環境のことを総称して「ローカル開発環境」と呼び、仮想化を実現するためのWindowsやMacOS用アプリケーションのことを「仮想化ソフトウェア」などと呼んでいます。

XAMPPを実際にインストールしてみよう！

色々書いてきましたが、結局はサーバーにファイルをアップしなくてもPHPを動かすことが出来るというのが一番のメリットなんですね。

さて、それではいよいよXAMPPでWindowsPC内に仮想サーバ（及びそれに付随するPHPアプリケーションなど）をインストールして、WEBサイトなどのローカル開発環境を構築していきましょー。

0. 概要

Xamppとは
XAMPP（ザンプ）とは、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもので、apachefriends.orgから提供されている。主として開発用あるいは学習用ではあるが、イントラネットなどにおいて実運用環境として使われることもある。

1. インストール

XAMPP公式サイトよりインストーラーをダウンロードして、任意のフォルダへインストールしてください。

この時、インストールの最後に不要なブラウザアドオンを一緒にインストールするかどうか聞いてくるので、不要ならチェックを外しておきましょう。

2. セキュリティ設定

インストール後、【http://localhost/】へアクセスして動作を確認しましょう。次に本家サイトのリファレンスを参考に、MySQLのパスワード設定なんかを行います。

参考
– Xampp PW変更
– XAMPPで簡単にWeb開発環境(Apache・MySQL・PHP)を整える設定手順

3. VirtualHost設定

このあたりはやらなくても大丈夫なのですが、「localhost」でアクセスするディレクトリや、「localhost」以外のルートドメインを使用したい場合はVirtualHostの設定が必要です。

この機能を使うと、好きなディレクトリ（フォルダ）をドキュメントルートにすることができるので、htdocs内のファイルに影響を与えることなく開発を進められるんですね。

httpd-vhosts.conf　で　NameVirtualHost *:80　のコメントアウトを削除

上記ファイルに以下のようにバーチャルホスト設定を記述

<VirtualHost *:80>
 DocumentRoot "#開発に使用したいディレクトリパス"
 ServerName #ドメイン名
</VirtualHost>

C:\WINDOWS\system32\drivers\etc 内の hostsファイルの編集
末尾に以下のようにホスト名とIPアドレスの対応記述を追加
```
127.0.0.1   #ドメイン名
```
コントロールパネルから、サーバを再起動して動作確認

4. MySql、PHP動作確認

【XAMPPコントロールパネル】から、ApacheとMySQLを起動します。ブラウザでルートドメイン【http://localhost/】へアクセスし、スクリプトが動くか確認しましょう。

おつかれさまでした！

どうでしょうか、意外と簡単ですよね？

これでWEBサーバーにファイルをいちいちアップしなくても、ローカル上でPHPやDBを使ったWEBサイトの開発が出来るようになりました！

Xamppは利用者も多く、他にも多くの機能がありますので、ぜひ興味のある方は詳しく勉強してみてくださいね！