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

• ガイダンスとして講義の情報が紹介されたほか、山中先生の研究室の皆様により過去の作品例の紹介がされた。
• 班決めを行い、一部メンバーですでに組まれていたLINEグループを最終的に確定したメンバーで組み直した。
• 個人のページを編集した。
• これから取り組むプロジェクトの基本的な方針を話し合い、「時計機能を使って勉強時間を管理するアプリ」という感じに落ち着いた。
  • 「そもそもゲームかアプリか」というところから議論が始まったが、ゲームは中途半端なところで開発が詰む可能性があること、そしてアプリのほうが後から機能を追加していきやすいということからアプリに決まった。

感想

• 個人的なバックアップの意味合いでGitの利用経験はある(といっても3年進学前の春休みでなんとか把握したばかりではある)が、グループでの開発で用いるという本来想定されているであろう形で使うのは初めてなので、その感覚に慣れていきたい。
• HTML/Javascriptに触れた経験はないので、これからの授業と自習で基礎から学んでいきたい。

• サンプルに従いながらHTMLの基礎的な事項を学んだ。
• Gitlabの設定をした。
  • グループのレポジトリ作成や最初のcommitにあたり、班長を補佐した。
  • 自身のアカウントを作成し、試しにcloneや文章を直したものをcommitしたり、いままで個人で行ってきたGitでの行為を試した。
  • 他のメンバーが編集したものを反映させるためのpullを試した。
• 簡易企画書について他メンバーと討論した。
  • 「企画書段階でどこまで盛り込むべきか」「イメージ画像をどうするか」という点が主に話されていた。

感想

• プログラミングをしてサイトを作るという経験が初めてだったので、簡易的なものであるものの表示されたときは軽く感動を覚えた。
• commitの順番の問題が発生していたメンバーがおり、グループ開発らしさを垣間見たように思えた。

• サンプルに従いながらJavascriptの基礎的な事項とHTMLとの関連づけ方を学んだ。
• 企画書に基づいて「もの」と「操作」を洗い出し、おおよそのリーダーを決めた。
  • Google Docsを利用し、メンバー全員で同じファイルを共有し同時に確認できるような工夫がされていた。
• Figmaにアカウントを作成し、サイドバーのデザインを考えた。
  • 展開・格納型や各項目を明確に分けたメニューが提案されるなか、企画書に近いデザインを考えた。
• 班wikiのリンクを整理し、視覚的にわかるようにした。

感想

• 新しく触れる言語やサービスが多く、興味深く感じた一方、操作を早期に把握したいと感じた。

• Javascriptの応用編を例を手打ちしながら学んだ。その中で、オブジェクトに関連する用語（関数に関連する用語を含む）を学んだ。
• メニューのデザインを確定した。
• サイドバーの動きを洗い出した（展開と格納、個々の要素のリンク）
• より企画書に近いデザインになるように、ヘッダーが固定されるようにすることを考えたり、バーの高さを変えることを試みるなどCSSの要素をさまざまに変えながら検討した。

（5/17 授業時間外補足）

• Notionに上げられていたものの、班wiki上にまだ上げられてなかった手書きで書かれた操作のイメージの画像を簡易企画書ページに追加した。

• HTMLの応用編としてデザインを上手に管理する手法としてCSS表記を学んだ。
• Gitlabの留意事項の復習し、今回新たにモジュールについての留意事項を学んだ。
• おおよそモジュール分けが行われたこと、そして予想以上にサイドバーの進度が速いということを受け、改めて担当が振り分けられた。
  • 結果、班の別メンバーが担当となっていた「記録管理」に合流することになった。
• Pythonによる記録管理をさまざま検討した。
  • さまざまなパターンを想定し、容易に書き換えて試せるようにGoogle Colaboratoryを利用した。
  • 小数の乱数を出すuniform関数で適当な勉強時間を入れたサンプルデータを用意し、matplotlibでグラフを生成することを試した。
  • 最初は日付と時間のリストを個々に分け、そのまま縦軸・横軸のデータとして利用していた。しかし、削除などの後のデータ操作時に関連づけがされていた方が便利と考え、DataFrameを採用する形で書き直した（データ操作は未実装）。
  • 佐々木氏の提案をもとに、「1週間分」「1か月分」...といったように単位を変えた表示について考えた。

感想

• 学びの面でPythonを使ってきた面が大きかったため、実用の面で使うということについて改めて考える良い機会となった。HTMLとの橋渡しとなるDjangoの知識を付け、理解を深めたい。
• 記録の管理を考える上で恐らくデータベースとの連携が重要になってくると感じたので、きちんと話し合いを行いたい。

（5/19 授業時間外補足）

• 後々のデータベースの利用を想定し、Pythonに標準で搭載されているsqlite3モジュールを用いたDataFrameとデータベースの相互の読み書きを試した。
  • 授業内の段階では日付をindexにしていたが、この読み書き時にややこしいことになったので、indexをデフォルトに戻し、columnが日付と時間になるように直した。これに伴い、縦軸・横軸のデータをcolumn名によって明示的に指定する形に変更した（デフォルトではindexの数字が横軸になってしまうため）。

• enchant.jsについて学んだ。
• 前回欠席していた鈴木氏が新たに記録管理班に合流した。
• データベース担当の辻村氏とデータベースとの連携について話し合った。
  • 記録される内容について合意を行い、勉強時間の単位が「時間」から「分」に変更された。
    • これに伴い各種変数名とテストデータを「分」仕様に変更した。
  • 記録管理モジュール内でデータベースに直接アクセスするかについて話し合ったが、結論としては「予め日付と勉強時間が分けられた状態でデータが渡され、表示のみを行う」という形になった。
• Pythonによる記録管理を発展させた。
  • 引き続き、Google Colaboratoryを利用した。
  • matplotlibのaxhline関数とnumpyのmean関数を用い、既存のグラフに勉強時間の平均と目標値を表示する機能をつけた。
    • アイデアは記録管理班の佐々木氏の提案によるもの。
  • subplots関数を応用し、「勉強時間を降順に並び替えたグラフ」と「上位を摘出した表（いわゆる「ランキング」）」を縦に並べて表示することを試みた。
    • アイデアは鈴木氏の提案によるもの。
    • DataFrameによってDateも一緒に並べ替えられるようにしていたので、並べ替えの処理はスムーズに進んだ。
    • 1列しかない場合は描画領域が1次元行列で定義されることに気づかず、何度かエラーを起こした。
    • そもそもベースがグラフ用のため、軸を表示しないようにする、（上下で割合を調整出来ない仕様ゆえ）縦横比をうまく調節する、文字の大きさの調整をする...などなどかなり手間取った。
• 以上の検討の末、グラフはmatplotlibで作った画像を用いる一方で、表の表示に関しては「とりあえず並べ替えたデータだけ用意してDjangoに拾ってもらい、表示する方はHTMLに任せるのがよいのでは？」という話に落ち着いた。
  • Djangoにおけるデータの取り出し方とHTMLによる表の定義方法のサイトを確保し、ブックマークした。

感想

• おおよそグラフの生成に関しては整ってきたと思う。班でアイデアがさまざま出されたおかげでかなり充実した。
• 次回からは「データベースからちゃんとデータを受け取れるか」「生成したデータ（画像・表のもととなる辞書またはリスト）をHTMLで整形して表示する」という実装部分を記録管理班で協力して作成していきたい。

（5/26 授業時間外補足）

• 降順に並べ替えた勉強時間のデータについて、キーをDate、値をStudyminitesとして1日ごとに対応づけされた辞書を生成する部分を追加した。
  • 最初はpandasのto_dictメソッドを利用することを考えたが、orientパラメータをさまざま試して丁度いい感じにならなかった。
  • 明示的にDate列とStudyminutes列を取り出してzip関数で合わせ、それをdict関数にかけることで対処。

• ブラウザに搭載されているデバッグ機能について学んだ。
• タイトルを決めた。
• データベースをどのように扱うかについて、SQLiteのVSCode拡張を用いて調べた。
  • データベースにリレーションを追加し、データを追加することはできた。
• Powerpointへのリンクを班wikiに貼った。

• ロゴを作り、きれいな画像から透過版も生成した。
• 確認のため、UbuntuにDjango環境を構築して、辻村氏が作成した各種システムを確認した。インストールのシェルスクリプトで実行。
• 既に作られていた時間記録のスクリプトを参考に、スケジュールのデータをadmin画面から見られるようにした。

• 中間発表を見た。
  • 予想以上に皆様の進度が早く、また凝っており大変驚いた。
• これからどうするかを話し合った。
• 班wikiの画像のサイズを修正した。

• 佐々木氏およびTAの方とともにGoogle Chartsを用いたJavaScriptベースのグラフ表示を考えた。
• Google Chartsにおけるグラフ表示用データの記述方法が特殊（ラベルのリストを含めた多重リスト）だったため、それに合わせた行列の宣言・データの取得でかなり試行錯誤した。
  • 「何個の記録があるか」をdate_lengthとしてviews.pyから送るように改良した。
  • Djangoの繰り返しの仕様をよく知らない状態だったため、しばらく値だけが取り出されていることを理解しておらず、同じ日付・勉強時間が何度も繰り返される行列を作ってしまっていた（既にリストになっていると思い込んでいた）。
    • 最終的には「配列を宣言しラベルを代入するスクリプト」と「値の代入とグラフの描画を繰り返すスクリプト」に分割する形にして解決した。しかし、検討段階でスクリプト同士でのデータの引き継ぎがうまくいかない場合もあるなど混迷を極めた。
  • JavaScriptが勝手にハイフン区切りの日付を引き算と勘違いして計算結果が代入されるという面白くもあり厄介でもある現象が発生したが、ダブルクオーテーションで囲んだことで解決した。
  • 結構な頻度でグラフ自体が表示されなかったりもした。
    • 公式のテンプレートに従ったり、データ定義時に第3のrowとしてstyleを明示したことで表示されるようになった。
• 辻村氏の助言に従い、base.htmlで定義されたフォーマットに基づくようにコードを整理した。
• ある程度の進歩が得られたため、gitlabに反映させた。

感想

• 長い時間はかかったものの、グラフの表示までこぎつけることが出来たのはかなりの前進だと感じている。以降は機能面でデータの単位を変えた表示（1週間、1ヶ月など）を達成したり、色・文字の大きさといったデザイン面の調整をしていきたい。

• Google Chartsを用いたグラフのデザインを整えた。
  • 色はロゴに合わせた紫基調、縦軸のラベルは0（分）から...といったように色とラベルの表示を変更し、縦軸と横軸に項目名を追加した。また後のタブ切り替えを想定し、タイトルは削除した。
  • HTMLのタブ機能を利用し、CSS/JavaScriptと合わせることでタブ毎で別々のコンテンツを表示できるようにした（授業時間内ではデフォルトの「全期間」部にいままで作っていたグラフが表示されるようにし、他のタブは名前だけ取り敢えず置いて追いた）。
• 佐々木氏が学習時間の平均値をグラフに直線として追加しようと試みていたので、情報収集を手伝った。
  • しかし、直線を引くオプションやメソッドはなさそうであり、「値の変化しない折れ線」として無理やり直線を編みだし、棒グラフと複合させるといった工夫が必要ではないかという話になった。

（6/30 授業時間外補足）

• Poetryを利用し、自身のノートパソコンでサイトをテストできるようなPython仮想環境を構築した。
  • 正確には「Gitlabに載っている"pip3 install ～"でインストールされる各種モジュールが揃った状態の仮想環境がいつでもできるようなファイルを作成した」という形。
  • 特殊なモジュールが多く、他との干渉を防ぐために仮想環境とした。
  • Powershellから仮想環境を立ち上げてrunserverを行ったところ、ちゃんとサーバーが起動してサイトが動作することが確認された。
• グラフの定義関数を複製し、関数名や生成グラフのidを分けて定義関数の数だけCallbackを行うようにしたところ、タブ毎にグラフを表示することが可能であることが確認された（しかし、最初にデフォルトで表示されるタブ以外では縦軸の数字が表示されない）。
  • もしかしたら、グラフ毎に別々に軸を定義しないといけないかもしれない。

• Google Chartsを用いたグラフのデータを分ける作業のサポートを行った。
  • 同じ記録管理班の佐々木氏がメインで進め、大きく変えないと確かめられないような場合を検討したい際に同時進行で試すという担当分けで行った。
  • タブの実装方法自体が問題かと思い、別の実装パターンを試したがグラフが表示されなくなったりした。
  • 授業外の自身の実装で発生した軸のバグは授業内でも発生し、その対応に佐々木氏とともに苦戦した。
    • 関数毎の変数名を分けていなかったことからその辺の問題かと思ったがそうではなかった。
  • 佐々木氏のひらめきで「一旦データベースにあるすべての学習時間データを回収した行列を作成し、そこから表示する分を再構築して別の行列にする」という形で特定期間の表示を達成する方針になった。
    • その方針に従い、7日分の表示を実現することができた（正確には記録されているうちの最後7個）。
• タブごとの表示の分割が関数そのものではなく変数を複製する形に変更された。また、グラフがウィンドウの幅に合わせて動くようになった。
• 記録管理班用branchにgit pushするまでの流れの補佐をした。
  • commitメッセージの提案を行う、実際にpushされたかどうかの確認など。

感想

• 大庭氏からがんちゃんのウェイト塗りを引き受けたので、早めに手を打ちたい。
• 記録のない日付の学習時間を埋める作業を完成させることが次回の大きな目標となりそう。データベースから送ってくる側をいじることになりそうなため、データベース担当の辻村氏と協力して考えていきたい。

（7/8 授業時間外補足）

• がんちゃんの3Dモデルのボーンを修正し、ウェイトを貼った。
  • かつて作ったがんちゃんの3Dモデルが参考として存在したため、予想以上に手際よく終わった。
    • ただし、かつてのモデルはBlender上でボーンを予め修正したうえで出力したが、今回は出力後に修正を行う形にした。
  • 腕の頂点が少なかったことでそのままではうまく曲がらず、手足（手首足首を除く）はかつてのモデルを流用する形にした。
  • とりあえず踊るモーションを入れてそれなり動くところまで仕上げることが出来た。

• 記録のない日付の学習時間を埋める作業についての試行錯誤をサポートした。
  • 基本的にはデータベース担当である辻村氏、同じ記録管理班の佐々木氏との3人体制で行った。
  • 日付の行列を作って、それに合わせて時間を埋めるという方針ではうまくいかなかったので、「日付と時間0により構成される1行だけのDataFrameを続々と結合して最後に並べかえる」という方針になった。
  • 途中から殆ど2人に任せる形となった。
• がんちゃんの3Dモデルの活用を考えた。
  • 大庭氏が太田氏を撮った映像から取ったモーションをテストした。
  • 作りたい動画のモデルとなる動画に出ている小道具に近いモデルを探し回った。

（7/15・16 授業時間外補足）

• 勉強しているがんちゃんの映像を作成した。
  • 作りたい動画のモデルとなる動画の小道具を参照に、テクスチャの色を変えた。

• 最終発表を聞いた。
  • 個々の班が基本的な考え方は維持しつつ大きく発展させており、大変楽しく見ることができた。
  • 前日にある程度確認を取り、調整しておけばよかったと感じた。

某作品をもじったタイトルの当プロジェクトらしく、それをベースにしたロゴを作りたいと思い、加工して作成した（英語部は似たフォントで作ったが、日本語部に関してはすべて元々の文字の部品から構成されている）。

大庭氏の作成した3Dモデルから、最低限の状態でそのままMMDモデルに変換し、ボーンの親子関係や名称を整えたり、ウェイトを貼るなどモデルとしての仕上げをほとんど担当した。モデル完成後には、大庭氏からモーションのみ受け取り、既に別件である程度作成していたシェーダ環境をベースに物を配置して何度も物の色や位置を変えながら、某girlらしさを十二分に出せるような動画を作成した（統合時にさらっと落ち着くBGMが付けられていて面白かった）。

ノートパソコンでも開発がしたいということで、readme.mdのpip部から勝手にpoetryのファイルを作った。これによって、同じ記録管理班の佐々木氏やデータベース担当の辻村氏などが加えた変更によってどのように動きが変わったかを確認したり、自身で検討したいことがあった際に大いに役に立った。

大枠が完成した最後の方では、3Dモデルのほうが忙しくなったのもあって佐々木氏に任せる部分が多くなったものの、pandasでデータの処理を行う、matplotlibでグラフを作って送る、Google Chartsでグラフを作る方法を調べて実装するといった様々な検討の仕事を一身に背負うこととなった。色々と没になった仕様も多かったが、最終的にJavaScriptを用いたサイトらしいグラフをタブ切り替え付きで完成させられたことは良い経験となった。