リクルートサイトへCONTACTお問い合わせPR/BLOG広報・ブログはじめてのWebサイト!~第3回目~CSSHTMLTweet2020年より新しく技術開発推進部に仲間入りした女性社員3人が、ゆりちゃんに代わって情報処理技術についてはじめての方にも分かりやすく説明します。今回はWebサイトの仕組みに重要なWebサーバーについて学んでWebサイトを完成させてみよう。WebサーバーはクライアントのWebブラウザに対して要求された情報(ファイル)を提供する役割を持つコンピュータですね!Webページには、誰がいつ見ても同じように表示される静的なWebページとユーザの操作によって表示が変わる動的なWebページがありますよね。Webサーバーでの動的・静的な処理はどのような仕組みなんでしょうか。Webサーバーの処理について図にまとめてみたよ。Webサーバーの処理Webサーバーは大きく分けて、要求されたファイルをそのままWebブラウザへ送り返す静的な処理と何かしらの処理を行って要求された結果を返す動的な処理の2種類の処理があるよ。動的な処理では、Webサーバーの他にAP(アプリケーション)サーバーやリクエストに応じてDB(データベース)サーバーで処理を行っているんですね。これらの動きはサーバーサイドで動くプログラミング言語によって制御しているよ。クライアントサイドで動くクライアントサイド・スクリプトとサーバーサイドで動くサーバーサイド・スクリプトがありますよね!クライアントサイド・スクリプトの代表的なものはJavaScriptと聞いたことがあります!そうだね。最近では、Node.jsというサーバー側で動作するJavaScriptもあるよ。興味があれば調べてみてね。サーバーサイド・スクリプトの代表的なものは、PHPやRuby、Pythonなどが挙げられるよ。Preprocessor」。サーバーサイドでWebページを動的に生成するための、機能を多く備えているオープンソースの汎用プログラミング言語。HTMLやCSSなどで記述された静的なWebページに埋め込むことが可能。PHPはサーバーサイドの言語だから、PHPを動かすにはサーバーを用意する必要があるよ。方法は色々あるけど、今回は「XAMPP」というツールを使用してPCの中に仮想のサーバーを立ててローカル開発環境を作ってみよう。「XAMPP」は、どのようなツールなんでしょうか。Webアプリケーションの開発環境に必要なWebサーバーやデータベース、プログラミング言語などオープンソースソフトウェアをパッケージとしてまとめたものだよ。様々なOSに対応するクロスプラットフォームのXとApache(Webサーバー)、MySQL(データベース)、PHP・Perl(プログラミング言語)の頭文字をとって「XAMPP」なんですよね!インストール方法については、Webを参考にしてみてね。WORLD」をPHPで出力させてみよう!真似して記述してみてね。記述したPHPファイルはどこに保存すればいいんでしょうか。インストール後、「xampp」フォルダの下に「htdocs」というフォルダが作成されるよ。この「htdocs」フォルダの下にファイルを配置してみよう。「sample.php」という名前でフォルダへ保存しました!次は「XAMPP」のコントロールパネルを表示させて、「Apache」を起動させるよ。上手く起動できたら、ブラウザから「http://localhost:80/sample.php」へアクセスして確認してみてね。デフォルトでは「XAMPP」で使うポート番号は80番だけど、上手くいかない場合はポート番号の設定を確認してみよう。WORLD」が表示されました!トップディレクトリであるドキュメントルートにおいて、デフォルトの設定は「htdocs」フォルダ以下を参照しているんですね。PHPはHTMLファイルに埋め込むことができるから、今までに作成したHTMLファイルにPHPを埋め込んで拡張子を「.php」にすることでPHPが実行できるよ。PHPを使ってWebサイトを完成させていこう!なにかやってみたいことはあるかな?PHPを使って現在の日付を入れてみたいです!日付は「date()」関数を使用してPCの日付を取得するよ。()の中にフォーマットを記述して出力してみよう。デフォルトのタイムゾーンを設定することで、PCの日付がずれていても安心だよ。以下を参考にしてみてね。日付が表示されました!今度は動的なサイトらしいことを試してみたいです!Webサイトに来てくれた人の表示がアクセスごとに変わるような動きを入れてみたいです。それでは、Webサイトに来訪した人をカウントして人数を表示させるカウンタを作ってみよう。来訪者をカウントするテキストファイルを用意して、カウントを増やしていく処理を行うよ。以下を参考に記述してみてね。クライアント側やサーバー側の処理などWebサイトの仕組みについて学ぶことができ、とても面白かったです!もっと色々な表現ができるようデザインやPHP以外の他のプログラミング言語も調べて試してみようと思います!はじめてのWebサイトシリーズはこれで終了するよ。今回学んだことを応用して色々試してみてね。MAKERで作成しました。Reserved.お問い合わせ。