// ==UserScript== // @name edewakaru-enhanced // @name:en Edewakaru Enhanced Reading Experience // @name:ja 「絵でわかる日本語」 閲覧体験強化 // @name:zh-CN 「絵でわかる日本語」 阅读体验增强 // @name:zh-TW 「絵でわかる日本語」 閱讀體驗增強 // @namespace https://greasyfork.org/users/49949-ipumpkin // @version 2025.07.22 // @author iPumpkin // @description:en Enhances reading experience on the 「絵でわかる日本語 edewakaru.com」 site by converting kanji readings from parentheses to ruby, hiding ads and clutter, and adding text-to-speech for selected text. // @description:ja 「絵でわかる日本語 edewakaru.com」サイト内の漢字の読みを括弧表記から自動で振り仮名に変換し、広告や不要な要素を非表示にします。選択テキストの読み上げ機能にも対応し、快適な読書体験を実現します。 // @description:zh-CN 将「絵でわかる日本語 edewakaru.com」网站中的单词注音由括号形式自动转换为振假名，隐藏广告和无关元素，并支持划词朗读功能，提升阅读体验。 // @description:zh-TW 將「絵でわかる日本語 edewakaru.com」網站中的單詞注音由括號形式自動轉換為振假名，隱藏廣告與無關元素，並支援劃詞朗讀功能，提升閱讀體驗。 // @license GPL-3.0 // @icon https://livedoor.blogimg.jp/edewakaru/imgs/8/c/8cdb7924.png // @match https://www.edewakaru.com/* // @match https://edewakaru-doshi.blog.jp/* // @grant GM_addStyle // @grant GM_getValue // @grant GM_setValue // @run-at document-start // @description Enhances reading experience on the "絵でわかる日本語" site by converting kanji readings from parentheses to ruby, hiding ads and clutter, and adding text-to-speech for selected text. // @downloadURL none // ==/UserScript== ;(function () { 'use strict' const RULES = { TEXT: { AUTO: ['℃（ど）', 'お団子（おだんご）', 'お好み焼き（おこのみやき）', 'お年寄り（おとしより）', 'お店（おみせや）', 'お茶する（おちゃする）', 'お茶（おちゃ）', 'お酒（おさけ）', 'ご先祖さま（ごせんぞさま）', 'たつ年（たつどし）', 'グリーン車（グリーンしゃ）', 'コマ回し（こままわし）', 'ダメ元（だめもと）', '一つ（ひとつ）', '万引き（まんびき）', '三分の一（さんぶんのいち）', '不確か（ふたしか）', '不足（ふそく）', '不足（ぶそく）', '世界１周旅行（せかいいっしゅうりょこう）', '並み（なみ）', '並（なら）', '中に（じゅうに）', '中旬（ちゅうじゅん）', '中（じゅう）', '乗り心地（のりごこち）', '予定通り（よていどおり）', '以上（いじょう）', '以下（いか）', '以外の何ものでもない（いがいのなにものでもない）', '以外（いがい）', '住（す）', '使い分け（つかいわけ）', '使い方（つかいかた）', '使用（しよう）', '働（はたら）', '優（すぐ）', '元を取る（もとをとる）', '元カノ（もとかの）', '元カレ（もとかれ）', '児（じ）', '入学（にゅうがく）', '入（い）', '入（はい）', '全て（すべて）', '全員（ぜんいん）', '公共の場（こうきょうのば）', '凧揚げ（たこあげ）', '出張（しゅっちょう）', '分（ぶん）', '前（まえ）', '割り勘（わりかん）', '割り箸（わりばし）', '動作（どうさ）', '収集（しゅうしゅう）', '取（と）', '受け身（うけみ）', '口の中（くちのなか）', '合（あ）', '同（おな）', '吐き気（はきけ）', '向（む）', '吸い物（すいもの）', '味覚 （みかく）', '呼び方（よびかた）', '唐揚げ（からあげ）', '商い（あきない）', '商品（しょうひん）', '土砂崩れ（どしゃくずれ）', '夏バテ防止（なつばてぼうし）', '夏休み中（なつやすみちゅう）', '夏向き（なつむき）', '夏祭り（なつまつり）', '夕ご飯（ゆうごはん）', '多かれ少なかれ（おおかれすくなかれ）', '大きかれ小さかれ（おおきかれちいさかれ）', '大切（たいせつ）', '大好き（だいすき）', '学習者（がくしゅうしゃ）', '宝くじ（たからくじ）', '寝る前（ねるまえ）', '寝（ね）', '届け出（とどけで）', '座り心地（すわりごこち）', '引っ越し（ひっこし）', '引っ越す（ひっこす）', '当たり前（あたりまえ）', '当（あ）', '役に立つ（やくにたつ）', '待（ま）', '後ろ（うしろ）', '必要（ひつよう）', '怒り（いかり）', '思い出す（おもいだす）', '思い出話（おもいでばなし）', '恵方巻き（えほうまき）', '悩み事（なやみごと）', '感じ方（かんじかた）', '我が社（わがしゃ）', '戦（せん）', '手作り（てづくり）', '払（はら）', '折があれば（おりがあれば）', '折に触れて（おりにふれて）', '折も折（おりもおり）', '折を見て（おりをみて）', '拭き取る（ふきとる）', '持ち家（もちいえ）', '掲載（けいさい）', '数え方（かぞえかた）', '文化（ぶんか）', '文法（ぶんぽう）', '旅行（りょこう）', '日記（にっき）', '早寝早起き（はやねはやおき）', '星の数ほどある（ほしのかずほどある）', '星の数ほどいる（ほしのかずほどいる）', '星の数（ほしのかず）', '昭和の日（しょうわのひ）', '暑（あつ）', '暮（ぐ）', '書き言葉（かきことば）', '有名（ゆうめい）', '梅雨入り（つゆいり）', '楽（たの）', '欠席（けっせき）', '歩（ある）', '残業（ざんぎょう）', '気を付けて（きをつけて）', '気持ち（きもち）', '注目（ちゅうもく）', '物語（ものがたり）', '独り言（ひとりごと）', '瓜二つ（うりふたつ）', '甘い物（あまいもの）', '申し出（もうしで）', '申し訳（もうしわけ）', '男の子（おとこのこ）', '盗み食い（ぬすみぐい）', '目を離す（めをはなす）', '真っ暗（まっくら）', '真っ白（まっしろ）', '真っ茶色（まっちゃいろ）', '真っ黄色（まっきいろ）', '真っ黒（まっくろ）', '真ん中（まんなか）', '知り合い（しりあい）', '確か（たしか）', '社会（しゃかい）', '福笑い（ふくわらい）', '秋無い（あきない）', '程（ほど）', '空き缶（あきかん）', '窓の外（まどのそと）', '立ち読み（たちよみ）', '第２日曜日（だいににちようび）', '第２月曜日（だいにげつようび）', '笹の葉（ささのは）', '範囲（はんい）', '細長い（ほそながい）', '紹介（しょうかい）', '組み合わせ（くみあわせ）', '経（た）', '結婚（けっこん）', '繰り返して（くりかえして）', '繰（く）', '羽根つき（はねつき）', '考え方（かんがえかた）', '能力試験（のうりょくしけん）', '腹が立つ（はらがたつ）', '自身（じしん）', '良かれ悪しかれ（よかれあしかれ）', '芸術の秋（げいじゅつのあき）', '落ち着（おちつ）', '行き方（いきかた）', '行き渡る（いきわたる）', '観光地（かんこうち）', '触り心地（さわりごこち）', '試験（しけん）', '試（ため）', '話し手（はなして）', '話し言葉（はなしことば）', '詳（くわ）', '読み方（よみかた）', '読書の秋（どくしょのあき）', '請け合い（うけあい）', '豪雨（ごうう）', '貯金（ちょきん）', '貯（た）', '買い物（かいもの）', '貸し借り（かしかり）', '足が早い（あしがはやい）', '車内（しゃない）', '載（の）', '返（かえ）', '逃（に）', '通り（とおり）', '通り（どおり）', '通知（つうち）', '通（どお）', '連続（れんぞく）', '遅かれ早かれ（おそかれはやかれ）', '遅刻（ちこく）', '長い間（ながいあいだ）', '長生き（ながいき）', '長（なが）', '間違え（まちがえ）', '間（かん）', '雨の日（あめのひ）', '雪遊び（ゆきあそび）', '震える（ふるえる）', '青い色（あおいいろ）', '青のり（あおのり）', '青リンゴ（あおりんご）', '頭の中（あたまのなか）', '願い事（ねがいごと）', '食べず嫌い（たべずぎらい）', '食べ物（たべもの）', '食欲の秋（しょくよくのあき）', '食（しょく）', '飲み会（のみかい）', '飲み口（のみぐち）', '飲み放題（のみほうだい）', '飲み物（のみもの）', '飼い主（かいぬし）', '飽きない（あきない）', '駅（えき）', '驚き（おどろき）', '髪の毛（かみのけ）', '鳴き声（なきごえ）', '０点（れいてん）', '１か月間（いっかげつかん）', '１か月（いっかげつ）', '１つ（ひとつ）', '１人（ひとり）', '１列（いちれつ）', '１口（ひとくち）', '１回（いっかい）', '１年中（いちねんじゅう）', '１年（いちねん）', '１度（いちど）', '１日中（いちにちじゅう）', '１日（いちにち）', '１日（ついたち）', '１本（いっぽん）', '１杯（いっぱい）', '１歩（いっぽ）', '１泊（いっぱく）', '１番目（いちばんめ）', '１番（いちばん）', '１週間後（いっしゅうかんご）', '１０日間（とおかかん）', '１０日（とおか）', '１０杯（じゅっぱい）', '２人（ふたり）', '２日（ふつか）', '２本（にほん）', '２０歳（はたち）', '３日間（みっかかん）', '３日（みっか）', '３杯（さんばい）', '５分（ごふん）', '５日分（いつかぶん）', '５日前（いつかまえ）', '５日間（いつかかん）', '５月（ごがつ）', '７日（なのか）', '７時（しちじ）', '９月（くがつ）'], OVERRIDE: [ { pattern: '羽根を伸ばす（羽根を伸ばす）', replacement: '羽根を伸ばす（はねをのばす）' }, { pattern: '長蛇の列（長蛇の列）', replacement: '長蛇の列（ちょうだのれつ）' }, { pattern: '食べ物（食べ物）', replacement: '食べ物（たべもの）' }, { pattern: '今回（今回）', replacement: '今回（こんかい）' }, { pattern: '店長（店長）', replacement: '店長（てんちょう）' }, { pattern: '一般的（いっぱん）', replacement: '一般的（いっぱんてき）' }, { pattern: '付き合（つきあい）', replacement: '付き合（つきあ）' }, { pattern: '汚（きたない）', replacement: '汚（きたな）' }, { pattern: '必ず（かなら）', replacement: '必ず（かならず）' }, { pattern: '恥（はず）', replacement: '恥（は）' }, { pattern: '足（たり）', replacement: '足（た）' }, { pattern: '楽（他の）', replacement: '楽（たの）' }, { pattern: '読（よん）', replacement: '読（よ）' }, { pattern: '調（しらべた）', replacement: '調（しら）' }, { pattern: '間違（街が）', replacement: '間違（まちが）' }, { pattern: '間違（まちがえ）', replacement: '間違（まちが）' }, { pattern: '難（むず）', replacement: '難（むずか）' }, { pattern: '寂（さみ）', replacement: '寂（さび）' }, { pattern: '彼氏（かれ）', replacement: '彼氏（かれし）' }, { pattern: '父（とうさん）', replacement: '父（とう）' }, { pattern: '特別（とく） ', replacement: '特別（とくべつ）' }, { pattern: '不合格（ふごくかく）', replacement: '不合格（ふごうかく）' }, { pattern: '違（ちがう）', replacement: '違（ちが）' }, { pattern: '連（つれ）', replacement: '連（つ）' }, { pattern: '逆ギレ（ぎゃくぎれ）', replacement: '逆（ぎゃく）ギレ' }, { pattern: '娘（ムスメ）', replacement: '娘（むすめ）' }, { pattern: '車（クルマ）', replacement: '車（くるま）' }, { pattern: 'm（めーとる）', replacement: 'm（メートル）' }, { pattern: 'L（L）', replacement: 'L（エル）' }, { pattern: 'XL（エックスL）', replacement: 'XL（エックスエル）' }, { pattern: 'Yシャツ（ワイシャツ）', replacement: 'Y（ワイ）シャツ' }, { pattern: 'Yシャツ（わいしゃつ）', replacement: 'Y（ワイ）シャツ' }, { pattern: 'のる（乗る）', replacement: '乗る（のる）' }, { pattern: 'ところ（所）', replacement: '所（ところ）' }, { pattern: 'いいふうふ（いい夫婦）', replacement: 'いい夫婦（いいふうふ）' }, { pattern: '耳が痛い（みみがいたい）', replacement: '耳（みみ）が痛（いた）い' }, { pattern: 'マイ〇〇（my+〇〇）', replacement: 'マイ（my）〇〇' }, { pattern: '目に余る②（めにあまる）', replacement: '目に余る（めにあまる）②' }, { pattern: '何のこと？（なんのこと）', replacement: '何のこと（なんのこと）？' }, { pattern: '冷める（さめる・自動詞）', replacement: '冷める（さめる）（自動詞）' }, { pattern: '冷ます（さます・他動詞）', replacement: '冷ます（さます）（他動詞）' }, { pattern: '聞き手（ききて）', replacement: '聞（き）き手（て）' }, { pattern: '言い方（いいかた）', replacement: '言（い）い方（かた）' }, { pattern: '言い訳（いいわけ）', replacement: '言（い）い訳（わけ）' }, { pattern: '年越しそば（としこしそば）', replacement: '年越（としこ）しそば' }, { pattern: '顔から火が出る（かおからひがでる）', replacement: '顔（かお）から火（ひ）が出（で）る' }, { pattern: '頭が痛い（あたまがいたい）', replacement: '頭（あたま）が痛（いた）い' }, { pattern: '歯が立たない（はがたたない）', replacement: '歯（は）が立（た）たない' }, { pattern: '色違い（いろちがい）', replacement: '色（いろ）違（ちが）い' }, { pattern: '原因・理由（げんいん・りゆう）', replacement: '原因（げんいん）・理由（りゆう）' }, { pattern: '目の色が変わる・目の色を変える（めのいろがかわる・かえる）', replacement: '目の色が変わる（めのいろがかわる）・目の色を変える（めのいろをかえる）' }, { pattern: '青菜・青野菜（あおな・あおやさい）', replacement: '青菜（あおな）・青野菜（あおやさい）' }, { pattern: '水の泡になる・水の泡となる（みずのあわになる）', replacement: '水の泡になる（みずのあわになる）・水の泡となる（みずのあわとなる）' }, { pattern: '意味で（いみ）', replacement: '意味（いみ）で' }, { pattern: '和製英語で（わせいえいご）', replacement: '和製英語（わせいえいご）で' }, { pattern: '財布を（さいふ）', replacement: '財布（さいふ）を' }, { pattern: 'ソーシャル・ネットワーキング・サービス（Social Networking Service）', replacement: 'ソーシャル（Social）・ネットワーキング（Networking）・サービス（Service）' }, { pattern: 'サボ（さぼ）って', replacement: 'サボさぼって' }, { pattern: '何（なに・なん）', replacement: '何なに・なん' }, { pattern: '何って人（なんって人）', replacement: '何（なん）って人' }, { pattern: '何て人 （なんて人）', replacement: '何（なん）て人' }, { pattern: 'お言葉に甘えて〜する（おことばにあまえて〜する）', replacement: 'お言葉（ことば）に甘（あま）えて〜する' }, ], }, HTML: { AUTO: ['エアーコンディショナー（?air conditioner）', 'マフラー（muffler?）', '不満?（ふまん）', '並外れた?（なみはずれた）', '乳離れ?（ちばなれ）', '今?（いま）', '仕事上?（しごとじょう）', '何かにつけ?（なにかにつけ）', '作りがい?（つくりがい）', '健康上?（けんこうじょう）', '全然?（ぜんぜん）', '勉強中?（べんきょうちゅう）', '厚み?（あつみ）', '場合?（ばあい）', '失望?（しつぼう）', '子離れ?（こばなれ）', '子（こ?）', '安全上?（あんぜんじょう）', '家並み?（いえなみ）', '居?（い）', '巣離れ?（すばなれ）', '希望する?（きぼうする）', '引くに引けない?（ひくにひけない）', '弱み?（よわみ）', '強み?（つよみ）', '当然?（とうぜん）', '後?（うし）', '憐れみ?（あわれみ）', '戸?（と）', '扉?（とびら）', '教えがい?（おしえがい）', '教育上?（きょういくじょう）', '数年?（すうねん）', '数日間?（すうじつかん）', '時?（とき）', '最中?（さいちゅう）', '望む?（のぞむ）', '期待する?（きたいする）', '次第?（しだい）', '歌手?（かしゅ）', '歴史上?（れきしじょう）', '法律上?（ほうりつじょう）', '泣くに泣けない?（なくになけない）', '深み?（ふかみ）', '犬?年（いぬどし）', '状態?（じょうたい）', '甘み?（あまみ）', '生きがい?（いきがい）', '留守?（るす）', '痛み?（いたみ）', '的?（てき）', '直前?（ちょくぜん）', '直後?（ちょくご）', '真っ赤（まっ?か）', '真っ青（まっ?さお）', '立場上?（たちばじょう）', '経験上?（けいけんじょう）', '絶対?（ぜったい）', '育てがい?（そだてがい）', '苦しみ?（くるしみ）', '苦み?（にがみ）', '親離れ?（おやばなれ）', '言うに言えない?（いうにいえない）', '言葉?（ことば）', '赤み?（あかみ）', '軒並み?（のきなみ）', '軽蔑?（けいべつ）', '辛み?（からみ）', '週間?（しゅうかん）', '運動?（うんどう）', '電話中?（でんわちゅう）', '青み?（あおみ）', '非難?（ひなん）', '面白み?（おもしろみ）'], OVERRIDE: [ { pattern: '復習（ふくしゅう
）', replacement: '復習（ふくしゅう）' }, { pattern: '一瞬（いっしゅん
）', replacement: '一瞬（いっしゅん）' }, { pattern: '２日（ふつか）', replacement: '２（ふつ）日（か）' }, { pattern: '１日（いちにち）', replacement: '１（いち）日（にち）' }, { pattern: '３日（みっか）', replacement: '３日（みっか）' }, { pattern: '既読スルー（きどくするー）', replacement: '既読スルー（きどくスルー）' }, { pattern: '何事につけ（なにごとにつけ）', replacement: '何事（なにごと）につけ' }, { pattern: '上（しごとじょう）', replacement: '（しごと）上（じょう）' }, { pattern: '上（きょういくじょう）', replacement: '（きょういく）上（じょう）' }, { pattern: '上（れきしじょう）', replacement: '（れきし）上（じょう）' }, { pattern: '上（けんこうじょう）', replacement: '（けんこう）上（じょう）' }, { pattern: '上（たちばじょう）', replacement: '（たちば）上（じょう）' }, { pattern: '上（ほうりつじょう）', replacement: '（ほうりつ）上（じょう）' }, { pattern: '上（けいけんじょう）', replacement: '（けいけん）上（じょう）' }, { pattern: '上（あんぜんじょう）', replacement: '（あんぜん）上（じょう）' }, { pattern: '中（きょうじゅう）に', replacement: '（きょう）中（じゅう）に' }, { pattern: '中（あすじゅう）に', replacement: '（あす）中（じゅう）に' }, { pattern: '中（ことしじゅう）に', replacement: '（ことし）中（じゅう）に' }, { pattern: '中（かいしゃじゅう）に', replacement: '（かいしゃ）中（じゅう）に' }, { pattern: '真っ赤（まっか）', replacement: '真（ま）っ赤（か）' }, { pattern: '真っ青（まっさお）', replacement: '真（ま）っ青（さお）' }, { pattern: 'パトロールカー(patrol car)', replacement: 'パト(patrol)ロールカー(car)' }, { pattern: '白い（しろい）', replacement: '白（しろ）い' }, { pattern: '素人（しろうと）', replacement: '素（しろ）うと' }, { pattern: '毎日（まいにち）', replacement: '毎（まい）日（にち）' }, { pattern: '毎週（まいしゅう）', replacement: '毎（まい）週（しゅう）' }, { pattern: '毎月（まいつき）', replacement: '毎（まい）月（つき）' }, { pattern: '毎年（まいとし）', replacement: '毎（まい）年（とし）' }, { pattern: '何皿目（なんさらめ）', replacement: '何皿（なんさら）目（め）' }, { pattern: '３つ目（みっつめ）', replacement: '３つ（みっつ）目（め）' }, { pattern: '１０日目（とおかめ）', replacement: '１０日（とおか）目（め）' }, ], }, EXCLUDE: { STRINGS: new Set(['元気（な）', '円（だ）', '挙句（に）', '矢先（に）', '際（に）', '末（に）', '以上（は）', '人称（あなた）', '二人称（あなた）', '女性（おばあちゃん）']), PARTICLES: new Set(['を']), }, } function mitt(n) { return { all: (n = n || new Map()), on: function (t, e) { var i = n.get(t) i ? i.push(e) : n.set(t, [e]) }, off: function (t, e) { var i = n.get(t) i && (e ? i.splice(i.indexOf(e) >>> 0, 1) : n.set(t, [])) }, emit: function (t, e) { var i = n.get(t) ;(i && i.slice().map(function (n2) { n2(e) }), (i = n.get('*')) && i.slice().map(function (n2) { n2(t, e) })) }, } } const emitter = mitt() const ContextMenu = { _config: { MODULE_ENABLED: true, MENU_ID: 'selection-context-menu', MENU_OFFSET: 8, VALID_SELECTION_AREA: '.article-body-inner', MIN_SELECTION_LENGTH: 1, DRAG_THRESHOLD: 5, EMOJI_REGEX: /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/gu, STYLES: ` #selection-context-menu { position: absolute; top: 0; left: 0; display: none; z-index: 9999; opacity: 0; user-select: none; will-change: transform, opacity; pointer-events: none; } #selection-context-menu.visible { opacity: 0.9; pointer-events: auto; transition: opacity 0.1s ease-out, transform 0.1s ease-out; } #selection-context-menu button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer; border: none; background-color: #3B82F6; color: #FFFFFF; box-shadow: 0 5px 15px rgba(0,0,0,0.15), 0 2px 5px rgba(0,0,0,0.1); transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; outline: none; } #selection-context-menu button:hover { background-color: #4B90F8; transform: scale(1.05); box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); } #selection-context-menu button.is-dragging { cursor: grabbing; transform: scale(1); opacity: 0.7; transition: none; } #selection-context-menu button svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; pointer-events: none; } `, }, menuElement: null, isDragging: false, dragUpdatePending: false, position: { x: 0, y: 0 }, dragOffset: { x: 0, y: 0 }, dragStart: { x: 0, y: 0 }, abortController: null, boundHandlers: { dragMove: null, dragEnd: null, }, validAreasCache: null, isSelecting: false, init(options = {}) { if (!this._config.MODULE_ENABLED) return if (this.menuElement) return Object.assign(this._config, options) GM_addStyle(this._config.STYLES) this._createMenu() this._initValidAreasCache() this._bindEvents() }, destroy() { if (!this.menuElement) return this.abortController?.abort() if (this.boundHandlers.dragMove) document.removeEventListener('mousemove', this.boundHandlers.dragMove) if (this.boundHandlers.dragEnd) document.removeEventListener('mouseup', this.boundHandlers.dragEnd) this.menuElement.remove() this._resetState() }, _resetState() { this.menuElement = null this.isDragging = false this.dragUpdatePending = false this.position = { x: 0, y: 0 } this.dragOffset = { x: 0, y: 0 } this.dragStart = { x: 0, y: 0 } this.abortController = null this.boundHandlers = { dragMove: null, dragEnd: null, } this.validAreasCache = null this.isSelecting = false }, _createMenu() { if (document.getElementById(this._config.MENU_ID)) return this.menuElement = document.createElement('div') this.menuElement.id = this._config.MENU_ID const readButton = document.createElement('button') readButton.innerHTML = `` readButton.addEventListener('click', (event) => { if (this.isDragging) { event.stopPropagation() return } const cleanedText = this._getCleanedSelectedText() if (cleanedText) { emitter.emit('tts:speak', { text: cleanedText, voice: '' }) } }) this.menuElement.appendChild(readButton) document.body.appendChild(this.menuElement) }, _initValidAreasCache() { this.validAreasCache = document.querySelectorAll(this._config.VALID_SELECTION_AREA) }, _bindEvents() { this.abortController = new AbortController() const { signal } = this.abortController this.menuElement.addEventListener('mousedown', this._handleDragStart.bind(this), { signal }) document.addEventListener('mousedown', this._handleMouseDown.bind(this), { signal }) document.addEventListener('mousemove', this._handleMouseMove.bind(this), { signal, passive: true }) document.addEventListener('mouseup', this._handleMouseUp.bind(this), { signal }) document.addEventListener('keydown', this._handleKeyDown.bind(this), { signal }) this.boundHandlers.dragMove = this._handleDragMove.bind(this) this.boundHandlers.dragEnd = this._handleDragEnd.bind(this) }, _showMenu(x, y) { if (!this.menuElement) return this.position.x = x + this._config.MENU_OFFSET this.position.y = y + this._config.MENU_OFFSET this.menuElement.style.transition = 'none' this.menuElement.style.transform = `translate(${this.position.x}px, ${this.position.y}px)` this.menuElement.style.display = 'block' requestAnimationFrame(() => { this.menuElement.style.transition = '' this.menuElement.classList.add('visible') }) }, _hideMenu() { if (!this.menuElement || !this.menuElement.classList.contains('visible')) return this.menuElement.classList.remove('visible') this.menuElement.style.display = 'none' }, _getCleanedSelectedText() { try { const selection = window.getSelection() if (!selection || selection.rangeCount === 0) return '' const range = selection.getRangeAt(0) const fragment = range.cloneContents() const tempDiv = document.createElement('div') tempDiv.appendChild(fragment) const cleanupTasks = [() => tempDiv.querySelectorAll('rt').forEach((el) => el.remove()), () => tempDiv.querySelectorAll('br').forEach((el) => el.replaceWith('。'))] cleanupTasks.forEach((task) => task()) let text = tempDiv.textContent || '' text = text.replace(this._config.EMOJI_REGEX, '。') text = text.replace(/\s+/g, '') return text } catch (error) { return '' } }, _isSelectionIntersectingValidArea(selection) { try { if (!selection || selection.rangeCount === 0 || !this.validAreasCache?.length) { return false } const range = selection.getRangeAt(0) return Array.from(this.validAreasCache).some((area) => range.intersectsNode(area)) } catch (error) { return false } }, _isEventFromSettingsPanel(event) { return !!event.target.closest('#settings-panel') }, _handleMouseDown(event) { if (this._isEventFromSettingsPanel(event)) return this.dragStart = { x: event.pageX, y: event.pageY } this.isSelecting = false if (this.menuElement?.contains(event.target)) return this._hideMenu() }, _handleMouseMove(event) { if (this._isEventFromSettingsPanel(event)) return if (!(event.buttons & 1)) return const dx = event.pageX - this.dragStart.x const dy = event.pageY - this.dragStart.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance > this._config.DRAG_THRESHOLD) { this.isSelecting = true } }, _handleMouseUp(event) { if (this._isEventFromSettingsPanel(event)) return if (this.isDragging || this.menuElement?.contains(event.target)) return requestAnimationFrame(() => { const selection = window.getSelection() if (!selection) return const selectedText = selection.toString().trim() if (!selectedText || selectedText.length < this._config.MIN_SELECTION_LENGTH) return if (this.isSelecting && selection.type === 'Range' && this._isSelectionIntersectingValidArea(selection)) { this._showMenu(event.pageX, event.pageY) } this.isSelecting = false }) }, _handleKeyDown(event) { if (event.key === 'Escape' && this.menuElement && this.menuElement.classList.contains('visible')) { this._hideMenu() } }, _handleDragStart(event) { event.preventDefault() event.stopPropagation() this.isDragging = false this.dragStart = { x: event.pageX, y: event.pageY } this.dragOffset = { x: event.pageX - this.position.x, y: event.pageY - this.position.y } this.menuElement.style.transition = 'none' document.addEventListener('mousemove', this.boundHandlers.dragMove) document.addEventListener('mouseup', this.boundHandlers.dragEnd, { once: true }) }, _handleDragMove(event) { event.preventDefault() if (this.dragUpdatePending) return this.dragUpdatePending = true if (!this.isDragging) { const dx = event.pageX - this.dragStart.x const dy = event.pageY - this.dragStart.y if (Math.sqrt(dx * dx + dy * dy) > this._config.DRAG_THRESHOLD) { this.isDragging = true this.menuElement.querySelector('button')?.classList.add('is-dragging') } } requestAnimationFrame(() => { if (this.isDragging) { this.position.x = event.pageX - this.dragOffset.x this.position.y = event.pageY - this.dragOffset.y this.menuElement.style.transform = `translate(${this.position.x}px, ${this.position.y}px)` } this.dragUpdatePending = false }) }, _handleDragEnd() { document.removeEventListener('mousemove', this.boundHandlers.dragMove) this.menuElement.querySelector('button')?.classList.remove('is-dragging') this.menuElement.style.transition = '' setTimeout(() => { this.isDragging = false }, 0) }, } const IframeLoader = { _config: { MODULE_ENABLED: true, IFRAME_LOAD_ENABLED: true, IFRAME_SELECTOR: 'iframe[src*="richlink.blogsys.jp"]', PLACEHOLDER_CLASS: 'iframe-placeholder', LOADING_CLASS: 'is-loading', CLICKABLE_CLASS: 'is-clickable', STYLES: ` @keyframes iframe-spinner-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .iframe-placeholder { position: relative; display: inline-block; vertical-align: top; background-color: #f9f9f9; box-sizing: border-box; margin: 8px 0; } .is-loading::after { opacity: 0.9; content: ''; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin-top: -16px; margin-left: -16px; border: 4px solid #ccc; border-top-color: #3B82F6; border-radius: 50%; animation: iframe-spinner-rotation 1s linear infinite; } .is-clickable { opacity: 0.9; display: inline-grid; place-items: center; color: #ccc !important; font-weight: bold; font-size: 16px; cursor: pointer; transition: background-color 0.2s, color 0.2s; -webkit-user-select: none; user-select: none; } .is-clickable:hover { opacity: 0.9; color: #3B82F6 !important; background-color: #f4f8ff; } @media screen and (max-width: 870px) { .iframe-placeholder { max-width: 350px !important; height: 105px !important; } } @media screen and (min-width: 871px) { .iframe-placeholder { max-width: 580px !important; height: 120px !important; } } `, }, init(options = {}) { if (!this._config.MODULE_ENABLED) return Object.assign(this._config, options) GM_addStyle(this._config.STYLES) }, replaceIframesInContainer(container) { if (!this._config.MODULE_ENABLED) return const iframes = container.querySelectorAll(this._config.IFRAME_SELECTOR) if (iframes.length === 0) return this._config.IFRAME_LOAD_ENABLED ? this._processForLazyLoad(iframes) : this._processForClickToLoad(iframes) }, _processForLazyLoad(iframes) { const observer = new IntersectionObserver( (entries, obs) => { entries.forEach((entry) => { if (entry.isIntersecting) { const placeholder = entry.target const iframe = document.createElement('iframe') iframe.src = placeholder.dataset.src iframe.setAttribute('style', placeholder.dataset.style) iframe.setAttribute('frameborder', '0') iframe.setAttribute('scrolling', 'no') iframe.style.opacity = '0' iframe.addEventListener( 'load', () => { placeholder.classList.remove(this._config.LOADING_CLASS) iframe.style.opacity = '1' }, { once: true }, ) placeholder.appendChild(iframe) obs.unobserve(placeholder) } }) }, { rootMargin: '200px 0px', }, ) iframes.forEach((iframe) => { const placeholder = document.createElement('div') placeholder.className = `${this._config.PLACEHOLDER_CLASS} ${this._config.LOADING_CLASS}` const originalStyle = iframe.getAttribute('style') || '' placeholder.setAttribute('style', originalStyle) placeholder.dataset.src = iframe.src placeholder.dataset.style = originalStyle iframe.replaceWith(placeholder) observer.observe(placeholder) }) }, _processForClickToLoad(iframes) { iframes.forEach((iframe) => { if (iframe.parentElement.classList.contains(this._config.PLACEHOLDER_CLASS)) return const originalSrc = iframe.src const originalStyle = iframe.getAttribute('style') || '' const placeholder = document.createElement('div') placeholder.className = `${this._config.PLACEHOLDER_CLASS} ${this._config.CLICKABLE_CLASS}` placeholder.textContent = '▶ 関連記事を読み込む' placeholder.setAttribute('style', originalStyle) placeholder.addEventListener( 'click', () => { const newIframe = document.createElement('iframe') newIframe.src = originalSrc newIframe.setAttribute('style', originalStyle) newIframe.setAttribute('frameborder', '0') newIframe.setAttribute('scrolling', 'no') const loadingWrapper = document.createElement('div') loadingWrapper.className = `${this._config.PLACEHOLDER_CLASS} ${this._config.LOADING_CLASS}` loadingWrapper.setAttribute('style', originalStyle) newIframe.style.opacity = '0' loadingWrapper.appendChild(newIframe) newIframe.addEventListener( 'load', () => { loadingWrapper.classList.remove(this._config.LOADING_CLASS) newIframe.style.opacity = '1' }, { once: true }, ) placeholder.replaceWith(loadingWrapper) }, { once: true }, ) iframe.replaceWith(placeholder) }) }, } const ImageProcessor = { _config: { MODULE_ENABLED: true, IMG_SRC_REGEX: /(https:\/\/livedoor\.blogimg\.jp\/edewakaru\/imgs\/[a-z0-9]+\/[a-z0-9]+\/[a-z0-9]+)-s(\.jpg)/i, }, process(container) { if (!this._config.MODULE_ENABLED) return container.querySelectorAll('a[href*="livedoor.blogimg.jp"]').forEach((link) => { const img = link.querySelector('img.pict') if (!img) return const newImg = document.createElement('img') newImg.loading = 'lazy' newImg.src = img.src.replace(this._config.IMG_SRC_REGEX, '$1$2') newImg.alt = (img.alt || '').replace(/blog/gi, '') Object.assign(newImg, { className: img.className, width: img.width, height: img.height, }) link.replaceWith(newImg) }) }, } const PageOptimizer = { _config: { MODULE_ENABLED: true, GLOBAL_REMOVE_SELECTORS: ['header#blog-header', 'footer#blog-footer', '.ldb_menu', '#analyzer_tags', '#gdpr-banner', '.adsbygoogle', '#ad_rs', '#ad2', 'div[class^="fluct-unit"]', '.article-social-btn', 'iframe[src*="clap.blogcms.jp"]', '#article-options', 'a[href*="blogmura.com"]', 'a[href*="with2.net"]', 'div[id^="ldblog_related_articles_"]'], STYLES: ` #container { width: 100%; } @media (min-width: 960px) { #container { max-width: 960px; } } @media (min-width: 1040px) { #container { max-width: 1040px; } } #content { display: flex; position: relative; padding: 50px 0 !important; } #main { flex: 1; float: none !important; width: 100% !important; } aside#sidebar { visibility: hidden; float: none !important; width: 350px !important; flex: 0 0 350px; } .plugin-categorize { position: fixed; height: 85vh; display: flex; flex-direction: column; padding: 0 !important; width: 350px !important; } .plugin-categorize .side { flex: 1; overflow-y: auto; max-height: unset; } .plugin-categorize .side > :not([hidden]) ~ :not([hidden]) { margin-top: 5px; margin-bottom: 0; } .article { padding: 0 0 20px 0 !important; margin-bottom: 30px !important; } .article-body { padding: 0 !important; } .article-pager { margin-bottom: 0 !important; } .article-body-inner { line-height: 2; opacity: 0; transition: opacity 0.3s; } .article-body-inner img.pict { margin: 0 !important; width: 80% !important; display: block; } .article-body-inner strike { color: orange !important; } .article-body-inner em { font-style: normal !important; font-weight: bold !important; color: red; } .to-pagetop { position: fixed; bottom: 19.2px; right: 220px; z-index: 9999; } rt, iframe, time, .pager, #sidebar { -webkit-user-select: none; user-select: none; } .article-body-inner:after, .article-meta:after, #container:after, #content:after, article:after, section:after, .cf:after { content: none !important; display: none !important; height: auto !important; visibility: visible !important; } `, }, init() { if (!this._config.MODULE_ENABLED) return const antiFlickerCss = `${this._config.GLOBAL_REMOVE_SELECTORS.join(', ')} { display: none !important; }` GM_addStyle(antiFlickerCss) GM_addStyle(this._config.STYLES) }, cleanupGlobalElements() { if (!this._config.MODULE_ENABLED) return document.querySelectorAll(this._config.GLOBAL_REMOVE_SELECTORS.join(',')).forEach((el) => el.remove()) document.querySelectorAll('body script, body link, body style, body noscript').forEach((el) => el.remove()) }, cleanupArticleBody(container) { if (!this._config.MODULE_ENABLED) return this._trimContainerBreaks(container) const lastElement = container.lastElementChild if (lastElement) { this._trimContainerBreaks(lastElement) } container.style.opacity = 1 }, _trimContainerBreaks(element) { if (!element) return const isJunkNode = (node) => { if (!node) return true if (node.nodeType === 3 && /^\s*$/.test(node.textContent)) { return true } if (node.nodeType === 1) { const tagName = node.tagName if (tagName === 'BR') return true if (tagName === 'SPAN' && /^\s*$/.test(node.textContent)) return true if (tagName === 'A' && /^\s*$/.test(node.textContent)) return true } return false } while (element.firstChild && isJunkNode(element.firstChild)) { element.removeChild(element.firstChild) } while (element.lastChild && isJunkNode(element.lastChild)) { element.removeChild(element.lastChild) } }, finalizeLayout() { if (!this._config.MODULE_ENABLED) return const sidebar = document.querySelector('aside#sidebar') if (!sidebar) return const category = sidebar.querySelector('.plugin-categorize') sidebar.innerHTML = '' if (category) { sidebar.appendChild(category) sidebar.style.visibility = 'visible' } }, } const RubyConverter = { _config: { MODULE_ENABLED: true, }, _rules: null, _regex: { matchBracketRuby: /[【「]([^【】「」（）・、\s～〜]+)（([^（）]*)）([^【】「」（）]*)[】」]/g, matchKanjiRuby: /([一-龠々ヵヶ]+)\s*[(（]([^（）()]*)[)）]/g, matchLoanwordRuby: /([a-z]+(?:\s+[a-z]+)*)\s*[（(]([ァ-ンー]+)[）)]/gi, matchKatakanaRuby: /([ァ-ンー]+)\s*[（(]([a-z+＋\s]+)[）)]/gi, extractCandidates: /([^\s\p{P}<>]+)（([^）]+)）/gu, extractKanjiAndReading: /(.*?)（(.*?)）/, extractReading: /（(.*?)）/, hasOnlyKana: /^[\u3040-\u309F\u30A0-\u30FF]+$/u, hasOnlyHiragana: /^[\u3040-\u309F]+$/u, hasOnlyKatakana: /^[\u30A0-\u30FF]+$/u, hasKanaChar: /^[\u3040-\u309F\u30A0-\u30FF]$/u, hasOnlyKanjiKana: /^[一-龠々\u3040-\u309F\u30A0-\u30FF]+$/u, isHtmlTag: /<[^>]+>/g, isRubyTag: /]*>/, }, _registeredWords: new Set(), _wordBankForRegex: [], _rubyCache: new Map(), _htmlPatches: new Map(), _simpleTextReplacements: new Map(), globalRegex: null, init(rules) { if (!this._config.MODULE_ENABLED) return this._rules = rules this.compile() }, applyRubyToContainer(container) { if (!this._config.MODULE_ENABLED) return this._applyHtmlPatches(container) this._learnFromContainer(container) this._buildFinalRegex() this._processTextNodes(container) }, compile() { this._compileStaticRules() this._buildFinalRegex() }, _compileStaticRules() { const { HTML, TEXT } = this._rules HTML.OVERRIDE.forEach((rule) => { const pattern = typeof rule.pattern === 'string' ? new RegExp(this._escapeRegExp(rule.pattern), 'g') : rule.pattern this._htmlPatches.set(pattern, rule.replacement) try { if (this._regex.isRubyTag.test(rule.replacement)) { } else { const extractedPairs = this._extractRubyCandidates(rule.replacement) extractedPairs.forEach(({ kanji, reading, fullPattern }) => { this.registerWord({ pattern: fullPattern, kanji, reading, source: 'HTML.OVERRIDE.Extract', }) }) } } catch (e) {} }) HTML.AUTO.forEach((patternString) => { if (patternString.includes('?')) { const [prefix, suffix] = patternString.split('?') if (suffix === void 0) return const cleanPattern = prefix + suffix const readingMatchForRegister = cleanPattern.match(this._regex.extractReading) if (readingMatchForRegister) { const kanjiPartForRegister = cleanPattern.replace(this._regex.extractReading, '') const readingForRegister = readingMatchForRegister[1] this.registerWord({ pattern: cleanPattern, kanji: kanjiPartForRegister, reading: readingForRegister, source: 'HTML.AUTO', }) } const searchPattern = new RegExp(`${this._escapeRegExp(prefix)}((?:<[^>]+>)*?)${this._escapeRegExp(suffix)}`, 'g') let replacementFunc const readingForPatch = readingMatchForRegister ? readingMatchForRegister[1] : '' if (this._regex.hasOnlyKana.test(readingForPatch)) { const textPartForPatch = cleanPattern.replace(this._regex.extractReading, '') const rubyHtml = this._parseFurigana(textPartForPatch, readingForPatch) if (rubyHtml !== null) { replacementFunc = (match, capturedTags) => rubyHtml + (capturedTags || '') } else { replacementFunc = (match) => match } } else { const textOnlyForPatch = cleanPattern replacementFunc = (match, capturedTags) => textOnlyForPatch + (capturedTags || '') } this._htmlPatches.set(searchPattern, replacementFunc) } }) TEXT.AUTO.forEach((patternString) => { const match = patternString.match(this._regex.extractKanjiAndReading) if (match) { this.registerWord({ pattern: patternString, kanji: match[1], reading: match[2], source: 'TEXT.AUTO', }) } }) TEXT.OVERRIDE.forEach((rule) => { try { if (this._regex.isRubyTag.test(rule.replacement)) { this.registerWord({ pattern: rule.pattern, replacement: rule.replacement, source: 'TEXT.OVERRIDE', }) } else { this._simpleTextReplacements.set(rule.pattern, rule.replacement) const extractedPairs = this._extractRubyCandidates(rule.replacement) extractedPairs.forEach(({ kanji, reading, fullPattern }) => { this.registerWord({ pattern: fullPattern, kanji, reading, source: 'TEXT.OVERRIDE.Extract', }) }) } } catch (e) {} }) }, registerWord({ pattern, kanji, reading, replacement, source }) { if (this._registeredWords.has(pattern)) { return } let finalReplacement = replacement if (!finalReplacement) { if (!kanji || typeof reading === 'undefined') return const rubyHtml = this._parseFurigana(kanji, reading) if (rubyHtml === null) { return } finalReplacement = rubyHtml } this._registeredWords.add(pattern) this._wordBankForRegex.push(this._escapeRegExp(pattern)) this._rubyCache.set(pattern, finalReplacement) }, _learnFromContainer(container) { const html = container.innerHTML const textOnly = html.replace(this._regex.isHtmlTag, '') for (const match of textOnly.matchAll(this._regex.matchBracketRuby)) { const kanjiPart = match[1] const readingPart = match[2] const corePattern = `${kanjiPart}（${readingPart}）` if (this._registeredWords.has(corePattern)) { continue } if (this._simpleTextReplacements.has(corePattern)) { continue } if (!this._regex.hasOnlyKana.test(readingPart)) { continue } if (!this._regex.hasOnlyKanjiKana.test(kanjiPart)) { continue } this.registerWord({ pattern: corePattern, kanji: kanjiPart, reading: readingPart, source: 'Learned', }) } }, _applyHtmlPatches(container) { if (this._htmlPatches.size === 0) { return } let html = container.innerHTML const originalHtml = html this._htmlPatches.forEach((replacement, pattern) => { html = html.replace(pattern, replacement) }) if (html !== originalHtml) { container.innerHTML = html } }, _buildFinalRegex() { this.globalRegex = this._wordBankForRegex.length > 0 ? new RegExp(`(${this._wordBankForRegex.join('|')})`, 'g') : null }, _processTextNodes(root) { const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, { acceptNode: (n) => (n.parentNode.nodeName !== 'SCRIPT' && n.parentNode.nodeName !== 'STYLE' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT), }) const nodesToProcess = [] let node = walker.nextNode() while (node) { const newContent = this._applyTextReplacements(node.nodeValue) if (newContent !== node.nodeValue) { nodesToProcess.push({ node, newContent }) } node = walker.nextNode() } for (let i = nodesToProcess.length - 1; i >= 0; i--) { const { node: node2, newContent } = nodesToProcess[i] const fragment = document.createRange().createContextualFragment(newContent) node2.parentNode.replaceChild(fragment, node2) } }, _applyTextReplacements(text) { if (!text.includes('（') && !text.includes('(')) { return text } let processedText = text for (const [pattern, replacement] of this._simpleTextReplacements) { processedText = processedText.replaceAll(pattern, replacement) } if (this.globalRegex) { processedText = processedText.replace(this.globalRegex, (match) => { return this._rubyCache.get(match) || match }) } processedText = processedText.replace(this._regex.matchLoanwordRuby, (match, loanword, katakana) => { return `${loanword}${katakana}` }) processedText = processedText.replace(this._regex.matchKatakanaRuby, (match, katakana, loanword) => { return `${katakana}${loanword}` }) processedText = processedText.replace(this._regex.matchKanjiRuby, (match, kanji, reading) => { const fullMatch = `${kanji}（${reading}）` if (this._rules.EXCLUDE.STRINGS.has(fullMatch) || !this._regex.hasOnlyHiragana.test(reading) || this._rules.EXCLUDE.PARTICLES.has(reading)) { return match } return `${kanji}${reading}` }) return processedText }, _parseFurigana(kanji, reading) { if (this._regex.hasOnlyKatakana.test(kanji) || this._regex.hasOnlyKatakana.test(reading)) { return null } const hiraganaReading = this._katakanaToHiragana(reading) let result = '' let kanjiIndex = 0 let readingIndex = 0 while (kanjiIndex < kanji.length) { const currentKanjiChar = kanji[kanjiIndex] if (this._regex.hasKanaChar.test(currentKanjiChar)) { result += currentKanjiChar const hiraganaCurrent = this._katakanaToHiragana(currentKanjiChar) const tempNextReadingIndex = hiraganaReading.indexOf(hiraganaCurrent, readingIndex) if (tempNextReadingIndex !== -1) { readingIndex = tempNextReadingIndex + hiraganaCurrent.length } else { return null } kanjiIndex++ } else { let kanjiPart = '' let blockEndIndex = kanjiIndex while (blockEndIndex < kanji.length && !this._regex.hasKanaChar.test(kanji[blockEndIndex])) { kanjiPart += kanji[blockEndIndex] blockEndIndex++ } const nextKanaInKanji = kanji[blockEndIndex] let readingEndIndex if (nextKanaInKanji) { const hiraganaNextKana = this._katakanaToHiragana(nextKanaInKanji) readingEndIndex = hiraganaReading.indexOf(hiraganaNextKana, readingIndex) if (readingEndIndex === -1) { readingEndIndex = hiraganaReading.length } } else { readingEndIndex = hiraganaReading.length } const readingPart = reading.substring(readingIndex, readingEndIndex) if (kanjiPart) { if (!readingPart) { return null } else { result += `${kanjiPart}${readingPart}` } } readingIndex = readingEndIndex kanjiIndex = blockEndIndex } } if (readingIndex < hiraganaReading.length) { } return result }, _escapeRegExp(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') }, _katakanaToHiragana(str) { if (!str) return '' return str.replace(/[\u30A1-\u30F6]/g, (match) => String.fromCharCode(match.charCodeAt(0) - 96)) }, _extractRubyCandidates(replacement) { const results = [] for (const match of replacement.matchAll(this._regex.extractCandidates)) { const kanji = match[1] const reading = match[2] if (!kanji || !reading) { continue } const fullPattern = `${kanji}（${reading}）` results.push({ kanji, reading, fullPattern }) } return results }, } const SettingsPanel = { _config: { MODULE_ENABLED: true, FEEDBACK_URL: 'https://greasyfork.org/scripts/542386-edewakaru-enhanced', OPTIONS: { SCRIPT_ENABLED: { label: 'ページ最適化', defaultValue: true, type: 'toggle', handler: 'notification' }, FURIGANA_VISIBLE: { label: '振り仮名表示', defaultValue: true, type: 'toggle', handler: 'furigana', dependsOn: 'SCRIPT_ENABLED' }, IFRAME_LOAD_ENABLED: { label: '関連記事表示', defaultValue: true, type: 'toggle', handler: 'notification', dependsOn: 'SCRIPT_ENABLED' }, TTS_ENABLED: { label: '単語選択発音', defaultValue: false, type: 'toggle', handler: 'tts', dependsOn: 'SCRIPT_ENABLED', condition: () => 'speechSynthesis' in window }, TTS_RATE: { label: '発音速度', defaultValue: 1, type: 'slider', handler: 'ttsRate', min: 0.85, max: 1, step: 0.05, dependsOn: 'SCRIPT_ENABLED' }, }, STYLES: ` #settings-panel { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; padding: 16px; background: white; border-radius: 4px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05); width: 140px; opacity: 0.9; -webkit-user-select: none; user-select: none; } .settings-title { font-size: 14px; font-weight: 600; color: #1F2937; margin: 0 0 6px 0; text-align: center; border-bottom: 1px solid #E5E7EB; padding-bottom: 6px; position: relative; } .feedback-link, .feedback-link:visited { position: absolute; top: 0; right: 0; width: 16px; height: 16px; color: #E5E7EB !important; transition: color 0.2s ease-in-out; } .feedback-link:hover { color: #3B82F6 !important; } .feedback-link svg { width: 100%; height: 100%; } .setting-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .setting-label { font-size: 13px; font-weight: 500; color: #4B5563; cursor: pointer; flex: 1; line-height: 1.2; } .toggle-switch { position: relative; display: inline-block; width: 40px; height: 20px; flex-shrink: 0; } .toggle-switch.disabled { opacity: 0.5; } .toggle-switch.disabled .toggle-slider { cursor: not-allowed; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #E5E7EB; transition: all 0.2s ease-in-out; border-radius: 9999px; } .toggle-slider:before { position: absolute; content: ""; height: 15px; width: 15px; left: 2.5px; bottom: 2.5px; background-color: white; transition: all 0.2s ease-in-out; border-radius: 50%; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06); } input:checked+.toggle-slider { background-color: #3B82F6; } input:checked+.toggle-slider:before { transform: translateX(20px); } .settings-notification { position: fixed; right: 24px; z-index: 9999; padding: 8px 12px; background-color: #3B82F6; color: white; border-radius: 6px; font-size: 13px; opacity: 0; transform: translateX(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .settings-notification.show { opacity: 0.9; transform: translateX(0); } .slider-container { display: flex; align-items: center; width: 100%; } .slider-value { font-size: 12px; margin-left: 2px; } .slider { -webkit-appearance: none; width: 40px; height: 6px; border-radius: 3px; background: #E5E7EB; outline: none; flex-shrink: 0; } .slider:disabled { opacity: 0.5; cursor: not-allowed; } .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #3B82F6; cursor: pointer; } .slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #3B82F6; cursor: pointer; border: none; } `, }, _elements: {}, _notificationPosition: '24px', _templates: { panel: (feedbackUrl) => `

設定パネル

`, toggle: (id, label, checked, disabled) => ` `, slider: (id, label, value, min, max, step, disabled) => `
${label}${value.toFixed(2)}
`, }, _handlers: { notification() { this._showNotification() }, furigana(value) { this._toggleFuriganaDisplay(value) }, tts(value) { emitter.emit('tts:toggle', value) }, ttsRate(value) { emitter.emit('tts:rate', value) }, }, init() { if (!this._config.MODULE_ENABLED) return GM_addStyle(this._config.STYLES) this._createPanel() this._initFurigana() }, getOptions() { return Object.fromEntries(Object.entries(this._config.OPTIONS).map(([key, config]) => [key, GM_getValue(key, config.defaultValue)])) }, _createPanel() { const panel = document.createElement('div') panel.id = 'settings-panel' panel.innerHTML = this._templates.panel(this._config.FEEDBACK_URL) this._elements.panel = panel const options = this.getOptions() const controls = Object.entries(this._config.OPTIONS) .filter(([, config]) => !config.condition || config.condition()) .map(([key, config]) => { const isDisabled = config.dependsOn && !options[config.dependsOn] const control = this._createControl(key, config, options[key], isDisabled) this._elements[key] = this._cacheControlElements(control) return control }) panel.append(...controls) panel.addEventListener('change', this._handlePanelEvent.bind(this)) panel.addEventListener('input', this._handlePanelEvent.bind(this)) document.body.appendChild(panel) this._updateNotificationPosition() }, _createControl(key, config, value, disabled) { const container = document.createElement('div') container.className = 'setting-item' container.dataset.key = key const id = `setting-${key.toLowerCase()}` const template = this._templates[config.type] if (config.type === 'toggle') { container.innerHTML = template(id, config.label, value, disabled) } else if (config.type === 'slider') { container.innerHTML = template(id, config.label, value, config.min, config.max, config.step, disabled) } return container }, _cacheControlElements(container) { return { container, control: container.querySelector('input'), switch: container.querySelector('.toggle-switch'), } }, _handlePanelEvent(event) { const item = event.target.closest('.setting-item') if (!item) return const key = item.dataset.key const value = event.target.type === 'checkbox' ? event.target.checked : Number(event.target.value) if (event.target.type === 'range') { const valueDisplay = item.querySelector('.slider-value') if (valueDisplay) valueDisplay.textContent = value.toFixed(2) } this._handleChange(key, value) }, _handleChange(key, value) { GM_setValue(key, value) const config = this._config.OPTIONS[key] const handler = this._handlers[config.handler] if (handler) handler.call(this, value) this._updateDependentOptions() }, _updateDependentOptions() { const options = this.getOptions() Object.entries(this._config.OPTIONS) .filter(([, config]) => config.dependsOn) .forEach(([key, config]) => { const isEnabled = options[config.dependsOn] const element = this._elements[key] if (element?.switch) element.switch.classList.toggle('disabled', !isEnabled) if (element?.control) element.control.disabled = !isEnabled }) }, _updateNotificationPosition() { if (this._elements.panel) { const rect = this._elements.panel.getBoundingClientRect() this._notificationPosition = `${window.innerHeight - rect.top + 4}px` } }, _initFurigana() { const visible = GM_getValue('FURIGANA_VISIBLE', this._config.OPTIONS.FURIGANA_VISIBLE.defaultValue) if (!visible) { this._toggleFuriganaDisplay(false) } }, _toggleFuriganaDisplay(visible) { const id = 'furigana-display-style' let style = document.getElementById(id) if (!style) { style = document.createElement('style') style.id = id document.head.appendChild(style) } style.textContent = `rt { display: ${visible ? 'ruby-text' : 'none'} !important; }` }, _showNotification(message = '設定を保存しました。再読み込みしてください。') { const existingNotification = document.querySelector('.settings-notification') if (existingNotification) existingNotification.remove() const notification = document.createElement('div') notification.className = 'settings-notification' notification.textContent = message notification.style.bottom = this._notificationPosition document.body.appendChild(notification) requestAnimationFrame(() => { notification.classList.add('show') setTimeout(() => { notification.classList.remove('show') setTimeout(() => notification.remove(), 500) }, 1500) }) }, } const TTSPlayer = { _config: { VOICES: new Map([ ['female', 'Microsoft Nanami Online (Natural) - Japanese (Japan)'], ['male', 'Microsoft Keita Online (Natural) - Japanese (Japan)'], ]), OPTIONS: { lang: 'ja-JP', volume: 1, rate: 1, pitch: 1, }, }, _initPromise: null, _voices: new Map(), _availableVoices: [], _isInitialized: false, _eventHandlers: { ttsSpeak: null, ttsRate: null, }, init(options = {}) { if (!this._initPromise) { this._initPromise = this._initialize() } this._setRate(options.rate) if (!this._eventHandlers.ttsSpeak) { this._initEventHandlers() } this._subscribeToEvents() return this._initPromise }, destroy() { this._unsubscribeAll() if ('speechSynthesis' in window) { speechSynthesis.cancel() } }, speak(payload) { if (!this._isInitialized) { return } const { text, voice: voiceKey, rate } = payload || {} if (!text?.trim() || this._availableVoices.length === 0) { if (this._availableVoices.length === 0); return } speechSynthesis.cancel() const utterance = new SpeechSynthesisUtterance(text) utterance.voice = this._getVoice(voiceKey) utterance.lang = this._config.OPTIONS.lang utterance.volume = this._config.OPTIONS.volume utterance.rate = rate || this._config.OPTIONS.rate utterance.pitch = this._config.OPTIONS.pitch utterance.onerror = (e) => { if (!['canceled', 'interrupted'].includes(e.error)) { } } speechSynthesis.speak(utterance) }, _initEventHandlers() { this._eventHandlers.ttsSpeak = (payload) => { this.speak(payload) } this._eventHandlers.ttsRate = (rate) => { this._setRate(rate) } }, _subscribeToEvents() { this._unsubscribeAll() emitter.on('tts:speak', this._eventHandlers.ttsSpeak) emitter.on('tts:rate', this._eventHandlers.ttsRate) }, _unsubscribeAll() { if (this._eventHandlers.ttsSpeak) { emitter.off('tts:speak', this._eventHandlers.ttsSpeak) } if (this._eventHandlers.ttsRate) { emitter.off('tts:rate', this._eventHandlers.ttsRate) } }, _setRate(rate) { rate = typeof rate === 'string' ? Number.parseFloat(rate) : rate if (rate >= 0.1 && rate <= 10 && !Number.isNaN(rate)) { this._config.OPTIONS.rate = rate return true } return false }, _getVoice(key) { if (key && this._voices.has(key)) { return this._voices.get(key) } if (this._availableVoices.length > 0) { return this._availableVoices[Math.floor(Math.random() * this._availableVoices.length)] } return void 0 }, _initialize() { return new Promise((resolve) => { if (!('speechSynthesis' in window)) { return resolve() } let resolved = false const loadVoices = () => { if (resolved) return resolved = true const allVoices = speechSynthesis.getVoices() const { VOICES, OPTIONS } = this._config const voiceNameToKeyMap = new Map([...VOICES.entries()].map(([key, name]) => [name, key])) this._voices.clear() for (const v of allVoices) { const key = voiceNameToKeyMap.get(v.name) if (key && v.lang === OPTIONS.lang) { this._voices.set(key, v) } } this._availableVoices = [...this._voices.values()] if (this._availableVoices.length > 0) { this._isInitialized = true } speechSynthesis.onvoiceschanged = null resolve() } const initialVoices = speechSynthesis.getVoices() if (initialVoices.length > 0) { loadVoices() } else { speechSynthesis.onvoiceschanged = loadVoices setTimeout(loadVoices, 500) } }) }, } const MainController = { run() { const options = SettingsPanel.getOptions() if (!options.SCRIPT_ENABLED) { document.addEventListener('DOMContentLoaded', () => SettingsPanel.init()) return } PageOptimizer.init() RubyConverter.init(RULES) TTSPlayer.init({ rate: options.TTS_RATE }) this._subscribeToEvents() document.addEventListener('DOMContentLoaded', () => { PageOptimizer.cleanupGlobalElements() IframeLoader.init({ IFRAME_LOAD_ENABLED: options.IFRAME_LOAD_ENABLED }) SettingsPanel.init() if (options.TTS_ENABLED) { ContextMenu.init() } this._processPageContent() }) }, _subscribeToEvents() { emitter.on('tts:toggle', (enabled) => { enabled ? ContextMenu.init() : ContextMenu.destroy() }) }, _processPageContent() { const articleBodies = document.querySelectorAll('.article-body-inner') if (articleBodies.length === 0) { PageOptimizer.finalizeLayout() return } let currentIndex = 0 const processBatch = () => { const batchSize = Math.min(2, articleBodies.length - currentIndex) const endIndex = currentIndex + batchSize for (let i = currentIndex; i < endIndex; i++) { const body = articleBodies[i] RubyConverter.applyRubyToContainer(body) IframeLoader.replaceIframesInContainer(body) ImageProcessor.process(body) PageOptimizer.cleanupArticleBody(body) } currentIndex = endIndex if (currentIndex < articleBodies.length) { requestAnimationFrame(processBatch) } else { PageOptimizer.finalizeLayout() } } requestAnimationFrame(processBatch) }, } MainController.run() })()