プログラミング

【第5弾】PHP初心者でも簡単!『3択クイズ』Webアプリを作ってみよう!

PHP初心者でも簡単!『3択クイズ』Webアプリを作ってみよう!

こんにちは!

今回は、PHPで『月5万円』稼ぐためのロードマップの第5弾ということで、1つ目の課題である「3択クイズアプリの作成」を行っていきましょう!

PHPで『月5万円』稼ぐためのロードマップでは、手順通りに一緒に勉強していけば、全員がPHPで案件を受注できるレベルになることを目標としています。今回から、一緒に作成していく「3択クイズアプリ」に関しても同じです。初めて実際に何かを作るステップに入る方もいると思いますが、安心してください。

また、この第5段を見る前に、このPHPで『月5万円』稼ぐためのロードマップの使い方や、特長がわかる第1弾第2弾を是非一度お読みください!

【第1弾】PHP初心者の80%が間違えている5つの注意点を解説今回から定期的に投稿する「PHPで『月5万円』稼ぐためのロードマップ」は実際に、ゼロからPHP学習を始めて、仕事をもらい、Webアプリを...
【第2弾】PHPは需要ある?できることやHTML&CSSとの違いこんにちは! 今回は、PHPで『月5万円』稼ぐためのロードマップ第2弾ということで、PHPって一体なんなの?どこで使われているの?...

 

この先一緒に様々な制作物を作成していきますが、第1弾からの内容を読んでから取り組むのとそうでないのとでは、学習効率に3倍ほどの差が出てくると思いますので、半強制的に読むことをオススメします!笑

 

また、PHPで『月5万円』稼ぐためのロードマップで一体何が作れるようになるのか気になった方は、以下の第4弾をご覧ください。

【第4弾】月5万円稼ぐためのロードマップで何が作れるようになるの?こんにちは! 今回は、PHPで『月5万円』稼ぐためのロードマップの第4弾ということで、このPHPで『月5万円』稼ぐためのロードマッ...

 

こんな人にオススメ
  • PHPでWebアプリを作りたい!
  • まだ何もPHPで作ったことがない
  • 第4弾まで読んでくれた人

さて、ここからは実際に「3択クイズアプリ」を一緒に作っていく訳なのですが、HTML&CSSというプログラミング言語を使う場面がでてきます。

ライアン
ライアン
HTML&CSS?できるわけねえじゃん。

このような方は、HTML&CSS完全攻略ロードマップも公開しておりますので、先にそちらを読むことをオススメします。

【第1弾】HTML&CSSができるようになる思考法|HTML&CSS完全攻略ロードマップ今回から定期的に投稿する「HTML&CSS完全攻略ロードマップ」は実際に、ゼロからHTML&CSS学習を始めて、今ではW...

 

「3択クイズアプリ」の完成版

まずは、これから作成していく「3択クイズアプリ」の完成版をご覧ください。

 

「これが作れるようになるの!?」と思った方は安心してください。また、「いや、もっと本格的なのが作れると思う。」と思った人は、随所でカスタマイズをしながら、課題に取り組んでみてください!

「3択クイズアプリ」を作成するまでの流れ

3択クイズアプリだけではありませんが、基本的にはこの流れでWebアプリを制作するのが、一番PHPの役割をイメージしやすくてオススメです。

  1. 作りたいモノの構造を決定する
  2. HTML&CSSで枠だけを作る
  3. 作った枠に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の画像

ここでは、まず「クイズを始める前の画面」を作成していきます。

何でもいいのでゲームとかをイメージしていただきたいのですが、まずはゲームをスタートする前に「開始」のボタンなどが設置されている画面が表示されませんか?

「index.html」では、その画面を作成していきます。

具体的に実装する内容は、「クイズの概要」と「スタートボタン」だけであり、htmlファイルだけで十分実装できるので、ここではhtmlファイルで作成していきます。

quiz.php

ここでは、「クイズの問題文と選択肢を表示する画面」を作成していきます。

例題では、画面上部に「クイズの問題文」を配置し、画面下部「クイズの選択肢」を配置するような構成としました。

カスタマイズをすればするほど、プログラミングは上達すると思うので、デザインや機能についても、例題に追加する形でどんどんカスタマイズしていってください!

quiz_result.php

ここでは、「クイズの答えを表示する画面」を作成していきます。

右上に、「quiz.php」で決定した選択肢が合っていれば「正解」の文字を、間違っていれば「不正解」の文字を表示するようにして、画面下部では、正解だった選択肢にを付けて、それ以外の選択肢は色を薄くするというような設定にしています。

result.php

最後は、「クイズの結果を表示する画面」を作成していきます。

ここでは、「何問中何問正解したか」という情報と、「index.html」に戻るための、ボタンを設置しました。

 

ここまでが、各ファイルによる機能の詳細です。

プログラムの流れ

ここでは、上記で説明したそれぞれのファイル間でどのように処理が行われているのかを、図で説明します。

ただし、これはあくまでも例であり、もっと効率のよいプログラムや、追加したほうが良い機能などはたくさんあると思います。というか、カスタマイズを楽しんでもらうために、あえて「いやー、ここはこういう機能の方がいいんじゃない?」って思うところも、作ってあります。

プログラムの流れ

では、それぞれの流れについても説明しておきます。

  1. 「スタートボタン」がクリックされると「quiz.php」にジャンプする。
  2. 選択肢を選んで「決定ボタン」をクリックすると、「quiz_result.php」にジャンプする。
    その後、その問題のクイズの解答を表示して、「quiz.php」に戻る。
  3. と同じ(2問目)
  4. と同じ(3問目)
  5. 3問分の結果を「result.php」に送る。

また、問題数に合わせて、「」の繰り返し回数は変わってきます。

さらに、今回はこのようなプログラムの流れで「3択クイズアプリ」として実装していきますが、他にもプログラムの流れがあるため、考えられる余裕のある人はチャレンジしてみてください!

各ファイルに必要な画像のダウンロード

プログラムの流れを掴んでもらったと思うので、実際にプログラミングをしていく前に、今回の例題で必要となってくる画像ファイルをダウンロードしておきましょう。

画像のダウンロードは、以下のGoogleドライブからダウンロードできます。

ダウンロード先

また、ここでダウンロードできる画像は、あくまでも例なので、もし問題を変えたかったりした場合は、自身で画像を用意してください。

そして、ここでダウンロードしたファイルは、この後「index.html」といったファイルを作成していくフォルダに「img」というフォルダを作成し、その中に保存しておきましょう。

下の画像は、私のフォルダの画像です。参考にしてください。

ファイル内の様子

また、HTML・CSS・PHPファイルは以下のリンクからダウンロードできますので、これから先「あれ、なんかいじってたら分からなくなった!」などの場合に、適宜お使いください!

ダウンロード先

まとめ

今回は、「3択クイズアプリ」の作成における、実際に作成をしていく前段階までを理解していただきました!

次回の第6弾、ファイルを作成し、3択クイズアプリの形作りをしていきます!

PHPでWebアプリを作る手順の最初はHTML&CSSで枠作り!|3択クイズアプリの作成
【第6弾】PHPでWebアプリを作る手順の最初はHTML&CSSで枠作り!|3択クイズアプリの作成こんにちは! 今回は、PHPで『月5万円』稼ぐためのロードマップの第6弾ということで、1つ目の課題である「3択クイズアプリの作成」...

 

今回は、以上になります!質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください!Twitterも是非フォローよろしくお願いします!

また、新たなPHPで『月5万円』稼ぐためのロードマップのシリーズとして「HTML&CSS」が追加されたのでぜひぜひ一度訪れてみてください!

【第1弾】HTML&CSSができるようになる思考法|HTML&CSS完全攻略ロードマップ今回から定期的に投稿する「HTML&CSS完全攻略ロードマップ」は実際に、ゼロからHTML&CSS学習を始めて、今ではW...

その他、勉強法や就活、プログラミングに関する相談なども受け付けています!