PHP歴3ヶ月の僕がクイズ作成アプリを開発してみた

PHP
Programming

こんにちは。

先日、自作したPHPアプリを公開しました。僕は普段WEB制作の仕事をメインにしていますが、動的サイトを制作してみたくなり、PHPポートフォリオとしてアプリ開発に取り組みました。圧倒的な見切り発車で開発を始めたので、とても苦労したのですが、紆余曲折を経て何とかリリースにたどり着くことができました。

初学者の方で「WEBアプリを開発してみたい」と思う方も多いと思いますので、僕の経験が何かの参考になれば幸いです。

こちらになります。

アプリ名:mikeyanQuiz

https://quiz.mikeyan.biz/public

僕のPHPポートフォリオという位置付けです。

クイズを作成できるアプリ

ユーザーがクイズに解答できるクイズアプリはよく見かけますね。でもユーザーがクイズ問題を作成&管理できるサービスが少ないかなと思い、自分で開発することにしました。問題を作成する機能を特に重視したこともあり、ユーザーの管理画面を作り込んでいます。

主な特徴

直観的なUIでクイズを作成

クイズ作成画面を直観的な構成にしており、問題・選択肢・解答を入力していくだけで、簡単にクイズ問題を作成できます。

クイズ修正機能

クイズ問題を作成した後も、必要に応じて修正できます。

非公開設定が可能

作成したクイズについて、公開/非公開を選択することができます。非公開の場合は、他のユーザーには非表示となります。

クイズ解答機能

公開設定されたクイズについては、誰でも解答することができます。

クイズ履歴機能

クイズ履歴のページでは、自分の過去の解答結果をいつでも閲覧できます。

いいね機能

他のユーザーの公開クイズに対して「いいね」できます。

ゲストログイン機能

期間限定ですが、「ゲストログイン」を実装しています。ゲストログインでは、ユーザー登録しなくてもクイズ作成・解答ができます。

具体的な操作方法は、アプリの中で説明しています。ご質問があれば、お気軽にお問い合わせください。

TwitterのDMからもお問い合わせいただけます。

PHPアプリを開発しようと思ったきっかけ

このアプリは、僕のPHPポートフォリオという位置付けですが、元々は、プログラミング課題の成果物です。僕はCodelifeというプログラミングコミュニティ(マナブ さん主催)に所属しており、Codelifeの課題「自分でサービスを作ってみましょう」のアウトプットとしてPHPアプリ開発を始めました。コミュニティの皆さんが自由なテーマでWEBサービスを自作&発表しており、とても刺激を受けております。

言語としてPHPを選んだ理由

PHPはWEB制作でも活かせる

僕は主にWEB制作の仕事をしていますが、WEB制作でよく使われているWordPressというCMSは、PHPを使って構築されています。このような背景もあり、PHPは僕にとって馴染みがあるバックエンド言語です。PHPアプリを通して勉強したことはWordPressを使う際に有益活用できそうだと思いましたので、開発言語としてPHPを選びました。

クイズアプリを選んだ理由

クイズは楽しそう

クイズアプリを選んだ理由は、クイズが好きだからです。以上、、なのですが、以下少しだけ補足します。

幅広い年齢層への訴求力

テレビでもクイズ番組がたくさんありますよね。クイズは幅広い年齢層に訴求すると思います。

巣ごもり時代の強力コンテンツ

巣ごもり消費がトレンド化しているなか、手軽に遊べるクイズは需要は大きいはず。

学習ツールとして利用可能

mikeyanQuizはクイズアプリですが、少しカスタマイズすれば、オンライン学習ツールとしても利用可能です。学習用途の利用も視野に入れて開発しました。

コンテンツ更新で運用可能

クイズコンテンツを追加して更新しつつ運用すると面白いのではと考えました。

活用スキル

PHP、SQL、HTML/CSS、Javascript/jQuery、Photoshop

PHPでの実装についてもう少し具体的に言うと、ログイン機能、投票システム、データ更新という基本的な機能をベースに実装しています。

毎日SQL文を山ほど書きました。

開発スタート時の技術レベル

PHP歴:3ヶ月ほど

Dotinstallの動画を何本か見てアウトプット&初心者向けのPHP教科書を1冊読了したくらいのレベルで、PHPアプリの開発に取り掛かりました。やや無謀ででしょうか。僕はこういう挑戦が大好きです。

具体的な開発の進め方

アプリの設計、デザイン、バックエンド開発、フロントエンド開発、全てを自分一人で行いました。知識ゼロで見切り発車して、孤独に調べつつ勉強しつつの作業でした。正直つらたんです。

どんなスキルでも、初心者のうちは、誰かに聞くよりも自分でアウトプットしてみて、自分の頭でとことん考え抜く方が実力はつくと思っています。

オープンソースを解読しつつ開発

類似したWEBアプリのオープンソースをひたすら拾いつつ解読するという作業から始めました。しかし、大抵のオープンソースは商品ではないため、コードがあまり整理されていません。つまり、コードを理解したうえで自分のコードで書き換える必要があります。

具体的には、ソースのコードを自分なりに理解する→自分なりにコードを書いてみて実現したい機能を実装する。開発初期段階では、この作業を繰り返しました。

このように、ある程度はオープンソースで勉強可能です。しかし、次第に自分が実現したい機能とオープンソースとの差が大きくなってくるため、雲を掴むような気持ちで、ググりつつ勉強しつつ試行錯誤をしてコードを書いていきました。

自分でコードを書いてみても、特に開発初期段階では、必ずと言ってもいいほどエラーが発生します。結果的に、コードを書く→エラーが発生する→原因究明&エラー解消する→コードを書く、このループの繰り返しとなります。エラー解消のステップに一番時間がかかりました。

しかし、エラーを解消するにはコードの本質をしっかりと理解する必要があるため、エラー処理が一番勉強になりました。エラーに育てられたと言っても過言ではありません。

色々と回り道をしながら開発を進めていき、全体の開発期間は1ヶ月ほどでした。

SEO (内部対策)

hタグ

基本的な内部対策として、ページタイトルやキーワードにはhタグを使用しています。

例えば、「ページタイトル:公開中のクイズ、カテゴリー:SEO、問題タイトル:SEO (内部対策) – 1」の場合、以下のようなタグ付けをしています。

h1:ページタイトル

h2:カテゴリー

h3:問題タイトル

noindexの設定

プログラミング&SEO以外のカテゴリーのクイズページでは、メタタグにnoindexに設定しています。例えば「雑学」カテゴリーのクイズに対するインデックスが増えると、サイト全体のテーマがぶれてしまうため、SEO的な観点で少し工夫しています。

おわり

クイズアプリの詳細については、説明するよりも、実際に見ていただくのが一番だと思います。百聞は一見にしかず。実際に一度アプリを使って遊んでみてください。

アプリ名:mikeyanQuiz

https://quiz.mikeyan.biz/public

開発の具体的な方法などもう少し具体的に知りたい、という方がいらっしゃいましたら、お気軽にご連絡ください。ご意見・ご感想もお待ちしております。