VJSPフロントエンドアーキテクチャ説明ドキュメント
1. プロジェクト概要
VJSPはWebベースのエンタープライズ級アプリケーションプラットフォームであり、フロントエンドとバックエンドの分離アーキテクチャを採用しています。フロントエンドはカスタムフレームワーク（VJSPフレームワーク）を使用して構築され、多数のサードパーティライブラリとコンポーネントを統合し、多言語対応、テーマ切り替えなどの機能をサポートしています。このシステムには、ユーザー管理、権限制御、ワークフロー、フォーム処理などのエンタープライズアプリケーションで一般的な機能が含まれています。
2. 技術スタック
2.1 コアフレームワーク
- VJSP自社開発フレームワーク (vjsp.all.min.js)
2.2 UIコンポーネントライブラリ
- EasyUI (vjsp.eui.min.js)
- LayUI
- ZTree (vjsp.zt.min.js)
2.3 チャートと可視化
- ECharts 5 (vjsp.ec.min.js)
2.4 リッチテキストエディタ
- UEditor (vjsp.ue.min.js)
2.5 日付選択
- LayDate
2.6 ファイルアップロード
- WebUploader (vjsp.wu.min.js)
2.7 マルチメディア再生
- Plyr (vjsp.pl.min.js)
2.8 カレンダー
- FullCalendar (vjsp.fc.min.js)
3. プロジェクト構造
vjsphtml/
├── CommonDialog/ # 共通ダイアログコンポーネント
├── home/ # ホーム関連ページ
│ ├── main.html # デスクトップ版メインインターフェース
│ └── portal.html # ポータルページ
├── httpStatus/ # HTTPステータスページ
├── modules/ # 業務モジュール
│ └── customer/ # 顧客管理モジュール
├── system/ # システム管理モジュール
│ ├── account/ # アカウント管理
│ ├── dept/ # 部門管理
│ ├── dic/ # データ辞書
│ ├── exportSql/ # SQLエクスポート
│ ├── flowRole/ # フロー役割
│ ├── log/ # ログ管理
│ ├── menu/ # メニュー管理
│ ├── role/ # 役割管理
│ └── user/ # ユーザー管理
├── vjsp-resource/ # リソースファイル
│ └── resource/
│ └── static/
│ ├── theme-customMade/ # カスタムテーマ
│ ├── theme-default/ # デフォルトテーマ
│ └── workflow/ # ワークフローリソース
├── vjsp-static/ # 静的リソース
│ ├── script/ # JSスクリプトファイル
│ ├── style/ # CSSスタイルファイル
│ ├── theme-default/ # デフォルトテーマリソース
│ └── thirdlibs/ # サードパーティライブラリ
│ ├── easyui/ # EasyUIライブラリ
│ ├── echarts5/ # EChartsチャートライブラリ
│ ├── fullcalendar/ # カレンダーコンポーネント
│ ├── laydate/ # 日付選択ツール
│ ├── layui/ # LayUIコンポーネントライブラリ
│ ├── plyr/ # メディアプレーヤー
│ ├── ueditor/ # リッチテキストエディタ
│ ├── webuploader/ # ファイルアップロードコンポーネント
│ └── ztree/ # ツリーコントロール
├── vjspflow/ # ワークフロー関連ページ
└── _vjsp_setting/ # システム設定ファイル4. コア機能モジュール
4.1 認証と認可
- トークンベースの認証
- 権限制御システム
- マルチロールサポート
- スーパー管理者特権
4.2 ユーザーインターフェース
- マルチテーマサポート
- カスタムテーマ
- 多言語サポート（中国語、英語など）
4.3 システム管理
- ユーザー管理
- 役割管理
- 部門管理
- メニュー管理
- 権限設定
- ログ管理
- データ辞書
4.4 ワークフロー
- プロセス定義
- プロセスインスタンス
- タスク管理
- プロセス記録
4.5 フォームシステム
- 動的フォーム
- フォーム検証
- フォームデータ処理
5. アーキテクチャの特徴
5.1 フロントエンドとバックエンドの分離
- フロントエンドはUIレンダリングとユーザーインタラクションを担当
- バックエンドはRESTful APIを提供
- トークンベースの認証
5.2 モジュール設計
- 機能モジュールの独立したカプセル化
- ビジネスロジックの分離
- 拡張性が高い
5.3 マルチデバイス対応
- レスポンシブレイアウト
- デバイス認識と適応
5.4 国際化サポート
- 多言語切り替え
- 言語パック管理
- ローカライズ設定
5.5 テーマカスタマイズ
- テーマ切り替え機能
- カスタムテーマサポート
- 動的スタイル調整
6. 開発規範
6.1 ファイル命名
- HTMLファイル：機能名.html
- 言語ファイル：機能名.lang.言語コード.json
6.2 ディレクトリ構造
- 機能モジュールごとに編成
- 静的リソースの集中管理
- サードパーティライブラリの独立した保存
6.3 コードスタイル
- VJSPフレームワークに基づくコンポーネントベース開発
- イベント駆動型のインタラクション処理
- 統一されたAPI呼び出し方法
7. セキュリティメカニズム
- トークンベースの認証
- 詳細な権限制御
- インターフェース認証検証
- セッション管理
- セキュリティヘッダー設定
8. デプロイと実行
8.1 環境要件
- モダンブラウザのサポート
- IE9+との互換性（polyfillを通じて）
8.2 リソース読み込み
- 静的リソースのバージョン管理（URLパラメータ_t）
- オンデマンドでのコンポーネント読み込み
- キャッシュ制御
9. 拡張とカスタマイズ
9.1 新しいモジュールの追加
- modulesディレクトリに新しいモジュールディレクトリを作成
- モジュールのHTML、JS、CSSファイルを実装
- システムメニューに新しいモジュールエントリを追加
9.2 テーマカスタマイズ
- theme-customMadeディレクトリでスタイルファイルを修正
- 色、フォントなどのUI要素を調整
- 画像とアイコンリソースを更新
9.3 言語拡張
- 新しい言語パックファイルを作成（*.lang.言語コード.json）
- システム設定に新しい言語オプションを追加
- 言語切り替え機能を実装
10. ベストプラクティス
- VJSPフレームワークが提供するコンポーネントとAPIを使用
- モジュール化とコンポーネントベースの開発方法に従う
- サードパーティライブラリの機能を適切に利用
- モバイル対応とレスポンシブデザインに注意
- 国際化とローカライズサポートを実装