お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

作業効率が違う！ローカル環境！

jsdoitさんではそろそろキツくなってきたような気がしてきました。
最初にやっとけばよかったね。と思ったのですが、良い機会なのでローカル環境を構築しましょう。

ローカル環境って何さ

簡単に言うと、自分のPCがWebサーバになります。
何もしなければIPとかで他の人がアクセスして作ったWEBページとかを 見れるようになります。

サーバ構築とか聞いてないですしおすし

Linuxがねぇとかアレコレは正直特に気にしなくても大丈夫です。
世の中には便利なものがあります。
それが今回インストールしてもらう【XAMPP】です。

では早速やってしまいましょう

DLページ：https://www.apachefriends.org/jp/index.html
ここから使用されているOSのものをDLしていきましょう。
http://nekomimi-school.com/archives/3506/
設定については基本上記ページが良くできているので、これ通りに進めて行きましょう。

インストールできた！Apache起動した！

では早速接続してみましょう。
ローカルのxampp
やたらオレンジが主張するページがでてきましたか？☆-(ノﾟДﾟ)八(ﾟДﾟ )ノｲｴｰｲ☆
これであなたのPCはWebサーバへと進化しました！！！

…終わり！？

では続いて、作業環境でも設定しましょうか。
デフォルトでは【/xampp/htdocs/】以下がいわゆる【ルートディレクトリ】になります。
※変な書き方ですが、僕のフルパスを書いてもしょうがないのでこんな書き方します。
ここでやってしまっても良いのですが、プロジェクト毎に変えたい場合は一工夫する必要があります。
【バーチャルホストを設定する】とでも言います。
ひとつのIPアドレスで複数のウェブサイトを持つことができるようになります。

サーバの設定ファイルをいじるぞ！！いいか！いじるぞ！

【/xampp/apache/conf/extra/httpd-vhosts.conf】
このファイルをテキストエディタで開いてください。
呪文が書いてありますね。正直この辺の説明をする意味はありませんので
追加するものをテンプレートとして置いておきますので、ファイル一番下にコピペして、編集していきましょう
言うほど詳しくはないので簡単な補足だけになります。 

#バーチャルホスト設定 【プロジェクト名】
#ポート番号：【ポート番号】
#格納ディレクトリ：【格納ディレクトリ(フルパス)】
Listen 【ポート番号】
NameVirtualHost *:【ポート番号】
<VirtualHost *:【ポート番号】>
 ServerAdmin  admin@localhost
 DocumentRoot  "【格納ディレクトリ(フルパス)】"
 ServerName  localhost:【ポート番号】
 ServerAlias  localhost:【ポート番号】
 ErrorLog  "logs/【任意の名前】-error.log"
 CustomLog  "logs/【任意の名前】-access.log" combined

 <Directory "【格納ディレクトリ(フルパス)】">
  Options Indexes FollowSymLinks MultiViews Includes ExecCGI
  AddType text/html .shtml
  AddHandler server-parsed .shtml
  AddHandler cgi-script .cgi .pl
  AllowOverride All
  Order allow,deny
  Allow from all
 </Directory>
</VirtualHost>

１行目～３行目

先頭に#がついています。
この行は【コメントアウト】扱いとなり、いわゆるメモです。 あってもなくてもOKです。

４行目～６行目

任意のポート番号を付けます。
が
ポート番号には設定できないものもあったりします。
どれが使えるのかというお話ですが
【/xampp/install/portcheck.bat】を実行します。
すると【portcheck.ini】が生成されますので、これをテキストエディタで開きます。
で、そのファイルの中にはいくつか記述があると思います。
FREEの所を使えばいいんだ！(*^◯^*)と思われがちですが
【記述してあるポート番号以外】を使用することをオススメします。
FREEっていうてますけど、使われる可能性があるものなので。
ポート番号は【Listen】で設定したものと同じものを記述します。

７行目

変更する必要はないのでこのままで

８行目

ここは、【どこをルートにするのか】を決めます。
僕の場合は、外部HDDに設定しています。
絶対パスで記述してください。
なお、場所は特にありませんが、OSのコアファイル部分はダメですよ。

９行目～１０行目

【Listen】で設定したポート番号をここにも入れてあげます。

１１行目～１２行目

エラーログやらアクセスログを保管する場所です。
必須ではありませんが、名前が被るのは個人的にイヤなので、プロジェクト毎に名前を変えています。

１３行目～１４行目

１３行目はただの改行です。
１４行目からは、そのサーバの設定(.htaccessっぽいものと思っていただいてOKです。)となります。
格納ディレクトリのパスを設定していただく以外はもうこのままでOKです。

設定が終わればファイルを保存してください。

保存が終わったら

XAMPPのコントロールパネルから一回Apacheを再起動します。
STOPしてからまたSTARTさせてください。
ここで立ち上がらない場合は、先ほどのファイルに記述ミス等があることになりますので
修正をします。

Apacheの起動がでけた！

では設定したディレクトリの場所に適当にhtmlファイルでもなんでもよいので置いてみましょう。

アクセスをするぞおおお！！！

さて、いよいよアクセスをします。
先ほど設定したポート番号を使用します。
URLの記述は２パターン
１：http://localhost:【設定したポート番号】
２：http://【自分のIPアドレス】:【設定したポート番号】
です。
２番は他人からも見えるのでローカルを確認してもらう場合はこっちが便利です。
IP結構変わったりしますけどね！！！

お、おい…自分のIPアドレスってなんだよ…

■windowsをお使いの方
１：プログラムとファイルの検索で(スタートおして出てくる所にあるアレ) cmd と打ち込む
２：コマンドラインが立ちあがりますので、ipconfig と入力してリターン
３：もにょもにょ出てきますが、この中の IPv4 アドレス が自分のIPアドレスです。

■MACをお使いの方
１：ターミナル(?)で ifconfig と入力してリターン…？
２：いっぱい出てくると思いますが、その中で、 inet から始まっている部分が自分のIPアドレスです

たぶんこれでOK!

時間が心配ですね。

えーっと、ここまでやりましたので時間が足りるかどうか怪しい所です
今までできなかった【外部ファイル参照】やります。ほんとすいません。

んだよ。外部ファイル参照って！！！！

CSSとか今までjsdoitでサクサクやってましたが
今回からはそうもいきませぬ。
CSSやJSは外部ファイル化してhtmlで読むのが常識です！

JSは後で！CSSを読み込む方法！

<link rel="stylesheet" type="text/css" href="./css/style.css" media="all" />

これでぇす！
これをheadタグ内に記述します。
では内容について順番に

rel
stylesheet と記述します。
type
text/css と記述します。
href
読み込むファイルの場所です。
相対パス、絶対パスどちらで記述いただいてもOKです。
media
何も考えずallでいいと思いますよ。

深く考えずに、CSSファイルを作って読み込んでみましょう

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ページタイトル</title>
<meta name="description" content="ページ概要">
<meta name="keywords" content="キーワード1,キーワード2">
<link rel="stylesheet" type="text/css" href="./css/style.css" media="all" />
</head>
<body>
<p class="test">＼( 'ω')／ウオアアア アーッッッ！！</p>
</body>
</html>
@charset "UTF-8";

.test
{
 font-size:30px;
 font-weight: bold;
}

読み込みの順番について

上から記述した順番に読み込まれていきます
なので、被った内容は上書きされます。
なおこれはJSでも同じ事ですので、ご注意ください。←じゅうよう！！！

ディレクトリ構造について

これからローカルベースになるのですが、そこで僕なりにやりやすい方法を一つ。
【ディレクトリ構造とファイル名は統一してしまう。】
って事です。
例えばこの勉強会ページ何かは
【変動ディレクトリ名】
┣ css
┃┗ style.css
┣ js
┃┗ module.js
┣ img
┃┗ 【画像は変動】
┗ index.html

としています。
こうする事で、index.htmlで読み込むCSSとJSのパスは相対パスで書いてしまえば
コピペして使えますよね！！！
って事です。