Redwood デザインシステム（テンプレート・パターン・コンポーネント）

この章の結論

• Redwood は、Oracle の SaaS 全体で共通の体験をつくるためのデザインシステムです。Oracle 自身が Visual Builder Studio（VBS）と Oracle JET で Redwood アプリを作っており、顧客の拡張も同じ道具で作れます。
• 構成要素は大きく テンプレート（ページ全体の型）、パターン（よくある操作の解決策）、コンポーネント（Oracle JET ベースの部品）の3層です。画面は「テンプレートを選ぶ → パターンを当てはめる → コンポーネントで組む」の順に考えます。
• 設計は「パターン・テンプレート・コンポーネントの特定 → Redwood の PowerPoint テンプレートで詳細化 → 開発前の検証 → VBS で構成・開発 → テレメトリで改善」の流れで進めます。
• 独自の App UI を作る前に、既存のアプリ（依存関係）の構成で済まないかを確かめます。作る場合も Redwood のテンプレートと標準コンポーネントを使い、独自のデザインを持ち込まないのが原則です。

全体像

なぜ新しいアプリケーション・プラットフォームなのか

Oracle University の学習パスでも、最初のテーマは「なぜ Oracle に新しいアプリケーション・プラットフォームが必要か」です。実装者の目線では、次の3点に整理できます。

1. 体験をそろえる：ERP・SCM・HCM・CX のどの画面でも、同じ見た目・同じ操作で使えるようにする。顧客が作った App UI も、他の Oracle Cloud Applications と同じ見た目になります。
2. 作る道具をそろえる：Oracle の開発者が使うのと同じ VBS と Oracle JET を顧客にも提供する。従来は画面の種類ごとに拡張ツール（Page Composer など）が分かれていましたが、Redwood ページの拡張は VBS に集約されます。
3. アップデートに耐える拡張：拡張は Oracle が用意した拡張ポイント（動的コンポーネント、ビジネス・ルールなど）の上に重ねる形になるため、四半期アップデート後も残ります。

デザインシステムの構成要素

層	役割	例・ポイント
デザインの原則・視覚言語	色・文字・余白・アイコン・文言などの共通ルール	テーマ（Designer の既定も Redwood のライト・テーマ）。App UI では拡張設定の Pillar Theme でカラーテーマを選ぶ
テンプレート	ページ全体の型（レイアウトと基本動作）	ウェルカム、検索、作成・編集、概要（詳細）、フォールドアウト、ガイド付きプロセスなど（名前は例。後述）
パターン	よくある操作・情報提示の解決策	一部のページ・テンプレートはパターンとしても提供され、パターンからページを作ると変数・イベント・リスナー・アクション・チェーンまで追加される
コンポーネント	画面の部品（Oracle JET ベース）	表、フォーム、ボタン、入力項目、メッセージなど。動的フォーム（oj-dyn-form）のように拡張を前提にした部品もある

テンプレートとパターンは「ゼロから画面を設計しない」ための仕組みです。業務要件を聞いたら、まず「どのテンプレートに当てはまるか」を考えます。

代表的なページ・テンプレート（例）

次の分類は Redwood アプリでよく見る型です。テンプレートの正式な名前と種類は Redwood コンポーネントのバージョンで変わるため、VBS の Components タブ（Component Exchange）や Redwood のリファレンスで確認してください。

用途	名前の例（要確認）	向いている画面
入口	Welcome	作業領域のトップ。よく使う操作や検索への入口
検索・一覧	Smart Search	キーワードとフィルタでオブジェクトを探す
作成・編集	Simple Create and Edit	1件のオブジェクトを作る・直す
概要（詳細）	General Overview、Item Overview	1件のオブジェクトの要約と関連情報
詳細の展開	Foldout	概要から詳細パネルを開いて掘り下げる（Fusion の Redwood ページの URL に view=foldout が付く例がある）
手順の案内	Guided Process	複数ステップの入力を順番に進める

Redwood リファレンス・アプリケーション

試験範囲には「Redwood Reference Application を使ってコンポーネントの仕様やデモを調べる」ことが含まれます。リファレンス・アプリケーションは、テンプレート・パターン・コンポーネントが実際に動く様子と、その使い方（属性やイベント）を確かめるための見本です。設計段階では「この要件はどのテンプレートとパターンで実現できるか」を、開発段階では「このコンポーネントにどんな属性・イベントがあるか」を確認する目的で使います。入手方法は Oracle University の学習パスや Oracle の案内で確認してください。

設定・実装の手順

設計の進め方

Oracle University のコース（Design and Develop Redwood Applications）の流れを、案件の作業に置き換えると次の通りです。

1. 要件を「ユーザーの目的」で整理する：誰が、何を達成するために、どの順で操作するか。
2. テンプレート・パターン・コンポーネントを特定する：画面ごとに、入口・検索・作成編集・概要・ガイド付きプロセスのどれかに当てはめます。
3. Redwood の PowerPoint テンプレートで画面案を詳細化する：項目の並び、ボタン、メッセージの出し方まで描きます。
4. 開発前に検証する：業務ユーザーに画面案を見せ、操作の順番と項目の過不足を確かめます。
5. VBS で構成・開発する：パターンやテンプレートからページを作り、コンポーネントを配置します。
6. テレメトリで改善する：使われ方のデータとフィードバックで、設計を見直します。

パターンからページを作る（Visual Builder）

1. ナビゲータの Components タブを開き、Browse タブで「redwood pattern」を検索します。
2. パターンをダブルクリックして内容と手順を確認し、Install（または Install Component）をクリックします。依存するコンポーネントの導入・更新を求められたら従います。
3. ページを作りたいフローで Create Page を選び、Page ID を入力します（慣例としてフロー名を接頭辞にします）。
4. Choose Page Content でパターンを選び、Create をクリックします。フラグメントもここに表示され、ページの雛形として使えます。

パターンからのページ作成には、Redwood コンポーネントのバージョン 2301 以降が必要です。Page Designer が回転アイコンのまま開かない場合は、Redwood コンポーネントの更新、実行時依存のアップグレード、ブラウザのキャッシュ削除を試します。

Redwood の App UI を作るときの設計ポイント

• まず既存アプリの構成を検討する：公式ドキュメントも、依存関係の追加と構成で要件を満たせない場合にだけ自分の App UI を作るよう勧めています。
• App UI は1拡張に1つが基本：対象ユーザーと目的がはっきりしている場合に作ります。App UI ID の x- 接頭辞は残し、URL は https://<Unified Application>/redwood/<App UI ID> の形になります。
• 入口を決める：既存の Oracle Cloud Applications からナビゲーションで呼び出すか、Ask Oracle のメニューから独立したモジュールとして開けるようにします。
• 拡張しやすく作る：後から業務部門が表示を変えたい項目は、動的コンポーネント（動的フォーム・動的テーブル）とレイアウトで作ると、ルールで制御できます。
• 部品化する：タブやパネルの中身はフラグメントに分けると、保守しやすく、表示を遅らせて初期表示を速くすることもできます。
• 画面幅を意識する：ルールの条件や表示切替で $responsive を使えます（例：mdUp は幅 768 ピクセル以上で真）。
• 文言は翻訳できるようにする：画面の文字列は翻訳用のリソースにして、Translations で管理します。
• メッセージの出し方を統一する：入力の誤りは項目の下にインラインで、処理の結果は通知（Fire Notification）で出す、と決めておきます。
• SaaS と外部データの組み合わせ（マッシュアップ）：Fusion のデータはカタログのサービス接続、外部のデータは REST エンドポイントのサービス接続で取り込みます。高度な認証方式が必要な外部 API や、Fusion の外で動かす要件は Web アプリにします。

コード例

標準コンポーネントで作る入力フォーム（抜粋）

Redwood の見た目は標準コンポーネントとテーマで揃えます。独自の CSS で色や書式を変えるのは最小限にします。

x-supplier-request の作成ページ（抜粋・例）

<oj-form-layout max-columns="2" direction="row">
  <oj-input-text label-hint="仕入先名" value="{{ $variables.request.supplierName }}" required></oj-input-text>
  <oj-input-text label-hint="担当者メール" value="{{ $variables.request.contactEmail }}"></oj-input-text>
  <oj-input-number label-hint="年間取引見込額（円）" value="{{ $variables.request.annualAmount }}"></oj-input-number>
</oj-form-layout>
<oj-button chroming="callToAction" on-oj-action="[[ $listeners.submitButtonAction ]]">申請する</oj-button>

{{ }} は双方向（入力すると変数に書き戻される）、[[ ]] は一方向のバインドです。ボタンの ojAction イベントはイベント・リスナー（$listeners.submitButtonAction）を通じてアクション・チェーンを起動します。

画面設計シート（このサイト独自のフォーマット）

screen-design.yaml（例・架空）

appUi:
  id: x-supplier-request
  purpose: 購買担当が新規仕入先の登録を申請する
  entry: 調達の作業領域からナビゲーションで呼び出す
pages:
  - id: main-start
    template: 入口（Welcome 系）
    contents: [申請の検索, 新規申請ボタン, 自分の申請一覧]
  - id: main-create
    template: 作成・編集（Simple Create and Edit 系）
    components: [フォーム（動的フォーム）, 送信ボタン]
    messages:
      inline: 入力チェック（必須・形式）
      notification: 送信結果
data:
  fusion: カタログのサービス接続（仕入先）
  external: REST エンドポイントのサービス接続（与信チェック API・架空）
extensibility:
  dynamicForm: true   # 後から業務部門がルールで表示を変えられるようにする

落とし穴とベストプラクティス

よくあるミス

• テンプレートを使わずにゼロから画面を作る：他の Redwood 画面と操作感がずれ、ユーザー教育と保守の負担が増えます。
• 見た目の独自化を要件にしてしまう：独自のルック・アンド・フィールが必須なら、App UI ではなく Web アプリの領域です。
• Redwood コンポーネントや実行時依存を古いまま放置する：パターンが使えない、Designer が開かないなどの原因になります。
• 拡張を想定しない作りにする：固定のフォームで作ると、後から表示をルールで変えられません。

• 画面案の段階で「どのテンプレート・パターンか」をレビュー観点に入れます。
• 業務ユーザーとの確認は PowerPoint の画面案で早めに行い、開発後の手戻りを減らします。
• 1画面1目的を守り、1ページに機能を詰め込みすぎないようにします。

試験対策ポイント

• 対応する試験：Redwood 模擬テスト の「Redwood エクスペリエンス（The Redwood Experience）」「Redwood アプリケーションの設計と開発（Designing and Developing Redwood Applications）」
• 新しいアプリケーション・プラットフォームが必要な理由（体験の統一、Oracle と同じ道具での拡張、アップデートに耐える拡張）。
• 構成要素：テンプレート・パターン・コンポーネント（Oracle JET ベース）。
• 設計の流れ：特定 → PowerPoint テンプレートで詳細化 → 検証 → 構成・開発 → テレメトリで改善。
• パターンは Components タブ（Component Exchange）から導入し、Create Page の Choose Page Content で選ぶ。
• 独自の App UI を作る前に、既存アプリの構成で済まないかを検討する。

公式ドキュメント

• Create Pages From Patterns（Building Responsive Applications with Visual Builder Studio）
• Create Pages From Templates
• Add an Application to the Oracle Cloud Applications Ecosystem（App UI の作成）
• What Are Fragments?
• Oracle University：Become a Fusion Redwood Platform Developer（学習パス）
• Oracle University：Developing Redwood Applications with Visual Builder Studio（学習パス。2026-09-30 にアーカイブ予定と記載）
• Oracle University：Design and Develop Redwood Applications（同上）
• Oracle Redwood Application Developer Certification（Oracle Visual Builder ブログ）

関連ページ

• Visual Builder 開発の基礎
• Redwood ページの拡張
• Redwood UX と AI・自動化機能
• 拡張の全体像