Claude Codeを実務開発で使い倒して得られた知見
毎日繰り返しやる処理は カスタムスラッシュコマンドで自動化する スラッシュコマンドとは あらかじめ登録した処理を実行できる 毎回長いプロンプトを書く必要がない 組み込みスラッシュコマンド /doctor Claude Codeのバグをチェック /review コードレビューをリクエスト https://docs.anthropic.com/ja/docs/claude-code/slash-commands カスタムスラッシュコマンドとは ユーザーが独自に登録した処理を実行できる 毎回命令している長いプロンプトは登録するのが便利 .claude/commands/コマンド名.mdに処理を記述 スコープを設定できる グローバル・プロジェクト・プロジェクトで自分だけ使う等 https://docs.anthropic.com/ja/docs/claude-code/slash-commands
【海外記事紹介】「モダンCSSがあればSPAは不要」と主張するブログが話題に
7月25日、Jono Alderson氏が「It’s time for modern CSS to kill the SPA」と題したブログ記事を公開し、海外で話題を呼んでいる。 7月25日、Jono Alderson氏が「It’s time for modern CSS to kill the SPA」と題したブログ記事を公開し、海外で話題を呼んでいる。 この記事では、モダンCSSとブラウザ標準機能がシングルページアプリケーション（SPA）の利点を置き換え、マルチページアプリケーション（MPA）への回帰を促す潮流について詳しく紹介されている。以下に、その内容を紹介する。 「アプリのように見せたい」思考の罠 従来、サイトを“アプリらしく”見せる最も手軽な手段はSPA (Single Page Applications)だった。ReactやVueを使い、クライアント側でルーティングと描画を担
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる JSフレームワークでの対応も進んでいる Chrome 126・Edge 126（2024年6月）、Safa
最近のHTMLを改めてちゃんと学んでみた
この記事は、以下のモダンCSSに関する記事のHTML版です。 せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。 HTML Living Standardの時代へ 2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。 この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています： 宣言的UI構築への移行 - JavaScript実装から、HTML属性による宣言的な記述へ ブラウザネイテ
WordPressのリライトルールとは？URLをカスタマイズ方法を徹底解説！
みなさんこんにちは！エンジニアの高澤です！ 今回はWordPressのリライトルールについて、カスタマイズ方法をわかりやすく解説していきたいと思います。 リライトルールという仕組みは、テーマ開発にしてもプラグイン開発にしても非常に重要な仕組みといっても過言ではありません。 リライトルールを扱えることでパーマリンク（URL）の構造を自由にカスタマイズすることができ、また、WordPressで何かアプリケーションを実装したりする際や、SEO対策においても大変活きてくる知識となるかと思います。 よろしければぜひ当記事をお仕事でご活用いただけましたら幸いです。 リライトルールとは WordPressのリライトルールとは、WordPressサイトでパーマリンク（Permalink）構造をカスタマイズするための仕組みです。 WordPressはデフォルトでは、「?p=123」といった形式のURLが使わ
ウェブ制作者のためのNoto Sans JP最新実装ガイド - ICS MEDIA
Notoファミリーは「すべての言語で文字化けのない世界」を掲げて開発されたフォント群です。通常のフォントでは、該当する文字（グリフ）が存在しない場合、代替として四角い記号が表示されます。この四角い記号は「□」のような形で表示され、見た目が豆腐のブロックに似ていることから「豆腐（Tofu）」と呼ばれています。そんな中、Notoファミリーは、豆腐のないフォント＝No Tofuを意味して「Noto」と命名されたことは有名なエピソードです。 「Noto Sans JP」は数多くのウェブで利用されています。今年4月のWindowsにもNoto Sans JPが搭載され大きな話題となりました。しかしNotoフォントは2014年の登場から11年以上経過し、複雑な状態になっているのも事実です。 Noto Sans JP、Noto Sans Japanese、Noto Sans CJK JPなどたくさんの名
PNG 第3版 - 次世代のPNGフォーマットの仕様がW3C勧告に！HDR・アニメーション・Exif対応で“現代向けPNG”に進化！約20年ぶりのアップデート！
サイト＆サービス-Site & Service モーション サービス MOVIN - 単一のLiDAR＆RGBカメラを搭載したデバイスでマーカー＆スー... 2025-08-06 単一のLiDAR＆RGBカメラを搭載したデバイスでマーカー＆スーツ不要モーションキャプチャが可能なソリューション「MOVIN（ムービン）」が2025年8月1日に提供開始されました！ 続きを読む Maya プラグイン プラグイン＆アドオン-Plugin&Addon PivotPainter2 for Maya - テクニカルアーティストの神崎 ... 2025-08-06 テクニカルアーティストの神崎 建三 氏が、Maya向けのPivotPainter2ベイクスクリプトを開発！「PivotPainter2 for Maya」を近日OSSとして公開する事を発表しました！ 続きを読む
なぜあなたのWebサイトは遅いのか？ mizchi氏が語るパフォーマンス改善のポイントとは
Webサイトの“速さ”は、ユーザー体験を左右する重要な指標だ。とはいえ、ブラウザの中で実際にどんな処理が走っていて、どこにボトルネックがあるのかを把握するのは簡単ではない。本セッションに登壇したのは、Node.js／フロントエンド領域を専門とするフリーランスエンジニアであり、各社のWebサイトに一ヶ月単位で入り込み、Web VitalsやCI/CDの改善を行う“パフォーマンスの傭兵”として活動する竹馬光太郎氏。PageSpeed InsightsやLighthouse、DevToolsを駆使した実演を通し、問題の洗い出しからローカルでの再現、修正、そして再測定に至るまでの改善サイクルを丁寧に解説する。 パフォーマンスとはなにか？mizchi氏が見てきた現実 Node.jsやフロントエンドのパフォーマンス領域を専門とするフリーランスエンジニア・竹馬光太郎氏。SNSなどでは「mizchi」の名
HTMLの仕様が変更され、属性値内に記述した<と>がエスケープされるようになります
先日、HTMLの仕様が変更され、属性値内に記述した<と>がエスケープされるようになりました。この変更は6/25にリリースされたChrome 138やFirefox 140をはじめ、Edge, Safariも次のバージョンでサポートされる予定です。 この変更は主に、XSS脆弱性の防止に役立ちます。Web制作者に与える影響と潜在的な問題について紹介します。 HTML spec change: escaping < and > in attributes 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 変更点 変わらなかった点 何が壊れないのか 何が壊れるのか 終わりに はじめに 2025年5月20日にHTMLの仕様が変更され、属性内の<と>がエスケープされるようになりました。これによ
日本語Webサイトを意識したモダンリセットCSS「kiso.css」をリリースしました – TAKLOG
kiso.css - 日本のWebサイトのための「基礎」となるリセットCSS kiso.css は、日本のWebサイトのための「基礎」となるリセットCSSです。日本語に最適化しつつ、アクセシビリティやカスタマイズのし易さを重視しています。 tak-dcxi.github.io kiso.cssは、単なるスタイルのリセットを超えて「より良いデフォルト」を提供することを目指したリセットCSSです。その名が示すように、Webサイト構築の「基礎」として機能します。 有用なUAスタイルシートは活かしつつ、独自のスタイルも追加しているため、厳密には「リセットCSS」の定義から外れるかもしれません。しかし、類似のCSSが一般的に「リセットCSS」として紹介されている現状を踏まえ、検索性を考慮して本記事でもそのように呼称します。 kiso.cssはdestyle.cssやUA+を参考にしつつ、独自性も加え
React今昔物語 - ICS MEDIA
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
Web制作者は要チェック！ ネストされたh1要素のデフォルトのUAスタイルがすべてのブラウザで変更されます
2025年現在、Firefoxをはじめ、Chrome, Safariなどの各ブラウザでネストされた見出し要素（h1）のデフォルトのUAスタイルが変更される動きがでています。 段階的に実施されるようで、ブラウザのUAスタイルに依存してスタイルを適用している場合には注意が必要です。 Default styles for h1 elements are changing by Simon Pieters 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに h1要素のデフォルトスタイルの変更点 変更内容と変更時期 Lighthouseによる警告を修正する方法 このアップデートで留意すべき点 はじめに 現在、Firefoxをはじめ、Chrome, Safariなどの各ブラウザで、ネストされた見
アクセシビリティ学習の手引きとしての入門講座
合理的配慮という言葉の意味は次のとおりです。 社会生活において提供されている設備やサービスなどは障害のない人には簡単に利用できる一方で、障害のある人にとっては利用が難しく、結果として障害のある人の活動を制限してしまっている場合があります。このような、障害のある人にとっての社会的なバリアについて、個々の場面で障害のある人から「社会的なバリアを取り除いてほしい」という意思が示された場合には、その実施に伴う負担が過重でない範囲で、バリアを取り除くために必要かつ合理的な対応をすることとされています。これを「合理的配慮の提供」といいます。 出典: 事業者による障害のある人への「合理的配慮の提供」が義務化 | 政府広報オンライン たとえば、障害者がレストランを利用する場合、次のような配慮が必要になると考えられます。 車椅子に乗った人のために、ふだん置かれている椅子を移動させて、車椅子のまま席につけるよ
実践Webフロントパフォーマンスチューニング
2025年度 traP新歓オリエンテーションのLTで発表した内容です。5分のLTなので1章のみを話しました。
モダンCSSへのアップデート（実践編） - Qiita
目次 はじめに アップデートによるメリット サンプルページ 解説1-スタイルの優先順位を管理 解説2-擬似クラスセレクター 解説3-上下限つきのレスポンシブ文字サイズ 解説4-親要素いっぱいまで広げる 解説5-上下左右中央寄せ 解説6-親要素を子要素のサイズに合わせて左右中央寄せ 解説7-要素の切り抜き 解説8-親行列の行や列に子行列を整列 解説9-ピルボタン 解説10-ホバー 解説11-親要素サイズでの切り替え まとめ 参考サイト はじめに そもそもなぜモダンCSSへのアップデートが必要なのだろうか？ 学習コストに恩恵が見合わない気がする わざわざ Can I use で対応状況を確認する手間をかけてまで使う必要ある？ 使い慣れた記述のほうが悩まないで済むし安心 忙しくて余裕がないから今はまだいい。そのうち、そのうちにね… アップデートによるメリット 調べたり考えたりしたことをまとめてみ
React デザインパターン
はじめに 長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築するにつれ、単なる「動くコード」を超えた、堅牢な設計原則の必要性を痛感するようになりました。 この記事は、私自身の再学習を共有するものです。 ※2025/04/21時点、私が関わっているプロダクトのCrowd AgentのReactのバージョンは"18.3.1"です。 目次 Reactデザインパターンとは HOC (高階コンポーネント) パターン[※React18以降では、カスタムフック推奨] Provider パターン Presentational と Container コンポーネントパターン React Hook
閲覧履歴があってもリンクの色が変わらないケースについて | blog.jxck.io
Intro 4 月末にリリースされる Chrome 136 からは、一部のケースで「閲覧履歴があってもリンクの色が変わらない」状態が発生する。 もしこの挙動に依存して閲覧をしているユーザがいれば、多少不便に感じるかもしれない。 しかし、これは長年問題視されてきた、ユーザのプライバシー保護のための更新だ。 ユーザ側でも、「サイトが壊れたのでは?」と思う人もいるだろうため、前半は技術用語を少なめに解説し、エンジニア向けの解説は後半で行う。 従来の挙動 例えば、Wikipedia では、リンクをクリックして閲覧先を確認すると、閲覧済みのリンクの色が変わる。 これは、ブラウザに保存された閲覧履歴に該当するリンクの色を、訪問済みとして変えるブラウザの機能だ。 多くのリンクがある場合、確認済みかどうかがわかるために、便利に使われることもあるだろう。 (最近では、閲覧済みでもリンクの色を変えないように実
データベース丸見えのインシデント発見者になってしまった話。Supabaseをフロントエンドだけで実装する際はSELECTの扱いに注意！
2025年4月13日追記： Xで共有されてご覧になっている方が増えているようなので追加で補足しておきます。この問題はRLSの設定ミスによって発生していたものであり、Supabase自体には問題ありません 。現時点での僕の考えでは フロントエンドだけで実装するのは「意外と使えるシーンが限られる」 です。ユーザー自身の管理画面などで使う程度に留めておくと良いでしょう。特に不特定多数のユーザーが閲覧するようなユーザー交流型サービスには全く向きません。これは実際にSupabaseを使って開発してみると理解できると思います。全てのユーザーが閲覧できるようにするにはRLSで無条件なtrue設定にする必要があり、publicスキーマにコピーしたユーザー情報も必然的に無条件なtrueにする必要があるため、適切なDB構造をしてなければメールアドレスも漏れてしまうのです。無条件なtrue設定にする = HTT
Microsoft 製の ブラウザ操作 MCP が実用レベルだった件
はじめに 従来のブラウザ操作MCPの主な課題は、大量のコンテキスト消費でした。AI エージェントがブラウザを操作する際、ブラウザのスクリーンショットを base64 エンコードしてコンテキストに渡していたためです。このため、一度の操作でも膨大なトークン数を消費してしまい、処理効率が大幅に低下していました。 このため、数回の操作を必要とする程度の簡単な操作さえ、エージェント上で完了することはできませんでした。 つまり、従来のブラウザ操作系MCPは実用レベルに達していませんでした。 結論 以下の動画を見てください。 自然言語による指示によって、ローカル環境でログイン処理を行う様子 データの追加と結果の確認を行う様子 Microsoft 製の ブラウザ操作 MCP = Playwright MCP は実用レベルに達していました！ おわり。 おまけ コンテキスト長問題の解決 Playwright
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Critical CSS Generator | Kigo
