【個人開発レポート】クイズメーカーってサービスを作ったんでこだわったこととか語らせてくださいよ

このたび、クイズを作れるプラットフォームを作って公開しました。noteに書くのは久しぶりでして、冒頭から余談になるのですがnoteに投稿をするのは四半期に1~2回程度、個人でなにかのサービスをリリースしたときのみにしています、というか、なってしまっています。多分noteユーザーでもオンリーワンの使い方だとは思うんですが、何の価値もないですね…。

開発の動機

自分は勉強という行為が嫌いというわけじゃないんですが苦手だと自覚しています。しかし、小学生時代のときに国語の先生が作ってくれた「漢字の部首かるた」による漢字学習がとても面白くて、未だにしっかり覚えています。こざとへん!!りっしんべん!!!
と、このようにゲーミフィケーションによる学習なら非常に苦もなく行えるし割と好きという事を思い出したり、友人の酒井さんが作ったHTML5かるたのおかげでタグの意味を記憶することができたという体験がありまして「なんかゲーミフィケーションで勉強出来るもんを作りたいな」と思っていたときに、TwitterでBuzzFeedの10問クイズがしょっちゅうバズっているのを見ていて「こういうのが作れるクイズプラットフォームを作ればいい。それを勉強でも使えるような形にして作っておけば俺得だ」というところまでが動機のストーリーです。

開発の体制

例によって設計・デザイン・開発・お絵かき、何もかも全て自分一人でつくっています。マジぼっちですね。これをお読みいただいている皆様はこういう大人にならないようにしてください。
なお、一人で全部やって、実際に作業した開発期間は多分まる二ヶ月弱ぐらいでした。

こだわったポイント

ちょっとだけ語らせてください。

● 見た目のデザイン
クイズを作る人には楽しそう、すぐ使えそう、という印象をもってもらうためにトップページのメインカラーにはバーンと黄色。あまりゆるくなりすぎないよう、游ゴシックと少しソリッドに描いたアイコンで締めつつ、輪郭線の類いには丸みをもたせるようにしました。

逆に、クイズの回答をしてもらうためのページはコンテンツの背景色を白が占めるようにして、クイズの内容の印象が左右されないように、黄色はアクセントカラー程度の割合になるようにしています。

● 体験のデザイン
・動くキャラクター
読み込み中部分や見出しにGIFアニメーションで動かしたキャラクターを配置しています。単純に賑やかしとしての演出と、SPAもどきの実装をしているため読み込みでカクつきが出てしまうのですが、そういう挙動を意識させないために注意を誘導するための要素として配置しています。

・答え合わせ時の一連の挙動
現在の仕様は最後に採点ボタンを押したときに1問ずつ正否がわかるアニメーションが展開された後に答え合わせができる結果画面が出現する動きになっています。
実は、行動心理学的にはBuzzFeedよろしく1問ずつ回答のフィードバックが得られる方が良いらしい…のですが、今回は複数チェック回答や文字列入力回答を実装したため、そのタイミングでの採点が難しくなってしまったというところ(択一形式オンリーの問題であれば選択肢をクリックした瞬間に答え合わせが出来るけど、それが難しい)。かといって、「答え合わせ」みたいなボタンを置いて逐一クリックさせるのも不格好…。実際のペーパーテストで、後の設問を読んで前の間違いに気づいたりすることもあるよな…ということで、今回は行動心理学ではなく自分の感性を信じることにしました。

● 択一/複数/文字列での回答形式のサポート
大変なんだよ…この部分だけで結構な時間をかけました。
ただ、勉強に使いたいなという目的があったのでここは外せませんでした。

● カンニング対策の実装
地味に頑張ったポイントです。ソースコードを見たりJSをのぞき見しても答えは絶対わからないようになっています。たかだか遊びでクイズをする奴がそんなことをするのか?といえば恐らく99%の利用者はそんなことをしないんですが、残り1%の人間に吠え面をかかせてやろうと思い、パフォーマンスや実装の楽さを犠牲にしても作りきりました。

● セキュリティ対策
ここはぼちぼち頑張りました。今回はAPIとルーティングCakePHP、フロント描画をRiot.jsの組み合わせで実装していて、データのやり取りはほぼ全てAPIから行っています。そのため、不正なリクエストなどに対して対抗できるように作成しないと、データを盗まれたり改ざんされたりする恐れがあるため、そういった行為を行えないように構築しています。
というのも、以前メモサービスを出したときに、そういう攻撃をくらってデータを消されたりしたので…。クッソ…誰だよ…出会ったら右頬ぶん殴ってやる…。とは思うものの、この辺は防御対策ができてない自分も悪いのでおあいこです。

以上、こだわったポイントを語らせていただきました。

リリースしてみて

正直なところ滑り出しはそこまで手応えが無いなぁー…という感じです。とはいえ、こういったCtoC型のサービスを作るのは実は初めてになるので、変に焦らずじっくり育てて行ければなと思っています。

作ってもらったクイズの紹介をいくつか

友達や利用者の方に作ってもらったクイズを紹介させてください。こういうクイズが作れます。

iPhone筐体クイズ
https://quiz-maker.site/quiz/play/dSIBJc20181024075724
Appleへの敬虔な信仰を試される歴代のiPhoneを当てるクイズ。マジで難しくて何回やってもわからない。

Hello Worldクイズ
https://quiz-maker.site/quiz/play/YhiFmE20181025123652
自分は半分ぐらいしか正解できなかったのでエンジニアを名乗るのを辞める覚悟を決めないといけないかもしれません。

ダイの大冒険クイズ
https://quiz-maker.site/quiz/play/s7cL3T20181026010218
昔あんなに読んだのに…!!!全然わからない…!!!

これからやること

サービスの公式アカウントの運営、というものをちゃんとやってみようと思っています。フリーランスという立場上、なかなか業務では行う機会が得られないので、それなら自分で作って運営してしまおうという感じです。

余談

実は開発中に完全に色々とかぶっているサービスが別に現れてしまい、やる気や出す意義などが物凄く危ぶまれた時期がありました。
しかし、開発の動機に書いたとおりそもそも自分が学習目的で使いたい(ITを引退したら地元に戻るか引っ越しをして猟師をやりたいと思っており、資格勉強をしたい)という目的があるのと、そもそも世の中には色々似たサービスなんて沢山あるということで吹っ切って考えないことにしました。

・キャラクターがなんなのか
キャラクター自体がなんなのかというとミンクのつもりで描いています。これは、最初に構想していたときのサービス名が【みんなのイズ】だったことに由来しています。
その後、その名前だと「クイズが提供されるだけ?作れる?」という印象があるなぁ、と思い「Quiz×Quiz」という名前に変更。「クイズを作れる、クイズで遊べる」ということで考えたのですがこれも直感的でないのでボツ。最終的に一番即物的な名称である「クイズメーカー」としました。ちなみに、検討時点でドメインを購入してしまっており完全に金をドブに捨てています。そんなにお高い金額ではないからいいんですが…。これを読んでいる皆さんはドメイン購入は先走らず、最後に買うようにしてください。買ってしまうことで後に引けなくなるという論はありますが、立ち行かなくなってはどうしようもありません。

結びに

このようにまたサービスを作りましたので、どうぞよろしくお願いいたします。気軽にクイズを作っていただけるとうれしいです。


45

ampersand_xyz

#エンジニア 系記事まとめ

noteに投稿されたエンジニア系の記事のまとめ。コーディングTIPSよりは、考察や意見などを中心に。
1つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。