はじめに
RACの実践としてネット記事を読みやすくするブックマークレットを作りました。
最初に、RACとは何かについて説明します。次に、作ったブックマークレットについて説明します。
本記事の対象者
- RACとは何かを知りたい人。
- 大量のネット記事を効率的に読みたい人。
RACとは何か
RACとは、コンピュータープログラムであるJavaScriptがウェブページの記述であるHTML構造やCSS構造を書き換えることによって、人がネット記事を読む行為を補助する機械であり、正式名称は読式補助演算機（Reading Assistant Computer）です。
ネット記事を読む行為自体にRACは不要だが、RAC抜きでは読むスピードが低下してしまうため、実質的にはネット記事を大量に読む人にとって必要不可欠なツールです。
ブラウザの標準機能であるブックマークレットやブラウザ拡張機能であるTampermonkeyやStylus、およびそれらを用いて利用者が作ったコンピュータープログラムが当てはまります。
ブックマークレット
次のブックマークレットはRACの実践として私が作ったものです。JavaScriptプログラムがネット記事を書き換え、ネット記事を読みやすくします。
このJavaScriptのプログラム をブックマークのURL欄に貼り付けてブックマークレットを作成してください。
なぜ読みやすくなるのか？
なぜこのブックマークレットでネット記事を読みやすくなるのでしょうか？
第1の理由は、読点を強調表示するからです。『日本語の作文技術』で本多勝一氏が示されたように、読点は文章の論理構造を示すものです。
句点が文章を文に論理的に分けることは言うまでもありません。注目すべきことは、句点が文章を文に論理的に分けることと同じように、読点が文を部分文に論理的に分けるということです。
句点や読点を強調表示することによって文章の論理構造を強調させて記事を読みやすくなります。強調表示することは、人が句点や読点の場所を探すことにかかる負荷を減らします。
第2の理由は、句点ごとに改行するからです。1つの文につき１つの改行を入れることによって記事を読みやすくなります。１つの文を探すことにかかる負荷を減らします。さらに1文ごとに字下げして読みやすくします。
第3の理由は、括弧の段数ごとに字下げを深くするからです。句点ごとに改行したら、括弧内外の字下げを見分けられない点が読みやすくありません。
そのため括弧の段数ごとに字下げを深くすることによって、括弧の内外の字下げと括弧の段数を見分けられるようにして読みやすくします。さらに括弧を強調表示して、句点直後の改行<br>に記号を表示して、読みやすくします。
ブックマークレット適用前後の画像
ブックマークレットを実行する前後の画像を見ることが分かりやすいでしょう。
この文章にたいしてブックマークレットを実行すると、次の文章に変わって読みやすくなります。
パフォーマンス・チューニング
少し脱線しますが、このブックマークレットを作るにあたり2つのパフォーマンス・チューニングを行うことによって、約160倍速くなりました。
１つめはchildNodesに配列のスプレッド構文を使わないことです。childNodesが約2万個もあるページで遅くなった原因は、スプレッド構文[...childNodes]の計算に時間がかかることで、それを何万回も呼び出すことでした。スプレッド構文を使わないようにすることによって、ページの大きさにもよるとは思いますが約20倍速くなりました。
２つめはgetComputedStyleを前もって計算しておくことです。要素の新規挿入とgetComputedStyleを交互に行い、それを数千回も行っていたためにDevToolsで「Forced reflow is likely performance bottleneck」の警告が数千回も出ていました。Layout Thrashingを起こして画面の描画に使わないレイアウト計算を数千回も行ってしまっていました。必要なgetComputedStyleを前もって行うことによって、約8倍速くなりました。
さいごに
『ブックマークレットとQiita APIを使って記事一覧を取得する』や『HTMLタグを超えてキーワードをハイライトするアルゴリズム』もRAC関連です
。
RACの読み方を疑問に思われた方がいらっしゃるかもしれませんが、元ネタがあってCADの読み方をする小説があります
。
RACとは何かを説明するとともにRACの実践としてネット記事を読みやすくするブックマークレットを作りました
。
このブックマークレットで大量のネット記事を効率的に読んでいただければ幸いです
。