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規約チェック
  • サーバ動作確認用サーバ起動コマンド
  • ローカル動作確認用サーバ起動コマンド

UIプラグインの構造

先に述べたように、1つのプラグインには、その機能を実現するために必要な様々なリソースおよび、 ドキュメントとテストが含まれる。

以下はプラグインのファイル構成を示した図である。 ( UIウィジェット:カレンダー日付入力ウィジェットプラグイン の例)

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                     # テスト/動作デモ用ソースコード

UIプラグインのバージョンについて

各プラグインごとに、以下の形式でバージョニングが行われる。

(メジャーバージョン) . (マイナーバージョン) . (バッチ番号)

各番号の意味は下記のとおりである。

区分 意味 初期値
メジャーバージョン

後方互換性を持たない修正に対してインクリメントする。

重要

後方互換性をもたない修正は、通常、 個別の派生プラグインとして開発することになるため 実際の運用では 1 固定となる。

1
マイナーバージョン 後方互換性を保つ修正(基本的には機能追加) に対してインクリメントする。 0
パッチ番号 後方互換性を保つ不具合の修正に対して インクリメントする。 0