XAMPPで環境構築する

webプログラミングを学習する際に必要になってくるのが作成するwebアプリケーションを動かす為のソフトウェアやパッケージです。XAMPPにはそれら必要な物が入っていて、インストールすれば簡単に自分のパソコン内でwebアプリケーションを動かす環境ができます。ここでそれぞれソフトウェアやパッケージの説明を詳しくしてもまだ分からないと思いますので、実際にインストールして使って覚えていきましょう。

XAMPPをインストールする

まずはこちらの公式サイトにアクセスしてそれぞれのOSに合ったものをインストールしましょう。32bitのパソコンをお使いの方は64bit版をインストールしないよう注意してください。

windows向け
Mac向け

作成するwebページのPHPのバージョンなどでインストールするXAMPPのバージョンも違ってきますので、すでに7.2や7.3でwebページなどを作成している人はそれに合わせて、それ以外の人は最新のものをダウンロードしましょう。

ダウンロードが完了したらインストールを開始して、設定はデフォルトのままでnext連打で最後にfinishして完了させちゃいましょう。

コントロールパネルあるいはmanager-osxを起動させます。

Mac manager-osx

Macだとこんな感じのやつです。

開いたらMySQLってのとApacheを起動させます。

各項目を選択した状態でStartを押すと動きます。
windowsのコントロールパネルではApacheとMySQLの項目の右にStartがありますね。

動いてるか確認しましょう。ブラウザを開いてhttp://localhostを入力して接続してください。

こんな画面が表示されます。表示されない方は何らかの原因でApacheが起動していない状態だと思いますので、動いているか確認してください。Runningになってなかったりstopボタンが表示されていない場合は動いていません。よくあるのがport80を他のアプリケーションやソフトウェアなどが使っていてXAMPPのApacheが起動できないということです。portの使用状況の確認を行って、XAMPPを使う時は使っているアプリ等を停止させるか使用ポートを変更してください。

MySQL(MariaDB)パスワードの設定

データベースの設定を行います。http://localhost/phpmyadmin/にアクセスしてもらうと分かりますが、パスワード入力もない状態でアクセスできてしまいます。パスワードを設定しましょう。ターミナル を開いてください。

$ su
/Applications/XAMPP/xamppfiles/bin/mysqladmin -u root -p password
[Enter]
New password:
Confirm new password:

Macだとこんな風に、suコマンドでrootユーザーに変更し、mysqladminのパスを書いてパスワードの設定を行います。初めはパスワードを設定してないのでエンターキーを押下して新しいパスワードを設定します。

windowsでは以下の手順で変更します。

  • xamppをインストールしたディレクトリ¥mysql\binに移動
    デフォルトだとC:\xampp\mysql\binだと思います。
  • mysqladmin -u root passwordと入力しEnter
  • New password:で新しいパスワードを入力
  • confirm new password:で先ほど入力したパスワードを再入力

これでMySQLへの接続に必要なパスワードができたので確認してみましょう。

もう一度http://localhost/phpmyadmin/にアクセスしてみてください。

このようなエラーになって接続できません。これは先ほど設定したパスワードとphpmyadminへ接続する際に必要なパスワードが一致していないことで生じました。config.inc.phpに記述されている各情報が一致していないというエラーが出ていますね。パスワード以外にも情報が一致していなければ接続できません。

config.inc.phpの修正

config.inc.phpのパスワードを修正します。

【Mac】
vi /Applications/XAMPP/xamppfiles/phpmyadmin/config.inc.php

【windows】
C:¥xampp¥phpmyadmin¥config.inc.php

インストールしたディレクトに合わせて適宜対応してください。では修正します。

上の画像のような記述の箇所があります。パスワードがまだ空なので先ほど設定したパスワードを入力してください。
書けたら保存してもう一度http://localhost/phpmyadmin/に接続して入れるか確認してください。エラーになった場合はパスワードが間違えているか違う箇所を修正してしまっていると思うのでもう一度確認してください。

文字化け防止とタイムゾーンの設定

下記階層にあるphp.iniを編集します。Macの方はそのままターミナルでコマンドを入力してviで修正しましょう。

【Mac】
vi /Applications/XAMPP/etc/php.ini
【windows】
C:¥xampp¥php¥php.ini

php.iniの中のそれぞれの箇所を修正してください。各内容の詳しい説明は追々していきますので、今はこの修正をするとXAMPPでphpが上手く動くんだなと思っていてください。

output_handler

280行目付近にあるこのoutput_handler = の前にある;(セミコロン)を削除してください。
そして下のように修正してください。

この設定により、バッファを出力する際に文字コード変換が行われるようにします。

output_handler = mb_output_handler

default_charset

default_charset = の前にある;を削除してください。
もしデフォルトで値が設定ある場合も、何も書いてない場合も下のように修正します。

この設定でHTTPヘッダーに出力する文字コードをUTF-8にします。

default_charset = "UTF-8"

mbstring.language

mbstring.language = Japaenseとある文の前にある;を削除します。

この設定でデフォルトの言語を日本語にします。

mbstring.language = Japaense

mbstring.internal_encoding

mbstring.internal_encoding = EUC-JPの前の;を削除し、EUC-JPをUTF-8にします。

この設定でPHPのソースで使用するエンコード方式をUTF-8にします。

mbstring.internal_encoding = UTF-8

mbstring.http_input

mbstring.http_input = autoの前にある;を削除します。

この設定でHTTP入力用文字のエンコードお自動検出します。

mbstring.http_input = auto

mbstring.http_output

mbstring.http_output = SJISの前にある;を削除します。
SJISをpassに修正してください。

この設定でHTTP出力用のエンコードの自動検出をパスします。

mbstring.http_output = pass

mbstring.encoding_translation

mbstring.encoding_translation = Offの前にある;を削除します。

この設定でHTTP入力用文字のエンコードの自動変換をしないようにします。

mbstring.encoding_translation = Off

mbstring.detect_order

mbstring.detect_order = autoの前にある;を削除します。

この設定でPHPのソースで使用される文字のエンコードを自動から、検出順を下記のように指定します。

mbstring.detect_order = UTF-8,SJIS,EUC-JP,JIS,ASCII

mbstring.substitute_character

mbstring.substitute_character = noneの前にある;を削除します。

この設定でコードとして変換できない文字がある場合において代わりの文字を出力させないようにします。

mbstring.substitute_character = none

date.timezone

date.timezone=Europe/BerlinをAsia/Tokyoに修正します。

date.timezone=Asia/Tokyo

以上が、php.iniの設定となります。こういった環境を整えていないとシステムが意図しない動きをしたりもしくは動かない、その原因が分かりづらくなるのでプログラミングの勉強も大事ですがこういった環境設定もとても重要なので覚えておきましょう。

まとめ

  • XAMPPはwebアプリケーションを動かす為のソフトウェアやパッケージが入っている
  • config.inc.phpでDBのパスワードを設定する
  • XAMPPのphp.iniで文字コードやタイムゾーンなどの環境設定を行う

コメント

タイトルとURLをコピーしました