アクティブ読書用のScrapboxプロジェクトをPDFから作る
@gosyujin Start presentationでの閲覧を推奨
アクティブ読書とは？
>本をブラウザで読めるようにして編集しながら読むと読書体験が格段に向上する。
>・感想やメモや関連情報を書ける
>・難しい単語の説明を書ける
>・関連情報へのリンクを貼れる
>・間違ってるところがあれば修正できる
本をブラウザ(=Scrapbox)で読むことにより良いことがありそう
本をScrapboxで読むとは？
ざっくりとしたイメージ
mmdsequenceDiagram
autonumber
actor ユーザー
ユーザー ->> Gyazo: 本をupload
Gyazo -->> ユーザー: PermalinkとOCR結果を取得
ユーザー ->> Scrapbox: Gyazoから取得した②の結果をimport
Scrapbox -->> ユーザー: import成功
ユーザー ->> Scrapbox: リンクを張れる、キーワード検索ができる作ったプロジェクト
プロジェクトのイメージ
プロジェクトのトップ
検索画面
ページの遷移
作り方
前提条件
※ おひとりさま用で楽しむものとして作る前提
Gyazo側
1. Gyazo APIのtokenを取得済であること
API経由でuploadするため
2. Gyazo Proライセンスであること
GyazoのOCR機能を利用するため
Scrapbox側
1. アクティブ読書用のScrapboxプロジェクトの用意
1. 第三者が閲覧できないprivateなもの
2. メンバーは自分ひとりで誰も招待しない
目次
1. GyazoのPermalinkリスト取得
3. jsonの集約(おまけ)
4. import
5. 完成
6. 気づき
7. 未解決問題
1. GyazoのPermalinkリスト取得
最終的にほしいもの
PDF からこんなファイルがほしい、そのために…GyazoのPermalinkリスト.txthttps://gyazo.com/PDFの1ページ目の画像URL
https://gyazo.com/PDFの2ページ目の画像URL
https://gyazo.com/PDFの3ページ目の画像URL
https://gyazo.com/PDFの4ページ目の画像URL
https://gyazo.com/PDFの5ページ目の画像URL
https://gyazo.com/PDFの6ページ目の画像URL
https://gyazo.com/PDFの7ページ目の画像URL
https://gyazo.com/PDFの8ページ目の画像URL
...
https://gyazo.com/PDFの最終ページの画像URLこんな仕組みがほしい
1.
PDF を1ページずつばらしてGyazoにupload ①②2. ページ順のGyazoのPermalinkリストを出力 ③④
mmdsequenceDiagram
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実現方法
pdftoscrapboxを使っている
>
>fork元: GitHub - ssig33/pdftoscrapbox
TamperMonkeyを挟んでブラウザ経由で
PDF をGyazoにアップロードするWebページこれにGyazoのPermalinkリストを保存する機能を生やした
実際に動かした様子
GyazoのPermalinkリストが生成できたら一旦終了
フローのイメージ
mmdsequenceDiagram
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成功解説
1. Gyazo API
GET /api/images/:image_id response.json{ "image_id": "27a454jn3ij...", (略)
"permalink_url": "http://gyazo.com/27a454jn3ij...", (略)
"ocr": { (略), "description": "OCR結果です\n" } }2. Responseの以下の情報を取得
permalink_url (画像を使うため) ocr.descripttion (OCR結果を使うため)これを…
解説
Scrapbox import用にこんな感じに整形したい
Scrapbox import用のjsonのフォーマット.json{ "pages": [ {
{
"title":"0001: サンプル4コマ",
"lines":[
{"text":"0001: サンプル4コマ"},
{"text":""},
{"text":"[http://gyazo.com/27a454jn3ij...]"}, // permalink_url
{"text":"OCR結果です"}, // ocr.descripttion
{"text":""}
]
},
...(略)
}]}解説
Gyazoの画像情報をScrapbox import用のjsonに整形するスクリプトを使っている
GyazoのAPI制限に注意(12500回/日)
mmdsequenceDiagram
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
index.json{ "pages": [
{
"title": "サンプル4コマ.pdf_index",
"lines": [
{ "text": "" },
{ "text": "サンプル4コマ.pdf_index" },
{ "text": "[0001: サンプル4コマ.pdf]" }, // ここからページ順
{ "text": "[0002: サンプル4コマ.pdf]" },
{ "text": "[0003: サンプル4コマ.pdf]" },
{ "text": "[0004: サンプル4コマ.pdf]" }
]
}
]}1. indexページ_2
2. 画像ページ_1
画像とOCR結果を表示するページのjson(抜粋)
pages.json{ "pages": [
(略)
{
"title":"0002: サンプル4コマ.pdf",
"lines":[
{"text":"0002: サンプル4コマ.pdf"},
{"text":"[0001: サンプル4コマ.pdf] | [0003: サンプル4コマ.pdf]"},
{"text":"[[http://gyazo.com/93845jt5349...]]"},
{"text":"code:93845jt5349..."},
{"text":" OCR結果です"},
{"text":" "},
]
},
(略)
]}2. 画像ページ_2
切れてるが、↑この辺にOCR結果が各々のページに埋め込まれている
2. 画像ページ_3
(このページいらないかも)
この作り方だと1
PDF = 2json(index.json, 画像ページ.json)になる前のページ、次のページなどのリンクを付けておく
このあたりはどういう情報を持たせるとよいのかまだわかっていない
ページ名のルールさえ決まっていれば、UserScriptで移動させてもいいと思う
3. jsonの集約(おまけ)
作ったjsonがたくさんあるとimportするのが手間…
jqコマンドで1つのjsonにまとめてみる
おまけなので、以下な人はスキップしてもOK
「1回やるだけなので手動でやるぜ」
「importする処理は自前で整備してあるぜ」
4. import
jsonをProject settings > Page Dataからimport
>
もし、ページをぐちゃぐちゃにしてもjsonさえあれば何度でも復元できる
5. 完成
プロジェクトトップ
PDF の1ページ = Scrapboxの1ページ + indexindexページ
PDF へのリンクがページ順に並んでいる検索結果
OCR結果をくっつけているので検索できる
あとは好きにリンクを貼ったり言及したりすればよい
デモ
ページ間はUserScriptで←→遷移できるようにした
タイトルの連番を加算/減算するだけ
6.気づき
6.1. 気づき
著者・翻訳者の繋がり
例: 「情報セキュリティの敗北史」の小林啓倫氏って前もどこかで見たような…「テトリスエフェクト」の翻訳もやっていたのか！
6.2. 気づき
同時読みがしやすい
例: 「Unix哲学」ってよく聞くから調べてみよう…多くの本で言及されてる！ページまでわかる！
6.3. 気づき
同時読みがしやすい
例: 「WEB+DB PRESSのメール系の特集ってどのくらいあったかな…？」
7. 未解決問題
PDFリーダーなどと比べるととんでもなく遅い
絶対に通信が入るのでmsecも積もれば結構な遅さ
1ページ1ページじっくり読むタイプの本なら気にならないかな？
本同士が繋がるのが楽しいので今のところ1つのプロジェクトに集めている
External Linksが実装されたので、分けても良いのかもしれない
本(ページ)の削除・リネーム
1つずつ手を入れるしかない
これを
OCR で引っ掛けたいtxtOC
R結果です