Blog
日々の暮らしを楽しみながら、先端テクノロジーが社会に実装され、
実際に役立っていく過程に関心を寄せています。
AI 技術を活用しつつ、個人的に興味のあるテーマについて書いています。
皆さまの新たな気づきやヒントにつながれば幸いです。
-
いにしえのフロントエンド入門 第15回（最終回） ── 仕上げ、道具で点検し、守りを固め、公開し、フレームワークの入口に立つ
15回かけて作った経費精算システムを、HTML の検査と axe-core で点検して直し、CSP や SRI の守りを足します。
公開のしかたを整理し、最後に同じ明細の表を Vue 3 で書いて、フレームワークの入口からのぞきます。 -
いにしえのフロントエンド入門 第14回 ── jQuery、同じ画面を「$」で書き直して並べて比べる
第8〜10回の申請フォームを jQuery 4.0.0 で書き直し、同じ動きになるかを確かめます。
$() の入れ物、$.ajax と fetch の違い、3.7.1 から変わったことを、練習用サーバーで試します。 -
いにしえのフロントエンド入門 第13回 ── 集計と印刷、月ごとに足して棒グラフを手で描き、紙に出す
申請を月ごと・区分ごと・人ごとに足して、SVG の棒グラフを手で描きます。
日付を Date にすると月がずれる罠、割合の端数、印刷用の CSS を、練習用サーバーで確かめます。 -
いにしえのフロントエンド入門 第12回 ── 承認の流れ、ダイアログで確かめてボタン一つで状態を進める
dialog 要素で申請を確かめ、承認・差し戻しを JSON で送ります。
showModal() がしてくれること、JSON の Content-Type、二人の承認者が同時に押したときの 409 と版、履歴の時刻を、練習用サーバーで確かめます。 -
いにしえのフロントエンド入門 第11回 ── ログインと画面の切り替え、「あなたは誰？」をどの画面でも確かめる
ログイン画面を作り、どの画面でも最初にサーバーへ「あなたは誰？」を確かめます。
HttpOnly のクッキー、戻り先の罠、401 と 403、メニューを隠すことと断ることの違いを、練習用サーバーで確かめます。 -
いにしえのフロントエンド入門 第10回 ── JavaScript ④：非同期通信、fetch で画面を切り替えずにサーバーと話す
JavaScript の4回目は非同期通信。fetch で為替レートを取ってドルを換算し、申請を送って申請番号を受け取ります。
404 や 500 をエラーにしない fetch、お金を整数で数える理由、二重送信の防ぎ方まで、練習用サーバーで実際に確かめます。 -
いにしえのフロントエンド入門 第9回 ── JavaScript ③：入力チェック、分かりやすく止めて直し方を伝える
JavaScript の3回目は入力チェック。ブラウザの検査にどこまで任せるかを測り、足りないところを JavaScript で引き取ります。
正規表現、toISOString の日付の罠、直し方を伝えるメッセージ、赤い枠・まとめ・フォーカスまで、実際に操作して確かめます。 -
いにしえのフロントエンド入門 第8回 ── JavaScript ②：DOM とイベント、明細の行を足し、消し、合計をその場で出す
JavaScript の2回目。DOM とイベントで、明細の行を足し・消し・合計をその場で出せるようにします。
イベントの委任、template、textContent と innerHTML の違い、消したあとのフォーカスまで、実際に操作して確かめます。 -
いにしえのフロントエンド入門 第7回 ── JavaScript ①：基本、明細の合計を計算する関数を書く
JavaScript の最初の回。値の種類、変数、関数、くり返しで、明細の合計を出す関数を書きます。
「＋」が文字をつなげる罠や、全角数字・NaN・小数などお金の罠を、実際に実行して確かめます。 -
いにしえのフロントエンド入門 第6回 ── CSS ③：Bootstrap、いにしえの道具箱を中身を知ったうえで使う
申請一覧と申請フォームを Bootstrap 5.3.8 で書き直します。クラスの読み方、手書きの CSS との対応、グリッドと部品。
読み込む順番や Bootstrap 4 の書き方が混ざる落とし穴、ファイルの重さも実際に測ります。 -
いにしえのフロントエンド入門 第5回 ── CSS ②：レイアウトとスマホ、flex と grid で並べて画面の幅に合わせる
申請一覧をスマホでも読めるようにします。meta viewport、flex と grid、表だけの横スクロール、メディアクエリ。
列の数や切り替わる画面の幅を実際に測り、短くて崩れにくいレイアウトの書き方を身に付けます。 -
いにしえのフロントエンド入門 第4回 ── CSS ①：セレクタとボックス、申請一覧に自前の CSS で服を着せる
第2回の申請一覧に、自分で書いた CSS を付けます。セレクタ、カスケードと詳細度、継承、ボックスモデル。
詳細度の勝ち負けや箱の幅を実際に測り、!important に頼らない書き方を身に付けます。 -
いにしえのフロントエンド入門 第3回 ── フォーム：申請フォームを HTML だけで作り、何が送られるかを見る
申請フォームを HTML だけで作ります。label と name、入力の部品、ボタン、ブラウザの入力チェック。
実際に送信して GET の URL と POST の中身を確かめ、「画面の検査は外せる」理由も見ます。 -
いにしえのフロントエンド入門 第2回 ── HTML の骨組み：申請一覧を「意味のあるタグ」で組み立てる
申請一覧の骨組みを HTML だけで組み立てます。header・nav・main・footer、見出し、表、リンクと画像。
div だらけのページと何が違うのか、読み上げソフトや AI からの見え方と、検査ツールで確かめます。 -
いにしえのフロントエンド入門 第1回 ── Web ページが映るまでと、経費精算システムの設計図
AI 任せのバイブコーディングの逆を行き、HTML・CSS・JavaScript を手で書いて経費精算システムを作る全15回の連載が始まります。
第1回は、Web ページが映る仕組み、三つの言語の役割、画面の設計図、道具の準備、そして最初の一枚まで。 -
Docker Desktop 使い方ガイド ── 役割と仕組み、画面の操作、似たアプリとの使い分け
新カテゴリ「ソフトウェア」の一本目。実際の操作画面に①②③の番号を書き込み、Docker Hub からの起動、
ログ・Exec・ファイルの確認、設定、基本の言葉、料金、Rancher Desktop・OrbStack などとの使い分けまで紹介します。 -
Playwright 入門と実践 ── 生まれた背景と仕組み、経費精算ページのテスト、AI との付き合い方
Selenium・Puppeteer から続く誕生の背景と、コンテキスト・自動待機・ロケーターの仕組みを図解。
経費精算ページのテストを実際に書いて動かし、設計段階からの準備、AI にルールを守らせる方法までまとめます。 -
日本酒のはなし ── 米と水と麹がつくる、1300年の物語
世界でも珍しい「並行複発酵」、純米・吟醸・大吟醸の違い、播磨国風土記から灘の下り酒、ユネスコ無形文化遺産までの歴史。
灘・伏見・新潟・西条など酒どころの地図と、雪冷えから熱燗までの楽しみ方も紹介します。 -
和牛のはなし ── 田畑の相棒から、世界の「WAGYU」へ
「和牛」と「国産牛」の違い、4つの品種、黒毛和種の99.9%の祖先となった種牛「田尻号」、A5とBMSの意味、脂がとろける理由。
松阪・神戸・近江・米沢・宮崎・鹿児島など、全国の産地も地図でめぐります。 -
焼き鳥のはなし ── 野鳥の串焼きから、街角の赤ちょうちんへ
野鳥の串焼きから、明治の屋台、戦後の横丁、ブロイラーによる大衆化まで、焼き鳥の歴史を年表で。
鶏の部位図と串の図鑑、塩とタレ、備長炭の焼き台、ご当地やきとりの地図、老舗と名店も紹介します。 -
焼肉のはなし ── 戦後の街角から、日本の「ごちそう」になるまで
肉食禁止の1200年から、1946年の焼肉店の誕生、焼肉のたれと無煙ロースター、一人焼肉まで、焼肉の歴史を年表で。
牛の部位図とホルモン図鑑、ご当地焼肉の地図、老舗と名店、安全でおいしい食べ方も紹介します。 -
天ぷらのはなし ── 南蛮渡来の揚げ物が、江戸の屋台で名物になるまで
南蛮貿易での伝来から、江戸の屋台、天ぷらそばと天丼の誕生まで、天ぷらの歴史を年表とイラストで。
関東と関西の違い、定番のタネ、さくっと揚がるしくみ、東京の老舗の名店も紹介します。 -
遺伝子ってなに？ ── 細胞でも原子でもない、生命の「情報」のしくみ
遺伝子は細胞のようなもの？原子のような粒？ 体から原子までズームする図解で、遺伝子の正体と姿を説明。
タンパク質がつくられるしくみ、影響力が大きい理由、生老病死のうち遺伝子が決めること・決めないことまで。 -
はじめてのお寿司 ── 定番ネタ図鑑と、おいしく食べるためのコツ
マグロの赤身・中トロ・大トロ、サーモン、白身、光り物、貝、ウニ・イクラ。定番ネタを写真で紹介し、
食べる順番、醤油のつけ方、手と箸の使い方、回転寿司のマナーまでイラストで解説します。 -
日本のラーメン、北から南へ ── 歴史とご当地ラーメン15杯を地図でめぐる
中国から伝わった麺が、日本の国民食になるまでの歴史。そして札幌の味噌、喜多方の醤油、博多の豚骨をはじめ、
北海道から鹿児島まで、ご当地ラーメン15杯を日本地図と写真で食べ歩きます。 -
マーベル映画を時系列で観る ── MCU 全38作品のストーリー年表（2026年版）
キャプテン・アメリカ、アイアンマン、ハルク、スパイダーマン、アベンジャーズ。38作を物語の中の時間の順に。
作中の年、サーガとフェーズ、シリーズ別の順番、MCU の外の作品との関係、おすすめの観る順番まで。 -
池袋から秋葉原へ ── 電気街と御茶ノ水・神田・上野をめぐる一日モデルコース（2026年秋）
山手線で20分、丸ノ内線なら御茶ノ水へ11分。聖橋・湯島聖堂・神田明神から電気街、日曜の歩行者天国、
マーチエキュート、2k540、アメ横、不忍池まで。おすすめの店とランチも。 -
n8n 入門と実践 ── 仕組みと使いどころ、Web 開発での活用例、そして UiPath との比較
n8n の歴史と仕組み、ライセンス、主な活用シーン。デプロイ後の受入チェックを実際に自動化し、
RPA の代表 UiPath と比べて、n8n で置き換えられる領域と UiPath に分がある領域を整理。 -
Docker 入門と実践 ── 仕組みの基本から、Java Web システムの開発・デプロイ・保守まで
コンテナと仮想マシンの違い、イメージやボリュームなどの用語、主な活用シーン。
Spring Boot と Vue の顧客向けシステムで、開発環境・DB・本番デプロイ・保守のどこが楽になるかを実例で。 -
池袋から「スタジオツアー東京」へ ── ハリー・ポッターの舞台裏を巡る一日（2026年秋）
西武線で15分、9時の回に入って3〜4時間。チケットと予算、館内の順路と昼食のタイミング、
11月8日までのハロウィーン、帰りの公園と池袋の夕景まで。 -
ローカル環境で大規模モデルを動かす ── CUDA と Metal の違いから、Qwen3.8-27B を LM Studio で動かすまで
CUDA・Metal などの系統、Windows・Mac・Linux の選択肢、「27B」「Q4_K_M」の意味、文章・画像・声・OCR・翻訳の実用モデル。
そして Qwen3.8-27B を LM Studio で動かす手順を、番号つきの画面で。 -
東京ディズニーシー 1日モデルコース ── 25周年とハロウィーンが重なる秋に
入園したらすぐアナとエルサのDPA、午前はファンタジースプリングス、夜はハーバーのショーと花火まで。
タワー・オブ・テラーなどが休止中の10月の最新情報で、チケット・予算・地図つき。 -
東京ディズニーランド 1日モデルコース ── 2026年秋、ハロウィーンの季節に
開園前に並んで、入園したらすぐアプリでDPA。ファンタジーランドからパレード、夜の花火まで。
10月の値上げとプライオリティパス終了後の最新ルールで、チケット・予算・地図つき。 -
奥多摩 日帰りルート ── 奥多摩湖から多摩川を下って酒蔵へ
ホリデー快速おくたまで奥多摩へ。小河内ダムを歩き、白丸ダムの魚道から鳩ノ巣渓谷、
御岳渓谷の遊歩道を下って沢井の澤乃井園まで。地図2枚と時刻つきで。 -
東京ひとめぐり 日帰りルート ── 池袋から皇居・上野・浅草へ
池袋から地下鉄で東京駅へ。二重橋と江戸城の跡の東御苑、上野の不忍池・アメ横・東京国立博物館、
夕暮れの浅草寺と隅田川の夜景まで。地図2枚と時刻つきで。 -
RustDesk 入門マニュアル ── リモートデスクトップに何が要るか、サーバーはいつ要るか
Tailscale のあとに RustDesk は必須か。インストールしてすぐ使えるのか。
中継や自前サーバーが要る場面と、Tailscale と組み合わせてサーバーなしで使う方法まで。 -
Tailscale 入門マニュアル ── ネットワークの基礎から、仕組みと使い方まで
IP・NAT の基礎から、Tailscale がポート開放なしでつながる仕組みを図解。
Windows・Mac・iPhone・Android の導入から、リモートデスクトップ、ファイル送信まで画面つきで。 -
江ノ島・鎌倉 日帰りルート ── モノレールで島へ、江ノ電で大仏へ
大船から懸垂式の湘南モノレールで江の島へ。海沿いを歩いて鎌倉高校前の踏切、
江ノ電で長谷の大仏と長谷寺、最後は鶴岡八幡宮。地図2枚と時刻つきで。 -
Vibe Coding覚書 ── 大きなシステムで、AGENTS.md の外側に置くもの
仕様・ADR・分野別のルール・スキル・フックを、どこに置いてどう回すか。
受発注システムの承認フローを例に、仕様から検証まで。全七章。 -
AGENTS.md覚書 ── AI に渡す「このリポジトリの約束ごと」
何のためのファイルで、どんな場面で効き、どう書くか。このサイトの実例と研究結果、
そして AI が賢くなったら要らなくなるのか。全七章。 -
熱海 1泊2日モデルコース ── 温泉の街から、溶岩の海岸と火山へ
MOA美術館、來宮神社、海辺の散歩、そして温泉宿。
2日目は城ヶ崎海岸の吊り橋と大室山のお鉢めぐり。地図2枚と時刻つきで。 -
箱根 日帰り周遊ルート ── 池袋から、山と湖と温泉を一日で
登山電車、美術館、大涌谷、海賊船、箱根神社、そして温泉。
時刻つきのスケジュールと、動線入りの地図で。 -
Mac アプリ開発 入門ロードマップ ── ゼロからユーティリティを配るまで
Swift の基礎から SwiftUI、メニューバー常駐、権限とサンドボックス、
署名と公証による配布まで。8つのステップを図解つきで。 -
Spigen Classic LS ── AirPods Pro 3 に初代 Mac のマウスを
数あるケースを比べて、いちばん気に入った一つ。
なぜ今 Pro 3 なのかから、質感と使い勝手まで。写真つき。 -
Laya覚書 ── 判定モデルを自分で持つということ
Jev の3日後に出たオープンソース版。経緯は誰が先だったのか、
学習は本当に手軽なのか、ローカルに置くべきか。全六章。 -
Jev覚書 ── 文章を書かないモデルの使いどころ
state と選択肢は自分で決めるのか。Web テストでは何を渡すのか。
株の売買に使えるのか。図つきで整理しました。全六章。 -
ベクトル覚書 ── 言葉を数にするということ
「ベクトル化がよく分からない」という声をいただきました。
図を多めに、そこだけを取り出して。全六章。 -
モデル覚書 ── 得意分野はどこで決まるのか
絵、動画、コード。同じ土台から、なぜ違う特技が生まれるのか。
意図の汲み取りと、バグ検出のしくみまで。全六章。 -
LLM覚書 ── 仕組みから実務まで
次トークン予測、Attention、学習の三段階、幻覚、プロンプト、
MCP とエージェント、仕様表の読み方。全七章。
該当する記事はありません。