概要
WEBの基礎をビルトインウェブサーバーを使って実際に作ってみて学ぶ。
ビルトインウェブサーバー
PHPが用意している開発用WEBサーバー。コマンド一発で簡単にWEBサーバーを実行できる。
WEB基礎
仕組みは非常にシンプル。
「HTTPでリクエスト」して「レスポンスでHTMLを返す（HTML以外の場合もあります。）」
この仕組に例外はなく、サーバーの言語がPHPかJavaか、クライアントがPCかSPかなど関係なく動作します。
試してみる
準備
index.phpを作成する。
# 適当なフォルダ作成
mkdir sample
vi index.php
index.php
<?php
echo 'hello world!';
このファイルから標準出力として出力された文字列がレスポンスのbodyとなる。
実行
$ php -S localhost:3333
PHP 7.0.24 Development Server started at Mon Oct 23 18:55:40 2017
Listening on http://localhost:3333
Document root is /Users/naoki/develop
Press Ctrl-C to quit.
このログが表示されればOK。
確認
http://localhost:3333/
表示されました！
chromeのnetworkタブを確認
-
⌘ + ⌥ + Iで開き、⌘Rでページを一回リロードする。 -
networkを選択し、localhostを選択。
-
Headersを確認。 -
Generalを見ると、ブラウザに入力したURLにGETメソッドでリクエストをしていることがわかる。
-
Responseを選択。 - レスポンスのbodyを確認できる。今回は出力した
hello world!のみ表示されるはず。
- ここにHTMLタグを記述することでHTMLで画面を表示できます！
アクセスログを見てみる。
- サーバー側を見ると、アクセスログが表示されています。
[Mon Oct 23 19:07:25 2017] ::1:55898 [200]: /
- 先程のリロードで、
/へのアクセスが200（success）だったことを示しています。 -
index.phpは省略できるので/と表示されますが、明示的に指定することもできます。
http://localhost:3333/index.php
[Mon Oct 23 19:11:55 2017] ::1:57009 [200]: /index.php
- 画面の結果は同じで、アクセスログもこのように表示されることが確認できます。
HTMLを書いてみる。
- 以下のようにファイルを変更、
<?phpは不要です。
index.php
<html>
<body>
<h1>hello world!</h1>
</body>
</html>
- 画面を表示すると、
hello world!がh1表示されることがわかります。 -
networkのresponseも見てみましょう。
PHPを利用して動的に表示する。
- HTML上に表示する文字列をPHPからの出力にしてみる。
index.php
<?php
$title = 'hello php!';
?>
<html>
<body>
<h1><?php echo $title; ?></h1>
</body>
</html>
- リロードすると表示される文字が切り替わってるはず！
- さて
responseを見てみると・・・
- phpが実行された後の結果がresponseで返ってきています。
- phpがサーバーで実行されて、そこで出力された結果がresponseで送られてくるのでこのようなになります。
HTMLタグをPHPから記述してみる
- 文字列としてタグを出力してあげるだけでOK
- これを利用すればHTML構造も思いのままに動的に作成できます。
index.php
<?php
$title = '<h1>hello php!</h1>';
?>
<html>
<body>
<?php echo $title; ?>
</body>
</html>
GETパラメータで表示を切り替えてみる
index.php
<?php
$language = isset($_GET['language']) ? $_GET['language'] : 'english';
?>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h1>
<?php echo $language === 'japan' ? 'こんにちは世界！' : 'hello world!'?>
</h1>
</body>
</html>
- それぞれアクセスしてみる。
まとめ
普段はフレームワークを使うので、この記事のような記述方法でなく、テンプレートエンジンを利用してもっとわかりやすく実装していると思います。
しかし、内部の動作は同じで、テンプレートエンジンが動作して最終的にはHTMLを出力しています。
どのような言語やフレームワークであっても、ここで紹介した基礎的な部分は変わりません！
基礎を押さえておくことでWEB制作効率が上がるはずです！