Activity

「HTML ってなんで描画されるの？」HTML 編で、「DOM だけでは画面に何も描かれない」としていた不正確な説明を直した。CSS を書かなくても表示されるのはブラウザ標準のスタイルシートがあるからで、JavaScript は描画に必須ではないことが分かるようにした。

ブラウザが HTML を受け取ってから DOM という木構造を組み立てるまでを、スクリーンショットと図で追う記事（3回シリーズの HTML 編）を Zenn に公開した。あわせて Tech に HTML を加え、HTML のページから記事をたどれるようにした。

Home の Notes の惑星に、球に沿って流れる文章の行を描き、模様が見えて自転していることが分かるようにした。あわせて、Works の惑星の輪が途切れずに見えるようにした。

細工したテストファイルで解析が止まる問題（ReDoS）を直した。Markdown 出力のエスケープ漏れもなくした。testglass を CI で使っていて、信頼できない PR を受け付けている場合は更新を勧める。

部屋のファイルに入った制御文字で、neko-room のターミナルが操作されないようにした。あわせて、部屋のファイルを自分だけが読めるようにした。細工したファイル名やプロンプトを使って、クリップボードを書き換えたり画面を偽装したりすることはできなくなった。

細工したテストファイルで解析が数秒〜数分止まる問題（ReDoS）を直し、Markdown 出力のエスケープ漏れもなくした。testglass を CI で使っている場合に、信頼できない PR に含まれるファイルで CI が止められないようになった。

Claude Code のサブエージェントを猫に見立てて見守るツール「ねこエージェント」の紹介記事を Zenn に公開し、Works の一覧に各作品のサムネイル画像を表示するようにした。

ビューアの画面の 1 行目を「ねこ部屋」から「ねこエージェント」に変え、コマンド名（neko-agents）や紹介記事での呼び名と同じにした。

回答待ちの質問の解説が全部同じ黄色で読みづらかったので、節ごとに色を分け、選択肢とおすすめがひと目で分かるようにした。

ねこ部屋で同じ報告や質問の文が二重に出ていたのを整理して、猫の詳細と回答待ちの質問を読みやすくした。

作業中の子猫が気まぐれに左右を見たりまばたきしたりして、働いている様子が伝わるようにした。報告に行く子猫は「ボスへ報告ニャ！」などとしゃべりながら歩く。

ねこ部屋で猫をクリックすると、その猫が何を頼まれて、今なにをしていて、これまでどんな操作をしたかが画面の下に出るようにした。

子猫やボスの報告が長いと「…」で途中から読めなくなっていたのを、最後まで読めるようにした。

「シロなのに三毛」「ミケなのに白猫」のように名前と毛色が食い違うことがあったので、毛色を名前で固定した。あわせて子猫の箱の枠を灰色にそろえ、色は猫の絵だけに付けるようにして、ボスと回答待ちの赤い点滅が目立つようにした。

Claude Code の自作 Mod とツールをまとめた my-claude-tools を Works に加え、エージェントの動きを猫の部屋として描く「ねこ部屋」の機能と構成を紹介するようにした。

Claude が質問（AskUserQuestion）してきたとき、質問した猫が「いまの指示・なぜ聞いているか・選択肢ごとの影響・おすすめ」を猫口調で解説し、手伝った子猫たちの調査結果も根拠に挙げるようにした。会話をさかのぼらずにねこ部屋だけ見て答えを決められ、これまでの答えも振り返れる。

子猫（サブエージェント）を使った作業がひと区切りつくと、親猫のボスがその作業を猫口調の 1 文にまとめてしゃべるようにした。ねこ部屋を見るだけで、いま何が終わったのかが分かる。

Tech 一覧の各行に添える関連コンテンツ名（作品名・記事タイトル・所属）は、コンテンツの読み込み順のままで、ビルドごとに並びが変わりうる状態だった。Tech 詳細と同じ順（作品はタイトル順、記事・職歴は新しい順）に並べ直すようにした。

PR の本文に要約がなく署名（Co-Authored-By: … など）だけがあると、その署名が Activity の要約としてサイトに出ていた。署名だけの段落は要約にせず、PR のタイトルを使うようにした。

同じ見た目のリンク（一覧の末尾の「すべて見る」、丸い枠のリンク、外部リンク）を各画面で手書きしていたため、部品にまとめた。見た目の揃え漏れや、外部リンクの rel="noopener" の付け忘れが起きにくくなる。

作品・Tech へのリンクの URL、記事・職歴の並び順、「実績のある Tech」の判定が画面ごとに別々に書かれていたため、lib にまとめた。どの画面でも同じものが同じ順に並び、Tech タグが詳細ページのない Tech へリンクするといった食い違いが起きなくなる。

Home の惑星の公転順や演出の計算が複数のファイルに別々に書かれていたため、1か所にまとめた。片方だけ変えたときに、セクションを閉じる演出の行き先と惑星の位置がずれるといった食い違いが起きなくなる。

記事の公開日を Zenn の書式どおり時刻付き（"2026-01-01 08:00"）で書くと、ビルドする環境のタイムゾーンによって Notes の日付が前日になることがあった。公開日を日本時間の日付として読むようにし、どの環境でも同じ日付が出るようにした。

Home の入場演出を右クリックやスワイプで飛ばすと、その後の最初のクリックが効かず、ページを移動しても残っていた。飛ばしたクリックだけを打ち消すようにした。あわせて、JavaScript が無効なときも惑星の更新の印が出るようにした。

Activity 一覧で「もっと見る」をキーボードで押すと、ボタンが消えてフォーカスの位置が失われ、展開した Activity を読み飛ばしていた。展開した最初の日付へフォーカスを移すようにした。

非公開の設計書の置き場所とルールの記述を揃え、設計書が手元になくても、コードのコメント・テスト・ルールから仕様と判断の理由をたどれるようにする方針を明文化した。

初めてサイトを開いたとき、入場の演出が終わる瞬間に背景の星が一斉にずれて見える問題を直した。演出の最後まで動きが途切れずにつながるようになった。

AI が書いた大量のテストを人間がレビューしやすくするために作った testglass について、Zenn に記事を書いた。テストを「名前・手順・期待結果・判定」の仕様書として並べる仕組みと、LLM を使わずに構文木から組み立てる設計の理由を紹介している。

Zenn の記事の書き方を独立したルールにまとめ、下書き用のディレクトリをやめて作業ブランチの上で直接書く運用にした。Zenn と同じ表示で確かめてから公開できるようになった。

ポートフォリオ記事のタイトルを変更

記事を Zenn で公開するようにしたため、Notes の一覧・作品・Tech のページから Zenn の記事へ直接たどれるようにした。以前の記事ページの URL は、リンクが切れないよう Zenn の記事へ転送する。

技術記事を Zenn に集約するため、ポートフォリオに書いた2本の記事を Zenn で公開した。あわせて、ポートフォリオの記事は他のポートフォリオと違う仕組みが伝わるよう、実装に沿った説明を書き足した。

技術記事を Zenn に書くことにしたため、About と Notes から Zenn のプロフィールへたどれるようにした。あわせて、npm に公開した testglass の状態を「運用中」に更新した。

検索エンジンがサイト内のページを辿りやすくし、「Tora29」が GitHub で活動する Web Engineer であることを伝えるようにした。同じ名前の別サイトと区別しやすくなる。

出力の言語を OS のロケールから自動で決めない理由を、README の日本語版・英語版に書いた。手元と CI でレポートの言語が変わらないことと、英語にしたいときは --lang en で指定すればよいことが分かる。

入口の宇宙のシーンで、惑星の表面の粒子と色味を明るくし、軌道の奥にある惑星や球の影の側も見えやすくした。

CLI のヘルプ・進行状況・エラーメッセージを、--lang en か設定ファイルの "lang": "en" で英語でも表示できるようにした。レポートだけでなく、ツールの操作もすべて英語で行えるようになった。

README の先頭にテスト仕様書のスクリーンショットを載せ、日本語の本文をすべて英訳した English の節を追加した。何を見つけるツールかが一目で分かり、npm で見つけた海外の人も使い方を読めるようになった。

テスト仕様書（HTML・Markdown・CSV）を、日本語に加えて英語でも出力できるようにした。--lang en か設定ファイルの "lang": "en" を指定すると、判定・指摘・列名・ボタンなどの表示がすべて英語になる。

SvelteKit と Cloudflare（Pages・D1）で作っている Web アプリ home-hub を Works に追加し、構成やテストの工夫を読めるようにした。

spec.json の警告から日本語の文言を外し、ルールと詳細だけを持たせるようにした。文言はレポートを出力するときに組み立てるので、英語のレポートを出力できるようにする準備が整った。

テストコードを静的解析してレビュー用のテスト仕様書を生成するツール「testglass」を Works に追加し、その開発の経過も Activity に載るようにした。

README に、ESLint との違いを説明する節を追加した。ESLint はコードを書く人に向けた指摘、testglass はテストをレビューする人に向けた仕様書であり、両方を併用する想定であることが分かるようにした。

README に CLI のコマンドの一覧を追加し、各オプションがどのコマンドで使えるかと、既定値の決まり方を正確に書いた。

テスト仕様書を、HTML に加えて Markdown と CSV でも出力できるようにした。Markdown は PR やドキュメントにそのまま貼れ、CSV は Excel で絞り込みや並べ替えができる。

HTML レポートの文字が全体的に小さく読みにくかったので、一回り大きくした。あわせて、ばらばらだった文字サイズを 5 段階に揃えた。

HTML レポートの指摘一覧を、要修正・要確認ごとに指摘の種類と件数を並べる形に作り直した。ラベルも「expect がない」のように具体的な言葉にし、文字の大きさとコントラストを見直した。

初めて訪れた人にも短いオープニングを見せるようにし、操作できるまでの時間を3.3秒から2.3秒に縮めた。

スマートフォンでセクションを開く・閉じるとき、粒子の演出だけが先に進み、ページの切り替えが遅れて見える問題を改善した。

スマートフォンで Home を開いたときのオープニング（ビッグバンから惑星が集まるまで）の描画を軽くし、コマ落ちせず滑らかに動くようにした。

オープニングで、散らばった粒子が最後に一気に縮んで惑星になっていたのを、渦を巻きながら内側から少しずつ集まって形になるようにした。

記事や各セクションのURLから直接サイトに入り、閉じるボタンで Home に戻ったときに、Welcome のイントロが再生されないようにした。サイト内の移動では演出に待たされずに Home を見られる。

AI 駆動開発で品質を保つための「ハーネスエンジニアリング」について、書く前に伝えるハーネスと書いたあとに確かめるハーネスの考え方と、このサイトでの実例をまとめた記事を公開した。

スマートフォンでトップページの宇宙のシーンを軽くし、ラベルの文字を読みやすい大きさにした。見た目をほとんど変えずに、描画の負荷と電池の消費を抑えている。

小さな補足の文字まで読みやすいコントラストに上げ、トップページの動き続ける背景を止められるようにした。キーボードだけでも、すべての入口と操作に届く。

記事「Static-first で作るポートフォリオ」の表記と箇条書きを整え、Static-first にした理由をより読み取りやすくした。

SNS や Slack でページを共有したときに、宇宙のシーンの画像付きで表示されるようにした。ブラウザのタブにも、惑星をかたどったアイコンが出る。

トップページからセクションを開いたあと、ページの背景の、開いた惑星（名前・最新の開発活動）の位置に、そのセクションの色の光がうっすら残るようにした。どこから開いたかが伝わり、閉じたときに縮んで戻る先とも一致する。

サイトの表示名をハンドルネーム（Tora29）に変え、各セクションの見出しの下の説明を、短く言い切る形にそろえた。

トップページを開くと、暗闇に浮かぶ「WELCOME」からビッグバンで宇宙が広がるイントロを再生するようにした。惑星を押すと、その惑星から粒子が広がってページが現れ、閉じると惑星へ縮んで戻る。

トップページを、名前を中心に4つの惑星が公転する宇宙のシーンにした。惑星はセクションごとに模様を持ち、衛星の数はそのセクションの件数に連動するため、コンテンツが増えるほどシーンがにぎやかになる。

トップページの中央の名前と、その周りの4つの惑星（Career / Works / Tech / Notes）から、各セクションへ移動できるようにした。左下に職種と GitHub、右下に最新の開発活動を表示し、開かなくても最近の動きが分かる。

技術記事を一覧・詳細で読めるようにし、記事から関連する作品や技術へ移動できるようにした。最初の記事として、このポートフォリオの設計について書いた。

GitHub 上の公開された開発活動を日付ごとに一覧でき、作品ごとに絞り込めるようにした。絞り込んだ状態は URL（?work=）で共有でき、作品のページから、その作品の開発の過程へ直接移動できる。

作品に紐付けた GitHub Repository のマージ済み PR と Release から、閲覧者が読める開発活動（Activity）を自動で生成できるようにした。依存関係の更新や CI の調整などの雑務は除外し、機能の追加・修正・ドキュメントの変更だけを載せる。

職種・現在の役割・経験年数、得意な技術、大切にしていること、目指す方向を1ページで読めるようにした。最新の開発活動も3件まで表示し、Activity の一覧へ続けて移動できる。

これまでの職歴を新しい順のタイムラインで読めるようにし、各職歴で使った技術から Tech のページへ移動できるようにした。IT 系の資格と、それ以外の資格も載せている。

作ったものを一覧でき、各作品のページで概要・構成・使った技術を読めるようにした。Tech のページから作品へ、作品から Tech へと行き来でき、戻るボタンは直前に見ていたページへ戻る。

ページの URL を末尾スラッシュなしの形に揃え、ページを開くたびに発生していた転送（301）をなくした。ページの表示が速くなり、共有される URL も一つに揃う。

使ってきた技術をジャンルごとに実績の多い順で一覧でき、各技術のページでは、その技術を使った作品・記事・職歴・開発活動を確認できるようにした。熟練度を自己申告ではなく、実績から辿れる。

作品・記事・職歴・Activity に付けた Tech をビルド時に逆引きし、Tech ごとの実績件数（下位の技術を含む）と、よく一緒に使われる関連 Tech を求められるようにした。技術の熟練度を自己申告ではなく実績で示すための土台になる。

作品・記事・職歴・Activity が参照する Tech を一か所で定義し、未定義の Tech や存在しない作品への参照をビルド時にエラーにするようにした。これにより、Tech を軸にしたコンテンツ同士のつながりが表記ゆれなく保たれる。

ポートフォリオの実装を始めるにあたり、ディレクトリ構成・コンテンツの書き方・スタイル・コンポーネント・Git運用・テストの開発ルールと、プロジェクトの概要を整備した。