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

• 班の編成
• LINEグループの作成
• 方針決定

コメント
筋トレアプリ、自動出席システム、ファイル暗号化システム、勉強習慣化アプリ、シフト自動生成システムなど、意見が多く出たので活発に話し合うことができた。大まかな方向性として、筋トレをサポートするアプリを作成することが決まった。副班長として積極的に取り組みたい。

• HTMLの基本
• Gitlabグループの作成
• テーマ決め
• 簡易企画書の作成

コメント
講義ではHTMLの基礎について学んだ。グループ開発では、筋トレと育成ゲームを組み合わせた習慣化アプリを作成する方向で固まった。これに基づき、対象ユーザ、アプリのタイトル、イメージを描き、簡易企画書を作成した。また、フロントエンド、バックエンド、キャラのイメージ作成で役割分担を行い、自分はフロントエンド若しくはバックエンドを担当することに決まった。

• JavaScriptの基本
• ものと操作の洗い出し

コメント
講義ではJavaScriptの基本文法について学んだ。グループ開発では、アプリの詳細を考え、画面毎にものと操作の洗い出しを行った。ユーザが筋トレのモチベーションを保てるような工夫について、具体的にはトレーニング記録のグラフの軸やキャラデータの表示箇所について検討した。また、最後に指摘された通り、洗い出しが全体的に曖昧であったり、不足していたりするため、もう少しはっきりさせる必要があると感じた。

昨日アドバイスをもらった通り、ものと操作の洗い出しで不明瞭だった部分を明らかにした。ページ遷移について考え直し、新規登録画面、退会画面のものと操作の洗い出しを再度行った。日付の表示をカレンダーで行えないか、ログイン画面をタイトル画面と別に作るかなどの新たな検討事項が出たため、次回グループ全員で共有し話し合いたい。

• JavaScriptの応用
• ものと操作の洗い出し

コメント
講義ではJavaScriptの応用について学んだ。グループ開発では、前回不足していた項目のものと操作の洗い出し、画面遷移の詳細などについて話し合った。昨年度の班とかなり類似しているため、どこで違いを作るか考えたがこれに時間がかかった。具体的にはキャラを3Dにする、経験値とレベルという概念を用いるなどの意見があったが、決定的な案はまだ得られていない。3Dでキャラを作成するためにどうすればよいか、TAの先輩からアドバイスを貰った。これを参考に、フリー素材とBlenderでなんとかならないか次回までに進めておきたい。

• HTMLの応用
• Gitlab
• モジュール分け

コメント
講義ではHTMLの応用とGitlabについて学んだ。HTMLは主として開発で使うことが決定したので、自分で使えるようにしておきたい。グループ開発では、前回までのものと操作の洗い出しを基にモジュール分けを行った。HTML, JavaScript, CSSを用いてアプリを作成する方針で固まった。また、未決定であった筋トレの経験値について、具体的にどのようなメニューがあるかを列挙し難易度別にまとめた。一方、データベースをどうするか、誰がどの画面を作成するか、最も大切な自キャラをどうするかなど曖昧になっているため、プロトタイプ作成に入ることがまだ難しいと感じる。次回までにこのあたりを確定させ、グループ開発に入れるようにしたい。

• enchant.jsについて
• モジュール実装
• プロトタイプ作成(demoplay.html, demoplay.js)

コメント
グループ開発では、前回のモジュール化から役割分担を行い、プロトタイプの作成に入った。中間発表までに完成させるべき画面を決め、自分はお手本プレイ画面と退会画面を担当することになった。今回の講義内でお手本プレイ画面の大枠は作ることができた。htmlを書くことには慣れてきたと思うが、cssの使い方について理解できておらずレイアウトがいまいちなので、自分で勉強しておきたい。また、使用する関数についてまだ考えていないので、データベースへの送信やデータの保存など汎用性の高い関数についてグループで共有しつつ考えておきたい。

• デバッガについて
• プロトタイピング(demoplay.css, retire.html)

コメント
グループ開発では、各自で役割分担した画面の作成を行った。自分はお手本プレイ画面のcssと退会画面の大まかな形を作るところまで進めることができた。タイトル画面の完成度が高かったので参考にしつつ退会画面を作成していきたい。中間発表でアプリの概要を説明する程度には完成に近づいてきていると思う。Gitlabの設定も完了し、次回以降は全体的なレイアウトやフォントの統一を進めていきたい。メインである3Dキャラ、お手本プレイの動画撮影がまだであるため、残り時間を考えつつ各画面のクオリティを上げていきたい。

• プロトタイピング(retire.css, retire.js)
• 中間発表準備

コメント
各自でプロトタイピングを進め、中間発表で目標としていた画面はある程度完成させることができた。自分が担当したお手本プレイ画面と退会画面は画面遷移を除き完成した。全体のレイアウトも統一したので見た目が綺麗になりアプリっぽくなったと思う。また、中間発表のページを作成し、どこまで発表するかを確認した。モジュールのインターフェースについての記述が不足しているため、次回の発表までに手直しし、良い発表が行えるようにしたい。

Gitlabの再設定、中間発表で使う画面遷移の確認、README、中間発表のページの修正を行った。まだ粗い箇所はあるが、形としては現時点で良いものが作れたと思う。モジュールのインターフェースについての説明画像も添付できた。明日は良い発表ができるようにしたい。

• 中間発表

コメント
自分は中間発表のページ作成と発表、アプリとしての実装に時間を使った。その間に班員がサーバの構築を進めてくれたので、中間発表までに予定より完成度の高いものができたと思う。他の班の発表について、4, 5班のものが印象的であった。4班はモジュール分け、jsファイルの細かさ、ストーリー性も含め圧倒的に完成度が高く凄いと思った。また、5班はcssの綺麗さと音声を用いるという点で参考にしたいと思った。自分たちの班は結構進んでいると思っていたが、このような班の中間発表を見て、最終発表までに考え直す点がまだあると感じた。3Dモデルの作成、css、データベースと3Dモデルの紐付けなど、何をやるかはこれまでより明確になっているので、残りの時間でこれらを進めていきたい。

• node.jsについて
• WebSocketについて
• cssの修正

コメント
グループ開発では、全体のcssの修正を行い、レイアウトの統一やボタンのさらなる工夫を進めた。3Dモデルについて、サーバの担当が入力されたデータをキャラのデータに反映するための開発を行ってくれている間にページの完成度を上げ、アプリとしての質を高めておきたい。

データベースを任せている間にトレーニング記録画面の作成を行った(record.html, record.css, record.js)。データベースからトレーニングの入力を受け取る前まで完成した。

• node.jsとWebSovcketについて
• モジュール分けの更新
• cssの修正
• 3Dキャラの実装
• データベースとの紐付け

コメント
cssについて、フォント、ボタンの色形、画面の色の統一を行った。トレーニング記録画面について、数値での記録とグラフでの表示でページを分けた。値をデータベースから受け取り反映させるjs部分は次回以降で完成させたい。キャラの経験値とレベルを表示する部分は視覚的なイベントをjsで書き加えた。データベースから値を受け取り、経験値とレベル、グラフに反映させる部分はまだ未実装であるため、これを進める必要がある。モジュール分けの更新について、個人での作業が終わらず時間をかけて考えることができなかったため、次回までに考えておきたい。

• インターフェースの変更
• 統合
• cssの修正
• アニメーションの追加
• 3Dキャラの実装
• データベースとの紐付け

コメント
前回に引き続きcssの修正を進め、また画面遷移時のアニメーションを追加した。まだ全画面に手をつけていないので、次回の講義に加えて講義時間外で終わらせる必要がある。統合について、各々で修正していたプログラムのバージョンに違いがあったため時間を使ってしまった。画面遷移時のパスの書き換えや動画のパスなど必要な箇所はチェックしたが、まだ確認しきれていない箇所があるのでこれも終わらせておきたい。お手本プレイ動画について、班員がジムで撮影してくれたのでこれを動画ファイルとして追加し、お手本プレイ画面で見ることができるようになった。3Dキャラについて、メイン画面で表示し、また筋トレの程度に応じて部位が変化する動きも実装の段階に入っていたため、目標とするアプリの完成に近づいていると感じた。

• cssの修正
• アニメーションの追加
• 3Dキャラの実装
• データベースとの紐付け
• 最終発表の準備

コメント
cssの修正、アニメーションの追加については発表できる程度には終えることができた。だがもう少しこだわりたい箇所が残っているのであと2週間で修正したい。お手本プレイ画面の動画挿入、パスの書き換え、3Dキャラのメイン画面への実装、データベースとグラフとの紐付けまで大体終えたが、実行してみるとバグが起こる箇所があったため、最終発表までに完璧に動くように修正しておきたい。最終発表のページもあらかた作り終えたので、発表の手順とアプリの完成を2週間で確認し、良い発表ができるようにしたい。

メンバー全員で集まって開発を進めた。データベースとの紐付けを主に各自終わっていない箇所を修正した。トレーニング記録画面について、経験値とレベルをトレーニング記録値から等比数列的に設定し表示する機能を実装した。

横田と協力してトレーニング入力画面、退会画面にアニメーションを更に追加した。退会画面については、退会する気が薄れる程度に画面の読み込みが遅くなるように工夫した。また、トレーニング記録画面のグラフの見え方(色やラベル、グラフのタイプなど)を修正した。

• 最終発表

コメント
中間発表でも印象的であった2つの班が最終発表でも傑出していた。4班は中間発表から質が高くほぼ完成していた感じがあったが、それ以上に手が加えられており、もはやリリースしたほうが良いのではないかと思った。気になってGitLabを見たが、ファイル数やコミット数が桁違いで流石だと思った。5班は中間発表からの進化が凄かった。これも本物のゲームと遜色ないクオリティで構造が気になったためGitLabを見た。個人で作業ディレクトリを分けて開発を行っていたが、これも量が多くその努力は見習いたいと思った。モジュール分けもまとっていて参考になった。

グループ開発では、班wikiの記載全て、トレーニング記録画面・お手本プレイ画面・退会画面の作成を担当した。単なるページ表示では面白味がないため多くの工夫を凝らした。経験値とレベルの実装方法、画面遷移やマウスオーバー時のアニメーションには特に力を入れた。wikiにもアプリにもユーザのことを考えたさまざまな機能があるので、アプリを実際に使ってこれを体感してほしい。
講義を通して、HTML, CSS, JavaScriptの基礎を自主的に学び、その知識を身に付けることができたと強く感じる。普段何気なく見ているWebページがどのような仕組みで動いているのか、次第に理解できるようになり面白かった。また、初めて行ったグループ開発について、役割分担はできるが個人の仕事量には差があり、これを考慮しつつプロジェクトを進めることの難しさを体感した。このような難しさもあったが、アプリが形になるにつれてモチベーションが高まり、一体感を持って開発に取り組むことができたので良かったと思う。