UIの面倒、実はDBの問題だった ― Local-First と Instant が示す Web 開発の未来
UIの面倒、実はDBの問題だった ― Local-First と Instant が示す Web 開発の未来 はじめに 2026 年 4 月、開発開始から 4 年を経て Instant が v1.0 をリリースしました。 アナウンスでは、次の 3 つが改めて押し出されています。 Unlimited apps（多テナント Postgres なのでフリープランが止まらない） A sync engine in every app（Figma / Notion / Linear と同じ系譜のリアルタイム同期） Batteries included（Auth / File storage / Streams が同じ DB に同居） The best backend for AI-coded apps そして 1.0 のランディングにて、それと同じくらい強く言い切られているのが次の一文です。 Inst
コンソールポチポチが好きだけどIaCやってます
コンソールポチポチは良い 私はAWSマネジメントコンソールが好きです。 新しいサービスを試すとき、まずコンソールを開きます。画面を見ながら「このサービスにはこんな設定項目があるのか」「この項目はこう関連しているのか」と理解していく。ドキュメントを読むだけでは掴めない感覚が、画面を触ると分かることがあります。 コンソールの良さはいくつもあります。 すぐ試せて、すぐ壊せる。 検証したいことがあるとき、コンソールなら数クリックでリソースを作って動作を確認できます。うまくいかなければ消してやり直せばいい。このサイクルの速さは、学習でも検証でも大きな武器です。 何ができるか分かる。 コンソールの画面には設定項目が並んでいるので、「このサービスにはこんなオプションがあるのか」と気づけます。ドキュメントを端から端まで読まなくても、画面を見ればリソースの作り方が掴める。この「発見性の高さ」はコンソールなら
プレーンテキストで出力するワイヤーフレームツール「Mockdown」「Wiretext」が相次いで公開 ——テキスト形式のワイヤーフレームをエージェントに渡し、UIコードの生成を目指す | gihyo.jp
プレーンテキストで出力するワイヤーフレームツール「Mockdown」「Wiretext」が相次いで公開 ——テキスト形式のワイヤーフレームをエージェントに渡し、UIコードの生成を目指す 生成ボタンも提供している「Mockdown」 デザイナー兼エンジニアとしてAI領域で活動するMike Bespalov氏は2026年2月16日、AIエージェントへの指示用にアスキーワイヤーフレームエディタ「Mockdown」をWebアプリとして公開した。Mockdownは、キャンバス上に視覚的にコンポーネントを配置し、プレーンテキストのワイヤーフレームを生成するツール。迅速にレイアウト案を作成し、AIエージェントに機能するコードを生成させるために設計されている。なお、このツールは後述の「Wiretext」にインスパイアされて開発されたもの。 Mockdownのサイト AI agents read ma
ReactはuseEffectで副作用があるのに、なぜ純関数と言えるのか？
Reactは関数型の思想で UI = f(状態) を実現している一方で、useEffect のように副作用を扱う仕組みも提供しています。 純関数を前提とした設計なのに、副作用を持ち込んでなぜ成り立つのかが気になったため、整理してみました。 useEffectって何？ 分解するとuse + Effect = エフェクトを扱うという意味になると思います。 じゃあ、エフェクトって何かというと エフェクトは、特定のイベントによってではなく、レンダー自体によって引き起こされる副作用を指定するためのものです。 と記載があります。 例えば、チャットでのメッセージ送信は、ユーザが特定のボタンをクリックすることによって直接引き起こされるため、クリックという特定のイベントです。 しかし、サーバ接続のセットアップは、コンポーネントが表示される原因となるインタラクションに関係なくレンダー自体によって行われるべきで
MCP でアクセシビリティ（ WCAG 2.2 準拠）レビューを爆速自動化： Figmaアノテーション生成
はじめに プロダクト UI / UX 開発における品質向上において、様々な組織が検討を重ねていると思います。 デザインレビューをどのように実施するのか WCAG 2.2 に準拠したアクセシビリティ改善 上記の課題を解決すべく、アクセシビリティ改善をふまえたデザインレビュー自動化プロセスを検証してみました。 直面した課題 課題① : コンパクトになっていったデザインレビューの文化 これまでのデザインレビューは、まとまった機能を開発する際に、PdM とエンジニア、そしてデザイナーが同期的に Figma を確認をするプロセスをとっていました。 また、開発プロセスに AI ツールが組み込まれたことで、エンジニアが UI を作り、デザイナーがレビューするというケースも増えています。 上記の背景がある中で、加えて事業スピードが加速していることもあり、担当者間のみのデザインレビューを行うことが増えていま
たった20秒でUIデザイン完成？Googleの新AIツール「Stitch」をさっそく使ってみた！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Google I/O 2025が、5月20日（火）と21日（水）の2日間にわたって開催されましたが、皆さんはご覧になりましたか？ Googleは「Gemini 2.5 Pro」や「AIモード」など、多くの新機能や製品を発表し、大盛り上がりのイベントとなりました！ I/Oの基調講演の最後には、CEOのスンダー・ピチャイ氏が、講演中に「AI」や「Gemini」という言葉がどれだけ発言されたかを示す「AIカウンター」を披露するほど、今回のGoogle I/Oの主役は間違いなくAIでした。 この記事では、そんなGoogle I/Oで発
社内デザインシステムをMCPサーバー化したらUI実装が爆速になった
はじめに こんにちは、普段 Ubie で症状検索エンジンユビー(https://ubie.app/)の開発をしている江崎です。 最近、Cursor エディタや GitHub Copilot などのコーディングアシスタントツールが進化し続けていますが、社内固有のデザインシステムとの連携はまだまだ課題が残っていました。そこで社内エンジニアである sosuke とともに、Ubie Vitals というデザインシステムを MCP サーバー化することで、UI 開発の速度と精度が劇的に向上した体験を共有します。 目次 デザインシステムと開発の現状課題 MCP サーバーの登場 Ubie UI MCP の構築 デモ テキストだけで UI 実装が可能に デザイナーの壁打ち相手としての可能性 今後の展望 デザインシステムと開発の現状課題 Ubie では「Ubie Vitals」というデザインシステムに則って
Invoker Commands APIのイベントのまとめ
<dialog>、Popover、Invoker CommandsがHTML標準で整いつつあります。JavaScriptを書かずにHTMLだけでインタラクティブなUIを作ることができるようになっていっているわけですが、それでもイベントをフックして何かしらの処理を実行したいことはあります。これらのUIのイベントはいくつか種類があるので、それぞれのUIや呼び出し方法に対応するイベントをまとめてみました。 前提 <dialog> <dialog>はHTML標準のダイアログUIです。このダイアログUIはモードレスダイアログとモーダルダイアログの2つのモードがあります。モードレスダイアログはopen属性を付与することで表示されますが、モーダルダイアログはshowModal()メソッドを呼び出すことで表示されます。つまりこれまではモーダルダイアログを開く手段はJavaScriptを使うしかありませんで
GingaUI—LLMを活用し文脈に合わせたテーマを生成するUIコンポーネントライブラリ—
本ライブラリは NICT のセキュリティイノベーター育成プログラム「SecHack365」にて開発を進めました。この場を借りまして、トレーナー、アシスタント及び事務局の皆様に感謝を申し上げます。 「GingaUI」は LLM を活用しウェブサイトのデザインテーマを自動で生成する機能を備えた UI コンポーネントライブラリです。React で構築されており、Next.js などのフレームワークと組み合わせて利用できます。 どんなもの？ 以下のポートフォリオサイトに PoC を実装しているので、ヘッダー右上のボタンからぜひお試しください。 一言で言うと、ウェブサイトの文章にふさわしいテーマを自動で生成する機能を備えた UI コンポーネントライブラリです。 先に書いておくと、テーマというのは配色やフォント、角丸の大きさなどのスタイル部分を指しており、レイアウトやコンポーネントの配置等の画面設計に
画面遷移の性質を事前に伝える重要性
モーダル・プッシュ・タブ iOSの画面遷移には、大きく分けて３つの画面遷移があります。 ３つの画面遷移アニメーションを見てみましょう。 モーダル プッシュ タブ モーダルは下から次の画面が、プッシュは右から次の画面が表示されます。 タブには小さなアニメーションがついていますが、瞬時に切り替わるように感じます。 これらの使い分けや、考え方は次の記事が参考になります。 遷移する前から認知は始まっている この記事では、画面遷移の前段階に焦点を当てます。特にモーダルやプッシュは、ボタンがトリガーとなることが多く、ボタンデザインの多様性から遷移の種類が分かりにくくなることがあります。 実際に、このボタンだけではどんな画面遷移が起こるか分かりにくい。 ユーザーが画面遷移を特別意識することは少ないかもしれませんが、iOSを使用する以上、正しい画面遷移のルールは無意識に認知されています。 誤った遷移方法を
UIを作る、減らす、完全になくす - 橋本商会
mobileでは、テロメアの詳細時刻と行permalinkのメニューが邪魔で行頭にカーソルを置けなかった
ヘッドレスな補完エンジンをつくりたい話
はじめに この記事は、nvim-cmp という neovim のプラグインををメンテしている間に出てきたいろいろな課題や、いま考えていること（やるとは言っていない）を説明することを目的としています。 nvim-cmp とは？ neovim における、補完プラグインです。 Pure Lua で書かれており、カスタマイズ性が高いことが特徴の補完プラグインです。 「いろいろな課題」とは？ 大別すると 3 つの課題があると考えています。 ▼ UI を内蔵してしまっている nvim-cmp は UI 関連の実装を内蔵しています。 例えば、custom_entries_view.lua や wildmenu_entries_view.lua などが実装として存在しており、いくつかのカスタマイズ向けのオプションが提供されています。 補完メニューの表示位置をカーソルに合わせるか、キーワード位置に合わせるか
Dialog と Popover #4 | blog.jxck.io
Intro ここまでで <dialog> 要素が標準化され、Modal/non-Modal な Dialog がネイティブで出せるようになった。 今まで自前で実装していた z-index の指定や、フォーカスの管理、非活性化、キーボードでの処理、スタイルなども、細かい仕様がほぼ標準によってカバーされた。 Top Layer inert :modal / ::backdrop CloseWatcher Focusable Scrollers etc しかし、<dialog> はあくまで「ユーザのインタラクションを求める」という用途で使うものであり、role=dialog ではない、例えばちょっとしたメッセージの通知などに使うものではない。 そこで、これらの資産を活用し、より汎用的な UI を標準化しようという話が、<dialog> の標準化の裏で並行して行われた。 Toast 最初の目立った
Dialog と Popover #3 | blog.jxck.io
Intro 前回までは <dialog> が標準化されるまでの経緯と、API の概要や関連仕様を解説した。 今回は <dialog> の API としての使い方について、具体的に解説していく。 各要素の使用 open 属性 <dialog> は、デフォルトでは不可視 (display: none) な要素となっている。open 属性が付くと表示される。 <dialog open> <div> <h1>Hello Dialog</h1> </div> </dialog> show()/showModal() 基本的に <dialog> は動的に表示されるため、JS で開くことになるだろう。しかし、open 属性を動的に付けるのではなく、show()/showModal() を用いるのが基本だ。 document.querySelector("button.show").addEventLis
Dialog と Popover #2 | blog.jxck.io
Intro showModalDialog() は今から考えれば、確かにひどい API だった。 しかし、何か Modal を開き、ユーザにインタラクションをさせ、閉じたらそこで入力された値や選択された結果を取得し、処理を進めたいユースケース自体は、規約への同意取得や、Cookie バナー、ログインなど多々ある。 そういった場面では、ライブラリなどを用いて実装する必要があったが、Modal を実装するのは実際にはそんなに簡単ではなかった。 Modal, Dialog, Modal Dialog 最初に、用語を少し整理しておこう。 Modal Dialog Modal Dialog non-Modal Dialog Dialog とは、そもそも「対話」という意味であり、UI の文脈では入力や選択を求める「対話的な UI」のことを指す。 既に実装されている alert(), confirm()
Dialog と Popover #1 | blog.jxck.io
Intro HTML の <dialog> 要素と、popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初にあ
「住所は英数字もすべて全角で入力してください」はなぜそうなったのか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Webサービスのフォームに住所を入力するとき、丁目や番地などを入れる欄について、数字やハイフンを全角で書かなければいけない「全角縛り」をやっているフォームをよく見ます。半角文字を入力してしまってエラーになったり、咄嗟に変換方法を思い出せなかったり、全角と半角の見分けが付きづらかったり、「全角縛り」であることが明示されていなかったり、「ハイフン」としてどの文字を使うべきかわからなかったり……と、鬱陶しさを感じることが多くあります。 「住所は全角のみ」（数字やハイフンも絶対に半角を受け付けない）という仕様がどういう経緯で生まれて、どう広まっ
気持ちよいUIができたら後は放置。傑作Flash『艦砲射撃・マテスナ』作者の素敵な“悪癖”【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカス気持ちよいUIができたら後は放置。傑作Flash『艦砲射撃・マテスナ』作者の素敵な“悪癖”【フォーカス】 ゲームクリエイター TANAKA U ゲーム制作フリーランス。「動かしているだけで気持ちよい」が信条で、UI制作に強いこだわりを持つ。専門学校でゲームづくりを学んでいた2003年にFlashゲームサイト「NEXTFRAME!」を立ち上げ、多数のゲームを制作。2006年にバンダイナムコゲームス社に入社し、2009年からフリーランス。ソーシャルゲームを中心に、UI演出、UIコンサルティング、ゲームデザインなどを手がける。仮想通貨「Monacoin」についてSNSでつぶやいただけで、何者からか400万円相当のMonacoinを振り込まれ、戦慄したことがある。 X NEXTFRAME! 2000年代のWeb上には、「Adobe Flash」規格の無料ゲームが、個人によって多数制
多腕バンディットによる表示コンテンツの最適化 - クックパッド開発者ブログ
こんにちは。技術部検索グループの原島です。 上の画像は、スマートフォン（ブラウザ版）で見たクックパッドの検索結果ページです。レシピだけでなく、ニュースも表示されていますね。献立や掲示板のスレッドなどが表示されることもあります。 クックパッドでは、検索結果ページに表示するコンテンツをクエリなどに応じて最適化しています。最適化は、膨大なログデータと最新の機械学習を用いることで、実現しています。このエントリでは、クックパッドにおけるコンテンツ最適化の裏側を紹介します。 最適化の背景 スマートフォンの普及に伴って、ユーザが利用するプラットフォームは PC からモバイルにシフトしつつあります。クックパッドにおけるモバイル利用者の割合も、ここ 2 年で 10% 以上増加しました。最近では、60% 以上のユーザがモバイルからアクセスしています。 ユーザの利用形態が変化すれば、検索結果ページもその変化に対
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ag-ui-protocol/ag-ui: AG-UI: the Agent-User Interaction Protocol. Bring Agents into Frontend Applications.
