アクティブ読書用のScrapboxプロジェクトをPDFから作る
https://gyazo.com/d1c297d587a4468d5c5cf428e0d784d6
アクティブ読書とは?
本をブラウザで読めるようにして編集しながら読むと読書体験が格段に向上する。
・感想やメモや関連情報を書ける
・難しい単語の説明を書ける
・関連情報へのリンクを貼れる
・間違ってるところがあれば修正できる
本をブラウザ(=Scrapbox)で読むことにより良いことがありそう
本をScrapboxで読むとは?
ざっくりとしたイメージ
code:mmd
sequenceDiagram
autonumber
actor ユーザー
ユーザー ->> Gyazo: 本をupload
Gyazo -->> ユーザー: PermalinkとOCR結果を取得
ユーザー ->> Scrapbox: Gyazoから取得した②の結果をimport
Scrapbox -->> ユーザー: import成功
ユーザー ->> Scrapbox: リンクを張れる、キーワード検索ができる
作ったプロジェクト
https://gyazo.com/4fa683984169a6334b6a3a68d45eb79c
プロジェクトのイメージ
プロジェクトのトップ
https://gyazo.com/bcff9da2d2e9131877ae0eb899ca851d
検索画面
https://gyazo.com/f3a07c2b035bc17c12b99c5b53e4482b
ページの遷移
https://gyazo.com/370144da98e51663b21cf51e05a796b4
作り方
前提条件
※ おひとりさま用で楽しむものとして作る前提
Gyazo側
API経由でuploadするため
GyazoのOCR機能を利用するため
Scrapbox側
1. 第三者が閲覧できないprivateなもの
2. メンバーは自分ひとりで誰も招待しない
目次
3. jsonの集約(おまけ)
4. import
5. 完成
6. 気づき
7. 未解決問題
最終的にほしいもの
PDFからこんなファイルがほしい、そのために…
code:GyazoのPermalinkリスト.txt
...
こんな仕組みがほしい
1. PDFを1ページずつばらしてGyazoにupload ①②
code:mmd
sequenceDiagram
autonumber
box PC
participant Browser
participant PDF to Scrapbox
end
Browser ->> PDF to Scrapbox: PDFをupload
loop 1ページずつ
PDF to Scrapbox ->> Gyazo: API経由でupload
Gyazo ->> PDF to Scrapbox: Gyazo Permalink
end
PDF to Scrapbox ->> Browser: ページ数に応じたGyazo Permalinkのリスト
note right of Browser: GyazoのPermalinkリスト
par 裏で
Gyazo ->> Gyazo: OCR
end
実現方法
https://gyazo.com/971ca534974d26a79c0065f271463c16
実際に動かした様子
https://gyazo.com/d1c297d587a4468d5c5cf428e0d784d6
フローのイメージ
code:mmd
sequenceDiagram
autonumber
participant PC
note right of PC: GyazoのPermalinkリスト
par 裏で
Gyazo ->> Gyazo: OCR
end
loop OCRが終わったと思ったらscriptで実行
PC ->> Gyazo: API経由でPermalinkのOCR結果を要求
Gyazo ->> PC: OCR結果を取得
PC ->> PC: Scrapbox import用jsonに整形
end
note right of PC: Scrapbox import用json
PC ->> Scrapbox: jsonをimport
Scrapbox ->> Scrapbox: import処理
Scrapbox ->> PC: import成功
解説
code:response.json
{ "image_id": "27a454jn3ij...", (略)
"ocr": { (略), "description": "OCR結果です\n" } }
2. Responseの以下の情報を取得
permalink_url(画像を使うため)
ocr.descripttion(OCR結果を使うため)
これを…
解説
Scrapbox import用にこんな感じに整形したい
code:Scrapbox import用のjsonのフォーマット.json
{ "pages": [ {
{
"title":"0001: サンプル4コマ",
"lines":[
{"text":"0001: サンプル4コマ"},
{"text":""},
{"text":""}, // permalink_url {"text":"OCR結果です"}, // ocr.descripttion
{"text":""}
]
},
...(略)
}]}
解説
code:mmd
sequenceDiagram
autonumber
loop OCRが終わったと思ったらscriptで実行
PC ->> Gyazo: API経由でPermalinkのOCR結果を要求
Gyazo ->> PC: OCR結果を取得
PC ->> PC: Scrapbox import用jsonに整形
end
解説
先述のスクリプトにより2種類のjsonを生成している
1. indexページ
1P, 2P, 3P...とページ順にリンクが並んでいる
2. 画像ページ
画像とOCR結果が埋め込まれている
1. indexページ_1
ページのリンクを順番に記載したページのjson
code:index.json
{ "pages": [
{
"title": "サンプル4コマ.pdf_index",
"lines": [
{ "text": "" },
{ "text": "サンプル4コマ.pdf_index" },
]
}
]}
1. indexページ_2
https://gyazo.com/2b39dfb39f72422dfe8582134fe47e21
2. 画像ページ_1
画像とOCR結果を表示するページのjson(抜粋)
code:pages.json
{ "pages": [
(略)
{
"title":"0002: サンプル4コマ.pdf",
"lines":[
{"text":"0002: サンプル4コマ.pdf"},
{"text":"code:93845jt5349..."},
{"text":" OCR結果です"},
{"text":" "},
]
},
(略)
]}
2. 画像ページ_2
https://gyazo.com/370144da98e51663b21cf51e05a796b4
切れてるが、↑この辺にOCR結果が各々のページに埋め込まれている
2. 画像ページ_3
(このページいらないかも)
この作り方だと1PDF = 2json(index.json, 画像ページ.json)になる
前のページ、次のページなどのリンクを付けておく
このあたりはどういう情報を持たせるとよいのかまだわかっていない
ページ名のルールさえ決まっていれば、UserScriptで移動させてもいいと思う
3. jsonの集約(おまけ)
作ったjsonがたくさんあるとimportするのが手間…
おまけなので、以下な人はスキップしてもOK
「1回やるだけなので手動でやるぜ」
「importする処理は自前で整備してあるぜ」
4. import
jsonをProject settings > Page Dataからimport
https://gyazo.com/9ff7d0d0f8ce35ebdd9bafa28fe41d9a
もし、ページをぐちゃぐちゃにしてもjsonさえあれば何度でも復元できる
5. 完成
プロジェクトトップ
https://gyazo.com/bcff9da2d2e9131877ae0eb899ca851d
PDFの1ページ = Scrapboxの1ページ + index
indexページ
https://gyazo.com/2b39dfb39f72422dfe8582134fe47e21
PDFへのリンクがページ順に並んでいる
検索結果
OCR結果をくっつけているので検索できる
https://gyazo.com/f3a07c2b035bc17c12b99c5b53e4482b
あとは好きにリンクを貼ったり言及したりすればよい
デモ
ページ間はUserScriptで←→遷移できるようにした
https://gyazo.com/370144da98e51663b21cf51e05a796b4
タイトルの連番を加算/減算するだけ
6.気づき
6.1. 気づき
著者・翻訳者の繋がり
例: 「情報セキュリティの敗北史」の小林啓倫氏って前もどこかで見たような…「テトリスエフェクト」の翻訳もやっていたのか!
https://gyazo.com/ef46efba89ddb5e19e5660d508d81bc0
6.2. 気づき
同時読みがしやすい
例: 「Unix哲学」ってよく聞くから調べてみよう…多くの本で言及されてる!ページまでわかる!
https://gyazo.com/f3cdc017ab7711f707644fb84ce2198d
6.3. 気づき
同時読みがしやすい
例: 「WEB+DB PRESSのメール系の特集ってどのくらいあったかな…?」
https://gyazo.com/9586d776087042c0dd9afc9db09449ae
7. 未解決問題
PDFリーダーなどと比べるととんでもなく遅い
絶対に通信が入るのでmsecも積もれば結構な遅さ
1ページ1ページじっくり読むタイプの本なら気にならないかな?
本同士が繋がるのが楽しいので今のところ1つのプロジェクトに集めている
本(ページ)の削除・リネーム
1つずつ手を入れるしかない
これをOCRで引っ掛けたい
code:txt
OC
R結果です