ローカル開発環境

XAMPPで複数のサイトを制作しよう

XAMPPで複数のサイトを制作する方法を見ていきます。

XAMPPを使ってhtmlやphpをブラウザで表示してみよう」で書いたように、XAMPPは初期状態では複数のサイトを制作することに不都合がありますので、「xampp/htdocs/hoge/」に対してドメインをあてたいと思います。

hostsを編集しよう

windowsXP~8であれば「C:/WINDOWS/system32/drivers/etc/」の中にhostsというファイルがありますので、テキストエディタで開き、一番下に「127.0.0.1」と「あてたいドメイン名」を追加します。例えば「xampp/htdocs/hoge/」に対してlocal.devというドメインをあてたい場合は、

127.0.0.1 local.dev

を追加します。
これは「local.dev」にアクセスしたら127.0.0.1に繋げなさいという意味です。
127.0.0.1というのはお使いのPCのローカルホスト「http://localhost」のことです。
「.dev」というドメインは実際にはないと思うのですが構いません。.devを消して「local」だけでも構いません。
但し、実際に存在するドメイン(google.comなど)をhostsの中に記述してしまうと、そのサイトにアクセスできなくなってしまうので気をつけましょう。

Virtualhostの設定をしよう

hostsを設定しましたが、このままではlocal.devにアクセスしても「http://localhost」が表示されてしまいます。
表示したいのは「http://localhost/hoge/」なのでVirtualhostという機能を使います。
Virtualhostはひとつのサーバで複数のサイトを閲覧可能にする機能です。

Virtualhostを使うにはXAMPPをインストールしたディレクトリ「xampp/apache/conf/extra/」の中のhttpd-vhosts.confというファイルを編集します。
「##NameVirtualHost *:80」の頭の##を消し、「NameVirtualHost *:80」にします。これでVirtualhostが有効になりました。

次に一番下に下記を追加します。
※下記はXAMPPをCドライブの直下にインストールしている場合です。別の場所にインストールしている場合は置き換えて記述してください。

<VirtualHost *:80>  
DocumentRoot "C:/xampp/htdocs/"
ServerName localhost
</virtualhost>

<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/hoge/"
ServerName local.dev
</VirtualHost>

Apacheの再起動

2つの設定が終わったらXAMPPのコントロールパネルでApacheを再起動(stopをクリックして再度start)を行えば完了です。
うまくいっていれば「http://local.dev」にアクセスすると「xampp/htdocs/hoge/」の中が表示されると思います。

まとめ

複数のフォルダにドメインをあてるときは、上記と同じようにhostsに

127.0.0.1 あてたいドメイン名

httpd-vhosts.confに

<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/フォルダ名/"
ServerName あてたいドメイン名
</VirtualHost>

を書き加えればいくつでも増やすことができます。
言うまでもないと思いますが、hostsは自分のPCのみに有効なので他のPCからlocal.devにアクセスしてもXAMPPの中を見ることはできません。

XAMPPを使ってhtmlやphpをブラウザで表示してみよう

今回は、XAMPPを使ってhtmlやphpをブラウザで表示してみます。

XAMPPを起動した状態で「http://localhost」にアクセスすると、XAMPPをインストールしたディレクトリ「xampp/htdocs/」の中が表示されます。

しかし、index.phpの処理で、「http://localhost/xampp/」にリダイレクトされてしまいますので、「xampp/htdocs/」のindex.phpは名前を変えてしまいましょう。(index_backup.phpなど)

その後、「http://localhost」に再度アクセスすると今度はIt works!と表示されていると思います。
これは「xampp/htdocs/」の中のindex.htmlが表示されている状態です。

index.htmlを編集したり、他のhtmlやphpを追加してウェブサイトやシステムをローカルで動かすことができます。

しかし、「xampp/htdocs/」には、最初から複数のフォルダやファイルが存在しますので、そのなかにウェブサイト等のファイルを追加していくのはどうかと思います。

「xampp/htdocs/」の中にフォルダを作って、その中に1つのウェブサイトのデータを入れて「http://localhost/hoge/」にアクセスすることで管理しやすくなると思いますが、「http://localhost/hoge/」では何かと不都合もあります。

例えば、

<a href="/">hoge</a>

というリンクで「http://localhost/hoge/」を表示させることはできません。
「http://localhost」が表示されてしまいます。

hostsというものを使って「xampp/htdocs/hoge/」にドメイン(のようなもの)でアクセス出来るようにする方法について、「XAMPPで複数のサイトを制作しよう」をご覧ください。

XAMPPの初期設定をしよう

XAMPPをインストールしてローカル開発環境を作ろう」の記事の続きで、今回は初期設定を行っていきます。
セキュリティ設定・文字化け対策・タイムゾーンの設定を行っていきます。

セキュリティ設定

サイドメニューのセキュリティをクリックします。
XAMPP初期設定キャプチャ1

 

ページ中段の「http://localhost/security/xamppsecurity.php」をクリックします。
もしページが文字化けしている場合は、ブラウザのエンコードをsjisに変更してみてください。

XAMPP初期設定キャプチャ2

 

ID・パスワードの設定画面で、①~④の順番に、入力・クリックを行います。
ID・パスワードは後に使いますので必ずメモを取っておいて下さい。

XAMPP初期設定キャプチャ3

 

ここまで完了したらXAMPPのコントロールパネルでApacheとMySQLを再起動(stopをクリックして再度startをクリック)でセキュリティの設定が完了です。

XAMPPキャプチャ9

MYSQLとPHPの初期設定

XAMPPをインストールしたディレクトリ「\xampp\mysql\bin」の中に「my.ini」というファイルがありますのでテキストエディタで編集します。

[client]の下に下記を追加します。
default-character-set=utf8
[mysqld]の下に下記を追加します
character-set-server=utf8
skip-character-set-client-handshake
[mysqldump]の下に下記を追加します。
default-character-set=utf8
[mysql]の下に下記を追加します。
default-character-set=utf8

さらに、「\xampp\php」の中に「php.ini」というファイルがありますので続けて編集します。

下記の「;」を削除して有効にします。
;mbstring.language = Japanese
 ↓
mbstring.language = Japanese
下記の「;」を削除して有効にし、EUC-JPをUTF-8に変更します。
;mbstring.internal_encoding = EUC-JP
 ↓
mbstring.internal_encoding = UTF-8
下記の「;」を削除して有効にします。
;mbstring.http_input = auto
 ↓
mbstring.http_input = auto
下記の「;」を削除して有効にし、SJISをUTF-8に変更します。
;mbstring.http_output = SJIS
 ↓
mbstring.http_output = UTF-8
下記の「;」を削除して有効にします。
;mbstring.encoding_translation = Off
 ↓
mbstring.encoding_translation = Off
下記の「;」を削除して有効にします。
;mbstring.detect_order = auto
 ↓
mbstring.detect_order = auto
下記の「;」を削除して有効にします。
;mbstring.substitute_character = none
 ↓
mbstring.substitute_character = none
下記の「;」を削除して有効にします。
;mbstring.func_overload = 0
 ↓ 
mbstring.func_overload = 0
下記のOnをOffにします。
expose_php=On
 ↓ 
expose_php=Off
下記のEurope/BerlinをAsia/Tokyoに変更します。
date.timezone=Europe/Berlin
 ↓
date.timezone=Asia/Tokyo

ここまで完了したらXAMPPのコントロールパネルでApacheとMySQLを再起動(stopをクリックして再度startをクリック)でMYSQLとPHPの初期設定が完了です。

XAMPPキャプチャ9

実際にhtmlやphpを表示する方法については「XAMPPを使ってhtmlやphpをブラウザで表示してみよう」をご覧ください。

XAMPPをインストールしてローカル開発環境を作ろう

このブログではPHPやjQueryの記事をメインに書いていきますが、PHPを動かすにはサーバーが必要ですね。
レンタルサーバーを使用してもいいですが、間違ったコードを実行してしまい、サーバーに負荷がかかるとサーバー会社から注意の連絡が入ることもありますので、サーバーにアップする前に自分のPC内で動作チェックを行ったほうがいいです。

ということで、PC内に簡単にPHPを実行できる環境を作れる「XAMPP」をインストールしてローカル開発環境を作りましょう。
日本語にも対応してくれているので、とてもわかりやすいです。

ダウンロード

まずは↓こちらからダウンロードします。
≫ XAMPP

ボタンをクリックするとダウンロードが始まります。

XAMPPキャプチャ1

インストール

ダウンロード後、インストーラーを起動しインストールを進めます。
セキュリティソフトが影響するかもしれないと言われますがYesをクリックして先に進みましょう。

XAMPPキャプチャ1-2

 

Nextをクリックしましょう。

XAMPPキャプチャ2

 

 

インストールの内容を選択できますが、そのままNextをクリックして大丈夫です。

XAMPPキャプチャ3

 

 

インストール先もそのままで大丈夫です。

XAMPPキャプチャ4

 

 

さらに何か聞かれますが、ここではチェックを外してNextをクリックしましょう。

XAMPPキャプチャ5

 

最終確認です。Nextをクリックしましょう。

XAMPPキャプチャ6

 

インストールが開始されます。

XAMPPキャプチャ7

 

インストールが完了すると、コントロールパネルをスタートするにチェックが入っていると思いますので、そのままFinishをクリックします。

XAMPPキャプチャ8

 

XAMPPのコントロールパネルが開きます。ApacheとMySQLをスタートさせましょう。

XAMPPキャプチャ9

 

「http://localhost/」にアクセスするとXAMPPの初期画面が開きます。
日本語をクリックしましょう。

 

XAMPPキャプチャ10

 

これでインストールが完了です。簡単でしたね。
次は「XAMPPの初期設定をしよう」の記事を見ながら初期設定を行いましょう。

XAMPPキャプチャ11