hlhhs11 / pdf-notebook Goto Github PK

プロジェクトの説明

PDFで与えられる資料に対して，手描き注釈やテキストボックスではなく，どのようなパソコンにも存在するキーボード及び*マウス（タッチパッド）*のみを利用した方法でノートを記録する手段を提供する。
具体的なペルソナは，「PDFで渡された講義資料を見ながら講義を受ける大学生」であり，彼らが「文脈の読み取りづらい資料」や，「穴埋めが存在する資料」に対しても，普通のパソコンだけで見やすいノート・記録をとれる仕組みを提供することを目的とする。

機能の概要

本アプリケーションでは，画面を左右に２分割して，片方に「ノートを取りたいPDF」を，もう片方に「ノート編集画面（マークダウンのリッチテキストエディタ）」を表示するUIを想定している。
ノート編集時にメインとなる機能は，1. ノートをリッチテキストエディタで編集する機能と，2. ノートにPDF内のページを関連付ける(参照を設定する)機能である。そして，これらの機能を利用して作成したPDFとノートを合わせた「資料」を閲覧する際には，PDF側ではなくノート側を主体として読んでいくことが期待される。すなわち，ノート側に講義時の文脈などを記録していき，必要に応じて資料の該当ページを参照できるような導線が理想的である。
最初に考えた方法は，PDFの各ページとノートの各ページを一対一で紐付ける方法である。PowerPointの発表者メモ機能のイメージに近い。PDFの該当ページに不足している情報（穴埋めの中身や，教員の発言など）を補うにはこれで十分である。
しかしながら，それだけではPDF資料の各ページを繋ぐ「文脈」を明示するには足りないだろう。たとえば，PDF資料の中で「重要な部分」（数式やまとめページなど）に対して「重要でない部分」（具体例や参考資料など）のページ数における比重が圧倒的に多い場合，PDFの各ページに対して補足事項が書かれていたところで，根本的な「読みづらさ」はほとんど改善されないのだ。また酷い場合では，講義の文脈がPDF資料の途中のページから始まり，その後前の方のページに移動する，という場合もある。このようなとき，PDFの各ページに一対一で紐付いた補足メモ程度では，後から見てわかりやすいノートは書けない。
そこで，ノート側で始めから文脈（≒教員の話の順番）を記録していき，必要な場合にPDF資料への参照を設定しておく(複数対応可！)と，閲覧時に「ノートを読んでいくと，自動で対応PDFページが表示される¹」あるいは「ノート内に対応PDFページが埋め込まれて表示される」というように，ノートを主体としてPDF資料も活用できるような仕組みを作りたいのだ。
このような参照の設定を実現するUIの想定案としては，たとえば「ノートのPDFと紐付けたい部分を選択(テキストを選択)」→「該当PDFページを選択」というものが考えられるだろう。

使用ライブラリ

UIにはReact等のWeb系フロントエンドUIライブラリを使用すると便利であろう。そのうえで，本アプリケーションのコアロジックを実現するためにはPDF閲覧・編集機能²と，それに紐付いたノートを編集する機能（マークダウンのリッチテキストエディタを想定）が不可欠である。

PDF閲覧・編集機能を提供するライブラリ

ChatGPTのWebBrowsing機能を利用して，HTMLに埋め込み可能なPDFエディタを調査した結果を以下に示す。
例としてpdf.jsについて簡単に調査してみたが，README.mdのOnline Demoを開いてみたところ，注釈・テキストボックスなどの簡単な編集にも対応しているようである。こうした機能を最大限利用したい。

• PDFObject :
  PDFObjectは、HTMLドキュメントにPDFを動的に埋め込むための軽量なJavaScriptユーティリティです。これはオープンソースで、JavaScriptとHTML5を使用して開発されています。

• pdf.js:
  Mozillaによって開発されたpdf.jsは、HTML5およびJavaScriptを使用してPDFリーダーを実装するプロジェクトです。

  • 実際の使用法を解説するサイト

• PDF.js Express:
  PDF.js Expressは、ReactベースのUIをオープンソースのPDF.jsレンダリングエンジンにラップする無料のPDF.jsビューアです。このビューアは、テキストのハイライト、フリーハンドの描画、コメント、形状など、26の事前構築された注釈を提供し、カスタム注釈を作成することも可能です。また、PDFフォームの記入と署名、およびユーザーインターフェイスのカスタマイズもサポートしています。

• ViewerJS:
  ViewerJSは、PDF、プレゼンテーション、スプレッドシートなどのドキュメントをウェブサイトやブログで簡単に使用できるツールで、外部依存関係なしで動作します。

マークダウンのリッチテキストエディタを提供するライブラリ

PDFに紐付いたノートは，見た目を整える労力を最低限に抑えて，キーボードのみでの入力に集中できることが期待される。この点で，WYSIWYG (What You See Is What You Get)でマークダウン形式のテキストを編集するのが最も便利であろうと考えられる。
このような目的で，OSSのマークダウンのリッチテキストエディタ・ライブラリ・フレームワーク等を調査した。

• lexical:
  Meta社が提供するフレームワーク。つけたい機能だけをつけるというような柔軟性が高そう？
  参考サイト: Lexicalを使ってリッチエディタを実現する（画像編）
• Tiptap:
  上記のlexicalをラップして，より簡単に扱えるようにしたのがTiptapであるらしい。参考リンク

関連するIssue

[このタスクに関連する他のIssueがあればリンクを追加してください]

期限

[タスクの完了予定日を指定してください]

その他の情報

要追記

Footnotes

1. この場合，「主として表示したいページへの参照」と「主ではないが確認が必要なページへの(サブの)参照」という優先度も設定する必要がある。 ↩

2. 本プロジェクトの主旨は「PDFに紐付いたノートの編集」機能を提供することだが，穴埋めや多少のメモを直接PDFファイルに書き込みたい場合も考えられる。このような要望にも対応できるよう，PDFは閲覧だけでなく一定程度の編集もできるようにしておきたいのだ ↩