2021 ソフトウェア設計及び演習用の班Wiki

21::gr09::長谷川智也

第一回

4/16

班の作成。副班長になった。
テーマ出し。
班wiki整備 ... 講義ページへのリンク作成。班トップページ,活動報告第一回の手直し。
次回はテーマの決定と方針決め。

第二回

4/23

活動記録記入
活動スケジュール作成、進行状況によって変えたいかも
wiki活動内容のデザイン変更、outlineの作成と4/23の内容記入

4/25

活動記録記入
裏で会議、プログラミングの方針と役割分担、目標の決定
企画段階のデザインの改良 sche_design.png
修正点
・スケジュールの配置を右から真ん中へ変更。
左上から右下に向かって視点が動くので、メインのスケジュールが先に視点に入るように。
→おそらく視点の始まりは中央、右側に置くより中央に置いたほうが第一印象として機能が分かりやすい。
・月と年の配置を変更
→上記と同様、月が先に視点に入るように、年は重要でないため右上の空白がなくなるように右上に配置(バランサー)
改良できる場所
・月を変更できるボタン配置
・チャットと予定表示の差異の視覚的な何か
・曜日の順番
・(できたら)月の指定できる検索窓、タイムライン表示への変更ボタン

第三回

4/30

活動記録記入
モジュール担当ぎめ、ログイン画面を作ろう!ポップアップデザインを決めよう!の係
次回までに、遷移図、企画書画面イメージの充実化、より細かい操作など考えよう!
→遷移図できた

第四回

5/14

活動記録記入
ものと操作の洗い出し、細かい操作やポップアップの内容の確認
「ものと操作」班wiki記入

第五回

5/21

ものと操作の画像作成と追加。
→より丁寧な遷移図も作成。UIのブラッシュアップ。
ものと操作の洗い出し
jsファイルの関数を確認。
関数の説明をwikiに書こう!
「ものと操作」「活動記録」班wiki記入
→Slackから活動記録をより充実、機能実装の流れが分かりやすくなるように意識。
次回までにやりたいこと
カレンダー画面のUIをHTML/CSSで組み立て、ログイン画面のUI作成、班wikiモジュール分けの充実。
→モジュール分けは関数の説明まで丁寧にやろう

第六回

5/28

モジュール分け一部訂正
活動記録記入
ログイン画面のUI作成
html/cssを利用。
スマートな感じを出すために、checkboxを利用していい感じに隠せるようにした
login_close.PNG
login_open.PNG

第七回

6/4

班wiki、活動記録の記入とモジュール分けページの改善。
各員の役割記入。
モジュールごとにページ作成を行い、出来上がった順にモジュールの役割と関数の説明を記入。
中間発表ページの外枠の作成。書きたいことを部分的に書いた。
全体ではdevelopブランチに作業内容をmerge

第八回

6/11

中間発表の方針決め、やりたい発表の方針をプロマネに打診
グループ作成のUIをログインに揃えるために伝授
活動記録記入
帰宅後パワポで遷移図の追加、スクショの追加、中間発表ページの完成をやります

6/14

活動記録記入
中間発表ページの作成。
画面遷移図作成。
ものと操作ページの訂正。
モジュール化ページの訂正。
中間発表における発表内容の方針作成。
スクリーンショットの編集。

6/17

活動記録記入
中間発表の台本作成。
中間発表ページの訂正。画像が多すぎたので簡潔に。
プロジェクト内容を全く知らない人が聞くということに焦点を当てて作成。

第九回

6/18

活動記録記入
中間発表のメインの語り部。
息継ぎが苦しかった、マスクが大変だった
ガントチャートやFirebaseについて話せたので満足度がいい
最終もこの調子でいけたらなという感じ

第十回

6/25

活動記録記入
メインページのデザインをいじった
CSSにBootstrapが利用されていることによって不便だったので、CSSでボタンのスタイル記述
→ Bootstrapのブロックがなくなったことで色々な表示がずれてしまったので今後修正

第十一回

7/2

活動記録記入
メインページのデザインUI改善を前回から継続
ボタンを全体的に丸ボタンにし、柔らかいイメージを出したい
toDoやチャットのレイアウトを完全に変えてしまおうという案を出してみた
→ toDoとチャットの視覚的区別が少ないかもしれない、toDoは文も多くなってしまうのでカレンダーの下部のほうがいいかも
→ ラフ案を作成して次回までにいろいろ検討

第十二回

7/9

活動記録記入
メインページデザイン改善
gitにdesignブランチを追加し、そこで作業できるようになりました
カレンダーに予定のリストを作成するため、tdの要素に高さを指定してスクロールしたい
→ tdの中にdiv要素なりul要素なりを入れて、そこに直接高さを指定することで解決
次回までにデザインラフを作る、CSSもある程度完成させたい

7/11

デザインラフの方針決定、#FFF5D4と#5A5A5Aの2色を主軸につくる
calendar.jsをすこしいじった、CSSもそれに合わせて変更
→ 予定をカレンダーのtdブロック内に表示させるための変更、明日以降バックエンド側と話ながらやりたい

第十三回

7/16

活動記録記入
CSSいろいろ
・予定リストのスクロール関係
・メインカラーの変更、class関連の改善

7/29

活動記録記入
デザイン、レイアウトをCSSで実装
色、配置、ロゴ、ブロックの配置、ブロックの大きさ、文字の色など変更
原色をなくし目に優しい配色で、できるだけ違和感のないサイズ変更
最終発表の原稿作成
ものと操作ページの編集、中間発表からの変更部の書き換え
ログイン画面の簡易遷移図の作成
最終発表ページスクリーンショット、台本の作成

第十四回

7/30

CSS修正、ウィンドウサイズの変更に対応

感想

今回の僕のお仕事としてUI/UXデザインと発表内容の構成を行い、進捗状況の確認も行いました。
JavascriptやFirebase等は班員にお仕事をお願いしたことでデザインに注力させていただきました。
あまりデザインに詳しいわけではないので、直感的ではありますが、ラフからCSSで組んでレイアウトに当てはめてみて
イメージとして残る視覚効果を考えて、色をRGB1単位ずつ調整して出来るだけ違和感のない配色デザインにしてみました。
良かったところとしては、ベースカラーを青から黄色に変えたのは良いアイデアだったな~~と自分でも思います。
ほかにも、ロゴを作ってみたりCSSからレイアウト上のバグを直したりとやりたいことができて満足してます。
また、難しいところや改善したいな~~というところもあり、
HTML/CSSを利用したレイアウトの間隔の調整が難しく、ウィンドウサイズや各種ブラウザに適応させることができませんでした。
今回のプロジェクトはFireFox限定で綺麗に動くので、ChromeやEdgeにも対応しつつ、
間隔の調整がもっと正確にすることで違和感をより無くしていきたいな~~と思っています。
いろいろ書き連ねてしまいましたが、全体を通してしっかり仕事をこなすことができ、
グループ開発の雰囲気がつかめたのは非常に大きな成長になると感じました。
自分の意図が伝わらないこともあり、時間がかかっても相談が必要だったり、
他担当の開発状況に依存して他の開発を行うモジュールもあり、プロマネといった進行役の重要さだったり、
1人で開発するときにはなかった問題点が多く発見できたので、
今後グループ開発するときには、今回失敗したな~~って思うことを心に留め、
うまくモジュール構成だったり進行だったり行えたらいいな~~と思います。


最終更新日:2021/08/19 11:26:07