はじめに
大学の研究室で、教授に論文を提出し、訂正していただくことがある。
そのようなとき、紙媒体で提出し、そこにコメントをいただいていた。
印刷するのは無駄だし、テキストにコメントをつけるアプリを作ろうと思い開発した。
概要
内容はシンプルで、ユーザーが行う操作は次の通りである。
- 文章追加ページ(/texts/new) から添削したい文書を追加する。
- 添削ページ(/texts/:id/edit) にアクセスする。
- コメントを追加したい場所を選択し、右クリックする。
- 表示されたコメント入力欄にコメントを追加し、追加ボタンを押す。
- プレビューページ(/texts/:id) にアクセスし、プレビューする。
- PDF作成ボタンをクリックし、PDF形式でダウンロードする。
コードは次のGitのレポジトリに記載している。
Gitのレポジトリ
実際の画面
文章追加ページ(/texts/new)
文章を入力するページは次のようなフォームにした。
テキストを直接入力するか、PDFファイルで入力できる。
添削ページ(/texts/:id/edit)
入力した文章の添削画面は次のようにした。
左側に文章があり、右側にはコメント入力フォームが出てくる。
コメントを追加したい部分を選択し、右クリックするとフォームが表示される。
フォームには、はじめ選択箇所の文章が入力される。
[コメントを追加]ボタンをクリックすると、コメントが追加される。
選択したテキストはハイライトされ、コメントと線で結ばれる。
ラインで結ばれる部分はJavascriptで実装した。
プレビューページ(/texts/:id)
プレビューページには[PDFを出力]というボタンがあり、ここをクリックするとPDFが表示される。
PDF出力では、Javascriptでのライン引きができなかったため、カッコ()付きで番号を振り、コメントと対応させた。
おわりに
今回は、テキストにコメントを追加するアプリを作成した。
Javascriptは初めて書いたので、少し苦戦した。
HTMLをPDFに変換するのは思った以上に難しく、Webページそのままに表示することは実現できなかった。