<<目次>> ((outline)) <<個人活動記録>> <<<第1回(4/21)>>> *ガイダンスとして講義の情報が紹介されたほか、山中先生の研究室の皆様により過去の作品例の紹介がされた。 *班決めを行い、一部メンバーですでに組まれていたLINEグループを最終的に確定したメンバーで組み直した。 *個人のページを編集した。 *これから取り組むプロジェクトの基本的な方針を話し合い、「時計機能を使って勉強時間を管理するアプリ」という感じに落ち着いた。 **「そもそもゲームかアプリか」というところから議論が始まったが、ゲームは中途半端なところで開発が詰む可能性があること、そしてアプリのほうが後から機能を追加していきやすいということからアプリに決まった。 感想 *個人的なバックアップの意味合いでGitの利用経験はある(といっても3年進学前の春休みでなんとか把握したばかりではある)が、グループでの開発で用いるという本来想定されているであろう形で使うのは初めてなので、その感覚に慣れていきたい。 * HTML/Javascriptに触れた経験はないので、これからの授業と自習で基礎から学んでいきたい。 <<<第2回(4/28)>>> * サンプルに従いながらHTMLの基礎的な事項を学んだ。 * Gitlabの設定をした。 ** グループのレポジトリ作成や最初のcommitにあたり、班長を補佐した。 **自身のアカウントを作成し、試しにcloneや文章を直したものをcommitしたり、いままで個人で行ってきたGitでの行為を試した。 ** 他のメンバーが編集したものを反映させるためのpullを試した。 * 簡易企画書について他メンバーと討論した。 ** 「企画書段階でどこまで盛り込むべきか」「イメージ画像をどうするか」という点が主に話されていた。 感想 * プログラミングをしてサイトを作るという経験が初めてだったので、簡易的なものであるものの表示されたときは軽く感動を覚えた。 * commitの順番の問題が発生していたメンバーがおり、グループ開発らしさを垣間見たように思えた。 <<<第3回(5/2)>>> * サンプルに従いながらJavascriptの基礎的な事項とHTMLとの関連づけ方を学んだ。 * 企画書に基づいて「もの」と「操作」を洗い出し、おおよそのリーダーを決めた。 ** Google Docsを利用し、メンバー全員で同じファイルを共有し同時に確認できるような工夫がされていた。 * Figmaにアカウントを作成し、サイドバーのデザインを考えた。 ** 展開・格納型や各項目を明確に分けたメニューが提案されるなか、企画書に近いデザインを考えた。 * 班wikiのリンクを整理し、視覚的にわかるようにした。 感想 * 新しく触れる言語やサービスが多く、興味深く感じた一方、操作を早期に把握したいと感じた。 <<<第4回(5/12)>>> * Javascriptの応用編を例を手打ちしながら学んだ。その中で、オブジェクトに関連する用語（関数に関連する用語を含む）を学んだ。 * メニューのデザインを確定した。 * サイドバーの動きを洗い出した（展開と格納、個々の要素のリンク） * より企画書に近いデザインになるように、ヘッダーが固定されるようにすることを考えたり、バーの高さを変えることを試みるなどCSSの要素をさまざまに変えながら検討した。 （5/17 授業時間外補足） * Notionに上げられていたものの、班wiki上にまだ上げられてなかった手書きで書かれた操作のイメージの画像を簡易企画書ページに追加した。 <<<第5回(5/19)>>> * HTMLの応用編としてデザインを上手に管理する手法としてCSS表記を学んだ。 * Gitlabの留意事項の復習し、今回新たにモジュールについての留意事項を学んだ。 * おおよそモジュール分けが行われたこと、そして予想以上にサイドバーの進度が速いということを受け、改めて担当が振り分けられた。 ** 結果、班の別メンバー（佐々木）が担当となっていた「記録管理」に合流することになった。 * Pythonによる記録管理をさまざま検討した。 ** さまざまなパターンを想定し、容易に書き換えて試せるようにGoogle Colaboratoryを利用した。 ** 小数の乱数を出すuniform関数で適当な勉強時間を入れたサンプルデータを用意し、matplotlibでグラフを生成することを試した。 ** 最初は日付と時間のリストを個々に分け、そのまま縦軸・横軸のデータとして利用していた。しかし、削除などの後のデータ操作時に関連づけがされていた方が便利と考え、DataFrameを採用する形で書き直した（データ操作は未実装）。 ** 協力メンバー（佐々木）の提案をもとに、「1週間分」「1か月分」...といったように単位を変えた表示について考えた。 感想 * 学びの面でPythonを使ってきた面が大きかったため、実用の面で使うということについて改めて考える良い機会となった。HTMLとの橋渡しとなるDjangoの知識を付け、理解を深めたい。 * 記録の管理を考える上で恐らくデータベースとの連携が重要になってくると感じたので、きちんと話し合いを行いたい。
（5/19 授業時間外補足） * 後々のデータベースの利用を想定し、Pythonに標準で搭載されているsqlite3モジュールを用いたDataFrameとデータベースの相互の読み書きを試した。 ** 授業内の段階では日付をindexにしていたが、この読み書き時にややこしいことになったので、indexをデフォルトに戻し、columnが日付と時間になるように直した。これに伴い、縦軸・横軸のデータをcolumn名によって明示的に指定する形に変更した（デフォルトではindexの数字が横軸になってしまうため）。 <<<第6回(5/26)>>> * 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関数にかけることで対処。 <<<第7回(5/29)>>> * ブラウザに搭載されているデバッグ機能について学んだ。 * タイトルを決めた。 * データベースをどのように扱うかについて、SQLiteのVSCode拡張を用いて調べた。 ** データベースにリレーションを追加し、データを追加することはできた。 * Powerpointへのリンクを班wikiに貼った。 <<<第8回(6/2)>>> * ロゴを作り、きれいな画像から透過版も生成した。 * 確認のため、UbuntuにDjango環境を構築して、データベース担当のメンバー（辻村）が作成した各種システムを確認した。 ** データベース担当のメンバー（辻村）が作成したインストールのシェルスクリプトで実行 * 既に作られていた時間記録のスクリプトを参考に、スケジュールのデータをadmin画面から見られるようにした。 <<<第9回中間発表(6/16)>>> * 中間発表を見た。 ** 予想以上に皆様の進度が早く、また凝っており大変驚いた。 * これからどうするかを話し合った。 * 班wikiの画像のサイズを修正した。 <<<第10回(6/23)>>> * 班のメンバー（佐々木）およびTAの方とともに[Google Charts|https://developers.google.com/chart?hl=ja]を用いたJavaScriptベースのグラフ表示を考えた。 * Google Chartsにおけるグラフ表示用データの記述方法が特殊（ラベルのリストを含めた多重リスト）だったため、それに合わせた行列の宣言・データの取得でかなり試行錯誤した。 ** 「何個の記録があるか」をdate_lengthとしてviews.pyから送るように改良した。 ** Djangoの繰り返しの仕様をよく知らない状態だったため、しばらく値だけが取り出されていることを理解しておらず、同じ日付・勉強時間が何度も繰り返される行列を作ってしまっていた（既にリストになっていると思い込んでいた）。 *** 最終的には「配列を宣言しラベルを代入するスクリプト」と「値の代入とグラフの描画を繰り返すスクリプト」に分割する形にして解決されたものの、検討段階でスクリプト同士でのデータの引き継ぎがうまくいかない場合もあるなど混迷を極めた。 ** JavaScriptが勝手にハイフン区切りの日付を引き算と勘違いして計算結果が代入されるという面白くもあり厄介でもある現象が発生したが、ダブルクオーテーションで囲んだことで解決した。 ** 結構な頻度でグラフ自体が表示されなかったりもした。 *** 公式のテンプレートに従ったり、データ定義時に第3のrowとしてstyleを明示したことで表示されるようになった。 * データベース担当（辻村）の助言に従い、base.htmlで定義されたフォーマットに基づくようにコードを整理した。 * ある程度の進歩が得られたため、gitlabに反映させた。 感想 * 長い時間はかかったものの、グラフの表示までこぎつけることが出来たのはかなりの前進だと感じている。以降は機能面でデータの単位を変えた表示（1週間、1ヶ月など）を達成したり、色・文字の大きさといったデザイン面の調整をしていきたい。 <<<第11回(6/30)>>> *Google Chartsを用いたグラフのデザインを整えた。 **色はロゴに合わせた紫基調、縦軸のラベルは0（分）から...といったように色とラベルの表示を変更し、縦軸と横軸に項目名を追加した。また後のタブ切り替えを想定し、タイトルは削除した。 **HTMLのタブ機能を利用し、CSS/JavaScriptと合わせることでタブ毎で別々のコンテンツを表示できるようにした（授業時間内ではデフォルトの「全期間」部にいままで作っていたグラフが表示されるようにし、他のタブは名前だけ取り敢えず置いて追いた）。 *班のメンバー（佐々木）が学習時間の平均値をグラフに直線として追加しようと試みていたので、情報収集を手伝った。 ** しかし、直線を引くオプションやメソッドはなさそうであり、「値の変化しない折れ線」として無理やり直線を編みだし、棒グラフと複合させるといった工夫が必要ではないかという話になった。 （6/30 授業時間外補足） * Poetryを利用し、自身のノートパソコンでサイトをテストできるようなPython仮想環境を構築した。 ** 正確には「Gitlabに載っている"pip3 install ～"でインストールされる各種モジュールが揃った状態の仮想環境がいつでもできるようなファイルを作成した」という形。 ** 特殊なモジュールが多く、他との干渉を防ぐために仮想環境とした。 ** Powershellから仮想環境を立ち上げてrunserverを行ったところ、ちゃんとサーバーが起動してサイトが動作することが確認された。 * グラフの定義関数を複製し、関数名や生成グラフのidを分けて定義関数の数だけCallbackを行うようにしたところ、タブ毎にグラフを表示することが可能であることが確認された（しかし、最初にデフォルトで表示されるタブ以外では縦軸の数字が表示されない）。 ** もしかしたら、グラフ毎に別々に軸を定義しないといけないかもしれない。 <<<第12回(7/7)>>> <<<第13回(7/14)>>> <<<第14回最終発表(7/28)>>>