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

• 班決め
• テーマ決め
  テーマとして挙がったのは以下の3つ
  
  • タイマー(メイン)
  • カレンダー
  • ランキング
• 意見交換(アイデア)
  • 1画面で表示する
  • ゲージで進捗を可視化
  • コメント機能によるモチベーションの充実
    

次回は簡易企画書を作成することを目標とする。

• htmlの基礎
  今回の開発言語になる可能性が高いため、重点的に学習したい
• Javascriptの基礎
• gitlabの使い方

• gitlabの設定
• テーマ決め
  今回のソフトウェアは主に３つの要素で構成されている。
  • ログイン画面
    主にアカウントの管理
  • タイマー機能
    時間、分、秒の範囲でセット
    複数のタイマーをセットとして使用
    記録機能を使用し時間を管理
  • 記録管理
    カレンダー機能と勉強時間の記録
    合計時間の記録を行う

次回はこのソフトウェアにおいてのものと動作について考える。

• テーマの確認
• ものと操作の洗い出し
  • それぞれの画面からものと動作、遷移を考え、大まかなオブジェクトの構想を書き下ろした。
  • 全体の構造を粗方理解することができた。

• ログイン画面からのソフトウェアの構成
• それぞれの画面のボタンとそれに対応する動作
• データベースを含めたものと動作とデータの割り当て
  

次回はそれぞれの画面、構成要素の優先順位を考え、プロジェクトの 方向性を固める。

• ものと操作の洗い出し
  • タイマー画面(デスクトップ)のレイアウト
  • レイアウトに沿ったものと操作の企画
  • ポップアップ画面の挙動
  • タイマー設定画面の調整
    • 主にタイマー周りの挙動
    • 設定ボタンの画像消去
• プログラム全体の構成
  • タイマー周りの遷移
  • 機能と構成の調整
    

次回はモジュール分けを行う。

• データのやり取り
  • データベースとのデータのやり取り
    • firebaseを用いたソフトウェア
  • 画面の遷移
    • 同一ソフトウェアのデータの受け渡し
• モジュール分け
  • それぞれの遷移ごとのモジュール
    

次回はモジュール分けの分担を行う。

• モジュールの分担
  • サウンドモジュール
  • 時計システム・表示モジュール
• 環境構築
  • VS codeを用いて制作
  • VS codeのターミナルを用いてGitにコードを追加
    

次回はプロトタイプの作成を行う。

• プロトタイプの作成
  • サウンドモジュールの作成
    • 4つの異なるボタンにそれぞれ違う音を鳴らす
    • 一つの関数に効果音を入れて呼び出す
  • 時計モジュールの作成
    • 時刻を取得するDateオブジェクトを作成し、取得
    • 100ミリ秒ごとに端末から時刻を取得
      

次回はプロトタイプの調整を行う。

• プロトタイプの調整
  • サウンドモジュールの作成
    プロトタイプではボタンをクリックしたら音がなるが、コンポーネントのため一つの関数として呼ばれる。
    完成するためには値の受け取りを行い、それに応じた効果音を鳴らさなければならない。
  • 時計モジュール
    これもコンポーネントの一つである。
    時計の文字自体を変更するCSSを作成する必要がある。
    

次回は中間発表。発表者のプログラムを参考にしたい。

• 中間発表
  • この日はコンピュータの操作を行った。
• モジュールのプロトタイプ
  • 棒グラフのプロトタイプ作成
    Javascriptの変数をCSSに送ることができなかった。 V-bindで値を送ることが出来るらしいが未だに成功せず。

次回はCSSをjavascriptの変数を生かして表現する。

• グラフ作成モジュールの作成
  • 最長に合わせて棒の長さを調整
  • 日付データと時刻データの分離
    • 日付はスラッシュ区切りで表示

次回はグラフを完成させる。

• グラフ表示モジュールの作成
  • cssの描画からchart.jsに変更
    chart.jsはグラフ作成に特化した拡張機能
    サイズが可変になることによって拡張性が向上
• グラフモジュールのマージ

• 8桁の日付、時間、分、秒が入った配列を受け取る(7日分のデータ)
• 勉強時間を分単位で計算(時間*60+分、秒は無視)
• 日付は初めの4桁(年:yyyy)が一致するならmm/dd、そうでなければyyyy/mm/dd(月:mm、日:dd)
• 日付を横軸、勉強時間を縦軸で棒グラフをvue3-chartsで生成

次回はpropsを用いたデータの受け渡しを行う。

• ダッシュボードのCSS作成
  • 色変更ボタンはグリッド表示を行う。
  • 結果画面はスクロールバーでスクロールを行えるようにする。
  • メモ画面も同様にスクロール可能にする。
  • 各ブロックはグリッドで扱う
  • 長さはremで指定する

次回はCSSの調整を行う。

• cssの調整
  • gridやpaddingを用いて表示位置の調整
  • 画面サイズ可変に対応
  • ボタンクリックに対してリアクション追加