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

ガイダンス、グループ決め、テーマの決定

２班になった。みんな積極的に活動してくれるので、自分もきちんと貢献できるように頑張りたい。

JavaScript・htmlの軽い解説、GitLabの作成、テーマの詳細な決定

いろいろな案が出たので、できるだけ実装できるように努力したい。また、班wikiについても、誰か一人が負担しないように皆で書けるようにしたい。
個人的に考えていた案としては、着せ替え機能を実装して、見た目などを変えれるようにすると楽しいのではないかと思う。

JavaScriptの復習・ものと操作の洗い出し

ものと操作の洗い出しについて、図を書いて皆で協力しながら考えることが出来た。
主に図を書いたのが私だったので、とりあえずの図を班wikiに載せた。他の人に整理してもらって後から見やすいようにしてもらえると思う。
また、前回出た案について、いろいろ取捨選択をしたり、便利になるように整理したりすることが出来た。【貯金目標を設定できる】というところを目玉にしたい。
まだ詳細なプログラミングまでにはたどり着いていないが、画面の切り替えだけでなく、ポップアップなどを利用して、ぱっと目標が確認できたり、各画面にきちんとボタンを配置して、行き来がしやすいようにしたい。そのために、画面のデザインなども配置をわかりやすく出来たらいいと思う。

JavaScriptの応用編・モジュール分け

ものと操作の洗い出しがかなり完了していたので、中身を精査しつつモジュール分けについて皆で考えた。
大まかな分け方や内容について紙に書き出したりすることをしたので、今回もとりあえずの図を班wikiに載せた。それぞれの画面で、操作と表示されるもの、という観点から考えることが出来た。タイトル画面・カレンダー、詳細、入力・設定というように、大まかな関連性について分けることが出来たと思う。
自分の担当についても決定したので、それに関連した調べものや、個別でのモジュール分けなどについて時間外で考えるようにしたい。また、他の場所の担当の人についても、何かあれば助けれるように勉強しておきたいと思う。

次回までの目標

・モジュール分けの詳細化
・htmlとJavaScriptそれぞれと、関係性について調べる
・画面を試しに作れるようにしてみる

htmlの応用編・モジュール分け・プロトタイプ

モジュール分けについて、どうしても金額などのデータやり取りが多くなる関係上、インターフェイスについて考えなければいけない部分が多く、カレンダー・詳細画面・入力画面でやり取りするデータについていろいろと考えることになった。
自分はカレンダー画面のため、対応した日付を送ること・総合金額を受け取ることが主なデータやり取りとなりそうである。詳細画面・入力画面と関係性が深いため、協力しながら取り組んでいきたい。

前回までの目標の到達率

・モジュール分けの詳細化→インターフェイスについてある程度更新◯
・htmlとJavaScriptそれぞれと、関係性について調べる→CSSについても調べた。それぞれ別ファイルでもきちんと動作するようにできるようになった。◯
・画面を試しに作れるようにしてみる→web上のプログラミングを読み解きながら、クリックした日の日付を取り出すことが出来るようになった。また、月変更などの諸機能についても実装出来た。未実装要素についても詰めていきたい◯

次回までの目標

・モジュール分けについてもっと分かりやすく詰める
・html、JavaScript、cssについてもっと勉強する
・カレンダーのプログラミングをもっと紐解いてみる、分かりやすく文を追加する

enchant.js・モジュール分け・プロトタイプ・Gitlabの使用

モジュール分けについては現時点では特に変更点がなかった。データのやり取りについて、日付等と関連させて金額を管理する必要があるため、どのようにするかが課題になっている。詳細画面・入力画面でのデータのやり取りのイメージはかなり出来上がっているため、こちらもどのように管理するか考えたい。
また、自分のプロトタイプについては、文字の書き込みや切り抜きなどを利用して、表の中の日付と、入力された金額が別々に管理できるようにはなった。これの送受信など、やはりデータのやり取りに関する部分を詰めていかなければなさそうである。また、ページ遷移についても、同じ場所にデータがあり、ファイル名がきちんと管理できていれば稼働するようになりはした。ここもまた、日付等と関連させなければいけないため、難しいところだと感じる。
データの送受信については、やはりグローバル変数で行うのが無難だと考えている。ただし、ページの更新タイミングで稼働する関数などのことを考えると、どのタイミングでそもそも入力された数字が保存されるのか、などの点をしっかり勉強して把握しなければ難しそうである。
Gitlabを使用するのも試してみた。次回はzoomで作業することもあり、使用頻度が高いと思われる。使い方がなかなか複雑でデータの送受信に困るところがあったので、手順を書いておく。

git labの使い方

• git clone プロジェクトのURL　でデータを読み込む ここまでは基本的に済んでいるので、下の手順をループすればいい
• git add ファイル名　で変更したファイル名などを追加する
  （そもそもの作業ファイルをget cloneで落としたファイルにすべき、あるいは別のところからコピーしてきたファイル名をaddする）
• git pull　で最新状態にする
• git commit -a -m ”なにかコメント”　でデータを更新する
  （-a -m必須　なんか変なエラー文出る）
• git push　でデータを送信する

前回までの目標の到達率

・モジュール分けについてもっと分かりやすく詰める→モジュール分け自体の変更点はなかった。モジュール分けというよりも、 個々の関連性について詰めるべきだった。△
・html、JavaScript、cssについてもっと勉強する→実装したい機能に対して、どんな関数を利用するか等について調べることで、ある程度新しい知識を得ることが出来た。◯
・カレンダーのプログラミングをもっと紐解いてみる、分かりやすく文を追加する→あまり進まなかった。プログラム自体に機能を増やしていくこと自体は出来ているので、もっとしっかりと分類をして、自分の手で書き直すぐらいのことをすべきかもしれない。△

次回までの目標

・個々の関連性について詰める
・データのやりとりの方法、形式について考える
・プログラムを更新する（年飛ばし・月飛ばしの仕様）

デバッガ・プロトタイプ

入力されたデータと日付の管理方法についてなかなか案が思いつかず、かなり悩むことになった。最終的に、テキストデータとして保存して、そこから書き出したり読み出したりしてみてはどうか、という案が思いついた。ただ、詳細情報などがどうなるかなども難しいため、次回実際に試してみることになった。
自分のプロトタイプは、プログラム自体についておおよそ理解できるようになった。月飛ばし機能についても進んではいるが、選択肢を選んだ後に、選択肢自体の表示を消すなど、まだ実装できていない動作があるので詰めていきたい。

前回までの目標の到達率

・個々の関連性について詰める→データのやり取りとも関係があるところであり、核になるアイデアを出すことが出来たので多少イメージしやすくなったと思う。△
・データのやりとりの方法、形式について考える→案自体をやっと出すことが出来たので、実際に次回機能するか確かめたいと思う。△
・プログラムを更新する（年飛ばし・月飛ばしの仕様）→自分自身での書き込みや機能の実装など、ある程度進んだところが多かった。〇

次回までの目標

・データのやり取りのプロトタイプ案を試してみる
・プログラムを更新する（データやり取りのための書き込み/読み出し・年飛ばし・月飛ばしの仕様）

プロトタイプ

テキストデータに対して書き込む方法が想定よりも難しかったため、別のデータの管理方法について考えた。思いついたもの（localStrogeを使用する）を試してみたが、ページURLが違う場合データの保存場所が別であったため、別途サイト間で通信する方法（web Massageing API）で補うことにした。localStrogeを使用する方法についてはおおよそ完成したため、web Massageing APIを利用して、データの受け渡しや更新などを行えるようにプログラムを改善したい。

前回までの目標の到達率

・データのやり取りのプロトタイプ案を試してみる→テキストデータでのの保存はあきらめたが、また別の方法と、その改善法についてたどり着くことができた〇
・プログラムを更新する（データやり取りのための書き込み/読み出し・年飛ばし・月飛ばしの仕様）→データやりとりのための書き込み/読み出し機構がある程度できた。年飛ばし、月飛ばしについては、中間発表を控えていることもあり、データのやり取りのプログラムを優先しようと思う〇

次回までの目標

・データやり取りのプログラムを完成させる
・中間発表の準備をする

中間発表

いろいろな班の発表に触れ、やはり見た目が充実していると感覚的に分かりやすく、進んでいる印象がかなり出るなと思った。ただ、自分の班は内部的な操作の完成を優先したので、最終発表までにしっかりと外観についても充実させていきたいと感じた。
他の班を参考に、CSSのファイルを一括で共有したり、図などでモジュールについて表示することで、お互いのファイルの関係性などについても分かりやすく表示したい。
個人的には、各端末でデータを管理していればログイン機能はいらないのでは？　と思っていたが……　同じ人が別の端末でデータを得ることを考えると、もしかしたらログイン機能があるほうがいいかもしれない。また、バックアップ機能などもあればデータの共有がより簡単かもしれないとも思った。

プロトタイプ

デバック作業などをかなり繰り返した結果、どうもOSの違いやhtmlファイルの開き方によってlocalStrogeが共有されない場合があると判明した。VScodeからプロトコルを利用して開けば確実に共有されるようなので、この辺りの不具合を解消することで簡単に確認作業が出来るようにしたい。
データ共有については（不具合を除けば）一通り目処がついたので、他の機能充実などに取り組みたい。また、外観についても案を練り、しっかりしたものにしたい。プロトタイプを利用してプログラムを改善していけたらなと思う。

デザイン

全体でしっかりと外観について共有し、このような配置にしようということをまとめた。使用する画像についても、全員で話し合いながら必要そうなものは集めた。ただ、カレンダー画面では、目標とそれを褒めるキャラクターを準備するため、それは自分で集めて共有したいと思う。目玉の一つである「図を利用する」を積極的に実行したい。外観に関して、powerpointで作成したものを皆で共有し、変更があればそこに書き込みたい

前回までの目標の到達率

・データやり取りのプログラムを完成させる→環境を整えれば確実にデータ共有が出来るようになった　◯
・中間発表の準備をする→中間発表に向けて目標だった機能をある程度実装することが出来た　◯

次回までの目標

・画像などの仮配置をし、完成形に画面を近づける
・着せ替えの機能について、cssのタグなどの案などを考え、共有する

モジュール化、Node.js、プログラム制作

モジュール分けについてはおおよそ前回の時点で決定していたので、個々の制作に入っていた。
自分の進捗としては、カレンダーの年月を飛ばしての変更（ただ日付も選択しないと移動しない点がある）、ボタンアイコンに画像を設定するなどの細かい部分が進んだ。また、カレンダーの表示などもある程度調節した。より見やすいレイアウトについては改善の余地があるように思う。
月ごとの収支の表示や、目標設定・表示のプログラムなどはまだ制作に入れていないため、次回までにある程度の形を作りたい。

前回までの目標の到達率

・画像などの仮配置をし、完成形に画面を近づける→まだ改善の余地はあるものの、ある程度進んだ　◯
・着せ替えの機能について、cssのタグなどの案などを考え、共有する→あまり進められなかった　×

次回までの目標

・自分の担当範囲について、まだ手がつけられていない収支や目標関連を進める
・カレンダー部分についても随時更新する

プログラム作成

カレンダーの進捗は、月の収支の表示・目標の表示・目標の達成率の表示・目標画面への遷移可能。
目標の進捗は、入力と保存が可能になった・カレンダー画面への遷移完了といったところ。
また、データ管理画面にて、修正用の関数を追加した。
ある程度進捗は出ているが、ペースを上げて開発し最終発表で余裕が持てるようにしたい。また、目標画面にグラフ等を追加して目標設定の補助になるようなデータを表示できるようにしたいという案も出たので、実装出来るよう基礎部分を詰めていきたい。
褒める機能や全体的なデザイン等、まだまだ進めるべきことがあるので頑張りたい。

前回までの目標の到達率

・自分の担当範囲について、まだ手がつけられていない収支や目標関連を進める→基礎的な部分は進んだため、より機能を増やし改善したい。　◯
・カレンダー部分についても随時更新する→表示できるものが増えた。目標関連はマウスホバーで表示できるよう改善したい。◯

次回までの目標

・目標画面の差分追加、レイアウト調整を行う。
・カレンダー画面での、マウスホバーによる目標関連の表示（ほぼ褒めるマン実装と同義）
・date.jsに削除用関数の追加
・各ページに目標画面関連の画像の追加

プログラム作成

カレンダーの進捗…マウスホバーで目標関連の表示が可能になった。
目標の進捗…ボタンに画像追加。レイアウト調整。年・月での目標の区別と、貯金するのか支出を抑えるのかの選択の設定準備。
データ管理関連の進捗…一部の削除用関数追加。

前回までの目標の到達率

・目標画面の差分追加、レイアウト調整を行う。　ある程度整ったが、差分追加はまだ一部のみ　△
・カレンダー画面での、マウスホバーによる目標関連の表示（ほぼ褒めるマン実装と同義）　日付に関連して内容を更新する部分が出来れば完成　◯
・date.jsに削除用関数の追加　◯
・各ページに目標画面関連の画像の追加　次回までにやる　×

次回までの目標

・目標画面の差分追加
・褒めるマンの内容追加
・各画面微調整、機能追加
・各モジュールページ等更新

プログラム作成

カレンダーの進捗…褒めるマンの文章追加
目標の進捗…レイアウト調整。年・月での目標の区別。月や年が過ぎていた場合の文章追加・ボタン削除,。修正可能に

前回までの目標の到達率

・目標画面の差分追加　文章等で追加　◯
・褒めるマンの内容追加　文章追加　あとは実際の褒める文　◯
・各画面微調整、機能追加　他機能優先のためまだ　×
・各モジュールページ等更新　最終発表までにやる　×

次回までの目標

・褒めるマンの内容追加
・各画面微調整、機能追加　
・着せ替え対応

プログラム作成

カレンダーの進捗…褒めるマンの一言追加。ベース文章の調整。
目標の進捗…月目標のみに変更。褒めるマンのビジュアル追加。

前回までの目標到達率

・褒めるマンの内容追加　終了　◯
・各画面微調整、機能追加　細かいバグ潰し等をした　△
・着せ替え対応　終了　◯

最終発表

最終発表までに実装できなかった機能などもあり、反省する点も多かったが、大きな目標であった着せ替えの実装や、褒めるマンの挙動、そもそものお小遣い帳としての機能を実装出来たのはよかったと思う。8/5の最終日までに、班wikiを書き加えたり、全体的なプログラミングのブラッシュアップ（説明の追加やバグ潰し、表示の統一）などを行おうと思う。
他の班の発表を見ると、やはりデザインがすっきりしていると見た目がよく、出来がいいなと感じるものが多かった。デザイン面については、着せ替え等なども色変更などに留まってしまった点や、元々のUIが無骨なところもあり、8/5までに改善したいなと感じた。

課題等もありあまり改善できなかったが、班wikiの編集やプログラムの説明文の追加・整形などはある程度行うことが出来た。今後もしっかりと勉強を重ねていきたい。

戻る