  |
はてなキーワード: ツールチップとは
これを改善してってお願いした。何書いてあるかわからないけど動いたよ。
https://anond.hatelabo.jp/20240125203115
// ==UserScript== // @name 増田ミュート（白塗り版） // @namespace http://tampermonkey.net/ // @version 2024-06-26 // @description ミュートワードを含む最小限の範囲を白塗りにする // @author You // @match https://anond.hatelabo.jp/* // @icon https://www.google.com/s2/favicons?sz=64&domain=hatelabo.jp // @grant none // ==/UserScript== (function() { 'use strict'; const muteWords = [ "弱者男性", "弱男", "弱者", "婚活", "男", "女", "年収", "下方婚", "発達障害", "発達", "ハッタツ", "ハッタショ", "ﾊｯﾀｼｮ", "競プロ", "競技プログラミング", "AtCoder", ]; function whiteoutElement(element) { element.style.backgroundColor = 'white'; element.style.color = 'white'; element.style.textShadow = 'none'; element.style.cursor = 'default'; element.style.userSelect = 'none'; // テキスト選択を防止 element.style.borderBottom = '1px dashed #ccc'; // 枠線を追加してテキストがあることを示す // リンクの場合、クリックを無効化 if (element.tagName === 'A') { element.style.pointerEvents = 'none'; element.removeAttribute('href'); } // 子要素にも適用 Array.from(element.children).forEach(child => { child.style.backgroundColor = 'white'; child.style.color = 'white'; child.style.textShadow = 'none'; }); // ツールチップを追加 element.title = 'この内容にはミュートワードが含まれています'; } function shouldMute(text) { return muteWords.some(word => { const parts = word.split(''); const regex = new RegExp(parts.map(char => `${char}\\s*`).join(''), 'i'); return regex.test(text); }); } function findSmallestMuteableElement(element) { if (element.nodeType === Node.TEXT_NODE) { return shouldMute(element.textContent) ? element.parentElement : null; } if (element.tagName === 'PRE' || element.tagName === 'CODE') { return shouldMute(element.textContent) ? element : null; } for (let child of element.childNodes) { const result = findSmallestMuteableElement(child); if (result) return result; } return shouldMute(element.textContent) ? element : null; } function processElement(element) { const muteableElement = findSmallestMuteableElement(element); if (muteableElement) { whiteoutElement(muteableElement); } } function processAllElements(root = document.body) { const walker = document.createTreeWalker( root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null, false ); let node; while (node = walker.nextNode()) { if (node.nodeType === Node.ELEMENT_NODE) { processElement(node); } else if (node.nodeType === Node.TEXT_NODE && node.parentElement) { processElement(node.parentElement); } } } function handleClickEvent(event) { setTimeout(() => { processAllElements(event.target); }, 100); } // 初回実行 processAllElements(); // クリックイベントの監視 document.body.addEventListener('click', handleClickEvent); // DOM変更の監視 const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { if (node.nodeType === Node.ELEMENT_NODE) { processAllElements(node); } }); } else if (mutation.type === 'characterData') { processElement(mutation.target.parentNode); } }); }); observer.observe(document.body, { childList: true, subtree: true, characterData: true }); })();
未経験から3ヶ月で外資IT勤めで年収1600万みたいなのがバズってたので
ただし俺の場合、実務が未経験なだけでプログラミング歴は20年ちょっとある、いわゆる趣味グラマからの転職
同人ゲーム制作やFLOSS系の活動はずっとやっていて、学生時代はバイトで出会い系サイト作ってた
前職の都合で自動車メーカーとも繋がりがあり、そのツテで昨今の自動車へコンピューティングを強く導入するという流れがあったので誘われて転職することになった
つまり草の根(もう死語だねコレ)の情報技術者が昔馴染みを頼って転職しただけと言ってしまえばその通りなのだ
こんな転職の仕方だからプログラミングスクール出身者のレベルがどんなもんだか知らんけど、もともと俺は電気系のオタクでシーケンスに関して理解があってH8あたりからプログラミングへ手を出しているって感じがスタートなんだ
たぶんイマドキの純粋培養な情報技術者の中には電気回路まったくわからんって人も居るとは思うけど、電気関係の素養があったほうがプログラミングの習得には今でも有利なんじゃないかな？と思わなくもない
例えば俺へ対してパソコン通信やインターネットを通じてプログラミングのノウハウを教えてくれたお兄さんたちはゲームメーカーでエレメカやってるって人が居たりして、後にゲームハードやROM作り始めたなんて話もリアルタイムに聞いていた。今じゃお偉いさんになってるだろうけど
そんなんだから俺はハードもソフトもネットワークもスペシャリストほどではないけれど満遍なく知る変な素養があり直接声がかかった次第だ
イマドキ流行りのGoとかSwiftとかRustみたいなイケイケな言語ではなくC++とかJavaとかBashとかの方が得意だっていうのも評価としてはあったかも知れないけどね
あと日常的なLinuxデスクトップ使いというのも最近のLinux興隆の流れから後押しがあったかも知れん
もちろん苦手な部分もある、GUIがそれだ
GUIの設計なんて言うものはデザイナーがやるべき仕事だね。今流行りのそれっぽいのとかツールチップ使いましたみたいな古典的なスタイルを真似たGUIを作ろうと思えば作れるけど、単なるモノマネなので本職のそれとは出来が違う
というわけでプログラミングスクール出身者、どこかで俺みたいな草の根出身者に出会うこともあるだろうから、そのときはヨロシクな
各レーベルのアクセス数はラノベの杜のそれより多いのだろうか。ぼーっとラノベの杜の発売予定を見る。タイトルを見て気になるのをクリックする。その次にレーベルサイトで詳しく見る。ラノベの杜経由でアクセスする場合が多い。自分がこれなのだけれど、他の人はどうやってるんだろう。それともインターネットで見たり触れたりはしないのだろうか。デザイナとイラストレータはラノベの杜のサムネサイズで訴求力があるカバーにしたほうがいい（俺カメラ）。
あと読書メーターとラノベの杜がひっついてくれると非常に楽だ。ツールチップでナイスの多いレビューが出てくれるとなおよい。次に作者、イラストレータの個人サイトやらＳＮＳアカウントにアクセスできればもっといい。「ジャスコ」以来、売れるかどうかは情報の流通量で決まると言っていい状況だ。「なろう」発が売れる、選ばれるのは情報量がケタ違いに多いからだ。２００ページ立ち読み可能、なんてのはダメなんだよ。一気に２００ページを公開しても好きな奴しか読まない。それより作家の納品を１０枚単位にして、公開していくべきだ。あとから「加筆訂正」すればいい。なんなら「完全版」でもいい。継続的に５分で読み終わる量を公開し続けることが重要なんだ。公開の価値は低い。公開「し続ける」ことに価値がある。
多分、読み専門でも使いやすくなってると思うので、Chrome使いの人は使ってみて感想や要望もらえるとうれしいです。
https://chrome.google.com/webstore/detail/masudalert/clkiaalhgfhgcllngddndbghoaahhnfa
機能一覧
細かいところでいくつか修正ありますが、おおまかな機能はこれだけです。
とくにツールチップでトラバ先表示する機能はROM専の方でもあったらいいなと思う機能じゃないでしょうか。
なんかあればツッコミ歓迎です。
更新。
だったので、一応、これで不満が解消できたかなあと思っている。
今回は慣れてきたからか、それほど苦戦しなかった。
backgroundページからcontents_scriptへメッセージ送る方法を知らなくて
色々勘違いして少し手間取ったぐらいかな。
https://github.com/aoi-tomoyuki/compact_na_masuda
追記
ページ内にある同じURLをマウスオーバーすると、一番最初に表示された位置にポップアップされることに今気づいた。
なおします。
追記:23:14
なおした。
⚫︎マイナビニュース
マイナビニュースはヘッダー+広告+現在位置の3コンボで本当に最悪
⚫︎はてブ
改悪では？
⚫︎ITmedia
まあまだゆるせる
◻︎文字サイズが大きすぎる
⚫︎朝日新聞
なんなんだあれは
◻︎広告がとにかくうざい
目に全く入らないが、画面が狭くなるのでやめてほしい
⚫︎+大きさが変わるやつ
アメブロとかをうっかり開くとよくある、下部の奴が膨れるやつ
めちゃくちゃに不快だし今すぐやめてほしい
⚫︎全画面で広告遷移
⚫︎画面描画後に挿入されるアドワーズ
サイゾーだから仕方ないのかもしれんが…ビジネスジャーナルはほんとひどい
ライブドア、最近はエントリとエントリのあいだに広告差し込んでくるようになってるな…
追記するかも
「あちこちでよく見かける『あの機能』を実装するためにCSSのテクニックとかJSのライブラリとか探したいんだけど、どういうキーワードで探したらいいのかわからない…」という人向け。
注意
※この呼称が正しいとは限りません
※この呼称に統一されているわけではありません
→ 角丸
複数の画像を一枚にまとめてCSSのbackground-positionで制御する（メニューのマウスオーバーなどでよく使われる）
フォームにうっすらと説明文が表示される ＆ フォームにフォーカスすると消える
→ プレースホルダー
他のメニューを押しのけるようなアニメとともにサブメニューが表示される ＆ 開いているメニューは常にひとつだけ
→ アコーディオンメニュー
メニューの横にある＋マークなどをクリックするとその下にサブメニューが表示される ＆ 複数のメニューを開くことができる
→ ツリーメニュー
水平メニューから垂れ下がるようにサブメニューが表示される
→ プルダウンメニュー
横一列に並んだアイテムをスクロールバーでスライド表示 ＆ アイテムが床面に反射したようなエフェクト
→ アクアボタン
画像のサムネイルをクリックするとオリジナルサイズの画像が画面中央に表示される
→ ライトボックス
警告ウィンドウ等が画面中央に表示される ＆ その他の操作を受け付けない（※指摘を受けて追記しました）
説明文等が書かれた小さな吹き出しをマウスカーソルの隣に表示させる
→ ツールチップ
タグをアルファベット順に並べる ＆ その使用頻度等に応じてフォントサイズや色を変えて表示する
→ タグクラウド
ひとつの記事を分割してページ番号を振る
→ ページャー、ページネーション
フッター部分が常に最下部に固定されている
→ フッタースティック
