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

本日からソフトフェア設計及び演習の講義がスタートしました．

今日行った内容は，

• チーム決め
• 制作物の方向性の確認

です．

本チームは勉強支援アプリ，特にタイマー機能を主としたアプリの開発をしていくつもりです．
タイマーで時間を計測し，計測が終わったら作業内容メモと共に時間をDBに記録，管理画面で総計測時間を確認したり他ユーザと記録時間を競ったりできるようなアプリの構想を練っています．

メンバーは大分個性的な面々が揃ったので，今後の活動が楽しみ．

• HTML/CSS，JSの基礎学習
• Gitlabの使い方の確認
• 簡易企画書の作成

HTML/CSSの基礎学習ですが，どちらも特徴さえ掴んでしまえば扱い自体には困らないので，最初の性質を把握する段階で粘れば後で苦労することはないと思います（ただしCSS，お前はダメだ）
CSSは沼なので深く立ち入ることはしないのが賢明です 言ったからね

JSについても，C言語の深淵の一端を覗いたちめじょメンバーならすぐに慣れることができるはず．特筆すべきはそのルールの緩さだと思うので，講義で山中先生が仰っていたように，誰も叱ってくれる人がいないことを除けばCよりも簡単にデータを扱うことができるので便利だと個人的には思います．

GitlabはVSCode埋め込みのGitコマンドが反応さえしてくれれば何もいうことはないです．次回試してみよう

以下，CSSアニメーションの使用例です．適当にネットで検索しました．ご参考までに．

• ギャラリー | 動くWebデザインアイディア帳 - Coco-Factory
• すごすぎるポートフォリオ…コピペで実装できるCSSデザイン！ 【 アニメーション 】
• 3 COOL CSS3 IMAGE HOVER EFFECTS
• 【Qiita】リアルな眼球を描く。HTMLとCSSだけで。

• JSの基礎学習（応用）
• 簡易企画書の完成 ←まだ完成してないとか言えない
• ものと操作の洗いだし
• TAさんとの顔合わせ

簡易企画書作成の続きは，ものと操作の洗い出しが終わってからにしようということになりました．
正直自分達もまだアプリの完成形が見えておらず，具体的な内容について深掘っていく過程で理解も追いついてくるのでは，という考えです．

そんな状況でものと操作の洗い出しを行ったわけですが，アプリの構成的にどうしても複数ページを跨ぐ必要があって，ものと操作を画面ごとに切り分けて洗い出すことになりました．
ものと操作の洗いだし

おおよその内容は網羅...できたかなって...思うので...追求はやめてー
このページはこれからも更新していきます．

簡易企画書と列挙したものと操作についてTAの米谷さんに相談したところオッケーがもらえた（？）ので，まあヨシ！ってことで．

次回以降はアプリの仕様定義とデザインラフ作成に取り組んでいくっ

• ものと操作の全体確認と調整
• ページ構成の詳細定義
  • 遷移の前後関係
  • 受け渡す必要のあるデータ
  • 受け渡しのデータ形式
  • 各画面のデザインラフの作成（開始）

• JS応用編
• 前回各々が作成した”ものと操作”を，1つに統合
• 統合した”ものと操作”を反映させた画面イメージの作成（紙面）
• firebase環境構築
  • アカウント，プロジェクト，アプリの作成
  • rtdbの構成オブジェクトをロード
• vue-routerによるルーティングサンプルの作成　←動作確認完了

前回各メンバーが作成した画面ごとの”ものと操作”を，今回は全体として統合しました．また統合した後に画面の繋がりを紙面に描き起こしました．
ものと操作のページはこちら

実際に描き起こしたことで曖昧だった部分が明確化され，アプリの詳細な部分まで具現化できたように思います．
1つ難点があるとすれば，考えたくない部分まで明らかになってしまい一部班員の顔が渋ったことでしょうか笑

ユーザーに快適なアプリ体験を与えるために必要な考え方を，巷ではUI/UX設計と言うようです．
視覚を介して効果的に情報を伝えたり，快適な使い心地を提供するためには，開発側の思考によらない観点が必要です．
コンゴ画面デザインを考える際にはそのあたりを意識して開発を進めていかなければなりません．ボタン1つ配置するにしても，配置場所はもちろん形状や配色，動作の表現方法など気にしなければならないポイントは沢山あるわけです．
この班はタイマーというシンプルなアプリを作る以上，そういった細かい配慮が行き届いたものを作り上げていきたいです．

• figmaで各画面のデジタルラフを作成する
• 各画面のデータおよび画面間でのデータの受け渡しを把握する
• ページルーティングの整備
• 必要に応じてgitの活用方法を共有

• CSSの基本の学習
• Gitの基本の学習
• ものと操作を参考にして画面間で受け渡すデータとそのフローの確認

VScodeを使った，Gitコマンドを打たずにGit操作を完了する方法を書いておきます．

1. VScodeでクローンしたローカルリポジトリ（ルートディレクトリ．じゃなくてもいいかも）を開きます
2. 画面一番左の列の，通常上から3つ目の"Source Control"アイコンをクリックします
3. 前回addした内容から変更があった場合，"Changes"タブに変更が検出されたファイル群が並ぶので，addしたいファイルを選んで＋アイコンをクリックします（"git add"に対応）
4. Messageボックスに任意のメッセージを書き，その上のチェックマークをクリックします（"git commit"に対応）
5. commitした後に出てくる"syncなんたら"というボタンをクリックして実行します（"git push"と"git pull"に対応）

作業した内容をGitに反映させるたびに"git add" や "git push" などのコマンドを入力しなければいけないわけですが，VScodeの標準機能であるGit連携機能を使えば2，3クリックで反映可能です．もちろん他のコマンドもGUI操作で実行可能なので，コマンド忘れちゃった〜って時には使ってみてください（というか普段からこれ使えば十分なのでは...）．

さて，今回の作業内容はモジュール分けになります．
アプリをモジュールに分割するにあたって，ものと操作を参考にして，

1.各画面が持つべきデータの把握　→　2.画面遷移時に必要なデータの把握　→　3.各モジュールが扱うべきデータ及び実装が必要な機能の把握

という流れでモジュールを分割しました．

本日完了したのはモジュール分けの前段階，1番と2番になります．
画面間及びDBとアプリとの間で発生するデータの受け渡しを書き出して，データフローとしてまとめました．
ただ，講義時間内にフローを視覚化するところまで到達できなかったので，次回までに追加の作業日を設けて作業を進める予定です．

• figmaにデータのフローを反映させる
• モジュール分けを完了する（3番まで進める）

• モジュール分けの確認と担当割り振り
• Gitコマンドと作業ブランチの確認
• 作成目標を決めてプロトタイプの作成に取り掛かる！！

• enchant.js の学習
• プロジェクト環境構築
• モジュール担当決め
• git 作業環境整備

今日はプロジェクトの作業環境を整備しました．具体的にはNodeJSの導入からリポジトリのクローン，必要ライブラリやツールのインストールまでを行なって，全員が作業に取り掛かれるようにしました．
流石にソースコードを直で更新していくのは気持ちが悪いので，Git環境も整えました．コマンドの確認とブランチの切り分けまで行ったので，これから作業する際には各々機能ごとにブランチを切って作業を進めていくことになります．そしてエラーで泣くことになる，と．．．

あと，前回決めたモジュール分割について作業担当を決めました（モジュール分け詳細）．モジュール数が全部で10個前後あるので，作業の優先順位をつけていかないと終わりませんで．まあ5人いるから，，一人2個くらい担当すればいいんじゃない．．
やっぱり前提としてメンバー間で得意不得意だったり経験量の差はあるわけなので，プログラミングに自信のある人が率先して作業を進めていって欲しいですよね，とか言うとみんな目を伏せるんだよね．

目標を実現させるためにがっつりプログラム書いて，チームで開発するって経験は学生にとってホントに貴重なはずなので，この機会を200％活かせるようにメンバーには頑張ってほしいです！！

ってセリフを言ってメンバーがやる気に満ち溢れている状態で間髪入れずにVueのドキュメントを見せることでみんな読む気になってくれるかなっていう考えは浅はかだったかな（早口）

Vue.js公式ガイド｜読むと楽しくなれる魔法の資料

• 作業開始
  • HTMLの雛形作成
  • JSでHTML要素を動的に変更
  • データの受け渡し

• プロトタイプの作成

今日は各自プロトタイプの制作に取り組みました．
オンライン形式だったため，作業中の進行状況の共有が疎かになってしまい，エラーで詰まっているメンバーに声をかけられなかったのは反省点でした．
やっぱり対面で集まった方がチーム作業はやりやすいかなと思います．

本日の作業内容はログイン/ログアウト周りとタイマー設定，タイマー記録のモジュールです．
中間発表の発表内容と進捗を照らし合わせて考えると，もう少しペースアップした方がいいかなという状況です．

まあなんとかなるか！

• プロトタイプ制作
• 中間発表のタスク決め：
  • 発表内容
  • 発表者

• 作業ブランチのマージ
• プロトタイプ制作
• 発表内容決め

今日の活動内容は，主に中間発表に向けた準備とプロトタイプ制作の続きでした．

中間発表で使用するプロトタイプですが，今日はこれまで切り分けて作業を進めていた作業ブランチをマージして機能を合体させ，最終的にそれをmasterブランチにマージするところまで行いました．
現段階では各画面の雛形の作成にとどまっており，画面間のデータの受け渡しやデザイン面はまだ手付かずな状態です．中間発表後も継続して開発を進めていき，最終的に満足いくアプリに仕上げるつもりです．
来週水曜日をプロトタイプ制作の期限として，その日までに完成したものをマージしてプロトタイププログラムとして公開する予定です．

余談ですが，チーム開発でGitを有効活用するとやはり快適でスムーズに開発が進んでいるような気がするので，Gitを用いた開発についてまとめたものをGitLab-wikiに記載予定です．
もしよければそちらも見てみてください．

• プロトタイプ完成（水曜にマージ作業，masterに反映）
• 発表内容確認，プレ発表

• 中間発表
• 即反省
• 今後の方針の確認
• 作業分担と各メンバーの個人作業内容決め
• 即開発

今日は中間発表に参加しました．
進み具合に程度の差はありつつも，どの班も着々と開発を進めている様子が伺えました．
発想がユニークな班やデザインまで整っている班，機能開発のゴールが見えている班もあり，他チームを見習って自分達もより一層開発に力を入れていこうと話し合いました．

発表会で得た反省点（？）として，自チームのアプリには一発逆転のストレートが無いということが挙げられました．
タイマーと学習記録が主軸なので，使って楽しい・見て楽しいと感じてもらうためのハードルが高いように感じます．
元々パンチの無さはある程度覚悟していたことだったので，今後の開発では機能の細かい部分でユーザビリティの向上につながる工夫を凝らしていきたいと思います．

その後開発の分担と個々人の作業内容を確認して，メンバー同士で共有しました．

チーム間で開発状況を共有して，また開発の折り返し地点で改めてチームの方向性を確認できたので有意義な時間になりました．
ありがとうございました，そして残り半分も頑張りたいと思います．

後半戦もよろしくお願いします．

• 引き続き作業

前回の中間発表後に確認した事項を踏まえつつ，前回に引き続いて作業を進めました．

全体の進捗度は6割くらいです．細かく見ていくと，

• 大きなモジュールで主な機能開発が終わっていないものが1つ（ダッシュボード）
• データの受け渡し処理を書き加えたいものが4つ（タイマー関係）
• FirebaseとのAIP通信を実装したいものが2つ
• デザイン適用待ちのページがいっぱい

みたいになってます．

まずはダッシュボードの機能の完成とデザインラフの作成が急ぎで，その後モジュール間で実データの受け渡しを実装しつつDB操作も行っていく，という流れでなんとか間に合わせたい，，
そして地獄のCSSコーディングが始まる，と...

• ダッシュボードモジュール周りの作業

ダッシュボードのいくつかの機能がおよそ完成しました．プリセットの表示・編集とデータベースへの反映がうまくいったので，残る作業はグラフと簡易時間表示部分の機能の完成，デザインの適用が主になりそうです．

• アカウント新規作成時，データベースに新ユーザ領域を確保する処理を実装
• ダッシュボードモジュールがロードされた時にFirebaseから過去の作業時間を取得する処理を実装
• タイマーセーブのCSS適用（途中）
• タイマースクリーンのCSS適用（途中）
• ダッシュボードのCSS適用（途中）

タイマー周りの機能は，モジュール間のデータの受け渡しを含めて8割ほど完成しました．
残りはデータベースへのリクエスト処理なので，機能の完成は近いと思われます．

CSSの適用作業がどっさり残っているので，次回以降は歯を食いしばって作業することになるだろうと思います．
メンバー間でスタイルコーディングの経験値が異なるので，慣れている人がアドバイスするようにして全員で立ち向かっていけたらと思います．

• ログイン時にユーザ情報を取得
• devにログインコンポーネントをマージ
• ダッシュボード-タイムラインの処理を記述
• デザインの適用

今回はダッシュボードで使用するデータをログイン時にDBから取得する処理や，ダッシュボード機能の開発，デザインの適用などを行いました．
デザインの適用がたんまりと残っているので，機能開発とCSSとで分かれて開発を行いました．
班長は早くダッシュボードのデザインラフを完成させてくれ．．

• 発表
• 発表の聴講

いよいよ最終回ということで，発表の3時間前くらいまで粘って開発を進めました．
徹夜組みが講義に間に合って一安心．
発表ではもっと伝えたい部分を絞って説明すればよかったかもしれません．
みんなで作ったアプリの良さを伝えるという役目を全うできたかは分かりませんが，見てくれた人が興味を持ってくれる自信はあったので，まあよかったということで．．

他の班の制作物ですが，どの班も中間発表から進化していて，発表を見るのが楽しかったです．
個人的にはデザインや発想，実装方法など参考になるものがいくつかあったので，ふんふんと興味津々で見ていました．
楽しい時間でした．

班のメンバー，TAさん，他の班の皆さん，そして山中先生．とても意義のある半年間でした．
ありがとうございました！