noteをもっと快適に読みたくて、専用のChrome拡張機能「Note Reader Enhancer」を作ってみました
はじめに
noteって毎日素敵な記事がたくさん投稿されていて、つい時間を忘れて読んでしまいますよね。でも、夜遅くに白い画面をずっと見ていると目が疲れたり、「後で読もう」とブラウザのブックマークに入れたまま、そのまま忘れてしまったりすること、ありませんか。
情報がたくさんあるのは嬉しいことなんですが、無限に保存できるからこそ、とりあえずストックして満足してしまう「情報のゴミ捨て場」になりがちだなと、私自身ずっと悩んでいました。
もっとリラックスして目の前の文章に没頭したい。そして、本当に自分にとって大切な情報だけを厳選して手元に残したい。そんな思いから、noteの画面を読書専用の快適な空間にちょっとだけ改造する、Chrome拡張機能「Note Reader Enhancer」を作ってみました。
以下からDL出来ます。
※バージョンは同じですがフォントサイズなどを元に戻せる初期化機能を追加しましたので、それが機能していない方はもう一度DLお願いします。
この記事では、この拡張機能でどんなことができるのか、どうやって使うのか、そしてパソコンへの入れ方を、順番にお話ししていきますね。
このツールでできる3つのこと
この拡張機能を入れると、こんなことができるようになります。
画面を暗くして目を休ませる「ダークモード」や、文字の大きさを自分好みに調整できる
記事を読みながら、別の画面を開かずにその場でサクッと「ブックマーク」できる
保存できる数を「最大30件」に絞ることで、本当に大切な記事だけを残す習慣ができる
それぞれの機能と操作方法について、詳しく説明します。
1. 自分好みの読書環境を作る（読みやすさのカスタマイズ）
パソコンの真っ白な背景って、長く見ていると結構目に刺さりますよね。
この拡張機能を入れると、noteの画面の右上（検索マークなどの並び）に、新しく「三日月」のマークが追加されます。この三日月をポチッと押してみてください。
一瞬で、画面全体が目に優しいダークモードに切り替わります。ただ黒くするだけじゃなくて、写真や動画の色はそのまま綺麗に見えるように調整しています。
さらに、拡張機能のメニュー画面を開くと、文字のフォント（明朝体やゴシック体など）、文字の大きさ、行間の広さを、スライダーを動かして自由に調整できます。
休日にコーヒーを飲みながらエッセイを読む時は、雰囲気の出る「明朝体」で文字を小さめに。仕事中にノウハウ記事をサッと読みたい時は、パッと見やすい「ゴシック体」で文字を大きめに。
まるで、自分の部屋の照明の明るさや椅子の高さを、その日の気分に合わせて調整するような感覚で、あなたにとって一番読みやすい「専用の読書環境」を作ることができます。
2. 読むのを邪魔せずに、その場で保存する（ページ内ブックマーク）
いい記事を見つけたとき、普段どうやって保存していますか。ブラウザのブックマーク機能を開いたり、別のメモアプリにURLをコピペしたりしている方が多いと思います。でも、別の画面を開くそのちょっとした手間で、せっかくの読書の集中が途切れてしまいますよね。
この拡張機能では、その面倒な動作をなくしました。
先ほどの三日月マークの隣に、「しおり」のマークが追加されます。これをクリックすると、画面が切り替わることなく、今読んでいる記事の上にフワッと「ブックマーク一覧パネル」が表示されます。
そのパネルの中にある「このページを保存する」というボタンを押すだけで、今見ている記事のタイトルとURL、そして記事の最初の100文字が「ちょこっとメモ」として自動的に保存されます。
本を読みながら、気になったページにそのまま付箋を貼るような、とてもスムーズな感覚です。パネルの中の「未分類」という文字をクリックすれば、その場で直接「ビジネス」や「趣味」といった自分の好きなカテゴリ名を付けることもできます。
読むのをやめずに、その場でサクッと保存と整理ができる気持ちよさを、ぜひ味わってみてください。
3. あえて上限を30件にする理由（情報のデトックス）
この拡張機能で私が一番こだわったのが、「最大30件までしか記事を保存できない」というルールです。
パネルを開くと、右上に「現在の保存件数：12 / 30件」というように数字が表示されます。今の時代、何でも無制限に保存できるのが当たり前ですが、私はあえて逆にしてみました。
なぜなら、無限にしまえる大きな押し入れがあると、人間は「いつか使うかも」と思って、とりあえず何でも放り込んでしまうからです。結果的に、何がどこにあるか分からないカオスな空間ができてしまいます。
保存できる枠が30個しかないというちょっとした不便さがあると、「この記事は、貴重な30枠の1つを使う価値があるかな」と立ち止まって考えるようになります。そして、上限がいっぱいになった時は、新しく保存するために、過去のリストを見返して「もうこれは読まないな」と思う記事を削除して枠を空けることになります。
この「見直して、捨てる」という作業がとても大切なんです。
あなたのブックマークリストは、とりあえずの置き場から、今のあなたにとって本当に必要で、何度でも読み返したい「一軍の知識」だけが綺麗に並んだ、小さな本棚に生まれ変わります。ただ集めるだけじゃなくて、情報をしっかり選んで使うためのパートナーとして役立ててもらえると嬉しいです。
（とはいえ実際はブラウザの記憶容量を考えると、あまり大量に記憶させておけないから上限を設けたということはナイショ）
■インストールの仕方（Chromeへの追加方法）
なんだか難しそうに見えるかもしれませんが、以下の4つのステップで、数分で簡単にあなたのGoogle Chromeに追加することができます。
ステップ1：ファイルの準備
配布している拡張機能のプログラムが入ったフォルダ（例えば「NoteReaderEnhancer」という名前のフォルダです）をダウンロードして、パソコンのデスクトップなど、分かりやすい場所に置いてください。（※圧縮ファイルでダウンロードした場合は、必ず右クリックから「すべて展開」や「解凍」を選んで、普通のフォルダの状態にしておいてくださいね）
ステップ2：拡張機能の管理画面を開く
Google Chromeブラウザを開きます。画面の一番上、いつもURLが表示されている入力欄に、以下の文字をコピーして貼り付けてください。
chrome://extensions/
貼り付けたら、キーボードのEnterキーを押します。すると、拡張機能の管理画面が開きます。
ステップ3：デベロッパーモードをオンにする
開いた画面の右上を見てください。「デベロッパーモード」と書かれた小さなスイッチがあります。ここをクリックして、スイッチをオン（色がついた状態）にしてください。これで、自分で用意した拡張機能を入れられるようになります。
ステップ4：フォルダを読み込ませる
デベロッパーモードをオンにすると、画面の左上に「パッケージ化されていない拡張機能を読み込む」というボタンが現れます。
このボタンをクリックして、ステップ1で準備しておいた「NoteReaderEnhancer」のフォルダ自体を選択し、「フォルダの選択」を押します。
画面にエラーの赤い文字などが出ず、一覧の中に「Note Reader Enhancer」という名前のパネルが追加されていれば、インストールは完了です。
■インストールの仕方（Firefoxへの追加方法）
プライバシー保護や読書体験を大切にするFirefoxユーザーの方も、以下の手順で同じように機能を追加することができます。
ステップ1：ファイルの準備
Chromeの場合と全く同じです。配布している拡張機能のプログラムが入ったフォルダをダウンロードし、解凍してパソコンの分かりやすい場所に置いてください。
ステップ2：デバッグ画面（開発者向け画面）を開く
Firefoxブラウザを開きます。画面の一番上、URLを入力する欄に、以下の文字をコピーして貼り付けてください。 about:debugging#/runtime/this-firefox 貼り付けてEnterキーを押すと、拡張機能をテストするための開発者向け画面が開きます。
ステップ3：一時的なアドオンとして読み込む
開いた画面の中に「一時的なアドオンを読み込む」というボタンがありますので、これをクリックします。
ステップ4：ファイルを指定する
ファイルを選択する画面が開きます。ステップ1で準備した「NoteReaderEnhancer」のフォルダを開き、その中に入っている「manifest.json」という名前のファイルを選択して、「開く」ボタンを押してください。
これでFirefoxへのインストールは完了です。Firefoxを閉じるまで、Chromeと全く同じように快適な読書機能をお使いいただけます。（※Firefoxの仕様上、ブラウザを完全に終了して再起動すると拡張機能がいったん解除されるため、その場合は再度この手順で読み込ませてください）
おわりに
さっそく、いつも読んでいるnoteの記事を開いてみてください。画面の右上に、小さな二つのマークが待っているはずです。
情報があふれている今の時代、大切なのは「どれだけたくさん集めるか」ではなく、「どれだけ良い情報とじっくり向き合えるか」だと思っています。
この拡張機能が、画面のまぶしさや面倒な操作をなくして、あなたと素敵な文章との時間を少しでも豊かなものにするお手伝いができれば、開発者としてこんなに嬉しいことはありません。
ぜひ、あなただけの快適な読書空間と、選び抜かれた30個の知識の詰まった本棚を作ってみてくださいね。
今後も便利な機能拡張やソフトを開発していこうと思ってます。
よろしければ♡いいねを教えていただけると嬉しいです。
あとチップで応援していただけますとありがたいです。