研究室の議事録作成を自動化した話

概要

私の研究室では毎週各班ごとにパワーポイントで資料を作ってゼミを行っています。
持ち回りで班員が議事録を書いています。
書いている内容としては

• 最初のページの進捗
• 最後のページの今後の予定

の二つだけでした．
私は「この単純作業いるのか？」と感じました。
資料を開いて、コピーしてペーストして、次の人の資料を開いて、コピーして.....という繰り返しです。
この作業をしていて思ったことは、「やりたくない」、「一々ファイルを開くのが面倒くさい」、「なんとなくプログラムで解決できるのでは？」と考えていました。
ということで、「自動化しよう！」決断し、自動化に踏み切りました。

具体的に解決した課題

今回は3つのことを解決したいと考えていました。

1. メンバーの資料をコピペしていること
2. ゼミでの議論の内容を集中的に記録できていないこと
3. 先生だけが見る議事録になっていること

メンバーの資料をコピペしていること

基本的に最初のページに「進捗」、最後のページに「今後の予定」に沿ってゼミでの発表も行われています。
そのため、総括してまとめると「進捗」、「今後の予定」が端的にまとまっていて使い勝手がいいという状態です。
なので、そこだけ取り出してしまえばある程度記憶と資料を見れば何をしていたか補える状況です。

ゼミでの議論の内容を集中的に記録できていないこと

これは、特に私が担当するときに感じていたことで「進捗」と「今後の予定」に付随する形で議論の内容を書きたいと考えているため、何も書いていない議事録だと、まずタイトルを書き写そうとしてしまいます。
そして、同じ班の中でも全く異なる内容の研究をしていることや議論が白熱したりすると、最初の方に発表した人については「進捗」と「今後の予定」を後でコピペするときに議論の内容が「進捗」や「今後の予定」のどの部分にあたるのか忘れていることもあります。

先生だけが見る議事録になっていること

基本的には議事録を学生が利用している光景を見たことがなく、これまでは、議事録を作っても先生が見ている"かもしれない"程度の物でした。
これでは、正直学生側がしっかりと議事録を書く意義を見出すことが難しいと考えていました。
そのため、議事録の質という点でも一定以下の水準(資料のコピペすらしない人もいる)になっている回もあります。

使用言語

• バックエンド：Python3
• フロントエンド：Vue3

選定理由

ゼミは毎週あるので、すぐ使える形にしたいと考えていました。
そこで、普段研究や個人の開発でも使うことの多いPythonをバックエンドとして選びました。
また、フロントエンドに関してはインターンの中でチームメイトが使用していたという理由から心理的なハードルの低かったVueを採用しました。

制作物

製作物のコードを上げているGitHubのURLを載せておくので、興味のある方は是非！

機能

実装した機能は次のようになっています。

1. PDFを読み込み議事録を作成する
2. 議事録を表示する
3. あるメンバーとタイトルの内容を表示する
4. あるメンバーとタイトルの内容の検索
5. あるメンバーとタイトルの内容の編集
6. 議事録の更新
7. あるメンバーの未提出の回の表示

工夫したところ

ここではバックエンド・フロントエンドで工夫したことについて、目的と方針を書いていきます。
バックエンド

1. PDFを読み出す際にタイトルをREADME.mdで指定したこと
   目的：README.mdの内容と議事録で取り出すタイトルを一致させたかった。
   方針：## Rule以下にある<!- title --!>がついている行の内容をタイトルとする。
2. 議事録の作成時に高学年から低学年の順番になるようにした
   目的：学年が上の人から発表するので発表順と議事録に記録されている順番を一致するようにしたかった。
   方針：先に、データの型を決めて置き、人のデータを取得する際に学年ごとに分類できるようにした。

フロントエンド

1. メンバーの名前と読み出すタイトルを上部に固定したこと
   目的：議事録の閲覧時には名前とタイトルボタンを押す必要があるので、それを常に押せる状態にした。
   方針：上部にcssでposition:fixed;して固定
2. 資料が未提出の日付を画面右側に固定して表示したこと
   目的：資料が未提出日の可視化をすること
   方針：資料を出していない日を持っているリストメンバーごとに作る
3. あるメンバーの特定のタイトルに記載されている内容から検索が出来るようにしたこと
   目的：検索ができないとすべての情報を当たることになって非常に面倒なので、検索することにした。
   方針：メンバーの誰かを指定し、タイトルを指定した状態で検索すると使えるようにする。

つまずいたこと

ここではバックエンド・フロントエンドでつまずいたことについて、課題詳細と解決方針を書いていきます。

バックエンド

1. 編集後に自動生成をすると編集内容が消える
   課題詳細：当初議事録を自動生成してから編集する想定だったため、編集後に自動生成すると編集内容が保持されない状態になっていました。
   解決方針：編集後の議事録のテキストファイルからデータを読み込んでおいて、PDFの資料のデータと比較してないものを追加する。
2. 1行に収まらない文の処理
   課題詳細：日本語を含むURLなどがあると1行に収まらないため、データ取得時に2行になる
   解決方針：資料にする際に箇条書にするようにしてもらったので、箇条書きのない行を前の行と連結する方針を取りました。
3. 巨大ファイルのモジュール化
   課題詳細：当初は1つのファイルだけで何とかなる想定でしたが、機能追加の欲と要望により肥大化し、機能追加・編集の開発効率が悪かった。
   解決方針：以下の4つのモジュールに分けることで対応した。

• get_lab_data:研究室のメンバーの情報や、予定などを扱うモジュール
• read_material:PDF資料から必要なデータのみを読み込むモジュール
• read_summary:議事録から必要なデータを読み込むモジュール
• make_summary:議事録にするデータを整形し、テキストファイルに出力するモジュール

フロントエンド

1. 非同期処理、同期処理の実装
   課題詳細：POSTの後にGETして欲しいのに、GETが先にされて、テキストファイルに出力した議事録と表示した議事録の内容が異なる。
   解決方針：awaitでPOSTが終わるのを待つようにした。
2. タイトル、メンバーボタンを上部に固定する
   課題詳細：タイトルを固定できずにスクロールすると上に流れる
   解決方針：cssにposition:fixed;を記述して解決した
3. 個々の日付のタイトル、メンバーボタンがオーバラップするのを防ぐ
   課題詳細：スクロールすると上に固定したタイトル、メンバーボタンに重なる
   解決方針：固定したタイトル、メンバーボタンのクラスにbackground-color:white;を指定。

まとめ

今回初めて自分一人でWEBアプリケーションを作ることに挑戦しました。
これまでは、ハッカソンやインターンでもバックエンドでAPIを作っていました。
なので、フロントエンドをがっつり触れて自分で考えた物を実装したのは今回が初めてでした。
フロントエンドは初歩の初歩から躓きました。

一番詰まったのは、最初のPOSTとGETのタイミングでした。
この処理を使って実装した機能は「編集した議事録の内容の更新」です。
実装したかった流れはPOST → GETという順番で議事録を更新し、更新後の議事録のデータを取得するようにするという処理です。

一番時間がかかったのは、バックエンドのモジュール化でした。
自分自身の設計が甘かったことを痛感することになりました。
当初の想定よりも大きくなったという事実があったにせよ、これはひどいコードであったと思います。
今後はもっと再利用性のあるコードを書いていけるようにしたいと思いました。

そして、このプロダクトを使ってくれた後輩からフィードバックをもらい、色々と改善をすることが出来ました。
使ってくれたこと、「どうすればいいか？」と尋ねた時に、ああでもないとかこうでもないと議論をしてくれて本当に助かりました。
また、これを就活の面接などで見せることが多いのですが、その際に面接官の方に頂いたフィードバックなども随時取り込んでいきたいです。