Brainの教材に「しおり」を付ける ― Tampermonkeyで読書位置を記録する方法
情報商材のプラットフォーム「Brain」で、ボリュームのある教材を購入しました。
全15章に付録が3つ、見出しの数にして181項目という長編です。ところが読み始めてすぐに困りました。
どこまで読んだのかが、次に開いたときに分からないのです。
そこでこの記事では、Brainの記事に「しおり」機能を後付けする方法を説明します。
ブラウザの拡張機能とユーザースクリプトを使い、読んだ位置を自動で記録し、章ごとの読了チェックも残せるようにしました。
パソコンのトラブル対応やWordPressの運用を自分で手がけてきた私が、実際に手を動かして完成させるまでの一部始終を、初心者にもわかりやすく解説します。
一般のブラウザ設定に比べての難しさは、Brain側の仕組みには一切手を加えられないという点でしょう。
自分のブラウザ側だけで解決する必要があります。しかも今回は、途中で四つも落とし穴を踏みました。
とはいえ、最低限のポイントを押さえれば10分ほどで導入できるものです。
同じように長い教材を読んでいる方は、ぜひ試してみてください。
1. きっかけ ― 181項目の教材を、どこまで読んだか分からない
紙の本なら、しおりを挟めば済む話です。
電子書籍のリーダーアプリにも、読書位置を記録する機能はたいてい付いています。
ところがBrainのようなWebページ形式の教材には、それがありません。
ブラウザを閉じてしまえば、次に開いたときは記事の先頭に戻ります。
前回どこまで読んだかを思い出しながら、目次を眺めて見当をつけ、スクロールして探す。
この繰り返しが、思っていた以上に面倒でした。
しかも私はBrainの教材を今後も購入するつもりでしたから、この面倒は今後ずっと続くわけです。
一度きりの手間なら我慢もしますが、繰り返すのであれば道具を作ったほうが早い。そう考えました。
2. まず、公式に機能がないかを確かめる
自作に取りかかる前に、必ずやっておくべきことがあります。
公式に同じ機能がないかを確認することです。
あるものを自分で作り直すほど、もったいないことはありません。
そこでBrainの公式X（旧Twitter）のリリース告知や、使い方を解説している記事をひととおり調べました。
結果として、しおりや読書進捗にあたる機能は見つかりませんでした。
Brainにある機能と、ない機能を整理すると次のようになります。
［図1： Brainにある機能・ない機能］
つまり、Brainは「どの記事を読んだか」までは管理できるものの、「その記事のどこまで読んだか」は分からない状態でした。
なお、これは「私が探した範囲では見つからなかった」ということであり、絶対に存在しないと断言するものではありません。
もし公式に実装されていれば、そちらを使うのが当然おすすめです。
3. 実現方法は三つある
Brainのサーバー側は当然いじれませんので、自分のブラウザに後付けする形になります。
方法は大きく三つに分けられます。
［図2：しおりを付ける三つの方法］
ブックマークレット
ブックマークバーに登録した小さなプログラムを、クリックして起動する方式です。
・拡張機能を入れなくてよい
・登録はコピー＆ペーストだけ
・但し、記事を開くたびに自分でクリックする必要がある
Tampermonkey（今回採用）
「ユーザースクリプト」と呼ばれる小さなプログラムを動かすための、ブラウザ拡張機能です。
・指定したサイトを開くと自動で動く
・拡張をひとつ入れるだけで、あとはコードの貼り替えで修正できる
・スクリプトの管理画面が用意されていて、有効・無効の切り替えも簡単
Chrome拡張を自作
自分で拡張機能そのものを作る方式です。
・機能の自由度は最も高く、他人に配布もできる
・但し、フォルダを作って読み込ませる手順が必要で、修正のたびに再読み込みが要る
私はTampermonkeyを選びました。
常用するつもりで、かつ自分ひとりで使うという条件では、これがいちばん手数が少ないと判断したためです。
4. 仕組み ― 紙の本にはさむ付箋と同じ
作りに入る前に、仕組みを整理しておきます。
やっていることは、紙の本に付箋を挟むのと同じです。
記事のページ（URL）ごとに「いま何章のどこを読んでいたか」を、ブラウザ自身が持っているメモ帳に書き留めておく。
次に開いたときに「続きから読む」を押せば、そこまでスクロールして戻る。
それだけの話です。
このメモ帳にあたるのが、ブラウザに標準で備わっている localStorage（ローカルストレージ） という保管場所です。
閲覧しているサイトごとに、少量のデータを保存できる仕組みで、パソコンの中だけで完結します。
［図3： しおりの仕組み］
ここでひとつ、重要な線引きをしておきます。
記録するのは「位置」の情報だけで、教材の本文は一文字も保存しません。
Brainの利用規約では、購入したコンテンツの共有や転売が禁じられています。
今回の道具はスクロール量と章のチェック状態しか扱わず、Brainのサーバーにも一切アクセスしませんので、この点に抵触することはありません。
自作の道具を作るときは、こうした線引きを先に確認しておいてください。
手順
ここからが実際の作業です。所要時間は10分ほどでした。
［図4：導入の流れ］
手順1 Tampermonkeyを入れる
Chromeウェブストアで「Tampermonkey」を検索し、追加します。
作者はJan Biniokという方で、利用者数が非常に多いものが本物です。
よく似た名前の別物があるので注意してください。
手順2 デベロッパーモードを有効にする
ここが最初の関門でした。
Chromeの仕様変更により、ユーザースクリプトを動かすにはデベロッパーモードを有効にする必要があります。
これを忘れると、拡張機能を入れてもスクリプトが動きません。
アドレスバーに chrome://extensions と入力し、画面右上の「デベロッパー モード」のスイッチをオンにします。
なお、有効にしただけでパソコンが危険になることはありません。
素性の分からない拡張機能を手動で追加しない限り、実害はないものと理解しています。
手順3 新規スクリプトを作成する
Tampermonkeyのアイコンをクリックし、メニューから「新規スクリプトを作成」を選びます。
アイコンが見当たらないときは、ツールバー右側のパズル型のアイコンから拡張機能の一覧を開き、ピン留めしておくと以降が楽になります。
手順4 テンプレートを全消しする
エディタには、あらかじめ雛形のコードが入っています。
これを一行残らず消してから貼り付けます。
Ctrl + A で全選択し、Delete キーを押します。
ここで消し忘れると、二重定義でエラーになります。
手順5 コードを貼って保存する
用意したコードを Ctrl + V で貼り付け、Ctrl + S で保存します。画面上部のタイトルがスクリプト名に変われば成功です。
手順6 記事を開き直す
Brainの記事ページを F5 で再読み込みします。
画面右下に小さなつまみが現れれば、導入完了です。
6. 使ってみる ― 自動と手動の役割分担
実際に動かしてみると、教材の181項目すべてを拾って一覧にしてくれました。
［図5：しおりパネルの見方］
設計にあたっては、次のように役割を分けました。
1. スクロール位置 ― 完全に自動
読んで閉じるだけで、最後にいた場所が記録されます。
読者は何もする必要がありません。
次に開いたとき「続きから読む」を押せば、その位置まで戻ります。
2. 章のチェック ― 手動
読み終えた章のチェックボックスを、自分で押します。
これは意図的にそうしました。
自動判定にすると、素通りしただけの章まで既読になってしまい、記録の意味がなくなるからです。
3. 記事ごとに独立
記事のURLごとに別々のしおりが保存されます。
複数の教材を並行して読んでも、記録が混ざることはありません。
見出しをクリックすればその章へジャンプでき、パネルは「×」または Alt + S で開閉できます。
7. 私が踏んだ四つの落とし穴
ここからが本記事の核心かもしれません。
実際に踏んだ落とし穴を、順に記録しておきます。
［図6：つまずいた四つの落とし穴］
落とし穴1 .jsファイルがダウンロードできない
用意されたコードのファイルが、そもそも受け取れませんでした。
原因は拡張子です。.js はブラウザが「実行できるプログラム」とみなすため、セキュリティ上ダウンロードを遮断することがあります。
対処は簡単で、拡張子を .txt に変えて受け取り、中身をコピーすれば済みました。
そもそもTampermonkeyへはコピー＆ペーストで入れるので、ファイルとして保存する必要はなかったのです。
落とし穴2 「×」を押しても閉じない
パネルの閉じるボタンが、まったく反応しませんでした。
原因は、作成したコード側の不具合でした。
HTMLの hidden 属性は要素を隠す指定ですが、CSSで display: flex と書いてあると、そちらが優先されて隠れないのです。
[hidden] { display: none !important; } という一行を足すことで解決しました。
こういうときに、コードの読めない人間でも「動かない」と伝えるだけで直してもらえるのは、AIと組んで作る利点だと感じます。
落とし穴3 しおりが二重に表示される
修正版を入れたところ、今度は画面に二つのしおりが重なりました。
原因は単純で、修正のたびに「新規スクリプトを作成」していたため、旧版が残ったまま両方動いていたのです。
管理画面を見ると、同じ名前のスクリプトが2行並んでいました。
古い方をゴミ箱アイコンで削除して解決です。
更新するときは新規作成ではなく、既存スクリプトの鉛筆アイコンから編集するのが正解でした。
落とし穴4 更新したらしおりが消えた
旧版を削除したら、今度はしおりが表示されなくなりました。
これは不具合ではありませんでした。
閉じた状態が記憶されていただけです。
旧版で何度も「×」を押していたため、その設定が修正版で初めて有効になったのです。
Alt + S を押したところ、無事に開きました。
8. バックアップ ― GitHub Gistに置いておく
苦労して作った道具ですから、消えてしまっては元も子もありません。
Tampermonkeyのスクリプトはブラウザの中に保存されているだけなので、パソコンを買い替えたりChromeを入れ直したりすれば失われます。
そこで、コードそのものを外に保管しておきます。
私が使ったのは GitHub Gist（ジスト） です。1ファイル単位で保存できる簡易的な置き場で、リポジトリを作るより手軽に使えます。
手順は次のとおりです。
gist.github.comを開く- 説明欄に、後から見て分かる説明を書く
- ファイル名を入力する（拡張子は
.user.js） - コードを貼り付ける
- 「Create secret gist」で保存する
「secret」は検索に出ない非公開扱いです。
但し、URLを知られれば誰でも見られるという性質は理解しておいてください。
完全な非公開ではありません。
なお、publicとsecretは後から変更できません。
私は最初に誤ってpublicで保存してしまい、削除して作り直しました。
保存ボタンの「▼」を押して種別を選ぶ点に注意してください。
もうひとつ、Tampermonkey自体にもバックアップ機能があります。
「ユーティリティ」タブの「エクスポート」から、全スクリプトと設定をまとめてzipで保存できます。
Gistは「コードの母艦・履歴つき」、zipは「丸ごと復元用」と使い分けるとよいでしょう。
9. まとめ
Brainの教材に読書位置を記録する「しおり」を後付けするテクニックとノウハウを説明してきました。
重要なポイントを再確認しておきます。
・まず公式機能の有無を確かめる。あるものを作り直さない
・Brain側は変えられないので、自分のブラウザに後付けする
・記録するのは位置だけ。本文は保存せず、規約の線引きを守る
・修正は新規作成ではなく既存スクリプトの編集で行う
・コードはGistに逃がしておく。ブラウザの中だけに置かない
今回はBrainを対象にしましたが、この考え方は他のサイトにも応用できます。
note、社内のドキュメントサイト、長い技術記事など、「読書位置を覚えていてほしい」場面は意外に多いものです。
スクリプトの対象サイト指定を書き換えるだけで、同じ道具が使えます。
また、今回作ったものはまだ最小限の機能です。
章ごとのメモ機能や、複数教材の進捗を横断して見る一覧画面など、育てる余地はいくらでもあります。
そして何より実感したのは、コードが読めなくても道具は作れるということです。
私がやったのは「こうしたい」「ここが動かない」と日本語で伝えることと、実際に自分の指で触って確かめることだけでした。
落とし穴を四つ踏みましたが、そのすべてを言葉で伝えるだけで直すことができました。
道具は買うものだと思っていた時代は終わりつつあります。
不便を感じたら、その場で自分用の道具を作る。
この発想を持って取り組めば、それぞれの場面に見合った快適な環境を整えられるでしょう。
