こんにちは！
今回は、PHPで『月5万円』稼ぐためのロードマップの第5弾ということで、1つ目の課題である「3択クイズアプリの作成」を行っていきましょう！
PHPで『月5万円』稼ぐためのロードマップでは、手順通りに一緒に勉強していけば、全員がPHPで案件を受注できるレベルになることを目標としています。今回から、一緒に作成していく「3択クイズアプリ」に関しても同じです。初めて実際に何かを作るステップに入る方もいると思いますが、安心してください。
また、この第5段を見る前に、このPHPで『月5万円』稼ぐためのロードマップの使い方や、特長がわかる第1弾や第2弾を是非一度お読みください！
この先一緒に様々な制作物を作成していきますが、第1弾からの内容を読んでから取り組むのとそうでないのとでは、学習効率に3倍ほどの差が出てくると思いますので、半強制的に読むことをオススメします！笑
また、PHPで『月5万円』稼ぐためのロードマップで一体何が作れるようになるのか気になった方は、以下の第4弾をご覧ください。
- PHPでWebアプリを作りたい！
- まだ何もPHPで作ったことがない
- 第4弾まで読んでくれた人
さて、ここからは実際に「3択クイズアプリ」を一緒に作っていく訳なのですが、HTML＆CSSというプログラミング言語を使う場面がでてきます。
このような方は、HTML&CSS完全攻略ロードマップも公開しておりますので、先にそちらを読むことをオススメします。
Contents
「3択クイズアプリ」の完成版
まずは、これから作成していく「3択クイズアプリ」の完成版をご覧ください。
「これが作れるようになるの！？」と思った方は安心してください。また、「いや、もっと本格的なのが作れると思う。」と思った人は、随所でカスタマイズをしながら、課題に取り組んでみてください！
「3択クイズアプリ」を作成するまでの流れ
3択クイズアプリだけではありませんが、基本的にはこの流れでWebアプリを制作するのが、一番PHPの役割をイメージしやすくてオススメです。
- 作りたいモノの構造を決定する
- HTML&CSSで枠だけを作る
- 作った枠にPHPで機能を追加していく
この説明だけでは分かりにくいと思うので、それぞれのステップについて少しずつ説明します。
作りたいモノの構造を決定する
まずは、最初に作りたいモノの構造を決定するというステップを行います。これがどういう意味かということを、3択クイズアプリを例に挙げて説明します。
「クイズを始めます」→「次にクイズの問題文を表示して、解答を選択させる画面」→「次にその答え合わせの画面」
「」で囲った簡単な仕組みを上に記述しました。
作りたいモノの構造を決定するということはこのような簡単な仕組みを考えておくということです。
HTML&CSSで枠だけを作る
次に、上のステップで考えた構造について、枠組みを作っていくというステップに入ります。
ここで枠組みと言いましたが、その枠組みは「HTML&CSS」を使って作っていきます。
PHPはHTML＆CSSで書かれたパーツに機能を加えていくだけなので、まずは「HTML&CSS」で作られた枠組みを整えておくことで、PHPで機能を追加していくときのイメージが格段にしやすくなります。
作った枠にPHPで機能を追加していく
最後のステップは、前段階で作成した枠組みに機能を加えていきます。
ここで言う機能とは、前段階で作ったパーツの表示順をプログラムによって確定したり、選択した内容によって表示する内容を変えたりといったことです。
この段階を経ることで、Webアプリを完成させます！
まずは構造を理解する
必要なファイル数
まず、結論から言いますと、必要なファイル数は8個です。
そう思われた方がほとんどだと思います。しかし、8個と言っても、phpファイルは3つだけですし、そこまでビビらないでください！
では、それぞれのファイルの構成について説明します。
ファイルの構成
・php：3個
・HTML：1個
・CSS：4個
CSSファイルが4個とかありますが、使いまわす部分がほとんどであるため、それほど大変ではありません。また、先にHTML&CSSについて知りたいという方は、HTML&CSS完全攻略ロードマップをご覧ください。
各ファイルに実装する機能の詳細
ここでは、上記で述べた各ファイルでどういう機能を実装していくかを説明していこうと思います。また、CSSファイルについては、それぞれの「htmlファイル」と「phpファイル」の見た目を整えるという役割なので、説明を省略します。
また、各ファイルの名称については、「3択クイズアプリ」を作成する上で自由に設定して頂いて構いません。「aiueo.php」とか「anpanman.html」とかなんでもオッケーです！
実際に次の記事で一緒にファイルを作成していってもらいますので、今回はファイル作成はせずに、各ファイルがどのような機能を持っているのかということを理解してもらえれば大丈夫です！
index.html
ここでは、まず「クイズを始める前の画面」を作成していきます。
何でもいいのでゲームとかをイメージしていただきたいのですが、まずはゲームをスタートする前に「開始」のボタンなどが設置されている画面が表示されませんか？
「index.html」では、その画面を作成していきます。
具体的に実装する内容は、「クイズの概要」と「スタートボタン」だけであり、htmlファイルだけで十分実装できるので、ここではhtmlファイルで作成していきます。
quiz.php
ここでは、「クイズの問題文と選択肢を表示する画面」を作成していきます。
例題では、画面上部に「クイズの問題文」を配置し、画面下部「クイズの選択肢」を配置するような構成としました。
カスタマイズをすればするほど、プログラミングは上達すると思うので、デザインや機能についても、例題に追加する形でどんどんカスタマイズしていってください！
quiz_result.php
ここでは、「クイズの答えを表示する画面」を作成していきます。
右上に、「quiz.php」で決定した選択肢が合っていれば「正解」の文字を、間違っていれば「不正解」の文字を表示するようにして、画面下部では、正解だった選択肢に〇を付けて、それ以外の選択肢は色を薄くするというような設定にしています。
result.php
最後は、「クイズの結果を表示する画面」を作成していきます。
ここでは、「何問中何問正解したか」という情報と、「index.html」に戻るための、ボタンを設置しました。
ここまでが、各ファイルによる機能の詳細です。
プログラムの流れ
ここでは、上記で説明したそれぞれのファイル間でどのように処理が行われているのかを、図で説明します。
ただし、これはあくまでも例であり、もっと効率のよいプログラムや、追加したほうが良い機能などはたくさんあると思います。というか、カスタマイズを楽しんでもらうために、あえて「いやー、ここはこういう機能の方がいいんじゃない？」って思うところも、作ってあります。
では、それぞれの流れについても説明しておきます。
- 「スタートボタン」がクリックされると「quiz.php」にジャンプする。
- 選択肢を選んで「決定ボタン」をクリックすると、「quiz_result.php」にジャンプする。
その後、その問題のクイズの解答を表示して、「quiz.php」に戻る。 - ②と同じ（2問目）
- ②と同じ（3問目）
- 3問分の結果を「result.php」に送る。
また、問題数に合わせて、「②～④」の繰り返し回数は変わってきます。
さらに、今回はこのようなプログラムの流れで「3択クイズアプリ」として実装していきますが、他にもプログラムの流れがあるため、考えられる余裕のある人はチャレンジしてみてください！
各ファイルに必要な画像のダウンロード
プログラムの流れを掴んでもらったと思うので、実際にプログラミングをしていく前に、今回の例題で必要となってくる画像ファイルをダウンロードしておきましょう。
画像のダウンロードは、以下のGoogleドライブからダウンロードできます。
また、ここでダウンロードできる画像は、あくまでも例なので、もし問題を変えたかったりした場合は、自身で画像を用意してください。
そして、ここでダウンロードしたファイルは、この後「index.html」といったファイルを作成していくフォルダに「img」というフォルダを作成し、その中に保存しておきましょう。
下の画像は、私のフォルダの画像です。参考にしてください。
また、HTML・CSS・PHPファイルは以下のリンクからダウンロードできますので、これから先「あれ、なんかいじってたら分からなくなった！」などの場合に、適宜お使いください！
まとめ
今回は、「3択クイズアプリ」の作成における、実際に作成をしていく前段階までを理解していただきました！
次回の第6弾、ファイルを作成し、3択クイズアプリの形作りをしていきます！
今回は、以上になります！質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください！Twitterも是非フォローよろしくお願いします！
また、新たなPHPで『月5万円』稼ぐためのロードマップのシリーズとして「HTML&CSS」が追加されたのでぜひぜひ一度訪れてみてください！
その他、勉強法や就活、プログラミングに関する相談なども受け付けています！
