JSTQB非公認Tester-chan Level試験公開!
こんにちは!作者です。
twitterではお伝えしましたが……
ソフトウェアテストの知識を試す、JSTQB非公認Tester-chan Levelの試験を公開しました!
以下からプレイできます。
***
JSTQB Tester-chan Levelを作ったらどうかという話があったので早速javascriptで作ってみました!
— Matsu(まつ)@Tester-chan (@mty_mno) October 20, 2019
あと問題を作って、システムテストが完了したら公開します。
エフェクトの作りこみが大変でした…(^-^;
ついでにきゅんちゃんの立ち絵も描きましたw
成績のところの数字はテストデータ入れてます。 pic.twitter.com/icCSVZIBzB
クイズゲームとなっており、20問出題されそのうち14問正解で合格となります。
合格した人には待ち受け画面プレゼントがありますw(全7種)
今後の予定ですが、問題の追加を予定しています。
あと、ローカルで動くようにして配布も考えています。
問題を変えれば色々できますので、会社などの簡単な知識試験に使えるかもしれません。
このTester-chan Levelがみなさんの勉強の足掛かりになってくれたらよいな、と考えております^^
開発裏話
この「JSTQB Tester-chan Level」
実はスンゴイ爆速開発→リリースを行いましたw
10/18の夜からゼロから開発開始→10/22リリースです!
せっかくなのでその流れを書こうと思います。
はじまりは突然に…
Twitterの一言で作者に電流走る!
Advanced Level
— あきやま🍸 (@akiyama924) October 16, 2019
Foundation Level
Tester-chan Level
テスターちゃんレベル試験に合格したらスマホの待ち受け画像(きゅんちゃん)をプレゼント!
これを聞いてついつい「おおっ!」と思ってしまいましてw
10/18(金)
仕事から帰った後、電車で考えた心に渦巻く熱い思いを仕様にして紙にしたためました!
(図)行間しかない仕様書
うん!
仕様書ってムズい!(爆
そこからコア部分の着手です。
まずは4択のテキストと問題のテキストが表示され、正解番号の選択肢をクリックしたらtrueが飛ぶ、といったメイン部分の実装です。
ここができちゃえば、正直やりたい要求を満たせますw
そこまで完成したあとに就寝。
10/19(土)
で、土曜日。
- 1問しか表示できなかった画面を連続で問題出題できるように変更
- 仮イラストをいれてそれっぽくUI構築
- クリックした後のエフェクト追加
- オープニング画面実装
- オープニングのみテスト
- ストーリー(りんちゃんとの会話)シーン実装
- ストーリーシーンのみテスト
- 結果発表画面実装
- 結果画面のみテスト
- 一旦つなげてテスト
- シェア画面実装
- シェア画面のみテスト
- レポート実装
- レポートシーンのみテスト
- 全部通してテスト
こんな感じでズババババーッと実装していきました。
エフェクト部分がとても大変でした(^-^;
フェードイン、フェードアウトも普通にやってしまうとシーンの切り替え時に点滅してしまって。
そうならないために、シーン切り替え時に全画面の黒オブジェクトのalpha値を0->1にしてフェードアウトを演出。
フェードイン時は全画面の黒のalpha値を1->0で消していくとともに、背景のalpha値を0->1にすることでクロスフェードにしています。
地味な苦労ですw
他演出は、基本QMAを参考にしています!(爆
例えば問題を選択した後にすぐ正解不正解を出すのではなく、少し待たせてドキドキタイムを演出して正解不正解を出すなど。
……setTimeoutを多用しています。
コードが追いにくい(^-^;
あと……テストコードがない!(爆
テストエンジニア何やってるの!ですが、ゲームのテストは作り方を考えないと難しいです。
UIと処理がくっついちゃっていると中々……。
ここは今後要リファクタです。
そして合間合間にチョコチョコとシステムのイラストも描いています。
で、土曜日でシステム完成です。
コミットで流れが見えたりします↓
https://github.com/jam0824/TesterchanLevel/commits/master
10/20(日)
日曜日はキーボードからペンに持ち替え、朝からきゅんちゃんの立ち絵をかきかき。
差分7枚です。
他の何かでも使えたらなーと思いつつ描いていましたw
あと、最後の段階でBGMやSEを追加です。
ローカルのブラウザでサウンドを再生しようとすると、ChromeとかだとCORS policyにひっかかって再生できず動作テストが大変になります。
よって、Webゲームを作ろうとしている人は最後に音楽系を持ってきた方がよいです。
ちなみにEdgeだと怒られないので動かすことができます(笑)
そんなわけで、10/20でほとんどのシステムが完成して、テストデータで動かして動画を取ってTwitter投稿しました。
10/21
作者、会社!
ちなみに会社のメンバーはほとんど休暇を取っている日。
飛び石連休なので良い判断。
作者は別日でお休み予定だったので出社ですw
そしてなんと!
秋山さんが問題を50問作ってくださいました!!
とてもとてもうれしいかぎり!!
そちらをありがたくいただきまして、ゲームに組み込みました。
これでJSTQB TL(Tester-chan Level)として成立ですw
この際に「受験者数と合格者数がわかれば面白いかも」というお話になり、javascriptのみで作ってたゲームとmysqlの連携を行いました。
server側はphpです。
ついでに「各問題の正解率を出せれば、みんなが苦手とする場所も見えてくるかも」なんて思って、各問題の出題数と正解数のカウントも実装です。
10/22
10/22は、朝から待ち受け画面作りですw
テスターちゃんの表紙のイラスト+他の様々な場面で描いたイラストを集めた形です。
(そのうち新規で描いて追加するつもりではいます!)
ちなみに「合格したら待ち受けプレゼント」はこの段階まで入れるのを忘れていたので急きょ追加です。
(仕様書に書いてなかった!w)
そして、プレゼント画面を作って、server側との連携を整えました。
最後にランディング画面作成!
で、リリース!
JSTQB非公認テスターちゃんレベル試験、リリースをいたしました!https://t.co/rPAMh3skBX
— Matsu(まつ)@Tester-chan (@mty_mno) October 22, 2019
現在わかっている問題点としては…
iOSだと音が出ない(制限関係)、終了後に答えを見るか待ち受けもらうかの二者択一(設計ミス。プレゼントのことを忘れてて急きょ追加w)、safariでも音が出ない、です。 pic.twitter.com/DiIosBrlI7
***
このような形で爆速リリースを行いました!
ここからは、問題追加、リファクタリング、ということをしていきたいと思っています。
また、このゲームは中の問題を変えればFLの問題も英語の問題も出せるので色々と面白い使い方ができそうです。
そこはおいておいて、このゲームが皆さんの勉強の助けになりましたら幸いです。