UIプラグイン¶

UI開発基盤では、すべての成果物を UIプラグイン と呼ばれる単位で管理している。 いいかえると、UI開発基盤の実体は UIプラグイン の集まりそのものである。

各 UIプラグイン は、単一の機能や目的に対して作成される。 そのため、1つの UIプラグイン には、その機能を実現するために必要な成果物一式が全て含まれる。 (タグファイル、JavaScript、css、テスト/サンプルコードなど)

適用プロジェクト側でUI開発基盤のカスタマイズを行う場合は、 対応するプラグインをコピーした上で、必要な改修を行ことになる。 (カスタマイズ作業については UI標準のカスタマイズとUI開発基盤への反映 を参照すること。)

以下の表は、UI開発基盤に含まれる UIプラグイン の分類を表したものである。

カテゴリ	内容	カテゴリ内の主要プラグイン
外部ライブラリ	サードパーティ製ライブラリ (プロジェクト側でのカスタマイズは不可)	jQuery(DOM API抽象化) sugarjs(ネイティブAPI拡張・ES5ポリフィル) requirejs(動的スクリプトロード・ミニファイ) fontawesome(アイコン用WebFont)
コアJS部品	JavaScriptで実装された共通処理 とスクリプトロードを定義するインクルード (プロジェクト側でのカスタマイズは不可)	スクリプトロード/ドキュメントロード共通処理 Nablarch Submit機能連動カスタムイベント JavaScriptウィジェット共通基底クラス
コアスタイル定義	スタイル定義の基盤となる共通定義。 (プロジェクト側でのカスタマイズは不可)	CSS3プロパティ互換CSSクラス定義 CSSリセット 基本要素スタイル定義 CSSグリッドフレームワーク
共通スタイル変数	画面全体で共通的に参照するスタイル変数定義 いわゆる「デザインテーマ」を構成する	カラースキーム定義 タイポグラフィ定義 グリッドサイズ定義
動作環境適合用部品	各種ブラウザ、デバイス間の差異を吸収する ための基盤を定義する。 各環境に適合するためのCSS/JavaScript/ インクルードファイルと、それらを適宜ロード するための部品とから構成される。	ユーザエージェント判定と環境固有部品ロード 表示モード制御(Media Query) ワイド表示モードレイアウト コンパクト表示モードレイアウト ナロー表示モードレイアウト iOS6/7 用パッチ
ページテンプレート	業務画面の構成を定義する テンプレートタグファイルおよびスタイル定義	業務画面テンプレート(2カラムレイアウト) 共通エラー画面テンプレート サブウィンドウテンプレート
業務共通領域	業務画面の共通領域を描画するインクルード およびスタイル定義	共通ヘッダー領域 サイドメニュー領域
UIウィジェット	画面内の各UI部品を描画するタグファイルと それに付随するJavaScriptやCSSなどからなる。 UI標準の「UI部品カタログ」に記載された 各部品に対応する。	プルダウンメニュー入力ウィジェット カレンダー日付入力ウィジェット 確定ボタンウィジェット 検索結果表示用テーブルウィジェット
UIイベント部品	一般的な業務画面で使われる動的処理を マークアップによる宣言的な定義で実装する 部品群。	イベントリスナーウィジェット サブウィンドウイベントリスナーウィジェット Ajaxリクエスト送信アクション 活性/非活性制御アクション ダイアログ表示アクション
JSPローカル表示機能	ブラウザのみで業務画面JSPのプレビューと 動作デモを行うために必要な各種部品群。	JSPローカルレンダリング用JavaScript jstlタグライブラリスタブ nablarchタグライブラリスタブ
画面設計書表示機能	JSPローカル表示機能の拡張機能である 画面設計書ビュー表示を実装する部品群	画面設計書テンプレートファイル 画面設計書ビュー描画エンジン
開発用コマンド	UI開発基盤上で作業をすすめる際に使用する 各種ツール。	ビルドコマンド JSP規約チェック サーバ動作確認用サーバ起動コマンド ローカル動作確認用サーバ起動コマンド

nablarch-widget-field-calendar    # プラグイントップ
  ├── package.json                # プラグイン依存関係定義
  ├── bin                         # 開発用コマンド
  ├── ui_local                    # ローカル表示/開発用コマンドソースコード
  │    └── js
  ├── ui_public                   # サーバ動作成果物(サーブレットコンテキスト配下の配置物)
  │    ├── css
  │    │     └── ui
  │    │            └── field-calendar.less
  │    ├── img
  │    ├── include
  │    ├── js
  │    │     └── nablarch
  │    │           └── ui
  │    │                 ├── DatePicker.js
  │    │                 └── DatePicker.template
  │    └── WEB-INF
  │          └── tags
  │                └── widget
  │                      └── field
  │                            └── calendar.tag
  └── ui_test                     # テスト/動作デモ用ソースコード