---
# System prepended metadata

title: 添削アプリ　フロントエンド技術検討

---

# 添削アプリ　フロントエンド技術検討

## 検討事項
- 現在の添削マクロで使われているライブラリ
- React or vue
- 添削アプリで使うライブラリ案

## 添削マクロで使われているライブラリ
https://github.com/nnaakkaaii/ooo_macro/blob/flask/dev/templates/tensaku.html

- jquery.min.js
- 画像の編集
    - konva.min.js
        - canvas APIを利用するためのAPI
        - 現状は画像に変換した生徒答案上の採点記号・得点・名前の配置、クリック・ドラックのイベントハンドリングなどを行っている
- 画像→PDF変換
    - jspdf.umd.min.js
        - konvaにより作成したcanvasをPDFに変換する
- コメント入力に使用
    - quill.min.js
        - リッチテキストエディター、上付き、下付き文字や白塗りのコメント、斜体、太字などのために使用
        - outputはhtmlとして表現
    - katex.min.js
        - quillと協調して動作する、latex形式での数式入力に使用
    - tex-svg.js(mathjax、katexに移行したので現在は使用していない)
    - opencv.js→答案のガイドライン調整に使用

### 現在のPDFの出力の仕様について
- 生徒答案
    - pythonのpdf2image(poppler)でjpg化してcanvasの背景として扱う
- 採点記号・得点・署名・手書き描画
    - konvaでcanvas上の画像として扱う
- コメント(数式を含む)
    - 複雑な書式を表現するためHTMLを埋め込んだSVG要素として画面上に表示
    - PDF出力時にコメントを含むSVGをラスタ画像に変換して、Canvasに重ねる

### 現状の課題
- PDF上の全てのコンテンツをラスタ画像として扱っている点
    - 文字列にカーソルが合わない、拡大するとジャギジャギになってしまうなど
    - chromeによるPDF化(puppeteer)などを検討してもいいかも？
    - react-pdfでもsvgをベクタのままPDFにできる？
- 数式入力
    - 現状はlatex式を打ち込む必要があり、相当UIが悪い
    - mathtypeのjavascriptライブラリ(https://github.com/wiris/html-integrations)もあるらしい


## React or vue
特に、コメントを配置する部分・数式入力の部分を実装できる形に

### React
- pros
    - LIMEやICEの技術をそのまま活かせる
        - LIMEや理社アプリ人員を持って来れる
    - [MUIのUIが使える](https://mui.com/material-ui/react-toggle-button/#customization)
- cons
    - node-canvasをM1Macにinstallする際に、エラーで若干ハマる
- 参考
    - [Next.js + react-konva](https://zenn.dev/aldagram_tech/articles/7edc7f192fe861)
    - [Next.jsでreact-pdf + react-konva](https://zenn.dev/kin/articles/658b06a3233e60)
### Vue
- pros
    - web添削マクロ(Flask)で使用していたライブラリを転用できる
    - Flaskからの学習コストは低そう
- cons
    - Vue経験者が少ない


## PoC - React, Next
- 要件
    - 得点入力（自由に移動可能）
    - コメント入力（自由に移動可能）
    - 手書き入力
    - PDFでの入力、出力 [未]
- 使用技術
    - Next.js(React)
    - TypeScript 
    - react-konva
    - react-pdf
- Github
    - https://github.com/nagaseitteam/tensaku-web-app-ui/tree/ogane/poc

![next-tensaku](https://i.imgur.com/SOyzy06.png)

## PoC - Vue
- 要件
    - 得点入力（自由に移動可能） [未]
    - コメント入力（自由に移動可能） [未]
    - 手書き入力
    - PDFでの入力、出力 [未]
- 使用技術
    - Vue.js
    - Konva
- Github
    - https://github.com/nagaseitteam/tensaku-web-app-ui/tree/ogane/poc

![vue-tensaku](https://i.imgur.com/93Isdi3.png)
