azukiazusa.dev

Generative UI のためのフレームワーク OpenUI

OpenUI は Generative UI を構築するためのフレームワークです。OpenUI 言語と呼ばれる独自の宣言型言語を使用して、AI が UI を構築するための指示を与えるという新しいアプローチを提供します。この記事では OpenUI を使用して Generative UI を実装する方法について解説します。

CSS Grid Layout の gap を装飾する `column-rule` と `row-rule`

グリッドレイアウトで「列の間に線を引く」といった装飾は多くの場面で必要になります。しかし、flexbox や grid で列の間に線を引くためのプロパティは存在せず、ボーダーや背景色を利用して線のように見せるといったワークアラウンドが必要でした。CSS Grid Layout の gap を装飾する `column-rule` と `row-rule` を使用することにより、flexbox や grid で簡単に列や行の間に線を引くことができるようになります。

兄弟要素のインデックスを返す CSS 関数 sibling-index()

`sibling-index()` は要素の兄弟要素の中でのインデックスを返します。`sibling-index()` 関数により取得したインデックスを使用することにより、スタッガー（時間差）アニメーションや、色相を段階的に変えるといった、兄弟要素の位置に基づいたスタイリングが可能になります。これまでは JavaScript を使用して実装する必要があったような効果も、純粋な CSS で実現できるようになります。

Codex を利用した iOS アプリ開発を試してみた

私自身は Web 開発の経験はありますが、iOS アプリ開発の経験はほとんどありません。このようなバックグラウンドを持つ私がコーディングエージェントである Codex を利用して iOS アプリ開発をどこまで進められるか試してみました。コーディングエージェントは単に中身を見ずにアプリケーションを作るいわゆる「バイブコーディング」的な使い方だけでなく、なぜこのコードが必要なのか？より良い設計にできないか？といったことを随時質問しながら進める学習用途の使い方が中心です。

Playwright CLI で AI エージェントに視覚的なフィードバックを与える

Playwright CLI v0.1.9 で追加されたアノテーション機能は AI エージェントに視覚的なフィードバックを与えるために便利な機能です。アノテーション機能を利用すると、ブラウザの要素を選択して、その要素に対するコメントを残すことができます。AI エージェントはこのアノテーションが残された要素を簡単に特定できるため、どのコードを修正すればよいのかを判断しやすくなります。

`contrast-color()` 関数を使用した自動コントラスト調整

`contrast-color()` 関数は、指定した色に対して `white` もしくは `black` のどちらがより高いコントラスト比を持つかを自動的に判断し、適切な色を返す関数です。動的に色が変わる場合やユーザーがカスタムテーマを使用する場合など、常にコントラスト比を確保するのが難しい状況で役立ちます。

AI エージェントが UI を安全に生成して描画するためのプロトコル A2UI とは？

Google が提唱する A2UI（Agent-to-UI）プロトコルは、AI エージェントが安全に UI を生成してクライアントに送信し、クライアントがそれを描画するための標準的な方法を提供します。A2UI は、AI エージェントがテキストの応答を返す代わりに宣言的なコンポーネント定義を返すことにより、クライアントはネイティブなウィジェットを使用して安全に UI をレンダリングできます。

事前に定義した UI を AI に生成させる json-render を試してみた

AI に UI を生成させる Generative UI の手法が注目されています。しかし、AI の出力が予測不可能であるため、意図しない UI が生成されてしまうリスクもあります。json-render はあらかじめ定義したコンポーネントやアクションのカタログに基づいて AI に JSON を生成させることで、AI が誤った構造の UI を生成するリスクを減らし、アプリケーションの一部として自然に統合された UI を提供するフレームワークです。

命令的な方法で支援技術に通知する `ariaNotify()` メソッド

`ariaNotify()` メソッドは、支援技術を使用しているユーザーに対して、動的なコンテンツの更新を通知するための命令的な方法を提供する Web API です。従来の WAI-ARIA の仕様では宣言的な属性を使用して支援技術に情報を伝える方法が一般的でしたが、`ariaNotify()` メソッドは JavaScript を使用して、特定のタイミングで支援技術に通知を送ることができるという点が特徴です。