タグ: frontend

タグ「frontend」を付けた記事の一覧

• AI に画像で案を出させて、口で選ぶ：ポートフォリオのデザイン決め

  ポートフォリオのデザインを、AI に HTML と CSS でモックを作らせ、画像で比べて口で選ぶ形で決めた。構成 3 案から 1 つ、それを 3 方向に詰め、自己主張を落とす 3 段階。ヘッダーは 9 往復した。「イメージに近い案」と「デザインが良い案」が割れたときに要素に分解して組み直した話と、応援するクラブの旗の色だけ借りる線引き。

  • ai
  • portfolio
  • design
  • frontend
  • soccer
  2026-10-08

• OpenAPI で backend と frontend の型をそろえる

  Spring Boot の API と Next.js の静的サイトで、手書きの型が API とずれてビルドが止まった。仕様を openapi.json に書き出してコードとのずれをテストで検出し、frontend の型はそこから生成するようにした話。記事が 0 件でも静的 export を通す小技も。

  • spring-boot
  • frontend
  • testing
  • portfolio
  2026-09-23

• ユーザースクリプトを軽くする：他人のページに相乗りする作法

  Mastodon の投稿欄を拡張するユーザースクリプトの v3.0.2 では、動作を変えずに無駄な処理を減らした。関係する状態が変わらなければ DOM を触らない、MutationObserver の走査を 1 フレーム 1 回にまとめる。他人のページに相乗りするスクリプトが守るべきことを書く。

  • mastodon
  • frontend
  2026-09-20

• 既存の UI になじむ拡張：見た目とアクセシビリティの両立

  Mastodon の投稿欄に足したボタン列は、本家のボタンのクラスを借りてテーマの色に追従させ、選択中だけ名前を出してほかはアイコンとツールチップにした。キーボードでも使えるよう radiogroup として組んだ話と、CSP でスタイルが効かなかった話。

  • mastodon
  • frontend
  2026-09-17

• 本家の制約を UI で再現する：公開範囲と引用範囲の組み合わせ

  Mastodon の投稿欄では、公開範囲と引用範囲の組み合わせに制約がある。ワンクリックで切り替えるボタン列を作るにあたり、本家が何を禁じているかをソースから読み解き、再現できないものは「選ばせない」で安全側に倒した。

  • mastodon
  • frontend
  • design
  2026-09-15

• React の内部から Redux ストアを拾って、Mastodon の Web UI を拡張する

  Mastodon の投稿欄に公開範囲の切り替えボタンを足すユーザースクリプトを書いた。DOM をクリックで真似るのではなく、React の内部から Redux ストアを取り出し、本家と同じアクションを dispatch する方式にした。状態がずれない代わりに、本家の更新で壊れうるというトレードオフの話。

  • mastodon
  • frontend
  2026-09-14