# Agriculture デザインシステム ## Agriculture デザインシステム インターフェースプレビュー 2つの前提条件を確認し、利用可能になったレビューを開いて、ローカルの例をリセットします。 ## Agriculture デザインシステム デザインリファレンス AgDSの公式トークン／コンポーネントドキュメントと、@ag.ds-next/react 1.35.4のメタデータに基づいています。プレビューはドキュメントに基づくHTML/CSSの解釈です。実際のReactのインポートは別途提供されます。 ### タイポグラフィの役割 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | xs / sm / md / lg | 14 / 16 / 20 / 24px | 小から大まで、安定したサイズの役割。 | | xl mobile → desktop | 28 → 32px | レスポンシブな見出しの役割。 | | xxl / xxxl mobile → desktop | 32 → 40px / 40 → 48px | 大きな見出しの役割。 | | Body family | System UI with Helvetica/Arial fallbacks | Webフォントのダウンロードは不要。 | ### スペーシングの値 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | 0.25 / 0.5 / 0.75 / 1 | 4 / 8 / 12 / 16px | 関連コンテンツとコンパクトなパディング。 | | 1.5 / 2 / 3 / 4 | 24 / 32 / 48 / 64px | カラム、フィールド、グループ、セクション。 | | Form field gap | 2 = 32px | FormStackの役割。 | | Fieldset/group gap | 3 = 48px | 質問グループを分ける。 | ### ブレークポイント | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | xs / sm / md | 0 / 576 / 768px | モバイルを起点とするレスポンシブオブジェクトのキー。 | | lg / xl / xxl | 992 / 1200 / 1600px | 大きなビューポートのブレークポイント。 | ### ライトカラーロール | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | text / muted | #313131 / #626262 | 主要コンテンツと補助コンテンツ。 | | action | #00558b | インタラクティブ要素。 | | body / bodyAlt | #ffffff / #ebebeb | 対になる背景ロール。 | | border / borderMuted | #808080 / #d3d3d3 | 必須コントロールの境界線と、装飾目的の区切り線。 | ## Agriculture デザインシステム 完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Agriculture デザインシステム CoreとEmotion ### まず実際のプロバイダーを設定する > AgDSはEmotionでスタイルを適用するReactライブラリです。Coreはアプリケーションをラップし、リセットスタイル、CSS変数、テーマ設定を提供します。選択したテーマは@ag.ds-next/react/ag-brandingからインポートします。これはCoreとは別のものであり、各コンポーネントに存在しないプロバイダープロパティを設定するものではありません。 単体の例は、ドキュメントに記載されたトークンとタスク状態を明示的にHTML/CSSで解釈したものです。Reactライブラリが動作していることを示すものではありません。その状態遷移は依存関係の挙動を確認するのに役立ちます。実装に使用する実際のコンポーネント構成は、Reactの完全な例で確認できます。 関連する仕様を確認する ## Agriculture デザインシステム システムフォントとサイズ体系 ### フォントのダウンロードなしで読みやすく AgDSでは、プラットフォームのUIフォント、Helvetica、Arialを含むシステムフォントスタックを使用します。ドキュメントに記載されたフォントサイズはxs 14px、sm 16px、md 20px、lg 24pxです。大きなサイズはモバイルでは異なり、xlは28→32px、xxlは32→40px、xxxlは40→48pxです。 タイポグラフィ機構により、行の高さは4pxのグリッドに沿っています。フォントサイズごとに任意の比率を掛けるのではなく、コンポーネントのfontSizeとlineHeightの役割を使用してください。プレビューでは、本文にsmサイズ、見出しにモバイルで32px、それより大きな画面で40pxを使用し、フォントはダウンロードしません。 関連する仕様を確認する ## Agriculture デザインシステム スペーシングとレスポンシブプロパティ ### 数値はremベースのトークンを表す AgDSの1.5は、標準のルートサイズでは24pxを意味し、1.5pxではありません。ドキュメントに記載されたスペーシングの値には、0.25=4px、0.5=8px、0.75=12px、1=16px、2=32px、3=48pxが含まれます。FormStackではフィールド間の間隔に2を使い、より大きなフィールドセットのグループには3を使います。 レスポンシブプロパティでは、名前付きブレークポイントのオブジェクトを使用できます。Boxのpadding={{xs:1,md:3}}は16pxから始まり、768pxで48pxに増えます。中間のキーを省略すると、直前の値が引き継がれます。これは、相互に関連のないCSSの上書きを並べるよりも明確です。 関連する仕様を確認する ## Agriculture デザインシステム 前景色は背景色に応じて変わる ### 明暗のロールを組み合わせて使う カラーリファレンスでは、前景色、背景色、境界線、システムの各ロールが対で定義されています。ライトテーマのテキストは#313131、控えめなテキストは#626262、アクションは#00558bです。ダークテーマでは、暗い配色に対してアクションカラーが#9ee8ffになります。アクションカラーは操作可能であることを示すためのものです。開けないタスクに、装飾目的で使わないでください。 プレビューではライトパレットを使い、青いアクションリンクに下線を付けています。ブロックされた作業は、クリックしても何も起きない青いコントロールではなく、理由を添えたテキストとして表示します。完了状態は言葉と緑のスタイルで示し、色だけでステータスを伝えることはありません。 関連する仕様を確認する ## Agriculture デザインシステム TaskListはナビゲーション ### 利用可能かどうかと完了状態を分ける 実際のTaskListはitemsと省略可能なorderedプロパティを受け取ります。各項目にはラベルとステータスがあります。hrefを指定するとナビゲーションになり、省略するとonClickボタンとして動作します。利用可能なステータス値はtodo、doing、done、doneRecently、blocked、notRequiredです。 複数のタスクがある手続き、特にセッションをまたいで再開する作業には、この構成を使用します。単一の項目にタスクリストは必要ありません。例では、品目とルートの準備がそれぞれ前提条件になっており、両方が完了するまでレビュー項目は利用できません。これはローカルでのデモ用ルールであり、インポート可否の判定ではありません。 - todoは、タスクを開始できる状態を意味します。 - blockedは、前提条件が満たされていないため開始できない状態を意味します。理由も伝えてください。 - notRequiredは、タスクが不要になった状態を意味します。完了とは異なります。 関連する仕様を確認する ## Agriculture デザインシステム 依存関係と最近の作業 ### ステータスバッジだけではルールを適用できない アプリケーションは、2つの完了数をもとにレビューを開始できるかどうかを判定します。バッジのラベルを変更するだけでは不十分です。アクティベーションハンドラーにも同じルールを適用する必要があります。サンプルで利用できないレビュー項目は、有効なリンクではありません。前提タスクを完了すると件数が更新され、両方の前提タスクが完了した場合にのみレビューが可能になります。 ドキュメントに記載されているdoneRecentlyステータスは、リストに戻った直後に表示する一時的なフィードバックです。プレビューでは、完了したばかりの項目を短時間強調表示し、その後completedに切り替えます。リセットすると前提タスクの状態が復元され、サーバーやアカウントがなくてもこの遷移を繰り返し確認できます。 関連する仕様を確認する ## Agriculture デザインシステム タスクリストのそばに表示するコンテキスト ### サンプルの記録を常に表示する タスクの上に簡潔な概要を表示し、架空の記録、品目、参照番号を示します。これらの属性は1つの記録に関するものなので、定義リストが適しています。Reactの実装では、SummaryList、SummaryListItem、SummaryListItemTerm、SummaryListItemDescriptionを使うと、ドキュメントに記載された同等の構成になります。 作業中の準備パネルは、タスクリストの下で通常のドキュメントフローに沿って表示されます。このデモにおける完了の意味を説明し、明示的な確認を促します。パネルを開くと見出しにフォーカスが移り、完了するとリストの見出しに戻ります。証拠のアップロード、ライセンスの検証、申告の提出を行うかのような表示はしません。 関連する仕様を確認する ## Agriculture デザインシステム クライアントとサーバーのセットアップ ### 具体的なレンダリング方法を選ぶ 既存のクライアントレンダリング方式のReactアプリケーションでは、@ag.ds-next/reactをReactおよびEmotionのピア依存関係とともにインストールし、ここに示すCore構成を使用します。推測に基づくグローバルなCSSファイルは不要です。このライブラリはEmotionでスタイルを生成します。 Next.js App Routerでサーバーレンダリングを行うには、Emotionのスタイルを収集して挿入する公式のRootStyleRegistry統合が必要です。ドキュメントには、そのレジストリとCoreラッパーが用意されています。クライアント専用の例ではサーバーレンダリングの正しさを確認できないため、この統合方法ではリンク先のレジストリも必要な構成要素として扱ってください。 1. ReactパッケージとEmotionの依存関係をインストールします。 2. Coreと選択したテーマでアプリケーションをラップします。 3. アプリケーションの状態からTaskListの項目を描画し、ハンドラーで依存関係を適用します。 4. サーバーレンダリングでは、ドキュメントに記載されたスタイルレジストリを統合し、ハイドレーションを確認します。 関連する仕様を確認する ## Agriculture デザインシステムのコンポーネント例 ### Core、レスポンシブ対応のBox、実際のTaskList 依存関係を考慮したローカル状態管理を含む、実際のReact構成です。ナビゲーション用の仮リンクはありません。 ``` import { useState } from 'react'; import { Core } from '@ag.ds-next/react/core'; import { theme } from '@ag.ds-next/react/ag-branding'; import { Box } from '@ag.ds-next/react/box'; import { TaskList } from '@ag.ds-next/react/task-list'; export default function PreparationTasks() { const [checked, setChecked] = useState(false); const [reviewed, setReviewed] = useState(false); return setChecked(true) }, { label: 'Review the preparation record', status: reviewed ? 'done' : checked ? 'todo' : 'blocked', message: checked ? undefined : 'Complete the commodity check first', onClick: () => { if (checked) setReviewed(true); } } ]} /> ; } ``` コードリファレンス ### 1件の記録の概要 実際のSummaryList構成を使って、名前付きの値を表示します。 ``` import { SummaryList, SummaryListItem, SummaryListItemTerm, SummaryListItemDescription } from '@ag.ds-next/react/summary-list'; Example reference PREP-1042 ``` コードリファレンス ### 単体で動作するサンプル一式 レイアウト、操作要素、初期化処理を含むドキュメント全体です。リンク先のサンプルアーカイブを展開すると、このプレビューで使用する正確な相対パスのベンダーアセットが得られます。その後、HTTP経由で配信してください。 ``` AgDS task dependencies

AGDS PATTERN · FICTIONAL PREPARATION RECORD

Prepare an example consignment

Reference
PREP-1042
Example commodity
Dried botanical samples
Service mode
Local demonstration

Preparation tasks

0 of 2 prerequisites complete

    OpenDesign interpretation of AgDS tokens and task semantics; not native React rendering. No regulatory eligibility decision or submission is made.
    ``` コードリファレンス - 完全なサンプルは「ソース」からダウンロードできます。READMEに正確なローカル起動コマンドが記載されています。 - ベンダーのパスはこのドキュメントからの相対パスのままにしてください。アーカイブには、このプレビューで使用するアセット一式が含まれています。 ## Agriculture デザインシステム エージェントのセットアップ ### 実装の出発点 ネイティブパッケージのメタデータとインポートは、ソースを確認済みです。一時的なネイティブ依存関係のインストールを試みましたが、完了しませんでした。単体プレビューは明示的な解釈に基づくもので、ネイティブなReactビルドであるとは主張していません。「ソース」にある完全な動作サンプルのZIPには、プレビューに必要な依存関係とドキュメント全体も含まれています。展開したディレクトリでpython3 -m http.server 8080を実行し、http://localhost:8080/agriculture-agds.htmlを開いてください。モジュールを使用するサンプルをfile://で開かないでください。 ``` npm install @ag.ds-next/react@1.35.4 @emotion/react @emotion/cache react react-dom # Existing client-rendered React app: use the complete Core/TaskList example above. # Next.js App Router: additionally integrate the official RootStyleRegistry. ``` ### あなたのプロジェクト向けプロンプト ``` 複数タスクからなる準備手続きには、AgDS CoreとTaskListを使用します。todo、doing、done、doneRecently、blocked、notRequiredをそれぞれ明示的にモデル化します。バッジのテキストだけでなく、アプリケーションのロジックで前提条件を適用してください。レスポンシブなスペーシングのprops、システムフォントスタック、前景色と背景色の役割を使用します。記録の概要を常に表示し、ブロックされた作業について説明してください。政府機関のロゴ、根拠のない規制上の判断、偽の提出完了表示は避けてください。 ``` ## Agriculture デザインシステム ソースと対象範囲 架空の品目準備データを用いた、サービスパターンの教育用サンプルです。規制上の適格性を判定したり、手続きを提出したりするものではありません。政府機関の識別標章は使用していません。ネイティブのReactAPIサンプルと、解釈に基づくプレビューを明確に区別しています。 - Agriculture Design System AgDSリソースの公式エントリ。 - Foundation デザインシステムの基礎。 - コンポーネント サービスアプリケーションを構成するインターフェースの基本要素。 - パターン タスク全体を構成するパターン。 - 動作サンプル一式をダウンロード 完全なHTML、ローカルのCSS／JavaScript依存関係、付属ライセンス、正確な起動手順を含むZIPです。ビルド手順は不要です。 ## Agriculture デザインシステム 関連リソース ### Alberta デザインシステム AlbertaのネイティブWebコンポーネントと公開されているデザイントークンを使用して、アクセシブルな選択肢、算出される進捗、誠実なレビュー結果を備えた準備チェックリストを作成します。 ### Amsterdam Amsterdamの実際のオープンソースSwitchの仕様を、完全なニュートラルテーマ、アクセシブルなラベル、即時反映される閲覧設定とともに使用します。 ### B.C. デザインシステム 実際のセマンティックトークン、ネイティブのReact Ariaコントロール、条件に応じて表示される連絡先項目、完全なバリデーション動作を備えた、B.C.風のリマインダー設定フォームを作成します。 - [実装リファレンス](https://design-system.agriculture.gov.au/components/task-list) - [ソース](https://design-system.agriculture.gov.au/foundations/tokens/typography) - [ソース](https://design-system.agriculture.gov.au/foundations/tokens/spacing) - [ソース](https://design-system.agriculture.gov.au/foundations/tokens/breakpoints) - [ソース](https://design-system.agriculture.gov.au/foundations/tokens/colour) - [関連する仕様を確認する](https://design-system.agriculture.gov.au/components/core) - [関連する仕様を確認する](https://design-system.agriculture.gov.au/foundations/tokens/typography) - [関連する仕様を確認する](https://design-system.agriculture.gov.au/foundations/tokens/spacing/) - [関連する仕様を確認する](https://design-system.agriculture.gov.au/foundations/tokens/colour) - [関連する仕様を確認する](https://design-system.agriculture.gov.au/components/task-list) - [関連する仕様を確認する](https://design-system.agriculture.gov.au/components/summary-list) - [関連する仕様を確認する](https://design-system.agriculture.gov.au/guides/getting-started) - [コードリファレンス](https://design-system.agriculture.gov.au/components/task-list) - [コードリファレンス](https://design-system.agriculture.gov.au/components/summary-list) - [Agriculture Design System AgDSリソースの公式エントリ。](https://design-system.agriculture.gov.au/) - [Foundation デザインシステムの基礎。](https://design-system.agriculture.gov.au/foundations) - [コンポーネント サービスアプリケーションを構成するインターフェースの基本要素。](https://design-system.agriculture.gov.au/components) - [パターン タスク全体を構成するパターン。](https://design-system.agriculture.gov.au/patterns)