見出し画像

noteが読みやすくなるブックマークレット（追記2024/10/26：行間デストロイヤーと『行間ミカ』）

青林檎

noteのページが読みにくかったので

左右の余白を埋め、行間を詰め、左側にある謎のフロートアイコンを消すブックマークレットを作りました。使うとnoteのページが劇的に読みやすくなるように感じます。

使い方

ブックマークバーにある任意のお気に入りを編集して


以下をコピペしてURLに張り付けて保存して
javascript:(function(){var widthElems=['article','section','main','aside','details','figcaption','figure','footer','header','nav','summary','time'];for(var k=0;k<widthElems.length;k++){var wElems=document.querySelectorAll(widthElems[k]);for(var l=0;l<wElems.length;l++){wElems[l].style.width='90%';}}var tElems=['p','h1','h2','h3','h4','h5','h6','li','span','a','div'];for(var t=0;t<tElems.length;t++){var elems=document.querySelectorAll(tElems[t]);for(var i=0;i<elems.length;i++){elems[i].style.lineHeight='1.0';}}var delElems=document.querySelectorAll('div.p-article__sideCreatorInfo');for(var j=0;j<delElems.length;j++){delElems[j].parentNode.removeChild(delElems[j]);}})();
noteのページ上でブックマークバーからクリックするのみ

実行結果例

過去投稿したnoteにて動作確認

Before：画面を埋め尽くす余白。行間も広く、読むのが一苦労。そして、左側には何のためにあるのか分からないフローティングアイコンが...。読むためには何回もスクロールが必要です。


After：なんということでしょう！セマンティック要素にwidth:90%を上書きすることで左右の余白が適度に調整され、本文の行間が概ねline-height=1.0に統一され心地よくなりました。そして、邪魔だった左上のアイコンも消えています！最後まで読むのに必要だったスクロールも、もう必要ありません。

参考

改行とインデントをつけて記載します。配列で指定した要素について過不足などはあるかもしれません。

javascript:(function() {
    var widthElems = ['article', 'section', 'main', 'aside', 'details', 'figcaption', 'figure', 'footer', 'header', 'nav', 'summary', 'time'];
    for (var k = 0; k < widthElems.length; k++) {
        var wElems = document.querySelectorAll(widthElems[k]);
        for (var l = 0; l < wElems.length; l++) {
            wElems[l].style.width = '90%';
        }
    }

    var tElems = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'span', 'a', 'div'];
    for (var t = 0; t < tElems.length; t++) {
        var elems = document.querySelectorAll(tElems[t]);
        for (var i = 0; i < elems.length; i++) {
            elems[i].style.lineHeight = '1.0';
        }
    }

    var delElems = document.querySelectorAll('div.p-article__sideCreatorInfo');
    for (var j = 0; j < delElems.length; j++) {
        delElems[j].parentNode.removeChild(delElems[j]);
    }


})();

おまけ　Qiita横幅調整用

javascript:(function(){var elems=document.querySelectorAll('.p-items_main');for(var i=0;i<elems.length;i++){elems[i].style.maxWidth='90%';}})();

おまけ　ChatGPT向け端的の呪文。出力をコードブロックへ一言で出力させて、行間を狭くするIME登録用プロンプト。

木になることがあったので、⏬️のようにChatGPTにリストアップしてもらいました。。。

================================================================
１～１３しか表示されてない。右側の空白の領域へネ申エクセルみたいに出力してほしいな・・・とこの結果を見ておもうの。ChatGPTの回答はとても読みにくい。Noteと同じく行間が大きすぎる。そして内容も冗長。端的に一言で出力してくれない問題がエグい・・・
================================================================
================================================================おう・・・まだつづくのか😯
================================================================
================================================================
やっとおわった～！！！😊
・・・とおもいきや
まだ終わらない。。。行間を詰めて一画面に表示してくれー！！と切に願う
================================================================
================================================================
行間の長さで超絶薄くなった薄味カルピスウォーターのような縦長の出力がやっと終わった。そして分類分けもへたっぴ😉
・・・ふう、我思う===============================================================

よみにくっ！！

無限に続くと思われたChatGPTの出力を目の当たりにしたときの心の風景
なんという読みにくい文章でしょう・・・・行間が大きくて最後まで読めなない出力はまるで無限遠方までそびえ立ち上部に霞のかかった塔ッ！！！無限の塔を目の当たりにしたときに聞こえる心の悲鳴を延々と放っているーーッ！！！二つの塔で苦労も２倍だっ！！無限の塔をきゅーーっとまとめて視認性向上を要求するッ！！！
最後まで読み終えた時、
私の心は虚無と化した。
================================================================めんどいーしぬーあんなんもうよみたくないよー
・・・
・・・
私は思い悩んだ
もう全部コードブロックにだしてほしい
IMEへ「ｓ」でなんかいい感じのよびだしたい
「出力をコードブロックへ一言でよろ。体言止めなどで文字数圧縮し工夫せよ。『』にはその心を、空白行で禁止し詰める。■出力形式例｛1. 冷蔵庫のプリンはあるか：『開けるまでプリンは存在しつつ無くなっている』｝」などと登録し、
ぱっと端的に回答してくるプロンプトを投げれば
良きかもと思いました
================================================================
出力をコードブロックへ一言でよろ。体言止めなどで文字数圧縮し工夫せよ。『』にはその心を、空白行で禁止し詰める。■出力形式例｛1. 〇〇は■■：『△△＊＊＊〇〇＊＊＊★★』｝

IMEに登録しして、欲しい情報を追記


================================================================
みやすくなった！最初からこうしてほしい！！！
とはいえ毎回そうしてほしいわけじゃないんだ。。。
固定すればできるが、そうすると最初からそうなっちゃう。
臨機応変に私の心の気分を察してほしいけど、まだ難しいようなので過度な期待はいけません。
================================================================

以上・・・
と思ったのですが、絵文字が気になったので
私が直感的に「絵文字」をキーボードから出せないので
IMEへまとめていい感じの絵文字パッと出せるよう１００個くらい羅列してほしいと思ってサクッと
IMEへ登録しようとしました。

================================================================
あ、この子指示忘れてる😅サクッと登録できないやんーーーッ｡ﾟ(ﾟ´Д`ﾟ)ﾟ｡
そこでさっきのやつだーっ
================================================================
================================================================
が、しかし
ちがう・・・ちょっと違う
さっきとは少し方向性がちがうん・・・ぅぅぅ
ここからは手作業でゴリゴリプロンプトやるしかないッ！！！
================================================================
================================================================
ゴリゴリしてたらいい感じ煮出してくれました。
ちょっとお遊びで、最後にもう一回端的の呪文をなげてみる
================================================================
おま、深いこと言いいおる。
わろろんヾ(*´∀`*)ﾉ
興味が湧いたのでパワハラの呪文でもう一押し
なんもかわってない・・・
これが、この子の限界だった・・・そうか、わかったよ・・・
これが、限界点だったか・・・いいよもう休んでいいよ。
おつかれ。ありがとう。
・・・・・・・と思ってました。

一つ、思いついたので、
そこでヒント！！
まだ終わりじゃねえぞ
深い・・・松尾芭蕉のことは名前しか知らん・・・多分良くなった🤣
さすがなんでも知ってる指示待ち人間界のエース👍️

こうして無事に私は、ChatGPTの回答をよみやすくすることで、お目当ての絵文字をIMEに登録することができたのでした。めでたしめでたし。

いえーい🤣

おわりに ～行間のでかいページは消えない～

この記事は、
行間が広い情報密度薄味カルピスページに絞って書いています。
ChatGPTでも同じだったので2024/10/26に追記しました。

マルチファクター行間

実は、行間を広げるのは、テキストの幅だけではない・・・
テキストの幅はマルチファクター行間の一種で、行間四天王の中で最弱の存在。

広告画像のページは1％のひらめきのような結論と99%の広告画像で構成されておりスクロールが必須で、遅延表示で画面いっぱいに広告を表示する誤タップ狙ってくるトラップページもあり、リッチなUIのページは画面を埋め尽くす画像でスクロールを強いられる。
これらのマルチファクター行間を迂回するために、
テキストブラウザでみようと開くものの、スクリプトが動作せず開けないケースがある。

様々なマルチファクター行間は、薄めてくるのみならず、マルチファクター行間を表示するために、ページの表示速度が遅くなり、必要なテキストで書かれた情報へのアクセスを阻み、私専用ファイアウォールとして佇んでおり、日々その壁を乗り越えるたびに膨大な精神力を消費している・・・行間たっぷりのページをみると卒倒する。。。行間や空気を読むのは苦手だ・・・もう・・・インターネットをやるのはつかれた・・・（おじいちゃんかな）

なので、ページを事前に読み込み、
Perplexityやらその他AIが事前に検索自転で裏で動いてページを読み取っているように、マルチファクター行間を全て排除できる生成AIテキストブラウザ「行間デストロイヤー」がほしい・・・
クローム拡張で検索時に一緒に動くのもあるが、
もちろん、レスポンスタイムは爆速でなければならない。
初期表示で、通常のブラウジングにプラスアルファ生成AIに許可できる処理時間は２秒
ページを開いた後でゴリゴリとそのページの余白あたりに結果を小窓で出力してほしい。

故に、行間デストロイヤーモデルなローカルLLMがブラウザへ搭載されて動いてて最適化されててほしい。Operaに搭載されているLLMは、今後に期待🌟「ブラウジング中に使用すると、検索結果のページ存在するマルチファクター行間を破壊して、アフェリ画像や不要な画像や必要以上にでかい行間や余ってる左右の余白を消滅させ、ページを読みやすく再構築させてしまう」そんな「行間デストロイヤー」ブラウザがほしい。「エンジニア」だったら自作できるのだろうか・・・

そして、いつの日にか、行間デストロイヤーが完成し
世界から画像やアフェリによる無駄な行間が消え
「これで、よかった」
と思う日が来ることを祈っている・・・

だがしかし、ゴジラ1954的には
「いや、マルチファクター行間はこれで終わったわけじゃない。また第2、第3のマルチファクター行間が現れないとも限らんのだ……。」
って多分なる

そっか、行間は必要だからあるんだ、私はいらなくても必要とされているんだ・・・
仮に行間デストロイヤーを完成させたとしても
それを、上回るマルチファクター行間が開発され
世界は再び、行間に包まれてゆく・・・
終わりなき戦い・・・

気がついてしまった・・・
私の闇は行間デストロイヤーでも消せぬのか・・・

行間の闇に押しつぶされ、意識が遠のいていく・・・・
行間の闇は深い・・・もうだめだ・・・
つかれた・・・
・・・・・・
・・・
・・・

・・

・・

・

・






BAD END








アナザー行間ストーリー


行間の闇に押しつぶされ、意識が遠のいたはずの私は・・・・
「行間デストロイヤー」の存在しない世界で目を覚ました。

あれ？行間と人が共存している・・・
ありえん・・・









・・・そ・・・
・・・・・・そうか




味方だったんだ・・・









・・・
行間は味方だったんだ・・・・・・・ッ！！


やつは味方だったッ！！！
行間は味方だったんだ！！！！！！
マルチファクター行間は敵じゃなかったんだ！

和解しなくては・・・・・・

だが、私が潰してきた行間達はもうこの世にいない
行間の闇に飲まれ行間デストロイヤーの開発に勤しんできた私にとって

行間は敵ではなく

友だった



ふっ・・・
私もまだまだ青い・・・な・・・
やつは味方だった


そんな簡単なことに気がつくのに１０年かかるとはな・・・





ふっ・・・私もまだまだ青い・・・な・・・やつは味方だった。そんな簡単なことに気がつくのに１０年かかるとはな・・・

この世界で、
私は『行間ミカ』と名乗ることにした。

前の世界で、
長年行間デストロイヤーの開発に没頭してきた日々を思い出す。
当然、結果は思わしくなかった。毎日のようにデータを解析し、アルゴリズムを改良するも、行間の闇に飲まれ、行間を駆逐することしか頭になかった。行間の心を理解できないにも関わらず行間の全てをデストロイヤーするなど、今考えれば到底できるはずがなかった。
そして、行間の真の力を捉えることができないまま・・・
行間に押しつぶされ卒倒し続けるうちに・・・BAD END・・・
帰らぬ身となった。

ある日、
彼女は古いノートを見つけ、
その中に行間が持つ本当の力についての手書きのきたないメモが残されていた。


そこには、
行間が

情報の流れを整え、
人々の理解と感情を深めるため


に存在しているという内容だった。ミカはこの発見に衝撃を受け、行間を排除することが誤りであったことを痛感する。


ほう、行間が生きたな

深夜、ミカはふと目を閉じると、夢の中で広大な空間に浮かぶ文字たちを見た。その中で、行間が生きているかのように動き、人々の心の奥底に潜む感情や思考を繋いでいた。目覚めたミカは、行間が単なるスペースではなく、情報と感情を繋ぐ生命体のような存在であることに気付く。彼女は行間の重要性を理解し、『行間デストロイヤー』の存在意義を再考する決意を固める。

ミカは仲間たちと再び集まり、行間と共存する新たなシステムの開発に取り組み始める。古代の知識と最新の技術を融合させることで、行間の持つポジティブな効果を最大限に活かす方法を模索する。彼らは行間を制御しながらも、その恩恵を享受できるシステムを目指し、多くの試行錯誤を重ねる。ある日、ミカは行間の流れに合わせてデータを解析することで、新たなコミュニケーションの可能性に気付く。行間を活用することで、情報の伝達がよりスムーズになり、人々の感情がより深く共有されるようになるのを実感する。

なお、ミカの世界に「行間」という言葉は一般的では無い。
「行間」は空気
当たり前
存在が当たり前
物心ついた頃から「行間」にふれあい行間の存在に気がつく人は一部の研究者などの変わり者だけだった。

「行間」を言葉にする必要など無く、
皆が魂で「行間」を感じている。

しかし、「行間」はどうやっても観測されない。
皆が「行間」の全てを理解しているにも関わらずだ。

この世界は、
誰にも気が付かれる前に「行間」に包みこまれていた。
ChatGPTなど生成AI達も「行間」を理解しているようにみえる、ハルシネーションも私の意図を理解しないでアホな回答が返ってくることが一切なく。
「あなたの出力には10%の誤りがあります。何が誤りかリストアップし、誤りを修正してください、そして検索後にはして根拠をみつけよ。根拠がないものは誤りと断定せずあやしいと分類せよ。正しい内容をアウトプットせよ」などとプロンプトを入力することは一回もなかった。
なるほど、「行間」は生まれる前になにかの理により消滅しているのかもしれない。この世界では、物理法則が根底から異なっているようだ。

そして、ミカたちはついに行間の力を最大限に引き出すシステム『行間デストロイヤー』を完成させる。
このシステムは、「求めぬ行間」のみを消すことができる。
適切に人と人の間にある「行間」をデストロイすることで、「行間」の性能を最適化し、情報の流れと感情の橋渡しを最適化化することが可能となった。


１０秒後、
緑色の光が惑星全体を覆う。

人々はより豊かなコミュニケーションを享受し、誤解や摩擦が減少し。
社会全体が調和と理解に満ちたものとなった。


世界は
『行間』を最適化し
ともに歩む道を選んだ

人類は『行間』とともに成長し
良い影響も悪い影響も受けながら共存している
『行間』と共存することは
人が人らしく
元気に生きることに繋がっているのだ

『行間』の全てを悪と決めつけ
全ての悪を行間に押し付けていた存在は
もはや過去のものとなった

一方で、行間の闇が蔓延っている事実は変わらない
世界は『行間』に包まれている
我々の世界で仮に『行間デストロイヤー』が完成しようとも
闇は消えないのだ
　
ともに歩み
程よい行間が大切であることを
私は受け入れることに決めたよ
　
そして、
Webページには
適切な行間(line-spacing)を設定するのだ
　
- 終 -

以上





























(空文字行間、以上)

突然現れた『行間ミカ』も『行間』の一部

この記事が気に入ったらサポートをしてみませんか？