アーカイブ

2014年04月

Gブレイバー開発計画を公開しました

カテゴリ:
Gブレイバーの開発計画をslideShareにアップしました。


また、現在の状態を動画デモとして公開しています。




スライドにも書きましたが、今回作るところはセレクトルーム画面の 改善です。
動画の0:19あたりを見ると分かると思いますが、
現在の仕様ではセレクトルーム画面は一般的なフォームを用いており、
見た目・使い勝手ともに良いとはいえない状態です。

5252







そこで、セレクトルーム画面を以下のように入室ボタンを並べたものに改良するというものです。
38







今回の開発イメージは以下の通りです。
②、③、⑥、⑧はsocket.ioサーバとクライアントJSとの通信になりますが、
ここは既存ソースで既に完成されているので変更する必要はありません。
というよりも、今回はクライアント側の見た目を変えるだけなので、
サーバ側コードの変更は一切ないはずです。
④でセレクトルーム画面の表示となっていますが、ここが新規作成する場所となります。
要件さえ満たせれば何で作っても問題はありませんが、
ルームセレクト画面と戦闘画面をシームレスにつなぎたいので、ここはenchant.jsで作りたいと考えています。
そうすると、ルームセレクト画面、戦闘画面の切替はenchant.jsのシーン切替機能で実装したくなります。ただ、現在の戦闘画面はシーン分けを意識して実装されていないため、既存コード修正が必要になってきます。
ここら辺の細かい方針は、enchant.jsの仕様を理解した上で考えようと思います。


07



 




最後になりますが、Gブレイバー関連のリンクを並べておきます。

・github
・α版サービス 

カテゴリ:
画面テストを追加しました。 あと、リファクタリングもしました。 作ってて思いましたが、画面の自動テストと手動テストってほとんど同じコードなんですよね。 なら、フラグでも立てておいて、テストによって動作を切り分けるのはどうなんだろう。 https://github.com/kaidouji85/gbraver/tree/clientAutoTest

カテゴリ:
画面テストを自動化してみました。
動作イメージはこんな感じです。



実は前々から画面の手動テストは前々から書いていました。
手動部分の待ち時間をtimeline、ボタン押下はコールバック関数直接呼び出しで対応しました。
手動テストはこんな感じです。



自動テストのコードはこんな感じです。

クライアント側コード
seleniumコード

簡単に説明すると、クライアント側だけで自動テストは完結しています。
ただ、このテストを動かすにはテスト用URLにアクセスしなければならず、
それを自動化するためにseleniumを使っています。

クライアント側コードではテストが完了するとタイトルがfinishに変わります。
途中でアサーションに引っかかるとそこで止まるので、
seleniumでは5秒以内にタイトルが変わらなかったらテスト失敗になるようにしています。

それにしても、分かりづらいコードですね。
明日からガンガンリファクタリングしていきたいと思います。
 

カテゴリ:
今日動かしてみたら、うまくいきませんでした。
原因は分かっていて、enchant.jsの準備が完了しない状態でテストを開始していることです。
ここら辺のタイミングを取得できないか調べてみましたが、出てきませんね。
まあ、enchamt.jsを新規ウインドウで開いて使うというケース自体レアですしね。
おとなしくseleniumを使ってテスト用ページを開くことにします。

という訳で今日はgithubにpushできませんでした。

 

自動テスト動いたったー。 別ウインドウ管理ってJSだと案外簡単に出来るんですね。詰まったのは子ウインドウがonload完了してから関数を呼ばなきゃいけないとこ位です。 ただ、現状だとアサーションを子ウインドウに書いてるので、テスト結果画面でエラー詳細が見えないという問題があります。 https://github.com/kaidouji85/gbraver/tree/clientAutoTest 明後日は休みなので、テストの様子を動画に取ろうかなと思います。

このページのトップヘ

見出し画像
×