【初心者】xamppとsmartyを使ってWEB開発環境を構築しよう！

##はじめに
デザイナーとして（※正確にはフロントエンドエンジニア）未経験入社後、WEB開発の理解を深めるために開発研修もしてもらいました。研修前に環境構築をすることになったのですが、xamppとsmartyを使った環境構築方法をネットで調べても、なぜか書いてある通りに出来なかったので参考まで。

##xamppとは
WEB開発に必要なソフトをまとめて扱うフリーのパッケージソフトのことです。xamppをインストールするだけでWEB開発が出来るようになるという便利なソフトです。今回はv3.2.3をインストールしました。

　X：クラスプラットフォーム
　A：Apache
　M：MySQL
　P：PHP
　P：Perl

##smartyとは
PHPのためのテンプレートエンジンのことです。今回は研修課題で勧めてもらったので使用してみましたが、smartyが無くてもWEB開発は可能です。

##環境構築手順
####1.xamppをインストール
xamppのインストーラーをダウンロードしましょう。
画面に表示された通りに進めていくと、Cドライブ直下にxamppというフォルダが作成されます。

####2.xamppが動作するか確認
xamppを起動し、Apacheのstartボタンをクリックします。
正しく起動できると下記画面のようになります。起動できない場合はエラー内容が赤字で表示されます。
<img width="498" alt="xampp_起動.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390061/4fc28be7-fa95-9201-4265-a5f56f1cc959.png">

xamppが正しく起動したら、ブラウザを立ち上げます。URL欄に「localhost」と入力しEnterキーを押下するとxamppのページが開きます。ここまで出来ればxamppのインストールが正しく行えていることが確認できます。
<img width="959" alt="xampp_top.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390061/3b1e1c6d-3b34-dbfd-b227-23df873247cc.png">

####2.smartyをインストール
smartyはインストーラーがあるわけではなくzipファイルをダウンロードすることになります。ダウンロード出来たら解凍しましょう。

####3.xamppにsmartyを設定
####①解凍したsmartyフォルダにあるibsフォルダをそのままコピーし、C:\xampp\phpに配置
フォルダ名はそのままでも動きますが、分かりやすいようにフォルダ名をlibsからsmartyに変更しておくといいと思います。

####②php.iniをバックアップ後、インクルードパスを変更
php.iniはc:\xampp\apache\bin配下にあるらしいのですが、どのサイトを見ても自分がダウンロードしたフォルダと配置場所が異なっていました。
ただ、フォルダ内をphp.iniで検索したらファイル自体は1つしかありませんでしたので、もし同じ場所になかった場合は検索して探してみてください。
php.iniをバックアップ後、ファイルを開きコメントアウトされていないinclude_path=""行に、下記と同じインクルードパスに変更します。Cドライブ直下にxamppがない場合は正しくなるように書き直してください。

~~~
    include_path　=".;C:\xampp\php\pear\;C:\xampp\php\smarty\"
~~~

####③変更したphp.iniをc:\xampp\apache\binに配置
②でc:\xampp\apache\binに存在していたphp.iniを変更した場合は必要ありませんが、他の場所にphp.iniがあった場合はコピーしてこちらに配置してください。ここにphp.iniがないと上手く動作しません。

####④c:\xampp\htdocsに任意フォルダを作成
新しいフォルダを作成します。フォルダ名は何でも大丈夫です。私はsampleにしました。

####⑤④で作成した任意フォルダ配下に、templatesとtemplates_cという2つのフォルダを作成
このフォルダ名は同じように設定します。
これでxamppとsmartyの設定は完了です。

##”Hello World"を表示してみよう
正しく設定出来たか確認しましょう。

####①テンプレートファイル（拡張子：tpl）を作成する
まず、下記のソースコードをコピーし、ファイル名を「index.tpl」で保存します。
index.tplは"c:\xampp\htdocs\任意フォルダ名\templates"に配置しましょう。

~~~html
    <!DOCTYPE html>
    <html lang="ja">
        <head>
             <title>Smarty動作確認</title>
        </head>
        <body>
             Hello World!!<br>
             私の名前は{$name}です。
        </body>
    </html>
~~~

####②PHPファイル（拡張子：php）を作成する
先程と同じように、下記のソースコードをコピーし、ファイル名を「index.php」で保存します。
index.phpは"c:\xampp\htdocs\任意フォルダ名"に配置しましょう。

~~~php
    <?php
        // Smartyを使用するためのおまじない1（外部ファイル取り込み指示）
        require_once('Smarty.class.php');
        // Smartyを使用するためのおまじない2（Smartyクラスの呼び出し）
        $smarty = new Smarty;
        // テンプレートフォルダの場所指定
        $smarty->template_dir = './templates/';
        // コンパイル用のテンプレートフォルダの場所指定
        $smarty->compile_dir = './templates_c/';
        // nameという変数にSunSeerという文字を代入
        $smarty->assign('name', 'SunSeer');

        // ディスプレイ表示
        $smarty->display('index.tpl');
    ?>
~~~

####③xamppを起動する
xamppを起動し、Apacheのstartボタンをクリックします。

####④ブラウザで表示する
URLは"localhost/任意フォルダ名/作成したphpファイル名"とすると確認することが出来ます。正しく表示出来れば、画面左上に内容が表示されます。

<img width="279" alt="xampp_hello.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390061/cf225deb-416b-f452-09da-a80ccd1f8db8.png">

##コンパイルファイルの存在を忘れずに！
環境構築時にtemplates_cというフォルダを作成したのに何も保存していないではないか、と思うかもしれませんが、このフォルダはコンパイルされたファイルを格納するために必要なフォルダになります。コンパイルについては省略しますが、smartyを使用してテンプレートファイルを作成した場合、templates_cフォルダには自動的にコンパイルされたファイルが保存されています。templatesフォルダに存在するtplファイルに対応したものがtemplates_cに存在しないと上手く表示されなくなりますので、今まで出来ていたのに出来なくなった！と思ったときはtemplates_cフォルダにあるコンパイルファイルを削除してみてください。

##まとめ
こうして文字にしてみると、なぜこんなに簡単な環境構築に手間取ったのか今となっては謎ですが、xamppをインストールすることで、簡単にWEB開発環境を構築することが出来ました。
まだ準備が終わっただけなのにすでに達成感がありますが、これからPHPを勉強して研修課題に取り組みたいと思いますっ！！