# Infor デザインシステム ## Infor デザインシステム インターフェースプレビュー 概要と連絡先を検証し、ローカルのリクエストを準備してから、何も送信せずにクリアします。 ## Infor デザインシステム デザインリファレンス この修正作業で参照した、公開されているInforのトークンテーブル用テーマスタイルシートと、公開済みのids-enterprise-wc 1.17.1および公式の入力・ボタンの例。最新のトークンテーブルのURLは、パッケージのバージョンを保証するものではなく、常に更新されるスナップショットです。 ### テーマの役割 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --ids-color-action-default | var(--ids-color-blue-60) | 公開されているcore/lightテーマのセマンティックエイリアス。 | | --ids-color-action-stronger | var(--ids-color-blue-70) | 公開されているcore/lightテーマのセマンティックエイリアス。 | | --ids-color-background-default | var(--ids-color-white-100) | 公開されているcore/lightテーマのセマンティックエイリアス。 | | --ids-color-foreground-default-default | var(--ids-color-neutral-100) | 公開されているcore/lightテーマのセマンティックエイリアス。 | | --ids-color-foreground-default-secondary | var(--ids-color-neutral-80) | 公開されているcore/lightテーマのセマンティックエイリアス。 | | --ids-color-border-default | var(--ids-color-neutral-60) | 公開されているcore/lightテーマのセマンティックエイリアス。 | | --ids-color-border-weak | var(--ids-color-neutral-40) | 公開されているcore/lightテーマのセマンティックエイリアス。 | ### 解決されるプリミティブ値 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --ids-color-blue-60 | #0072ed | 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 | | --ids-color-blue-70 | #0066d4 | 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 | | --ids-color-neutral-100 | #161618 | 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 | | --ids-color-neutral-80 | #3b3b3f | 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 | | --ids-color-neutral-60 | #6f6f76 | 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 | | --ids-color-neutral-10 | #f5f5f5 | 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 | | --ids-color-red-60 | #da1217 | 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 | ### スペーシングエイリアス | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --ids-space-2xs | var(--ids-space-04) | カスタムアプリケーションのスペーシングにはエイリアスを使用します。 | | --ids-space-xs | var(--ids-space-08) | カスタムアプリケーションのスペーシングにはエイリアスを使用します。 | | --ids-space-sm | var(--ids-space-16) | カスタムアプリケーションのスペーシングにはエイリアスを使用します。 | | --ids-space-md | var(--ids-space-24) | カスタムアプリケーションのスペーシングにはエイリアスを使用します。 | | --ids-space-lg | var(--ids-space-32) | カスタムアプリケーションのスペーシングにはエイリアスを使用します。 | | --ids-space-xl | var(--ids-space-40) | カスタムアプリケーションのスペーシングにはエイリアスを使用します。 | | --ids-space-2xl | var(--ids-space-48) | カスタムアプリケーションのスペーシングにはエイリアスを使用します。 | ### スペーシングの値 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --ids-space-04 | 4px | トークンのスタイルシートに定義された具体的なスケール値。 | | --ids-space-08 | 8px | トークンのスタイルシートに定義された具体的なスケール値。 | | --ids-space-16 | 16px | トークンのスタイルシートに定義された具体的なスケール値。 | | --ids-space-24 | 24px | トークンのスタイルシートに定義された具体的なスケール値。 | | --ids-space-32 | 32px | トークンのスタイルシートに定義された具体的なスケール値。 | | --ids-space-40 | 40px | トークンのスタイルシートに定義された具体的なスケール値。 | | --ids-space-48 | 48px | トークンのスタイルシートに定義された具体的なスケール値。 | ### タイポグラフィ | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --ids-font-family-sans | source sans pro | タイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 | | --ids-font-family-mono | source code pro | タイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 | | --ids-font-size-default | var(--ids-font-size-sm) | タイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 | | --ids-font-size-sm | var(--ids-font-size-40) | タイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 | | --ids-font-size-30 | 14px | タイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 | | --ids-font-size-40 | 16px | タイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 | | --ids-font-size-50 | 20px | タイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 | | --ids-font-size-60 | 24px | タイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 | ### 角丸エイリアス | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --ids-border-radius-xs | var(--ids-border-radius-04) | エイリアスはプリミティブを参照します。すべてのコントロールで最大の角丸が使われるとは限りません。 | | --ids-border-radius-sm | var(--ids-border-radius-08) | エイリアスはプリミティブを参照します。すべてのコントロールで最大の角丸が使われるとは限りません。 | | --ids-border-radius-md | var(--ids-border-radius-16) | エイリアスはプリミティブを参照します。すべてのコントロールで最大の角丸が使われるとは限りません。 | | --ids-border-radius-lg | var(--ids-border-radius-24) | エイリアスはプリミティブを参照します。すべてのコントロールで最大の角丸が使われるとは限りません。 | | --ids-border-radius-circle | var(--ids-border-radius-99) | エイリアスはプリミティブを参照します。すべてのコントロールで最大の角丸が使われるとは限りません。 | ### 入力欄とボタンの構成 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | label | Visible input label | プレースホルダーだけに頼らず、フィールドの識別に使用します。 | | validate | required / email required | ドキュメントに記載された入力検証ルール。 | | readonly | true | 編集できないアセット識別子を、読みやすい状態で保持します。 | | disabled | true | 入力不可の状態を個別に示します。 | | clearable | true | フィールド単位のクリア操作。 | | dirty-tracker | true | 変更された値を任意で追跡します。 | | text-align | start \| center \| end | テキストや数値表示の論理的な配置。 | ### アクションの優先順位 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | appearance | primary | ローカルの下書きを作成します。 | | appearance | secondary | 下書きのクリアは補助的なアクションです。 | | appearance | tertiary | 強調を抑えた代替アクション。 | | appearance | primary-destructive / tertiary-destructive | 通常のキャンセルではなく、実際に破壊的な操作を行う場合に使用します。 | | disabled | Boolean attribute | ネイティブコンポーネントが利用できない状態。 | ## Infor デザインシステム 完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Infor デザインシステム レコード識別子が固定されたエンタープライズ向けフォーム ### 機器識別子は編集可能な依頼内容と分けて表示する > InforはSoHoをデザイン言語として掲げ、IDSではエンタープライズの役割と生産性を重視しています。このサンプルでは、その考え方を保守依頼に適用しています。資産識別子は固定し、作業概要、連絡先、緊急度を編集可能な依頼情報として扱います。 IDの02006は意図的に文字列として扱います。数値に変換すると先頭のゼロが失われ、識別子が変わってしまうためです。ネイティブIDSの例では読み取り専用の入力欄を使い、レコードのコンテキストを表示したまま、フィールドが欠落または利用不可のように見えないようにしています。 関連する仕様を確認する ## Infor デザインシステム エイリアスはプリミティブを参照して解決される ### 用途に合ったエイリアスを使う 取得した公開テーマでは、action-defaultはblue-60、default foregroundはneutral-100、secondary foregroundはneutral-80を参照します。この2層構造により、アプリケーション内で色のリテラル値を重複させずに、カスタムフォームをテーマと一貫させられます。 公開トークンページでは、Core、Dark、Contrast の各モードを利用できます。このガイドの値は、Core（ライト）スタイルシートのスナップショットに基づいています。プレビューは、3つのモードすべてで同じ青の16進数値が使われることを示すものではありません。本番コンポーネントではセマンティックエイリアスを参照し、選択したテーマに値を解決させてください。 関連する仕様を確認する ## Infor デザインシステム 独自の密度体系を作らず、具体的なスケールを示す ### スペース、タイポグラフィ、角丸にはそれぞれ別のエイリアスセットがある スペーシングエイリアスには、プリミティブ値が8ピクセルのxs、16ピクセルのsm、24ピクセルのmd、32ピクセルのlgがあります。付属のネイティブCSSでは、メインの内側余白にmd、フィールド間の間隔にsmを使っています。ソースコードで意図を明確にしつつ、参照表では具体的な値を確認できます。 デフォルトのフォントファミリーはSource Sans Pro、等幅フォントはSource Code Proです。font-size-defaultエイリアスは16ピクセルのスケール項目を参照します。ライブラリを読み込んでも、パッケージのREADMEに記載されたフォントアセットを用意する必要があります。オフラインプレビューでは一般的な代替フォントを使用します。 角丸の名前はスペーシングの名前とは別です。radius-smは8ピクセル、space-smは16ピクセルを参照します。どちらも名前の末尾がsmだからといって、覚えている数値を流用すると誤った値になります。 関連する仕様を確認する ## Infor デザインシステム 意味の異なる入力状態 ### 読み取り専用、無効、変更済みはそれぞれ別の状態 公式の例では、readonly、disabled、dirty-tracker、clearable、uppercase、lowercase、論理的なテキスト配置を使用できます。依頼の例で必要なのは、資産識別子のreadonlyと、作業概要のclearableだけです。メールアドレスに自動的な大文字・小文字変換を適用したり、自由記述の説明を暗黙に変換したりはしません。 ネイティブ入力の例では、連絡先フィールドにvalidate="email required"を指定しています。公開されている型宣言にはvalue、focus()、checkValidation()が定義されています。checkValidationはvoidを返すため、フォームが有効かどうかを示すBoolean値と誤認しないようにしています。代わりに、ローカルレコードを準備するための条件を個別に確認します。 - readonlyにすると、固定された資産情報を表示したまま読み取り可能にできます。 - disabledは、フィールドを現在利用できない状態を示します。 - 変更追跡は初期値との差分を示すもので、成功状態や検証状態ではありません。 関連する仕様を確認する ## Infor デザインシステム 変更追跡と入力検証は役割が異なる ### 編集を追跡しても、入力値が有効とは限らない 公式のIDS入力ギャラリーでは、初期値のある入力にdirty-tracker="true"を指定しています。変更追跡はフィールドの編集を対象とし、許容される入力を定義するvalidate属性とは別の機能です。連絡先フィールドが変更されていても、メールアドレスが無効な可能性があります。 公開されているInput宣言にはcheckValidation(): voidが定義されています。これを呼び出すとコンポーネントの検証動作が実行されますが、作業指示のアクションを許可するBoolean条件としては使いません。ネイティブのサンプルでは、下書きを作成する前に必須のアプリケーション値も確認します。クリア可能な作業概要と読み取り専用の資産情報は、ほかの独立した入力機能を示しています。 変更追跡は公式に文書化された拡張機能ですが、このプレビューでは有効にしていません。デモでは編集後に準備済みの概要をクリアし、フォーカスを作業概要フィールドに戻します。保守依頼が保存されたとは表示しません。 関連する仕様を確認する ## Infor デザインシステム フォームを隠さず、2つの領域で構成する ### フォームを主役に、コンテキストを補足として配置する プレビューでは、フォームにコンパクトな機器情報カードと、シンプルなオリジナルの機械図を組み合わせています。主要な読み順は、見出し、フィールド、アクション、結果です。画面幅が狭い場合、入力欄を読みにくい列に押し込まず、機器情報をフォームの下に移動します。 ライブラリの例では、ブレークポイントごとの列属性を指定したids-layout-gridを使用しています。このサンプルでは、よりシンプルな独自のレスポンシブレイアウトを採用しています。最大幅とブレークポイントはアプリケーション側の値です。ここで示すのは、トークンに基づく間隔とネイティブコントロールのラベルです。 関連する仕様を確認する ## Infor デザインシステム ネイティブパッケージのバージョンを固定し、値を読み取る前に初期化する ### 公開パッケージを確実な導入元として使う 検証済みのパッケージには、バージョン1.17.1、ESモジュールのエントリーポイントenterprise-wc.js、現在のInforホストのソースリポジトリが記載されています。そのため、以前のGitHubの場所は信頼できるインストール手順ではありません。コードでは公開パッケージをインポートしてコンポジションを挿入し、カスタム要素の定義が完了してから動作を設定します。 公式のライブサンプルには、ビルドごとに異なるチャンクURLが含まれています。無作為に選んだチャンク名をアプリケーションにコピーすると、デプロイ成果物に依存してしまいます。パッケージのエントリーポイントを使えば、依存関係はバンドラーが解決します。このガイドでは公開メソッドの宣言を検証し、ブラウザーでのサンプルがネイティブビルドを示すものではないことを明確にしています。 1. 固定したパッケージをViteのVanillaスキャフォールドにインストールし、ドキュメントに記載されたフォントをアプリケーションのアセットポリシーに従って組み込んでください。 2. 用意されているエントリーポイントとCSSを使用し、カスタム要素の準備を待ってから、メインアクションとリセットアクションを紐付けてください。 3. 概要が空の場合、不正なメールアドレス、有効なローカル下書き、その後の編集をテストし、表示されるスナップショットが古い状態にならないことを確認してください。 関連する仕様を確認する ## Infor デザインシステムのコンポーネント例 ### 完全なスタンドアロンのインタラクティブ見本 ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。検証済みIDSコア／ライトのトークン値とシステムフォントへのフォールバックを用いた、独立したHTML／CSSの解釈です。ネイティブのIDSランタイムではありません。 ``` Maintenance request — IDS interpretation
ASSET SERVICE / LOCAL NOTEBOOKIndependent Infor IDS interpretation

Prepare the work. Keep the context.

Build a local maintenance draft for a fixed equipment record.

Read-only record identity; leading zero preserved.

Planning urgency

Core/light IDS token values with native HTML controls and a system-font fallback. Original illustration and application layout; no native IDS runtime.

``` コードリファレンス - アセット02006は文字列のまま扱います。カスタム要素の登録とcheckValidation()を検証するのは、こちらのHTMLフォームではなくネイティブIDSの例です。どちらも作業指示を作成しません。 ### 読み取り専用の識別子、必須の概要、連絡先の検証 IDSの入力検証は明示的に呼び出します。アプリケーション側のチェックで、空のローカル下書きを防ぎます。ユーザー入力はtextContentで表示します。 ``` // Vite vanilla project: npm install ids-enterprise-wc@1.17.1 // src/main.js. Add Source Sans Pro through your approved font-hosting setup. import 'ids-enterprise-wc'; import './style.css'; document.querySelector('#app').innerHTML=`

Maintenance request

Local draft only; no work order is sent.

Prepare local draft Clear draft 



`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
 summary.checkValidation();contact.checkValidation();
 const title=summary.value.trim(),email=contact.value.trim();
 if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
 if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
 draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
 message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});

/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
```

コードリファレンス

- checkValidation()の戻り値はvoidです。Booleanの結果として扱いません。

- アセット02006はテキストなので、先頭のゼロが保持されます。

- プレビューの準備で変わるのは、ページ内の状態だけです。

### アクションの見た目を明確にする

メインとサブのコンポーネントバリエーションにより、ワークフローの主なアクションが明確になります。

```
Prepare local draft
Clear draft
```

コードリファレンス

- コンポーネントを使用できない場合は、薄く表示するだけでなくdisabledを設定します。

## Infor デザインシステム AIエージェントのセットアップ

### 実装の出発点

#appを使用するViteのVanillaスキャフォールド向けのエントリーファイルとスタイルシート一式です。パッケージのバージョンとメソッドは公開パッケージで確認済みですが、ここではコンパイルを実行していません。承認済みのフォントソースからSource Sans Proを提供してください。埋め込みプレビューは、独立したネイティブHTML実装です。

```
// Vite vanilla project: npm install ids-enterprise-wc@1.17.1
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`


Maintenance request
Local draft only; no work order is sent.




Prepare local draft
Clear draft



`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
 summary.checkValidation();contact.checkValidation();
 const title=summary.value.trim(),email=contact.value.trim();
 if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
 if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
 draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
 message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});

/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
```

### あなたのプロジェクト向けプロンプト

```
検証済みのライトテーマのエイリアスと、ドキュメントに記載された入力／ボタンの構造を使って、Infor IDSのメンテナンス下書きを作成します。アセット識別子は文字列かつ読み取り専用にします。編集可能なフィールドを検証し、編集後は古い出力をクリアして、ローカルの下書きと送信済みの作業指示を区別してください。checkValidation()がBooleanを返すものとして扱わないでください。
```

## Infor デザインシステム参考資料と対象範囲

独立したOpenDesignガイドです。アセットとワークフローは架空のもので、送信は行われません。ネイティブコードは確認済みの1.17.1パッケージを参照し、トークン値は別途取得したライブのコア／ライトテーマのスナップショットとして示しています。

- Inforのデザイン SoHoの言語表現とエンタープライズ領域。

- ライブトークンのスタイルシート 実際のコア／ライトのトークン値とエイリアス。

- 入力例 公開コンポーネントのマークアップと状態。

- ボタンの例 アクションのバリエーション。

- 公開パッケージ1.17.1 バージョンとモジュールのエントリーポイント。

- パッケージのREADME インストールとフォントの要件。

- 入力型の宣言 value、focus、checkValidationのシグネチャ。

## Infor デザインシステム関連リソース

### Kajabi Sage

クリエイター向けの共有パネルを作成し、コースの情報を読みやすく示し、コピー操作を分かりやすくして、クリップボードの状態を正確に伝えます。Sage の Rails コンポーネントの構造、公開されているタイポグラフィ仕様、外部から読み込む新しい Pine トークンレイヤーを確認できます。

### Kiwi Orbit

実際の製品カラーとスペーシング、標準の手荷物選択、統一された料金の内訳、ローカルで完結するレビューの一連の流れを備えた、旅行に特化したOrbitガイドです。

### Maersk デザインシステム

実際のライトテーマのロール、見出しと本文の文字サイズ、入れ子状の角丸、識別子の扱いを通して、Maerskのオペレーション用インターフェースの表現を確認します。サンプルの貨物検索では、実際の物流データにアクセスできるとは示さず、参照情報との完全一致と、アクセシブルなイベント履歴を紹介します。


- [実装リファレンス](https://latest.wc.design.infor.com/ids-input/example.html)
- [ソース](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [ソース](https://latest.wc.design.infor.com/ids-input/example.html)
- [ソース](https://latest.wc.design.infor.com/ids-button/example.html)
- [関連する仕様を確認する](https://design.infor.com/)
- [関連する仕様を確認する](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [関連する仕様を確認する](https://latest.wc.design.infor.com/ids-input/example.html)
- [関連する仕様を確認する](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [関連する仕様を確認する](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [コードリファレンス](https://latest.wc.design.infor.com/ids-input/example.html)
- [コードリファレンス](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [コードリファレンス](https://latest.wc.design.infor.com/ids-button/example.html)
- [Inforのデザイン SoHoの言語表現とエンタープライズ領域。](https://design.infor.com/)
- [ライブトークンのスタイルシート 実際のコア／ライトのトークン値とエイリアス。](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [入力例 公開コンポーネントのマークアップと状態。](https://latest.wc.design.infor.com/ids-input/example.html)
- [ボタンの例 アクションのバリエーション。](https://latest.wc.design.infor.com/ids-button/example.html)
- [公開パッケージ1.17.1 バージョンとモジュールのエントリーポイント。](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [パッケージのREADME インストールとフォントの要件。](https://unpkg.com/ids-enterprise-wc@1.17.1/README.md)
- [入力型の宣言 value、focus、checkValidationのシグネチャ。](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)