2.1.79. UIプラグイン一覧¶
2.1.79.1. サードパーティ製ライブラリ¶
これらのプラグインは Nablarch UI開発基盤が依存している外部ライブラリを含むものであり、 その性質上、プロジェクト側でのカスタマイズは想定していない。
なお、これらはUI開発基盤のリリース配布物に同梱していない。 UI開発基盤の導入 の手順に従って作業することで別途ダウンロードするようになっている。
プラグインID | 名称 | カスタマイズ | 概要 |
---|---|---|---|
es6-promise | ES6 Promise API ポリフィル | 不可 | ES6標準の非同期処理APIであるPromiseライブラリのポリフィル 一部の開発用コマンドの中で使用している。 |
font-awesome | WebFontアイコン | 不可 | WebFontによるアイコン画像とそれを表示するためのスタイル定義。 |
jquery | jQueryライブラリ | 不可 | W3C DOM APIの互換レイヤを提供するライブラリ。 |
less | LESSコンパイラ | 不可 | LESS記法で記述されたスタイル定義を通常のCSSに展開するツール |
rquirejs | AMDモジュールローダ/コンパイラ | 不可 | AMD(Asynchronous Module Definition) 形式で記述されたJavaScriptライブラリを管理するライブラリおよびminifyツール |
requiejs-text | テキストファイルAMD拡張 | 不可 | 通常のテキストファイルをAMDモジュールとして管理するためのrequirejs 拡張 |
shelljs | プラットフォーム互換コマンド | 不可 | cd/grep/ln などの主要基本コマンドのnode.jsによる実装。 一部の開発用コマンドの中で使用している。 |
sugar | JavaScriptコアAPI拡張 | 不可 | String/Array/Number などのコアクラスを拡張する。 また、Array.forEach など一部のES5標準APIのポリフィルを提供する。 |
2.1.79.2. CSS共通スタイルプラグイン¶
画面の表示制御を行うスタイル定義を含むプラグイン。 Nablarch UI開発基盤のスタイルは全て LESS記法を用いて記述している。
プラグインID | 名称 | カスタマイズ | 概要 |
---|---|---|---|
nablarch-css-core | コアスタイル定義 | 不可 | Nablarchのスタイル定義における共通基盤となる以下のファイルを含む。
|
nablarch-css-base | HTML基本要素スタイル | 非推奨 | reset.less で除去されたHTMLの基本要素のスタイルを再定義する。 修正時の影響が大きいので、カスタマイズは推奨しない。 |
nablarch-css-common | NAF既定CSSスタイル定義 | 可 | 精査エラーメッセージの表示色などNAF側で指定されているCSSクラスの内容を定義する。 |
nablarch-css-color-default | カラースキーム定義 | 必須 | 画面全体の基本配色を定義する。 |
nablarch-css-conf-wide | ワイド表示モード定義 | 可 | レスポンシブ対応画面におけるワイド表示モード(デバイス/ウィンドウの横論理ピクセル数が1024超)での画面レイアウトを定義する。 |
nablarch-css-conf-compact | コンパクト表示モード定義 | 可 | レスポンシブ対応画面におけるコンパクト表示モード(デバイス/ウィンドウの横論理ピクセル数が640超 1024未満)における画面レイアウトを定義する。 |
nablarch-css-conf-narrow | ナロー表示モード定義 | 可 | レスポンシブ対応画面におけるナロー表示モード(デバイス/ウィンドウの横論理ピクセル数が640未満)における画面レイアウトを定義する。 |
nablarch-css-conf-multicol | マルチレイアウト表示モード定義 | 可 | マルチレイアウト表示モード(本表示モードはワイドモードをベースとしている)における画面レイアウトを定義する。 本モード使用時は、画面サイズに応じた表示モードの切替(レスポンシブ対応)は使用できない。 |
2.1.79.3. 表示モード切替用プラグイン¶
CSSフレームワーク の機能である表示モードを切り替えを実現するためのプラグイン。
プラグインID | 名称 | カスタマイズ | 概要 |
---|---|---|---|
nablarch-device-media_query | 表示モード切替用プラグイン | 可 | MediaQueryによって、 表示モードを切り替える機能を実装する。 表示モード切替えの条件を変更する場合は、 本プラグインをカスタマイズする。 プラグインは、/WEB-INF/tags/device/media.tag として実装されている。 |
2.1.79.4. 特定端末向けパッチプラグイン¶
UserAgent判定により、特定の端末のみで有効となるスクリプトやスタイル定義からなるプラグイン。 ただし、いわゆる feature-detection による判定を行うものについてはここには含まない。
重要
システムサポート外の端末を対象としたプラグインは、あらかじめ除去しておくこと。 ( UI開発基盤の導入 の「プロジェクトで使用するプラグインの選定」の項を参照。)
プラグインID | 名称 | カスタマイズ | 概要 |
---|---|---|---|
nablarch-device-fix-base | UserAgentによるデバイス判定 | 可 | リクエストごとにサーバサイド処理でUserAgent判定を行い その結果をJavaScriptのグローバル変数および、<body>要素のクラス属性 に設定する。 なお、ローカル表示ではJavaScriptによるUserAgent判定を行う。 |
nablarch-device-fix-ios | ios向けパッチ | 可 | iOSの標準ブラウザにおける表示不具合を回避するためのスクリプトおよびスタイル定義。 |
nablarch-device-fix-android_browser | android向けパッチ | 可 | androidの標準ブラウザにおける表示不具合を回避するためのスクリプトおよびスタイル定義。 |
2.1.79.5. 開発用ツールプラグイン¶
開発作業において使用する各種ツールからなるプラグイン。
これらのツールの使用方法については UI開発基盤の導入 を参照すること。
プラグインID | 名称 | カスタマイズ | 概要 |
---|---|---|---|
nablarch-dev-tool-installer | Nablarch UI開発基盤 標準プラグインインストーラー | 不可 | Nablarch UI基盤標準プラグインをプロジェクト側にインストールするスクリプト。 |
nablarch-dev-tool-server | Nablarch UI開発基盤 テスト用簡易サーバー | 不可 | Nablarch UI開発基盤自体の各種テストに用いる簡易アプリケーションサーバー |
nablarch-dev-ui_test-support | Nablarch UI開発基盤 テストケース用資源 | 不可 | Nablarch UI開発基盤自体のテストケースで使用しているテストツール類 (qunit.js など) |
nablarch-dev-tool-uibuild | ウェブアプリケーション資源 ビルドスクリプト | 可 | ウェブアプリケーション上で公開される資源を各プラグインから収集し、
サーブレットコンテキスト配下に配置するスクリプト。 スクリプトのミニファイおよびスタイル定義のLESSコンパイルとミニファイも合わせて行う。 |
nablarch-dev-tool-update_support | Nablarch 標準プラグイン 更新補助スクリプト | 不可 | 利用しているプラグインとリリース資材のプラグイン間でバージョンが異なるプラグイン名を出力するスクリプト。 |
2.1.79.6. 業務画面JSPローカル表示機能プラグイン¶
以下のプラグインには 業務画面JSPローカル表示機能 およびその拡張機能を実現するための各種スクリプトなどが含まれる。
使用方法については HTML/JSP作成ガイド を参照すること。
プラグインID | 名称 | カスタマイズ | 概要 |
---|---|---|---|
nablarch-dev-ui_demo-core | ローカル表示用JSPレンダラー | 不可 | 業務画面JSPをDOMに直接変換してプレビューを表示するJavaScript |
nablarch-dev-ui_demo-config | ローカル表示時変数定義 | 必要 | JSPのレンダリング時に参照する各種スコープ変数の値を設定する。 (ログインユーザ名など) |
nablarch-dev-ui_demo-core-lib | ローカル表示用タグライブラリ スタブ | 可 | 下記のタグのレンダリングを行うスクリプト群
|
nablarch-dev-ui_tool-base-core | 業務画面JSPローカル表示機能のベースコアプラグイン | 不要 | 業務画面JSPローカル表示機能のベースとなる機能を実装する。 |
nablarch-dev-ui_tool-base-config | 業務画面JSPローカル表示機能のベースコンフィギュレーションプラグイン | 必須 | 業務画面JSPローカル表示機能のリソースを管理する。 |
nablarch-dev-ui_tool-jsp_verify | JSP検証ツールプラグイン | 可 | 業務画面JSPローカル表示機能で使用されるJSPファイルの検証の実装。 ローカル表示や設計書表示用の属性のチェックを行う。 IE8の場合は、検証処理は実行しない(IE8には未対応)。 |
nablarch-dev-ui_tool-spec_view-core | 設計書ビューコアプラグイン | 不要 | 設計書ビュー表示機能 の実装。 |
nablarch-dev-ui_tool-spec_view | 設計書ビュープラグイン | 不要 | 設計情報をJSPから取得する拡張機能。
(jQueryの拡張プラグインとして提供する。) 画面設計書ViewなどJSPの値を取得、変換 する際に本拡張機能が利用できる。 |
nablarch-dev-ui_tool-spec_view-resource | 設計書ビュー用のリソース管理プラグイン | 可 | 表示される設計書のテンプレート。 フォーマットを変更する場合は、 本プラグインに含まれるSpecSheetTmeplate.xlsx を修正し、htm形式で保存する。 |
2.1.79.7. JavaScriptユーティリティプラグイン¶
JavaScriptのコアライブラリをサポートするユーティリティスクリプト。
プラグインID | 名称 | カスタマイズ | 概要 |
---|---|---|---|
nablarch-js-util-bigdecimal | 簡易BigDecimalライブラリ | 不可 | JavaScriptのNumber型(32bit浮動少数)を使用した場合に発生する誤差を回避するために使用する簡易BigDecimal型実装クラス。 ただし、内部的には32bit浮動少数を使用するため、 有効桁が15桁を超える場合は使用できない。 |
nablarch-js-util-date | 日付フォーマット変換ライブラリ | 可 | Javaのjava.util.SimpleDateFormatのサブセットとなる日付フォーマット変換を実装するユーティリティクラス。 |
nablarch-js-util-consumer | 簡易Tokenizer/Parser | 不可 | ミニ言語のパーサの実装に使用する簡易パーサ |
2.1.79.8. UI部品ウィジェットプラグイン¶
UI部品ウィジェット を実装するタグファイル・スクリプト・スタイル定義などを格納するプラグイン。
プラグインID | 名称 | カスタマイズ | 概要 |
---|---|---|---|
nablarch-widget-core | JSウィジェット基盤クラス | 不可 | UI部品ウィジェット一覧 の中で共通的に使用されるJavaScript部品を格納するプラグイン。 jQueryのカスタムセレクタもここに含まれる。 |
nablarch-widget-box-base | 表示領域ウィジェット共通テンプレート | 可 | 表示領域ウィジェットで共通的に使用されるCSS定義を実装する。 |
nablarch-widget-box-content | コンテンツ用表示領域ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-box-img | 画像表示ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-box-title | タイトル用表示領域ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-button | ボタンウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-collapsible | 開閉機能スクリプト | 非推奨 | 画面内の領域を開閉する機能を実装するスクリプト 階層(ツリー)表示テーブルウィジェット などから使用される。 |
nablarch-widget-column-base | カラムウィジェット共通プラグイン | 可 | カラムウィジェットで使用される以下の共通的な 機能を実装する。
|
nablarch-widget-column-checkbox | テーブル複数行選択用チェックボックスカラムウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-column-code | コード値ラベル表示用カラムウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-column-label | ラベル表示用カラムウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-column-link | リンク表示用カラムウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-column-radio | テーブル行選択用ラジオボタンカラムウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-base | 入力項目ウィジェット共通テンプレート | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-block | 入力フォームブロック | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-calendar | カレンダー日付入力ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-checkbox | チェックボックス入力項目ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-file | ファイル選択ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-hint | 入力内容注記表示ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-label | 表示項目ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-label_block | 表示ブロックウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-label_id_value | ID:値セット項目表示ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-listbuilder | リストビルダー入力項目ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-password | パスワード入力ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-pulldown | プルダウン入力項目ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-radio | ラジオボタン入力項目ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-text | 単行テキスト入力項目ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-field-textarea | 複数行テキスト入力項目ウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-link | リンクウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-multicol-cell | マルチレイアウト用列定義ウィジェット | 可 | マルチレイアウトで使用する列を表すタグ(layout:cell)
を実装する。 詳細は 使用例 を参照。 |
nablarch-widget-multicol-row | マルチレイアウト用行定義ウィジェット | 可 | マルチレイアウトで使用する行を表すタグ(layout:row)
を実装する。 詳細は 使用例 を参照。 |
nablarch-widget-placeholder | placeholder属性ポリフィル | 非推奨 | IEなどのplaceholder属性を実装していないブラウザ向けのポリフィル実装 |
nablarch-widget-readonly | 変更不可項目制御 | 非推奨 | readonly属性の拡張。 通常のreadonly属性とは異なり、プルダウンやチェックボックスの選択状態の変更も抑止できる。 |
nablarch-widget-slide-menu | スライドメニューウィジェット | 必須 | narrow,compact表示でメニューを省スペース化するサンプル機能。 JavaScript,LESSの定義はそのまま利用できるが、 JSPはPJ側で修正する必要がある。 |
nablarch-widget-spec | 画面仕様記述用ウィジェット | 可 | 画面仕様の情報を記述するタグの実装。 設計書ビュー表示プラグインはこのタグから情報を取得した情報を使用する。 このタグはサーバ表示には影響を与えない。 |
nablarch-widget-spec-meta_info | メタ情報記述用ウィジェット | 可 | 設計書作成者等の情報を記述するためのタグの実装。 設計書ビュー表示プラグインは、このタグから 取得した情報を使用する。 このタグはサーバ表示には影響を与えない。 |
nablarch-widget-tab | タブウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-table-base | テーブルウィジェットの共通プラグイン | 可 | テーブルウィジェットで使用される以下の共通的な機能が実装されている。
|
nablarch-widget-table-plain | 一覧テーブルウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-table-row | マルチレイアウトテーブル | 可 | 左記ウィジェットの実装 |
nablarch-widget-table-search_result | 検索結果テーブルウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-table-tree | 階層(ツリー)表示テーブルウィジェット | 可 | 左記ウィジェットの実装 |
nablarch-widget-toggle-checkbox | チェックボックスの全選択/全解除プラグイン | 可 | リンクやボタンにチェックボックス全選択/全解除の機能を持たせるためのプラグイン。 |
nablarch-widget-tooltip | ツールチップ表示プラグイン | 可 | マウスオーバーにより、補足情報をポップアップで表示する機能をもつプラグイン。 |
2.1.79.9. UIイベント制御部品プラグイン¶
画面上のイベント制御を宣言的に定義する各種ウィジェットを実装するプラグイン。
プラグインID | 名称 | カスタマイズ | 概要 |
---|---|---|---|
nablarch-js-submit | Nablarchカスタムサブミットイベント | 不可 | Nablarchフレームワークのサブミット時処理(nablarch_submit)の実行前後に発火するjQueryグローバルカスタムイベントを定義する。 |
nablarch-widget-event-base | イベントウィジェットベースプラグイン | 不可 | イベントウィジェットのベースプラグイン。 JSPローカル表示時に、イベントのエミュレーションを行うために必要な機能を実装する。 |
nablarch-widget-event-listen | ページ内イベント定義 | 不可 | 画面内で発生する指定されたイベントを監視し、 各種イベントアクションを実行するウィジェットの実装 |
nablarch-widget-event-autosum | 自動集計イベント | 不可 | 左記イベントアクションの実装 |
nablarch-widget-event-dialog | ダイアログ表示イベントアクション アラートダイアログ表示イベントアクション 確認ダイアログ表示イベントアクション | 不可 | 左記イベントアクションの実装 ダイアログ表示は、アラート、確認ダイアログから使用される。 |
nablarch-widget-event-send_request | XHRリクエスト送信イベントアクション | 不可 | 左記イベントアクションの実装 |
nablarch-widget-event-toggle | disabled 項目切替えイベントアクション 属性値の動的切替 readonly 項目切替えイベントアクション | 不可 | 左記イベントアクションの実装 |
nablarch-widget-event-window_close | ウィンドウクローズイベントアクション | 不可 | 左記イベントアクションの実装 |
nablarch-widget-event-write_to | 項目内容変更イベントアクション | 不可 | 左記イベントアクションの実装 |
2.1.79.10. 業務画面テンプレートプラグイン¶
業務画面テンプレート の実体となるタグファイルと、それに付随するスクリプトやスタイル定義から構成されるプラグイン。 また、各テンプレートからインクルードされる共通領域を描画するJSPのサンプルもここに含まれる。
プラグインID | 名称 | カスタマイズ | 概要 |
---|---|---|---|
nablarch-template-base | 業務画面ベースレイアウト | 可 | 左記テンプレートの実装。 |
nablarch-template-page | 業務画面標準テンプレート | 可 | 左記テンプレートの実装。 |
nablarch-template-error | エラー画面テンプレート | 可 | 左記テンプレートの実装。 |
nablarch-template-head | HTML head要素定義インクルード | 可 | head要素の内容を出力するJSP。 業務画面ベースレイアウト からインクルードされ、 以下の内容を定義している。
|
nablarch-template-multicol-head | マルチレイアウト用HTML head要素定義インクルード | 可 | マルチレイアウト用のhead要素の内容を出力するJSP。 業務画面ベースレイアウト からインクルードされ、 以下の内容を定義している。
使用方法は、 レイアウトの調整方法 を参照。 |
nablarch-template-js_include | HTML script要素定義インクルード | 可 | scriptタグの内容を出力するJSP。 業務画面ベースレイアウト からインクルードされる。 ちなみに 業務画面ベースレイアウト ではこのインクルードをHTMLの最後(bodyタグの末端)に出力している。 |
nablarch-template-app_nav | アプリケーション共通ナビゲーションメニュー サンプル | 必須 | 業務画面の共通ナビゲーション領域を描画するJSPおよびスタイル定義などのリソース。
JSPは 業務画面標準テンプレート からインクルードされる。 内容はUI開発基盤用プロジェクトテンプレートと同じものなので、PJ側で修正する必要がある。 |
nablarch-template-app_header | アプリケーション共通ヘッダー サンプル | 必須 | 業務画面の共通ヘッダー領域を描画するJSPおよびスタイル定義などのリソース。
JSPは 業務画面標準テンプレート からインクルードされる。 内容はUI開発基盤用プロジェクトテンプレートと同じものなので、PJ側で修正する必要がある。 |
nablarch-template-app_footer | アプリケーション共通フッターサンプル | 必須 | 業務画面の共通フッター領域を描画するJSPおよびスタイル定義などのリソース。
JSPは 業務画面標準テンプレート からインクルードされる。 内容はUI開発基盤用プロジェクトテンプレートと同じものなので、PJ側で修正する必要がある。 |
nablarch-template-app_aside | アプリケーション共通サイドメニューサンプル | 必須 | 業務画面の共通サイドメニューを描画するJSPおよびスタイル定義などのリソース。
JSPは 業務画面標準テンプレート からインクルードされる。 内容はUI開発基盤用プロジェクトテンプレートと同じものなので、PJ側で修正する必要がある。 |