org-remarkでウェブページに注釈をつける

# org-remarkでウェブページに注釈をつける

## 0. 前書き
明けましておめでとうございます(あまりおめでたくない事ばっかり起こる新年となりましたが)。コロナ禍でまったく出歩かずに引きこもる癖が強化されたおかげで、わたしは年末のEmacs忘年会以外はほとんど家に引きこもっています。パートナーと生活している人は中々そーいう理由にもいかないと思いますが、わたしは寝床に入ってからも面白いこと、目新しい何かが見つからないものかとスマホのChromeでGooglingするのが就寝前の習慣となっています。

:::note info
これがノートやPCとかなら、弄り始める際に少々身構える必要を感じてしまい、「さあもう寝ようか」と思った後は、何か理由がなければ弄り始めることはないんですが、このスマートフォンというデバイスは本当に手軽に、片手でさえも扱えてしまうので、四六時中暇があればのぞき込んで弄ってしまうのです。
:::

そんな次第で隙間時間にネットを跳梁して漁りまくり、何で開けたかも忘れて開きっぱなしのままのタブが常に70以上溜まっています。

:::note info
[Chrome keeps abusing my RAM](https://www.reddit.com/r/funny/comments/hcpvk1/chrome_keeps_abusing_my_ram/?utm_source=share&utm_medium=mweb3x&utm_name=mweb3xcss&utm_term=1&utm_content=share_button)の動画に描かれているTab兵士とか見ると、似たような状況の人たちも多いのではないかな? とか思ったり。
:::

再確認する頃には他に興味が移ってしまっているので大半はブックマークして閉じるだけですが、ブックマークなんてとうの昔昔に収拾不可な状態にあります。流石に何とかせねばとついにorg-modeを使うことにしました。んで、org-captureとかorg-roamとか手を出したんですが、これらはある程度ウェブページで自分が興味のある情報をかいつまんだり整理整頓要約する必要があるようです(当たり前か? それとも使い方がおかしいのか?)。まあそれもやりたかったことなので良いのですが、布団に入って電気消して、眠気を感じるまで寝転がって弄る運用だと、もうちょっと軽めのやつ、例えるならウェブページで気になる箇所に線を引いたり走り書きできるようなのがズボラなわたしにピッタリだと思いました。そんな折に見つけたorg-remarkのご紹介です。

## 1. インストール
org-remark、ソースは[github](https://github.com/nobiot/org-remark)、マニュアルは[github pages](https://nobiot.github.io/org-remark/)、インストール自体はEmacsのPackageからインストールできます。

![Screenshot_20240103-090330.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134669/3e109de7-70f6-bc86-fd0b-6913ef43a689.jpeg)

## 2. 使ってみる
マニュアルによるとEPUBやInfoにも対応しているようですが、とりあえずewwで開けたページに線と注釈を入れられるようにして、サンプルにあった便利キーも設定しておきます。

```elisp:init.el
;; Optional if you would like to highlight websites via eww-mode
(with-eval-after-load 'eww
  (org-remark-eww-mode +1))

;; Key-bind `org-remark-mark' to global-map so that you can call it
;; globally before the library is loaded.

(define-key global-map (kbd "C-c n m") #'org-remark-mark)

;; The rest of keybidings are done only on loading `org-remark'
(with-eval-after-load 'org-remark
  (define-key org-remark-mode-map (kbd "C-c n o") #'org-remark-open)
  (define-key org-remark-mode-map (kbd "C-c n ]") #'org-remark-view-next)
  (define-key org-remark-mode-map (kbd "C-c n [") #'org-remark-view-prev)
  (define-key org-remark-mode-map (kbd "C-c n r") #'org-remark-remove)
  (define-key org-remark-mode-map (kbd "C-c n d") #'org-remark-delete))
```

`M-x eww`でorg-remarkのマニュアルを開いてみました。
![Screenshot_20240103-091423.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134669/f4d147db-0e47-5cc4-44c0-075a81754553.jpeg)

強調表示したいリージョンを選択して`C-c n m`とタイプすると、注釈とかを書き込める`marginal.org`というファイルに位置情報が登録保存されるとともに、選択してたリージョンが常に強調表示されるようになります。
![Screenshot_20240103-092014.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134669/def07ec8-3889-f7a3-0138-07e915cade70.jpeg)

:::note info
デフォルトではtreemacs みたいに左ペインに注釈書き込みウィンドウが表示されますが、わたしはスマホの縦長画面なので`org-remark-notes-display-buffer-action`を`'((display-buffer-in-side-window) (side . bottom) (slot . 1)))`にカスタマイズしてます。
:::

カーソルを強調表示されてる範囲に移動して`C-c n o`とタイプすると、注釈やメモを入力するためにバッファーが別窓に表示されるので何か入力してみましょう。
![Screenshot_20240103-092556.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134669/7f70e403-bee4-d663-43a2-a1fa98940d4b.jpeg)

保存すると米印が追加されて注釈があることを教えてくれます。
![Screenshot_20240103-092724.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134669/cb84e437-b7ca-f4b7-6e8c-3aba2c297901.jpeg)

強調範囲にカーソルが入るとエコーエリアに注釈が表示されます。
![Screenshot_20240103-092919.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134669/3ca94d0c-cb46-74a0-383c-be6713f014fc.jpeg)

## 3. まとめ
偉そうなことを言ってしまいますが…

「こーゆーのでいんだよ、こーゆーので…」

おしまい