実際に手を動かして、PHPを学んでいきます。架空のテニスサークルで利用するサイトを例に、Webアプリケーションを作成していきます。作成前に行う企画設計やデザインについても触れ完成形を考えながら開発を進めていきます。さらに機能を追加するにはどうしたら良いか、セキュリティーに対する知識など、発展的な内容についてもサポートしています。では、一緒にWebアプリケーションを作っていきましょう。

Webアプリケーションを作るにあたって、最初にすべきことは設計で、次のような手順で行います。

① Webアプリケーションを企画する

まずは、日常における問題や不便な点について考え、要望を洗い出してWebアプリケーションを企画します。ここでは、次のような企画を考えました。

<企画>

あなたは、大学のテニスサークルの広報・連絡担当になりました。去年まではメンバーが少なく、メールや電話で連絡を取り合っていましたが、今年は新入部員が30人も集まりました。

人数が多くなったので、ミーティングにメンバーを集めるのも、練習日の連絡をするのも、メールだけでは対応しきれなくなってしまいました。記録係が合宿で撮った写真をメンバーに見せるときも不便があり、紙の写真を印刷するのも手間でした。

このような経緯から、メンバーのためのサークルサイトを作ることにしました。

企画が決まったら、この Webアプリケーションを誰が使うのかという想定ユーザ(エンドユーザ)を決めましょう。

今回はテニスサークルのメンバーが使うため、想定ユーザは学生です。また、メンバーは広報や記録係などの役員として活動する人と、一般のサークル参加者という2種類のグループがあります。

②機能の洗い出しをする

では、この企画から機能の洗い出しをしましょう。大きなWebアプリケーションを作るのははじめてなので、まずは最低限、しかし今後の拡張性を考えて機能を考えましょう。

機能1:お知らせ

ミーティングや練習日の日程をWebサイト上に表示する機能。

お知らせを記載するのは広報係。

一般メンバーはお知らせ内容の確認ができる。

機能2:アルバム

アップロードした写真を見ることができる機能。

サークルメンバーなら誰でもアップロード・閲覧できる。

機能3:掲示板

ミーティングの日に全員が集まれないことを考慮した、意見交換のできる掲

示板機能。

サークルメンバーなら誰でも書き込みができる。

③画面遷移を考える

機能が決まったら、画面遷移を考えましょう。画面遷移とは、ボタンをクリックすると次の画面へ移動するという、Webサイト内での画面の動きのことです。

画面単位で全体の作成する分量を把握しておくと、どこまで開発が進んだのかつかみやすくなります。

④デザインを考える

画面遷移を考えたら、ざっくりした画面の内容を決めましょう。画面には、フォーム(入力欄や選択項目といったHTMLの部品)や見出しなどを配置します。例えばログイン画面なら、ユーザ名とパスワードを入力するためのフォームが必要ですね。

こうして検討すると、実際の Webアプリケーションへの具体的なイメージがわきますね。開発を進めていくうちに、画面遷移図に過不足が出ますが、慣れないうちはよくあることです。何度も企画、機能の洗い出し、画面遷移を考えるという作業をすることで、Webアプリケーションの定石のようなものが見つかります。

Bootstrap を使おう

個人で技術の練習をするときに、とても大事なものがなにかおわかりでしょうか。そう、モチベーションです。そっけない画面のためにプログラミングするよりも、美しい画面のほうがやる気が出てきませんか?

実際の開発現場においても、企画と設計が終わると、Webデザイナーからデザインのテンプレートをもらって、それを組み込みながらプログラムを書くことがよくあります。

WebデザインとWebアプリケーションは切っても切れない関係です。出来上がったものの善し悪しは、プログラムの速度や上手さだけでなく、使いやすく美しいデザインであることも関係してきます。

というわけで、今回は、世界でも人気のある Bootstrap という CSS フレームワークを使って画面を作っていきましょう。CSSとは HTMLを美しくスタイリングするための技術で、フレームワークというのは枠組みという意味です。

Bootstrapの枠組みにそってHTMLタグを書くと、とてもきれいな見た目のサイトを作ることができます。

では、サークルサイト開発の下準備をしていきましょう。まず、ドキュメントルートに新しいフォルダを作成します。ドキュメントルートとは、公開フォルダのことです。WebサイトのHTMLや画像ファイルなどを置くフォルダのことを指します。

XAMPPを「C:\xampp」にインストールしたので、ドキュメントルートは「C:\xampp\htdocs」です。このような、あるフォルダやファイルへの場所を指し示す文字列のことをパスといいます。

ドキュメントルート配下のフォルダ名は、URLの一部になります。サークルサイトのURLを「http://localhost/tennis/」にするため、ドキュメントルートである「C:\xampp\htdocs」の中に、「tennis」というフォルダを作成しましょう。

絶対パス

ドキュメントルートにindex.html というファイルがあるとき、これは「http://localhost/index.html」と指定できます。この httpなどから書き始める指定方法のことを絶対パスと呼び、インターネット上での場所を指しています。

フォルダはスラッシュ( / ) で区切ります。もしドキュメントルートに tennisというフォルダがあれば、URLは「http://localhost/tennis/」となります。

特に末尾のスラッシュの後にファイル名を指定しなければ、サーバの設定により、一般的に index.html や index.php といったファイルが表示されます。

末尾にスラッシュがない場合は、そのフォルダ名のファイルを探そうとします。「 http://localhost/tennis」の場合は、ドキュメントルートから tennis というファイルを探そうとします。ない場合はサーバの設定により、一般的には tennis フォルダのindex.htmlを探します。

相対パス

index.html から見ると、画像ファイルは「images/image.gif」と指定することができます。httpから指定しない、相対的なファイルの場所のことを相対パスといいます。

現在いる場所を示すのは「. 」です。サーバOS としてよく採用される Linuxではフォルダのことをディレクトリといい、現在のディレクトリをカレントディレクトリといいます。

画像ファイルのことを単純に「images/image.gif」と指定することもできますが、もっと丁寧に「./images/image.gif」とします。

逆に、images.gif から1つ上の階層である tennis フォルダの index.html を指定する場合は、「../index.html」というように、「 ../ 」で上の階層を表すことができます。2つ階層を戻る場合は「.../」というように、戻りたい分だけ続けます。

なぜ相対パスを使うかというと、絶対パスはドメイン(URLの~.comなどの部分)が変更になり、リンク切れになる可能性があるためです。他のサイトへのリンクでない限り、相対パスを使いましょう。

トップページの作成

ドキュメントルートに tennisフォルダを作ったら、Webサイト作成の下準備としてトップページを作りましょう。内容は次の通りです。tennisフォルダ直下に、それぞれ「index.php」と「navbar.php」とファイル名を付けて保存してください。保存したら、「http://localhost/tennis/」にアクセスし、正しく表示されるか確認しましょう。

トップページ (index.php)

<!DOCTYPE html>
<html lang="ja" >
<head>
<title>サークルサイト</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<!ナビゲーションバー(上の黒い帯)を読み込む部分>
<?php include('navbar.php'); ?>
<main role="main" class="container" style="padding: 60px 15px 0">
<div>
<h1>サークルサイト</h1>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src=“/docs/4.5/assets/js/vendor/jquery-slim.min.js”><\/script>')</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

(navbar.php)

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="./index.php"> サークルサイト</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">お知らせ</a></li>
<li class="nav-item"><a class="nav-link" href="#">アルバム</a></li>
<li class="nav-item"><a class="nav-link" href="#">掲示板</a></li>
</ul>
</div>
</nav>

実行結果

index.phpの内容を確認しましょう。1行目はドキュメントタイプ宣言で、HTMLのお決まりのコードです。2行目の<html>タグから末尾の</html>までがHTMLであることを意味しています。<head>~</head> タグは、このHTMLのヘッダ情報です。titleタグが、ブラウザのタイトルバーに表示されるタイトル名です。

linkから始まるタグは、CSSの場所を指定しています。今回、見た目のよいサイトを作るために Bootstrapを使うことを前の節で説明しましたが、そのCSSの場所を指定します。

<body>以降がブラウザ上に表示される部分です。

今回のデザインでは、ページの上部に黒い帯のようなナビゲーションバーを設置し、そこにお知らせ機能や掲示板へジャンプできるリンクを設置します。各ページでも同じメニューを使いたいので、メニュー部分だけ navbar.php として切り出しましょう。

この index.php と navbar.php がサークルサイトの基本のファイルになります。どこかに別名で保存して、必要なときにコピーできるようにすると、今後の開発が楽になります。