2022 ソフトウェア設計及び演習用の班Wiki
22::gr02::類家 穂香
第四回 5/13
- モジュール分けをおこない、前回のモノと操作の確認及び修正をした
- 互換性の高い部分、独立している部分の関連性などの確認をした
- 分けたもののうち、収支の入力画面を担当することが決定した
- 次回は簡単な枠組みを作りたい
第五回 5/20
- 自分の担当である入力画面の仕様を、話し合って少し変更した
- 入力画面と詳細画面の間で渡されるデータの形や種類について大まかに決定した
- 必ず入力するもの/任意で入力するものを分け、内容は任意、分類と金額は必須とした
- 必須項目の未入力項目はアラートを出そうと思った
- 入金/出金の選択によって、渡す値の符号(+/-)も識別可能にする」
- 保存/削除の選択によって、データを保存/修正/削除した上で詳細画面に戻れるようにする
- 内容の項目は、中間以降にデータのやり取りをすることになった
第六回 5/27
- Gitlabの使い方を確認した。更新の仕方と班員とのデータ共有が確認できた。ここで時間がかかってしまったので、画面作成があまり進まなかった
- 全体として、プロトタイプをどのくらい詰めて作るかが決まった
- 自分の担当分のプロトタイプに関しては、UIのデザイン以外ほぼ完成形に近くなると思われる
- 次回は自分の担当分と互換性のあるページへ飛べるようにしたい
第七回 6/3
- 自宅からGitlabの操作ができなかったのでファイル自体の変更は無し
- 自分の担当画面で必要なタグや書き方などを調べた 参照
- 互換性があるページとデータの管理や受け渡しの仕方などについても調べ、班員とも確認した
- 見た目や入力するところなどが、簡単なものが少しずつ形になってきたのでイメージがしやすくなった
- 次回はデータを詳細画面に渡せるようにしたい。
- (6/9追記)フォルダ別になっていたものをまとめ、各ファイルの修正をしてページの移動ができるようにした
第八回 6/10
- データの受け渡し方法が決定した
- カレンダー⇔詳細画面⇔入力画面で、共同で用いるJSプログラムを別途作ってもらった
- 画面の遷移は順調につながってきているのでよかった
- 入力画面の動作が上手くいっているのか確認できなかったので、中間発表までに動作確認をしたい
- 次回：中間発表。データの受け渡しができる状態のものを発表したい。
第九回 6/17 (中間発表)
- 中間発表を終えた。他の班から学ぶことがたくさんあったと思う。UIが整っていると実際の動作もより想像しやすかった。
- 自分の班は中身の動作を優先してきたので、今回はUIを班員で詰めていった
- 画面に対するボタンや文字の位置やサイズ感をほぼ正確に決めた
- 「おこ図かいちょう」ということで、ボタンに図を付けるのでそのアイコンを決めた
- 中間発表以降に実装予定であった『褒めるマン』の解像度も話し合ってあげることができた
- 次回：
「保存」した後のチャリーンを実装参照 ←6/23実装済- 「褒めるマン」の内容をもう少し詰めたい
- 収入/支出ボタンの本実装(収入だった場合↓を押せなくしたい)
- 分類項目のリストの実装
「金額」に半角数字以外の入力が来たとき弾くシステム←6/23実装済「内容」が空欄だった場合の処理←6/23実装済
第十回 6/24
- UIが大きく変わった。位置や色をどこで操作するかを決められたので、フォームに関しては色合いさえ決まればほぼ完成形になれるところまで進められた気がする
- 分類項目を、リスト形式に変更し、右側から選ぶ形をやめた。
- 次回は、褒めるマンについて詰める・UIの詳細や全体の統一感について話し合いたい
第十一回 7/1
- 詳細画面でデータの修正・削除のため、data.jsに関数を付け足してもらった。データ修正は担当分にも関わってくるが、input.jsではrewrite関数を足すだけでいいようになっている
- 修正用のデータ表示に伴い、今までHTML内に埋め込んでいたinputやtableなどをjsに移行する必要があることがわかった
- data.jsの仕組みがようやく理解できた
- cssも少し修正して、カレンダーとの統一感があるように配置し直した
- 次回は…
- 褒めるマンの解像度をあげ、機能や目標との互換性を考える
- UIの案をパワーポイントと同じ形式で考えておく
input.htmlの大部分をinput.js内に移行する←7/7実装
第十二回 7/8
- rewrite関数とwrite関数の使い時の分岐、及びrewrite関数の実装ができた
- 修正時、修正前のデータを表示できるように頑張っていたがtableごと消えてしまいうまく行かなかった(メモ欄に解決方法記載)
- JS内でタグをいじるときのルールをもう少し厳密に調べるべきだと思った
- 次回は…
- UIの具体的な案や背景などを作ってきたい
- 保存・戻るボタンの位置を正しい位置に表示する
- 修正前のデータをフォームに提示する
第十三回 7/15
- ボタンの表示を整え、tableのしたに表示することができら
- min-widthなどで、ある程度のウィンドウサイズ変更にも対応できるようになった
- 修正前のデータを提示して修正できるようになった
- 入力や画面遷移の仕組みは終わったので、あとは細かいUIの仕様を詰めれば完成になる
- 余裕があればカレンダー・詳細と幅やフォントサイズを揃えたい
- 次回は…
- 予備日。着せ替えができれば完成だと思う。
第十四回(最終発表) 7/29
- 入力画面はUIの細かいデザインを整え、他の画面と統一感をだすことができた。
- 保存したときのSEを復活させることができたので一安心だった。
- 基本的な機能はだいぶ前から仕上がっていたので、その点は安心していたが、UIを直したらテーブルが消えたので最後まで油断ならなかった。
- 他の班の発表の感想↓
- タイトルにロゴがあるｔと、オリジナリティがあっていいなと感じた。
- アニメーションなどの動きがあるとやはり見栄えがよかった。
- ユーザーを識別する仕組みが実装されていると、PC一台でもより多くの人に使ってもらえてよいと思った。
全回を通しての感想
- 他の画面とUIを揃えることは思ったより大事だとわかった。
- 非同期でページの遷移によらず音を鳴らすのは、様々な下準備や設定が必要で難しかった。SEを鳴らしたいときは、ページ遷移する前に時間を稼ぐという工夫をした。(これはBGM設定には対応できない)
メモや参照(ほぼ自分用)
-
ページを遷移しても鳴るSEに使いたいと思って見つけたが、着せ替え機能でも使えそう…？参照←Howler.jsを使うには、npm?をPCにインストールしないといけないらしいので微妙。ユーザーには不要なのか不明なので。←授業内で説明あり。BGM担当が使うなら自分も共有させてもらおうと思う。 - 選択リストは、デフォルトでは「えらんでね」になり、選択はできなくなるようにした。（そうしないと、分類がデフォルトで一番上の項目になってしまうため）←7/7実装
- 金額に「０００」と手打ちした際、「０００」が保存されてしまうバグを修正。 ←7/7実装
- 【重要】tableが表示されないバグで困っている人へ。JSでHTMLを書くときの話です。JSで、関数内で変数を宣言し、(if分の分岐などで)その変数を使わない文を読み込むとバグが発生し、その文以降一切の要素が表示されなくなるので注意。分岐先で、使いたい変数があるときだけ宣言して使うのが吉です。
最終更新日：2022/08/04 22:10:11
