アクティブ読書用のScrapboxプロジェクトをPDFから作る
https://gyazo.com/d1c297d587a4468d5c5cf428e0d784d6
@gosyujin Start presentationでの閲覧を推奨
アクティブ読書とは？
本をブラウザで読めるようにして編集しながら読むと読書体験が格段に向上する。
・感想やメモや関連情報を書ける
・難しい単語の説明を書ける
・関連情報へのリンクを貼れる
・間違ってるところがあれば修正できる
/masui/アクティブ読書
本をブラウザ(=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側
1. Gyazo APIのtokenを取得済であること
API経由でuploadするため
2. Gyazo Proライセンスであること
GyazoのOCR機能を利用するため
Scrapbox側
1. アクティブ読書用のScrapboxプロジェクトの用意
1. 第三者が閲覧できないprivateなもの
2. メンバーは自分ひとりで誰も招待しない
目次
1. GyazoのPermalinkリスト取得
2. GyazoのPermalinkリストからScrapbox import用jsonを生成
3. jsonの集約(おまけ)
4. import
5. 完成
6. 気づき
7. 未解決問題
1. GyazoのPermalinkリスト取得
最終的にほしいもの
PDFからこんなファイルがほしい、そのために…
code:GyazoのPermalinkリスト.txt
https://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リストを出力 ③④
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
実現方法
pdftoscrapboxを使っている
https://gyazo.com/971ca534974d26a79c0065f271463c16
fork元: GitHub - ssig33/pdftoscrapbox
TamperMonkeyを挟んでブラウザ経由でPDFをGyazoにアップロードするWebページ
これにGyazoのPermalinkリストを保存する機能を生やした
実際に動かした様子
GyazoのPermalinkリストが生成できたら一旦終了
https://gyazo.com/d1c297d587a4468d5c5cf428e0d784d6
2. GyazoのPermalinkリストからScrapbox import用jsonを生成
フローのイメージ
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成功
解説
GyazoのPermalinkリストを元にScrapbox import用のjsonを生成する
1. Gyazo API GET /api/images/:image_id
code:response.json
{ "image_id": "27a454jn3ij...", (略)
"permalink_url": "http://gyazo.com/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":""}
]
},
...(略)
}]}
解説
Gyazoの画像情報をScrapbox import用のjsonに整形するスクリプトを使っている
GyazoのAPI制限に注意(12500回/日)
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" },
{ "text": "0001: サンプル4コマ.pdf" }, // ここからページ順
{ "text": "0002: サンプル4コマ.pdf" },
{ "text": "0003: サンプル4コマ.pdf" },
{ "text": "0004: サンプル4コマ.pdf" }
]
}
]}
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":"0001: サンプル4コマ.pdf | 0003: サンプル4コマ.pdf"},
{"text":"http://gyazo.com/93845jt5349..."},
{"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するのが手間…
jqコマンドで1つのjsonにまとめてみる
n個のScrapbox import用jsonを1個のファイルにマージするを実行する
おまけなので、以下な人はスキップしても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つのプロジェクトに集めている
External Linksが実装されたので、分けても良いのかもしれない
このアクティブ読書プロジェクトでできないこと、面倒くさいこと
本(ページ)の削除・リネーム
1つずつ手を入れるしかない
OCRした文字列をどう保持するか
これをOCRで引っ掛けたい
code:txt
OC
R結果です