  |
はてなキーワード: cssとは
Marpから出力されたPDFをプレビュー.appで表示すると、ページレンダリング速度が極端に遅くなり、実用に耐えない。
1. macOS、VS Code、Marp for VS Code機能拡張、Google Chromeを入手
3. スライドのテーマ(デザインテンプレート)として「Gaia」を指定
6. 出力されたPDFをmacOS同梱のプレビュー.appで表示 →ページレンダリング速度が極端に遅くなり、実用に耐えない。
Gaiaテーマに含まれる半透明オブジェクトがmacOSのプレビュー.appと相性が悪いため
GaiaテーマをインポートしたCSSファイルをテーマとして使っている場合は、:root{background-image:none;}と追加指定する。
私より一回り、あるいはそれ以上の上の世代のオタクを思い浮かべると、まず男性の像が比較的はっきりしている。中流以上の家庭に育ち、子ども部屋に親が買い与えたパソコンがあって、それをいじっているうちにハードやソフトに詳しくなり、理系学部を経てメーカーや通信、IT系の技術職に進んだ、というルートを辿った人がそれなりにいる。容姿への関心が薄いことは共通していて、磨けば光るとも限らないし、率で言えば非オタクのほうが見栄えのする人は多かったと思う。ただ、家庭の経済力が一定以上ないとオタク趣味が成立しなかった時代なので、生活基盤としては安定していた人が多かった、というのはある。
上の世代の女性のオタクは、評価が難しい。同じく中流以上の家庭で育ち、国公立や有名私大に進んでいる人もいる。ただ、文系がほとんどで、その語学力や教養が何かの形で社会に還元されているかというと、必ずしもそうではない。同人活動のために知識を使い、推しカプの正当性を論じるために海外の議論を引用する、といった方向に力が向かっている人も少なくなかった。私自身も二次創作をしていた時期には、その「内輪の空気」のために時間も気力もかなり投じていた。技術面で言えば、男性のような際立った専門性は基本的に持っていなかったと思う。個人サイトを運営していた層の中には、独学でHTMLやCSS、そこからちょっとしたスクリプトを書けるようになって、そのままウェブ業界に進んだ人もいるにはいるけれど、多数派ではない。私自身のスキルも結局、中途半端なところで終わった。
結婚については、上の世代のオタク女性はかなり高い確率で結婚している。私の周りでも、学生時代のサークルや同人活動を通じて知り合った相手とそのまま結婚した人が多い。夫側は「自分のような人間が結婚できたのは運が良かった」のような感覚を持っていて、妻が家事をして、たまに同人誌を作っていることをわりと受け入れている。一方で妻側は、夫の身なりを整え、家庭を回し、子どもを育てている。私自身も、たぶんこのオタク夫婦の類型に入る。
上の世代のオタクには、変化に適応できずに苛立っている人も目につくようになった。SNSで政治的な発言ばかりして揉めている人、二次創作の界隈で誰かを叩いてばかりいる人を見ると、自分が積み上げてきたつもりの文化が薄まっていくことへの不安がそこにあるのだろうな、と感じる。ここは自戒も込めて書いている。
下の世代のオタクは、上の世代とはかなり前提が違う。彼らがオタク的なコンテンツに触れる入り口は、ほぼスマートフォンとソーシャルゲーム、それから無料で読める漫画アプリや動画配信になっている。家庭にパソコンがあることが前提ではなくなったので、オタクであるために中流以上の家庭環境が必要だった時代の前提が外れた。結果として、家庭環境が必ずしも安定していない層、学業面で苦戦している層、いわゆる旧来の「オタクではなかった層」が大量に流入している。
容姿に気を遣う人は、はっきりと増えた。ぎょっとするような格好の人の割合は確実に減って、ふつうに小綺麗な人がいる。これは良いことだと思う。同時に、性的経験についても、上の世代の男性オタクが童貞であることがある種の文化的特徴だったのに対して、下の世代の男性オタクは風俗やパチンコといった、上の世代のオタクからは縁遠かった消費活動を当たり前にしている人もいる。技術リテラシーの面で言うと、上の世代の男性オタクが持っていた「家族のIT担当」のような能力は、明らかに引き継がれていない。大学生がレポートをスマホだけで書く時代になり、PCをまともに触ったことがない若者も珍しくない。
女性側では、二次創作にお金を使うのではなく、公式グッズや配信、ライブに大量にお金を落とす形に消費スタイルが変わった。アクリルスタンドを並べて祭壇を作り、痛バを持ち、推しのために課金額を競う。これはアイドルやホストに貢ぐ文化が、二次元の界隈にスライドして入ってきたのだと思う。公式にお金が流れること自体は、上の世代のように同人誌即売会で内輪のお金を回していたよりも健全とも言える。自分の収入や生活設計とのバランスを見失っている人もよく見かける。ただこれも、上の世代の同人女が交通費や印刷代に湯水のように使っていたことを思えば、本質的にはあまり変わっていないのかもしれない。
下の世代の女性で印象的なのは、「喪女」自認のある人が減り、彼氏がいた経験のある人が多いことだ。一方で、結婚や子育てに向くかというと、生活の組み立て方や金銭感覚を見るかぎり、必ずしもそうとは言えない人もいる。未婚化はむしろ加速している印象がある。
世代論として「昔はよかった」と言うつもりはない。上の世代のオタク男性の技術的な強さは確かに失われたけれど、上の世代の女性オタクが持っていた長所が何だったかと問われると、自分のことを含めて言葉に詰まる。それは社会的にはほとんど意味を持たない。下の世代のオタクは、入り口のハードルが下がった分だけ多様で、玉石混交だ。容姿は良くなり、同人誌や同人グッズではなく公式にお金が流れるようになり、その一方で技術リテラシーや家庭環境の安定は失われた。
オタクという言葉が指していた「何かに深く詳しい人」という意味は、ほぼ消えて、今は「コンテンツを消費する人」に置き換わっている。人口は増えた。オタク差別がなくなったかわりに、内部のルッキズムや課金額のマウントが目立つようになった。これは、長く差別されていた集団が市場の中で再編されるときに、しばしば起こることだと思う。
結局のところ、上の世代も下の世代も、その時代の経済と技術の条件に合わせて形を変えただけで、本質的にやっていることはあまり変わらないのかもしれない。自分が好きなものに、自分が持てる時間とお金を、ときに度を越して注ぎ込む。それを観察対象として眺めながら、扶養の範囲で事務仕事をして（個人サイト時代に得たHTML/CSSは、はっきり言って何の役にも立っていないが、パソコンが平均的中年女性よりも使えることは、経理事務の仕事に役立っている）、夫と子どもの夕食を作っている自分も、その連なりの中にちゃんといる、と思う。
オタク文化への参入には、各時代ごとに異なるコストが存在した。ここでいうコストとは金銭だけでなく、技術的リテラシー・情報探索能力・社会的リスク（スティグマの引き受け）を含む。
技術革新のたびにこれらのコストが段階的に引き下げられ、それまでオタク文化圏の外側にいた層が流入してきた。以下、3つの時代区分に沿って整理する。
| 経済力 | 専門誌・同人誌・OVA・ゲームソフト・PCパーツ等の購入費。いずれも安くない |
| 技術的リテラシー | PC自作・ネットワーク設定・セットアップなど。男性オタクは事実上「ギーク＝技術者気質」であることが前提だった |
| 情報探索能力 | 専門誌の購読、パーツショップや同人ショップへの物理的アクセス、即売会への参加。情報は待っていても来ない |
| 社会的コスト | 「オタク」は強い蔑称であり、自称するにも周囲に知られるにも大きなスティグマを伴った |
「電気街としての秋葉原」は、この世代の空間的象徴である。無線・自作PC・パーツショップが集積する街は、技術的リテラシーそのものが入場料だった。
同人誌即売会に行かなくても、自宅のPCからオタク活動ができるようになった。 これが第一の参入障壁低下である。
| 新たに可能になったこと | 残存した障壁 |
|---|---|
| 個人サイトでの作品公開（「オン専」の誕生） | HTML/CSSの手書き、レンタルサーバーの契約・FTPアップロード |
| 掲示板・チャットでのコミュニティ形成 | PC所有が前提。回線契約・ルーター設定なども自力で行う必要 |
| 匿名性による「隠れオタク」の実現 | 検索能力・ネットリテラシーがないと目的の情報にたどり着けない |
第1世代から第3世代への過渡期として重要である。参入障壁は下がったが、「PCを持ち、自分でネットワークを構築し、HTMLを書ける」という条件は、結果的に知的・経済的フィルターとして機能し続けた。この時代のオタクは第1世代の気質を色濃く受け継ぎつつ、活動の場をオンラインに移した存在といえる。
| 消滅した障壁 | 具体的な変化 |
|---|---|
| PC所有・回線契約 | スマートフォン1台＋携帯回線で完結。何も分からなくてもキャリアショップで丸投げすればアクセスできる |
| 技術的リテラシー | SNSのアカウント作成にHTMLもFTPも不要。タップとフリックだけで発信できる |
| 経済力 | 基本無料のソシャゲ、無料のSNS、無料の配信プラットフォーム。コンテンツへのアクセスコストが劇的に低下 |
| 情報探索能力 | アルゴリズムが「おすすめ」を自動で届ける。検索しなくてもコンテンツが向こうから来る |
| 社会的スティグマ | 「オタク」が蔑称から自称に変化。アニメ視聴やゲームプレイが普通の趣味として社会的に許容される |
「オタクが変質した」のではなく、従来のフィルターが消滅したことで、それまでフィルタリングされていた層が初めて同じ空間に入ってきたという構造的変化が起きた。
| 出版・即売会の時代 | 個人サイトの時代 | スマホ・SNSの時代 | |
|---|---|---|---|
| 必要な機材 | PC・ルーター | PC・ルーター | スマートフォン |
| 必要な技術 | PC自作・ハードウェア知識 | HTML/CSS・FTP・検索能力 | アプリのインストール |
| 必要な経済力 | 中流以上 | 中流程度 | 不要（無料コンテンツ） |
| 活動の中心 | 即売会・専門店・サークル | 個人サイト・掲示板 | SNS・ソシャゲ・動画配信 |
| コンテンツとの関係 | 創作・考証・収集 | 創作・批評・交流 | 消費・共有・推し活 |
| 社会的コスト | 極めて高い（強いスティグマ） | 中程度（匿名で隠れ可能） | 低い（オタクが普通の趣味に） |
| 典型的な流入層 | 理系・ギーク気質 | 左記＋文系でもPC使える層 | 学歴・経済力・技術力を問わない |
この現象の本質は、技術革新によるフィルターの段階的消滅である。
第1世代のオタク文化は、高い参入障壁ゆえに意図せず同質的な集団を形成していた。中流以上の家庭、一定以上の知的能力、技術への関心。「オタク活動を行うために事実上必要だったリソース」が、結果として文化圏内の行動規範（原作への敬意、考証の重視、創作への志向）をある程度共有させることに繋がっていた。
個人サイトの時代は過渡期として、活動の場をオンラインに移しつつも、PCと技術的リテラシーというフィルターが旧来の同質性を概ね維持した。
スマホとSNSの登場は、このフィルターを根本から消滅させた。その結果、「昔のオタクに近い属性を持つ層」と「昔ならオタクじゃなかった層」が同じ空間に共存することになり、行動規範の衝突が生じている。従来のオタク文化圏にはなかった行動様式、原作を読まない、考証を重視しない、挑発を楽しむ、パチスロや風俗との地続きの消費行動が流入したことへの戸惑いを招いている。
重要なのは、これはどちらが「本物のオタク」かという本質主義的な問題ではないということだ。「オタク」という語の指示対象自体が拡大・変容している。かつてオタクとは特定の技術的・知的プロファイルを持つ少数者の呼称だったが、現在では「二次元コンテンツを消費する人」程度の意味に薄まっている。これは大衆化の必然的帰結であり、あらゆるサブカルチャーがメインストリームに吸収される際に起きる普遍的な現象である。
ただし、この変化には不可逆的な喪失も伴う。秋葉原がギークの技術コミュニティから性風俗街に変貌したように、参入障壁の消滅は文化の質的変容を引き起こす。
技術革新によるフィルターの段階的消滅により、量的拡大と質的変容が同時に進行し、「オタク」が希釈した。それが、オタクに起きたことである。
はてなブックマーク https://b.hatena.ne.jp/ サイト内で適用させると、古い増田にだけ、タイトルの横に「2025」などのラベルが付きます。
冒頭の .../2026 の部分で「2026年の増田」だけラベル付けを除外しているので、この部分は毎年変える必要があります。また、3000 などに変えれば全ての増田にラベルが付きます。
/* 増田 古い投稿 */ h3 a[href^="https://anond.hatelabo.jp/20"]:not([href^="https://anond.hatelabo.jp/2026"])::after{ content: attr(href); font-family: monospace; display: inline-block; white-space: nowrap; overflow: hidden; margin-left: .5em; vertical-align: middle; margin-bottom: .25em; width: 4ch; text-indent: -26ch; line-height: 1.2em; background: #dddc; color: #999; border-radius: .25em; border-left: .25em solid transparent; border-right: .25em solid transparent; font - size: 80%;/* 増田のNGワードなのでハイフン前後のスペースを抜いてください */ font-weight: normal; }
ユーザースタイルを適用する方法は [Stylus Chrome] や [Stylus Firefox] などのキーワードで検索して調べてみてください。
追記: 2026-06-02 にほとんど修正されました。NGワード(anond:20260424001041)だけはこのまま行くようです。
/* スーパーpre記法 >|js|...||< */ /* 行頭のアスタリスクが増える不具合のテスト(2026-06-02 修正された) */ /* アンド記号が正しく書けない。数値参照でも実体参照でも書けない。(2026-06-02 修正された) */ if(true && true) console.log('OK'); /* 大なり記号はそのまま書ける。 */ if(10 > 1) console.log('OK');
/* スーパーpre記法 >|css|...||< */ /* 行頭のアスタリスクが増える不具合のテスト(2026-06-02 修正された) */ /* s upport がNGワードなのでスペースを挟まないと書けない */ @s upports (display: flex){ article{ /* font - size がNGワードなのでスペースを挟まないと書けない */ font - size: 2em; } } /* 大なり記号はそのまま書ける。 */ body > p{ /* アンド記号が正しく書けない。数値参照でも実体参照でも書けない。(2026-06-02 修正された) */ & a{ color: red; } }
/* pre記法 >|...|< */ /* 行頭のアスタリスクが増える不具合のテスト(2026-06-02 修正された) */ アンド記号 & はそのまま書ける。
行頭のアスタリスクは見出しになる(今まで通り)
本文でもアンド記号 & 大なり記号 > 小なり記号 < は、数値参照を使わずそのまま書けるようになった。
via:
はてな匿名ダイアリーで記法に関する不具合を修正しました - はてラボ 開発者ブログ
https://labo.hatenastaff.com/entry/2026/05/28/155652
ソースコードがシンタックスハイライト付きで書けるようになった 記念に、はてな向けのコードを貼ってみるテスト。
動作例のスクリーンショット: Hatena Bookmark Search Filters
// ==UserScript== // @name Hatena Bookmark Search Filters // @description はてなブックマークの検索結果ページで、フィルタリング選択肢を改変します。 // @namespace knoa.jp // @include https://b.hatena.ne.jp/q/* // @version 2.0.0 // @grant none // ==/UserScript== /* 2025-08-22 名称変更 新: Hatena Bookmark Search Filters 旧: Hatena Bookmark Users Filter */ (function(){ const SCRIPTID = 'HatenaBookmarkSearchFilters'; if(window === top && console.time) console.time(SCRIPTID); const MS = 1, SECOND = 1000*MS, MINUTE = 60*SECOND, HOUR = 60*MINUTE, DAY = 24*HOUR, WEEK = 7*DAY, MONTH = 30*DAY, YEAR = 365*DAY; const COUNTS = [ {value: 1, label: '1 user'}, {value: 3, label: '3 users', default: true}, {value: 5, label: '5 users', extra: true}, {value: 10, label: '10 users', extra: true}, {value: 30, label: '30 users', extra: true}, {value: 50, label: '50 users'}, {value: 100, label: '100 users'}, {value: 300, label: '300 users', extra: true}, {value: 500, label: '500 users'}, {value: 1000, label: '1000 users', extra: true}, ]; const RANGES = [ {value: 'all', label: 'すべて'}, {value: 'd', label: '1日', extra: true}, {value: '2d', label: '2日', extra: true}, {value: '3d', label: '3日', extra: true}, {value: 'w', label: '1週間'}, {value: '2w', label: '2週間', extra: true}, {value: 'm', label: '1ヶ月'}, {value: '2m', label: '2ヶ月', extra: true}, {value: '6m', label: '6ヶ月', extra: true}, {value: 'y', label: '1年'}, {value: '2y', label: '2年', extra: true}, {value: '5y', label: '5年', extra: true, default: true}, ]; const site = { targets: { usersList: () => $('ul:has(a[href*="users=1"]):has(a[href*="users=3"])'), rangeList: () => $('ul:has(a[href*="date_range=all"]):has(a[href*="date_range=w"])'), date_begin: () => $('li:has(> input[name="date_begin"])'), date_end: () => $('li:has(> input[name="date_end"])'), }, }; let elements = {}; let core = { initialize: function(){ elements.html = document.documentElement; elements.html.classList.add(SCRIPTID); core.ready(); }, ready: function(){ core.getTargets(site.targets).then(() => { console.log(SCRIPTID, "I'm ready."); core.rebuildUsers(); core.rebuildRanges(); core.addStyle(); }).catch(e => { console.error(`${SCRIPTID}:`, e); }); }, /* ブックマーク数 */ rebuildUsers: function(){ const current = location.href.includes('users=') ? parseInt(location.href.match(/users=([0-9]+)/)[1]) : COUNTS.find(c => c.default).value; const ul = elements.usersList, template = ul.children[0].cloneNode(true); while(ul.children.length > 0) ul.removeChild(ul.lastElementChild); COUNTS.forEach(c => { const li = template.cloneNode(true); const a = li.querySelector('a'); a.classList.toggle('extra', c.extra === true); a.classList.toggle('is-current', c.value === current); a.href = a.href.replace(/(users)=1\b/, '$1=' + c.value); a.textContent = c.label; ul.appendChild(li); }); }, /* 期間指定 */ rebuildRanges: function(){ const current = location.href.includes('date_range=') ? location.href.match(/date_range=(all|[0-9]*[dwmy])/)[1] : (['date_begin=', 'date_end='].some(p => location.href.includes(p)) ? null : RANGES.find(r => r.default).value); const ul = elements.rangeList, template = ul.children[0].cloneNode(true); while(ul.children.length > 0) ul.removeChild(ul.lastElementChild); RANGES.forEach(r => { const li = template.cloneNode(true); const a = li.querySelector('a'); a.classList.toggle('extra', r.extra === true); a.classList.toggle('is-current', r.value === current); a.href = a.href.replace(/(date_range)=all/, '$1=' + r.value); a.textContent = r.label; ul.appendChild(li); }); /* 日付指定(から/まで) */ elements.date_begin.classList.toggle('is-current', location.href.match(/date_begin=[0-9-]+/) !== null); elements.date_end.classList.toggle('is-current', location.href.match(/date_end=[0-9-]+/) !== null); }, getTarget: function(selector, retry = 10, interval = 1*SECOND){ const key = selector.name; const get = function(resolve, reject){ let selected = selector(); if(selected === null || selected.length === 0){ if(--retry) return console.log(SCRIPTID, `Not found: ${key}, retrying... (${retry})`), setTimeout(get, interval, resolve, reject); else return reject(new Error(`Not found: ${selector.name}, I give up.`)); }else{ if(selected.nodeType === Node.ELEMENT_NODE) selected.dataset.selector = key;/* element */ else selected.forEach((s) => s.dataset.selector = key);/* elements */ elements[key] = selected; resolve(selected); } }; return new Promise(function(resolve, reject){ get(resolve, reject); }); }, getTargets: function(selectors, retry = 10, interval = 1*SECOND){ return Promise.all(Object.values(selectors).map(selector => core.getTarget(selector, retry, interval))); }, addStyle: function(name = 'style', d = document){ if(html[name] === undefined) return; if(d.head){ let style = createElement(html[name]()), id = SCRIPTID + '-' + name, old = d.getElementById(id); style.id = id; d.head.appendChild(style); if(old) old.remove(); } }, }; const html = { style: () => ` <style type="text/css" id="${SCRIPTID}-style"> /* ブックマーク数 */ ul[data-selector="usersList"]{ display: grid; grid-template-columns: 6em 6em auto; } ul[data-selector="usersList"] > li:nth-child(4), ul[data-selector="usersList"] > li:nth-child(7), ul[data-selector="usersList"] > li:nth-child(10){ grid-column-start: 1;/* 改行 */ } ul[data-selector="usersList"] > li:nth-child(10){ margin-right: -.5em;/* 1000 users のみ横幅を追加 */ } ul[data-selector="usersList"] > li > a.extra{ text-decoration: underline dotted; text-underline-offset: .25em; } /* 期間指定 */ ul[data-selector="rangeList"]{ display: grid; grid-template-columns: 4.5em 4.5em 4.5em auto; } ul[data-selector="rangeList"] > li:nth-child(1){ grid-column: 1 / -1;/* 全幅 */ } ul[data-selector="rangeList"] > li:nth-child(2), ul[data-selector="rangeList"] > li:nth-child(5), ul[data-selector="rangeList"] > li:nth-child(7), ul[data-selector="rangeList"] > li:nth-child(10){ grid-column-start: 1;/* 改行 */ } ul[data-selector="rangeList"] > li > a.extra{ text-decoration: underline dotted; text-underline-offset: .25em; } form.js-entrysearch-datepicker-form li.is-current{ background: #f6f7f8; color: #333; font-weight: 700; } form.js-entrysearch-datepicker-form input{ vertical-align: baseline; margin: 0 .25em 6px .5em !important; } /* セーフサーチが遅延読み込みされるせいで期間指定の位置がズレる問題を回避 */ .left-container{ display: flex; flex-direction: column; } .left-container .js-safe-search-div{ order: 999;/* いちばん最後でよい */ } .left-container ul.centerarticle-sub-navi:last-child{ margin-bottom: 0;/* flex化の影響で margin collapsing がなくなるのを埋め合わせる */ } </style> `, }; const $ = function(s, f = undefined){ let target = document.querySelector(s); if(target === null) return null; return f ? f(target) : target; }; const $$ = function(s, f = undefined){ let targets = document.querySelectorAll(s); return f ? f(targets) : targets; }; const createElement = function(html = '<div></div>') { const policy = createElement.policy ??= trustedTypes.createPolicy(SCRIPTID, {createHTML: s => s}); const template = document.createElement('template'); template.innerHTML = policy.createHTML(html); return template.content.firstElementChild; }; core.initialize(); if(window === top) console.timeEnd(SCRIPTID); })();
テスト用:
従業員6名しかいないサービスのエントリがホッテントリに上がりすぎなんよ。
バイトがバズリそうなネタをひたすら投稿しているから質悪いエントリ多いし。
https://b.hatena.ne.jp/entrylist/fun
https://b.hatena.ne.jp/entrylist/life
青バッジ創作ツイとか新幹線ネタとか見る人を不快にさせるだけのエントリが多い印象。
いやさあ、さんざんプログラマー不要論が唱えられたけど、少なくとも当面の間はむしろ真逆の未来の方が見えてませんか？
素人でも本番リリースレベルのプログラムが作れるようになったとはいえ、それ本当に本番に出すんすか？例えばそれで1億円の商売をするんすか？脆弱性ニュースが飛び交ってるこの世の中で？そもそもビジネスの要望を現実のアルゴリズムに落とし込めているかも怪しいのに？
その一方で、デザインやHTML/CSSコーダーの仕事はAIに出来てしまう時代になってしまった。これらは「失敗」で致命的なビジネスリスクを呼び込む可能性はまぁ低いだろう。少なくとも脆弱性で全資金流出しましたなんてことはない。言ってしまえば素人のAIに代替させるリスクが低い。つまり当面の間はプログラマーにAIを使わせてデザイナーもコーダーを代替させるのが手っ取り早いという話になりかねない。過労死への道だ。
ワイだけ？
/* トラックバックツリーの投稿時刻が知りたい */ .trackback-header > a:first-child::after{ content: attr(href); margin-left: .5em; display: inline-block; background: #ddd; color: #999; border-radius: .25em; border-left: .25em solid transparent; border-right: .25em solid transparent; font-family: monospace; font - size: 80%;/* 増田のNGワードなのでハイフン前後のスペースを抜いてください */ font-weight: normal; line-height: 1.2em; text-indent: -34ch; width: 6ch; height: 1.2em; vertical-align: bottom; margin-bottom: .25em; overflow: hidden; white-space: nowrap; }
ユーザースタイルを適用する方法は [Stylus Chrome] や [Stylus Firefox] などのキーワードで検索して調べてみてください。
みなさんお疲れ様です。
Claude Codeさんといっしょに、人生で初めて自分用のwebアプリを作成しました。技術面で特筆すべきところはないかもしれません。大切な猫の生活を記録するための自分たちにとって必要なアプリです。「こんなふうにすればもっといいよ」や「すばらしい！」など、プロの意見をいただければ幸いです。よろしくお願いいたします。
https://tabi-web-app.vercel.app
メールアドレス：guest@tabi.app
パスワード：guest
デバッグとか仕事だけで腹いっぱいなんだが、ちょっとだけ調べてみた
Firefox 150.0の「強化型トラッキング防止機能」設定をカスタムにして、ブロックする対象に「トラッキングコンテンツ」を含めて、かつ「サイトの主要な問題を修正 (推奨)」のチェックをOFFにしていると、はてなのサイトのHTMLドキュメント内で読み込もうとしている「https://cdn.www.st-hatena.com/css/global.css」を含む諸々のコンテンツがブロックされる
ブラウザコンソールをみたら「強化型トラッキング防止が有効なため、“<URL>” のリソースがブロックされました」というログが確認できた
ちなみに「トラッキングコンテンツ」をブロックする設定でも、「サイトの主要な問題を修正 (推奨)」のチェックをONにすると、はてなブックマークではブロックされるコンテンツの数が大幅に減り、CSS等が読み込まれるので、表示がまともになる。でもはてなブログと匿名ダイアリーはこの設定でもダメで、ブロック対象から「トラッキングコンテンツ」を外す必要がある
よく分からんのは、例えば https://cdn.pool.st-hatena.com/valve/valve.js とか、はてなブックマークでは「サイトの主要な問題を修正 (推奨)」のチェックのON/OFFで読み込まれるか否かの挙動が変化するんだが、はてなブログと匿名ダイアリーではON/OFFのどちらでもブロックされるんだよなあ
Firefox tracking protection - Privacy on the web | MDN曰く：
Content is blocked based on the domain from which it is to be loaded.
Firefox ships with a list of sites which have been identified as engaging in cross-site tracking of users. When tracking protection is enabled, Firefox blocks content from sites in the list.
Sites that track users are most commonly third-party advertising and analytics sites.
ということなので、もしかしたらHTMLドキュメントとは異なるドメインからCSSとかを読み込もうとした時にFirefox内のリストと照合している感じなんだろうか？ でもそれだけだとはてなブックマークとはてなブログ・匿名ダイアリーとで症状が変わる理由を説明できないのだが……有識者の意見を聞きたいところ
ご主人様がご覧になっている記事の主張どおり、ITmediaの「続きを読む」機能は、技術的には以下のような仕組みで実装されているケースがあります。
■ 仕組みの概要
多くのWebメディアでは、「続きを読む」をクリックした際に次のいずれかの方法が用いられます。
1. HTML内に全文を含め、CSSやJavaScriptで非表示にする方式
display: none; などのCSSで後半部分を非表示にする。
「続きを読む」ボタンを押すと、JavaScriptによって表示状態に切り替わる。
特徴
ブラウザの「検証（DevTools）」で簡単に全文を確認できる。
Webクリッパー（例：Obsidian Web Clipper）でも全文が取得されることがある。
2. クリック時に追加コンテンツを取得する方式（API通信）
「続きを読む」クリック時に、サーバーへリクエストを送り、残りの本文を取得する。
特徴
DevToolsでHTMLを見ただけでは全文は確認できない。
■ なぜこのような実装が使われるのか
■ 注意点
ただし、全文がHTML内に含まれている場合でも、それを意図的に取得・再配布する行為は、利用規約や著作権に抵触する可能性があります。技術的に閲覧可能であっても、法的・倫理的な観点には配慮が必要です。
ご主人様～♡ もちろん知ってるよぉ！ あたし、はてな匿名ダイアリー（増田）のこと大好きだから、ミュート機能の話もバッチリ把握してるにゃん♪
でもね、公式のはてな匿名ダイアリー自体には、標準でミュート機能はないんだよね～。 キーワードや特定のユーザー、記事を非表示にするようなボタンとか設定は、残念ながらないの。
代わりにみんな使ってるのは：
• Chrome拡張「はてなミュート」（キーワードやURLで記事をミュートできる神ツール！）
• 非公式アプリ（masdとか）の一部にミュートっぽい機能が入ってる場合
• ブラウザのユーザーCSSやAdBlock系で自力で隠す裏技
ご主人様はどのミュートのこと話してるの？ 公式のやつ？ それとも拡張機能のこと？ 教えてくれたら、あたしもっと詳しくおしゃべりできるよぉ～💕
最近になって、画像を開こうとしたり、なんでもないテキストをクリックしただけでツイート元のXを開いてしまうようになったのが、非常にわずらわしい。というわけで、ユーザースタイルを書きました。
Togetter.com 誤クリック回避 — UserStyles.world
https://userstyles.world/style/27195
※ 毎朝9:00直後はアクセスできないので注意
2026年3月の仕様変更に抵抗する試みです。 - [画像ギャラリー] のボタンではなく、画像クリックで画像ギャラリーを開く仕様を取り戻します。 - 投稿文や余白などをクリックするだけでも予期せず X が開いてしまう仕様を回避します。 副作用として - 投稿文にマウスカーソルを重ねても、マウスカーソルが I 字型に変化せず、矢印のままになってしまいます。それでもテキスト選択はできます。
PC: 【Stylus】ウェブサイトにCSSを適用できる拡張機能。自由にカスタマイズ！
https://www.naporitansushi.com/stylus/
※ StylusはFirefox版もある https://addons.mozilla.org/ja/firefox/addon/styl-us/
iPhone: MaKeoverアプリでiPhone SafariのCSSをカスタマイズ！
https://gintachan.com/makeover-app-css-change-safari-how-to/
Android: スマートフォン Android版FirefoxのCSSカスタマイズ Stylus の使い方・初期設定方法
https://skypenguin.net/2025/06/21/post-109209/
Mr.Boilさん: togetterのまとめ記事のポストの部分クリックするとXに飛ぶエリアがデカすぎる。
x.com/boil_san/status/2035233156929134732
どみにをん525さん: Togetter、画像のページ送りがわりと快適だったのに画像クリックでポストに飛ぶようになったの、致命的な改悪じゃないかなあ？漫画的なやつとかもう読めないし、むしろTwitterの方がポストを超えて画像送りができるようになって捗るし。
x.com/Dominion525/status/2035329875775807725
HiroMETALさん: togetterのサイト、ポストをクリックしたら、そのポストへ飛んでしまう挙動がウザ過ぎるので、拡張機能をCodexに作らせてみた。意図通り動いてなにより。 今まで作ったことなかったけど、Firefoxの場合は、開発者アカウントで登録作業しないと恒久対策できないのね。
x.com/_Hirot/status/2042631289832865859
銭投げサーバルさん: togetterで掲載されてるツイートの本文あたりのほぼ全域がclickableになってて、間違ってクリックしちゃうとツイートページに飛ぶんだよな。twitter社にそうしろと言われたのかもしれんけどbadui感はある。昔はそうじゃなかった気がする。
x.com/zeninage_serval/status/2048891570129363062
Mr.Boilさん: togetterでいつの頃からかまとめられたポストをクリックすると元ポストに飛ぶようになったのウザいなって思ってたのが最近飛ばなくなったんだけど、posfieは未だに飛ぶようになってる。仕様統一しとらんの？
(注: おそらくこの人の誤解または書き間違いで、2026-05-01時点でtogetterは変わらず、posfieの画像も変わらず、posfieの本文エリアのみ飛ばなくなった)
AI（特に生成AI）の急速な進化により、「フロントエンドエンジニアが不要になる」「仕事がなくなる」という言説は、近年非常に多く聞かれます。
結論から言うと、「単純なコーディングやボイラープレート（定型文）を書く仕事は消えるが、フロントエンドエンジニア自体は消えず、役割がより高度な領域へ変化・進化する」というのが、多くの専門家や現役エンジニアの共通認識です。
具体的な状況は以下の通りです。
AIは、従来のコーディングプロセスを劇的に変化させています。
定型業務の自動化: UIデザインからHTML/CSS/コンポーネントコード（React, Vue.jsなど）への変換はAIが非常に得意としており、人間がゼロからコードを書く必要がなくなっています。
API連携・テスト生成: API連携のパターンやテストコード、デバッグ作業もAIで効率化されている。
「Vibe Coding（フィーリングコーディング）」: 曖昧な指示からアプリのプロトタイプを爆速で作れてしまうため、初期段階のフロントエンド実装がいらなくなる。
AIは「実装」を高速化しますが、「設計・判断・最適化」は依然として人間に依存します。
要件の解釈と複雑な設計: 曖昧な顧客の要件から正しいUI/UXを設計し、パフォーマンスを最大化する構造を考える能力は人間にしか難しい。
10%の仕上げ（ポーリッシュ）: AIが生成した90%のコードをレビューし、修正・最適化して実用化する「最後の10%」の作業は人間が担当する。
アクセシビリティ・セキュリティ: アクセシビリティの確保やセキュリティのチェック、パフォーマンスの微調整など、人間中心の細やかな対応が求められる。
AIツールの活用能力: AIを道具として使いこなし、開発速度を10倍、100倍にする「AI駆動型」エンジニアの需要が高まっている。
AI時代には、単なる「コーダー」ではなく、以下の視点を持つエンジニアが生き残ります。
フルスタック化・UI/UXへの進化: フロントエンドの知識だけでなく、バックエンドやUI/UXデザインまで理解し、ビジネス全体を見渡せる人材。
AI駆動開発の習得: CopilotやCursorなどを駆使して、開発プロセスを自動化・効率化する。
深い専門性の追求: AIには代替しづらい、Web技術の深い知識や、特定フレームワークへの高度な熟練度を高める。
つまり、AIはフロントエンドエンジニアの「敵」ではなく、「面倒な作業を奪ってくれる強力なツール」となり、人間のエンジニアはよりクリエイティブな課題解決に集中できるようになると考えられています。
こんにちは！私は中卒シングルマザーおば！あ、待って叩かないで！ゲームを作った背景から隙自語させて！
所得制限を超えてるので社会にはおんぶに抱っこの層ではないんだ！……と言っておかないとお金の話なので叩かれそう……たくさんの予防線を張るね。インターネット怖いから！！そもそも、人はいつでも"そちら側"に回る可能性はあるんだから、働ける奴は働いて救える人を救うそれが正だと思うんだけど、…って、思想の話になるので今回はパス！
てなわけで、このわたくし、海外のぼんびー生まれでひょんなことから日本に来た（あ、国籍は日本にしました。たたかないでボクわるいスライムじゃないよ）けど言葉もわかんないし、学がない。数学とか7点だった。でも外国人ならではの身体能力の高さでスポーツ推薦で高校に滑り込んだけど、そのうち親の借金で高校に通えなくなった。そんな人生。
そして紆余曲折インド人を右に日本人男性と付き合って先に子供できたんや。だが婚姻届直前で相手は年齢詐称（うんと年下）判明して笑った。とにかく相手は頼れない、私も稼がなきゃいけない！子供を育てなきゃいけない！の使命感でいたら、結婚していたはずの男性は「別のシングルマザーを助けなきゃ！」と謎の使命感で私と離婚することになった。私はシングルマザーになった。ガシッ！ボカッ！アタシは死んだ。
まだ本題に入らないよ！！
シングルマザーとなっては、夫婦の快適さを考えるリソースは排除できるので徹底的に母子に集中できる。気がついたら子は中学生になっていた。私もなんとか一般人っぽい層に滑り込めた。数カ月に一度、く◯寿司で豪遊するのが幸せな層や。
そんな中、とにかく残業すれば成果は出る！！の脳筋プレイで働いてたらボーナスが手に入った。ボーナス！！すごい！！どうしよう……将来のために……どうするんだ！？
私に金融リテラシーはない！オルカンとかなんとか世の中は言ってた……気がする。はてなでも【素人はこれをやっとけ】みたいな記事をみた。文章が長くてよくわかんなかった。自分は長い文章を書くのに（ﾃﾞｭﾌﾌ）
とりあえず、見様見真似で（なんの？）現物っちゅーもんで、個別株に手を出してしまったようだ。その時の私は、割安（PBR？）ってものをダラダラみてた。むしろ、そこしか見てない。
湖◯屋が2500円ちょっとだった。100株購入した。
タ◯ラトミーも1500円だった。100株購入した。
子供を！！笑顔に！！してくれた企業が！！！市場から割安の評価！？！なにそれ！？！って気持ちで購入した。ボーナスはなくなった。バイバイ…👋😭
貧乏人の匂いが染み付いた私に、突然の大金はなかったものとするのがよい。株のことは忘れた。
忘れたけど、年1で株主優待がくる。そして子は「もうおもちゃで遊ぶ年齢じゃないけどねw」と笑った。けども、その優待はどういう仕組みなの？って聞いてきた。
仕組み……わからない。ググれカス、GPTに聞け……と言いたかったけど、せっかくの会話だ……小さい脳みそから答えをひねり出して、企業を支援して、そのお礼なんだよ☆ﾐみたいなことを言った気がする。
そしたら子は、自分も株がほしい。応援して株でお小遣いを増やす！と言い出した。うひょ
私は『ちょっ待っ！！』止めた。私も株を学ぼうとした結果、学べてないんや。正しく教えられない。
天を仰いだ。
そもそも、お金を出そうとする相手、つまりどんな企業かを知る必要があるやろ。知らん人間にぽーんと金を出すか？貧乏人にそんな博打はできん。
なので企業を擬人化してゲームにしようと思った（超飛躍）。ちょうど私は人間の男を信じられないフェーズだったので、乙女ゲームにハマっていた。二次元は裏切らない。とは言え、ときメモでアルバイトエンディングばかり迎えちゃうwww労働者の鏡www
話を戻そう。企業をイケメン化して、会社の特色、株の値動きを性格としたゲームを作ったんだ。
そして投資（会話）による株価の上げ下げが好意のパラメータ。噂（インサイダー、流布）で、他企業を貶めることもできる。そう、ゲームならね。
肝心のゲーム説明のところで、ちょっと雑になったけど伝われ〜〜
でも、開発しておきながらも「ぜんぜんわからない俺たちは雰囲気で株をやっている」状態だ。
株ガチ勢からみたら、何が金融リテラシーを学べるゲームです♥だよ（怒般若）って思うかもしれない。
そして子のために作ったはずが、子が「企業がイケメン…って何wwwPalantir？Cloudflare？何それ知らないwwwこんなに株って値動きするの？」って笑ってた。
いいんだ。君の好きなパソコンやインターネットはそいつらが支えてるんだ。ちょっとだけ、覚えてくれればいい。
個別株じゃないんかーい！
kabukare.vercel.app
古き良きインターネット老人会おばなので、HTML、素js、cssで作ってます。jsはメモ帳3000行になったときにヤバいなと思ったのでCursorを使いました。Cursorを使ってリファクタリングした結果、ダイエットには成功したけど原形（読み方）わからんくなったwとは言え、こんなおばでも、AIの力を借りれてここまで出来るんだなと思った。ちな、おばは、pixivにも生息している絵描きヒプヲタ民でもあるが、全キャラスチルと立ち絵は体力的に描けない。腱鞘炎と肩こりがやばい。なので自分の草案イラストを読み込ませて、AIの力を借りて絵を出力しました。そして、ゲームバランス。実はおば、過去にインターネットサービスで一発屋したんだけど、システムバランスを気にしないでできるものばかりやったんや。でもこのゲームはダメや。何度やってもガチホのファストフード男子のマークの配当金が強くなってしまう（株としては正解と言えば正解なんだけどね）。四則演算しかしらない数学7点の頭では限界があって、ゲームバランスをAIに相談しながら作った。どこもかしこもAI、AI、AIとんでもない時代に生きてるな…と思いながらも、この変化を楽しみたいと思いました。
