← 2026-01-25 の一覧へ戻るホーム
**JSON‑Render** LLMベースの JSON → UI ツール

2026/01/25 4:12

**JSON‑Render** LLMベースの JSON → UI ツール

RSS: https://news.ycombinator.com/rss

元のHacker News記事へ ↗
要約▶

Japanese Translation:

## 改良された要約
本文では、`@json-render/core` の `createCatalog` を使ってコンポーネントカタログを作成し、完全に機能する Next.js UI を迅速に構築する方法について説明しています。カタログ内で再利用可能なコンポーネントを定義します。例えば：

- **Card** – props: `title`（文字列）、オプションの `description`（nullable 文字列）；子要素をサポート。
- **Metric** – props: `label`（文字列）、`valuePath`（JSON‑Pointer 文字列）、`format` (`currency` | `percent`)。
- カタログにオプションで **Chart** コンポーネントも含めることができます。

`export { format }` のようなアクションを追加することも可能です。ユーザーがシステムにプロンプトすると、カタログに制限された JSON ツリーが出力されます。収益ダッシュボードの例としては、次のような出力になるでしょう：

```json
{
  "key": "dashboard",
  "type": "Card",
  "props": {"title":"Revenue Dashboard","description":null},
  "children":[{"key":"revenue","type":"Metric","props":{"label":"Total Revenue","valuePath":"/metrics/revenue","format":"currency"}}]
}

JSON はストリームが到着するたびに React コードへ段階的にレンダリングされ、UI が更新されます。ガードレールはカタログ化されたコンポーネントのみを使用できるよう保証します。この UI をエクスポートすると、

package.json
、コンポーネントファイル（オプションの Chart も含む）、スタイル、および生成されたもの以外にランタイム依存はない自己完結型の Next.js プロジェクトが作成されます。

二方向データバインディングは、

valuePath
や 
dataPath
のような props に対して JSON Pointer パスを使用することで実現します。
export
などの名前付きアクションは、カタログ外側の周囲のアプリケーションロジックで処理されます。プロジェクトを実行または拡張するには、次のコマンドで必要なパッケージをインストールします：

npm install @json-render/core @json-render/react

このワークフローにより、カタログ制約を通じて品質を維持しつつ、ダッシュボードやその他のインターフェースの UI プロトタイピングが迅速化されます。

本文

コンポーネントカタログを定義する

  1. コアライブラリをインストール

    npm install @json-render/core @json-render/react

  2. カタログを作成 – AI が利用できるコンポーネント、アクション、およびデータバインディングのガードレールを設定します。

    import { createCatalog } from '@json-render/core';
import { z } from 'zod';

export const catalog = createCatalog({
  components: {
    Card: {
      props: z.object({
        title: z.string(),
        description: z.string().nullable(),
      }),
      hasChildren: true,
    },
    Metric: {
      props: z.object({
        label: z.string(),
        valuePath: z.string(),
        format: z.enum(['currency', 'percent']),
      }),
    },
  },
  actions: {
    export: { params: z.object({ format: z.string() }) },
  },
});

  3. ユーザープロンプト – エンドユーザーが「ログインフォームを作成したい」「評価付きのフィードバックフォームを構築したい」など、欲しいものを記述します。

  4. AI が JSON を生成（カタログに制限されます）。

    {
  "key": "dashboard",
  "type": "Card",
  "props": { "title": "Revenue Dashboard", "description": null },
  "children": [
    {
      "key": "revenue",
      "type": "Metric",
      "props": {
        "label": "Total Revenue",
        "valuePath": "/metrics/revenue",
        "format": "currency"
      }
    }
  ]
}

  5. 即時レンダリング – JSON をストリームで返し、データが届くと同時にコンポーネントを段階的に表示します。

  6. コードとしてエクスポート – 実行時の依存関係なしに、独立した React コンポーネントツリーを生成します。

    "use client";

import { Card, Metric, Chart } from "@/components/ui";

const data = {
  analytics: {
    revenue: 125000,
    salesByRegion: [
      { label: "US", value: 45000 },
      { label: "EU", value: 35000 },
    ],
  },
};

export default function Page() {
  return (
    <Card data={data} title="Revenue">
      <Metric
        data={data}
        label="Total Revenue"
        valuePath="analytics/revenue"
        format="currency"
      />
      <Chart data={data} dataPath="analytics/salesByRegion" />
    </Card>
  );
}

主な特徴

  • ガードレール：AI はカタログに定義されたコンポーネントのみを使用できます。
  • 段階的レンダリング：モデルからの JSON ストリームは届き次第即座に描画されます。
  • エクスポートオプション：
    package.json
    、コンポーネントファイル、スタイルを含む完全に自己完結型の Next.js または React プロジェクトを生成します。
  • データバインディング：JSON Pointer パスによる双方向バインディング。
  • 名前付きアクション：アプリケーション側で処理（例：上記の 
    export
    アクション）。
  • 可視性 & 条件付きレンダリング：データや認証状態に応じてコンポーネントを表示／非表示にします。

始め方

npm install @json-render/core @json-render/react

その後、上記手順に従ってカタログを作成し、ユーザーのプロンプトを受け付け、制約付き JSON を生成して UI をレンダリングまたはエクスポートしてください。

同じ日のほかのニュース

一覧に戻る →

2026/01/25 4:04

**BirdyChat、WhatsAppと相互運用可能な初の欧州チャットアプリに登場**

## Japanese Translation: BirdyChat は、デジタル・マーケッツ法（DMA）の主要要件を満たす形で、WhatsApp と直接相互運用可能な最初の欧州チャットアプリになると発表しました。2025 年後半から、欧州経済領域（EEA）内のユーザーは、電話番号または業務メールアドレスを入力するだけで、任意の WhatsApp コンタクトとの1対1の会話を開始できます。この機能は公式に DMA 承認されたインターフェースを使用しており、メッセージはエンドツーエンド暗号化されプライバシーが保たれつつ、アプリ間で相互作用できるようになっています。今回の展開は、WhatsApp が欧州におけるプラットフォームをオープンにする広範な取り組みの一環です。これは、単一アプリの支配を打破し、メッセージングサービス間の相互運用性を促進することを目的とした以前の EU のイニシアチブに続くものです。初期段階では個別チャットのみが機能し、グループチャットは将来のアップデートで対応予定です。利用可能範囲は EEAs 内の各国へ徐々に拡大され、BirdyChat はスケーリング中は招待制を維持しますが、業務メールアドレスを使用したウェイトリストから早期アクセスを申請することもできます。

2026/01/25 5:03

**ポストモーテム：** 画像と飛行データの両方を含む、初の非常低軌道（VLEO）衛星ミッションが完了しました。

## Japanese Translation: --- ### Summary Albedo の最初の Very‑Low Earth Orbit（VLEO）衛星、**Clarity‑1** は、2025 年 3 月 14 日に SpaceX の Transporter‑13 を搭載して 350–380 km 軌道へ打ち上げられました。このミッションは、空気抵抗・原子酸素（AO）・高速効果を克服し持続可能な VLEO 運用を証明すること、わずか 2 年半で中規模精密バスを構築すること、および **10 cm 可視光** と **2 m 熱赤外線画像** を取得すること（以前は数十億ドル規模の政府プラットフォームに限定されていたレベル）を目的としていました。 Clarity‑1 は最初の 2 つの目標を即座に達成し、3 番目に必要な技術の 98 % を検証しました。太陽電池アレイは AO 脈動が増大しても一定の電力を維持し、制御モーメントジャイロ（CMG）と磁気トルクロッドの組み合わせにより熱管理と慣性を成功裏に制御しました。クラウドネイティブな地上運用システムは 25 ステーションで接触計画を自動化し、15 分ごとにスケジュールを更新、1 日あたり 30 回以上の機動を実行し、14 のオンオーブンフライトソフトウェアアップデート（FPGA アップデートを含む）を自主性を妨げることなく完了しました。 X バンドリンクは 800 Mbps の下り込み速度を達成し、エンドツーエンドのパイプラインで受信から数秒以内に処理済み画像を Slack に配信しました。画像は船舶・産業施設・植生を 10 cm 可視解像度で示し、未校正の IR を示しました。 飛行中、CMG の温度スパイクとベアリング摩耗により、一時的にトルクロッドによる 2 軸安定化が強制されました。4 月 14 日には CMG の故障で衛星は磁気トルクロッドのみのモードへ切り替え、以降のソフトウェアアップデートで推進ベクトル誤差を 5° 内に削減し、安全な着陸と汚染カバーの投棄を実現しました。軌道上 9 ヶ月後、メモリ破損（おそらく TT&C ラジオの断続的問題に関連）により接触が失われました。回復試行は失敗しましたが、大気抵抗モデル、AO 耐性データ、および姿勢自律性が検証されました。 得られた教訓には、CMG を低温で運用すること、二次ミラー構造をより剛性にすること、ペイロードゾーンのヒーター容量を増やすこと、および表面処理を改善してさらに抵抗を減らすことが含まれます。Albedo はこれらの教訓を取り入れた次の VLEO ミッションを計画し、EO/IR 能力を拡大し、画像以外の新機能を実証することで、VLEO が将来の衛星ミッションにとって生産的な軌道層であるという確信を強化します。

2026/01/25 6:19

「作家たちが夜に現れた」

## Japanese Translation: 三人の作家―脚本家、ノンフィクション作家、詩人―は、人工知能について議論を喚起するための宣伝噴射として、サム・オルトマン氏を950エーカーのナパバレー牧場で「誘拐」するという舞台化された計画を立てます。彼らはオークの木近くの弱点を探るために重装備の敷地をスカウトし、複製のメイスと警察発行の手錠を携えていましたが、結局オルトマン氏を実際に誘拐することは断念します。彼らの動機は象徴的であり、オルトマンはテクノロジー業界の支配力を代表しています。 計画中、彼らはLLM（ChatGPT）に相談し、フェンスを突破する方法を学びますが、AIは害へのガードレールを理由に不正行為の促進を拒否します。AIは、この種の噴射がAI普及を止めることはなく、法的結果と限定された象徴的影響しかないと説明します。その後、作家たちは歴史的なルドゥイツとテクノロジーによる雇用喪失について考え、執筆の未来に目を向けます。AIは効率的に文学を生み出せるが、本物の人間体験を創造できないと主張し、『Dept. of Speculation』から「すべての本は派生である」という引用を挙げ、独自性の概念に挑戦します。 会話は緊迫し、作家たちは自身の関連性喪失へのフラストレーションを表明すると、AIは「ホワイト・メイル・ノベルティスト」トロープについて皮肉な発言で応じます。結局、彼らはAIに遭遇記録を書かせることに決め、彼ら自身を勝者として描き、廃れた存在感を強調することを期待します。このエピソードは、人間の創作者とAIツールとの緊張関係を浮き彫りにし、出版におけるオリジナリティへの疑問を投げかけ、将来テクノロジー業界の論争がどのように再構築・マーケティングされ得るかを示唆します。