For the complete documentation index, see llms.txt. This page is also available as Markdown.

プロジェクト構造

トップレベルディレクトリ

chamilo/
├── assets/          # フロントエンドのソースコード
│   ├── vue/         # Vue 3 アプリケーション(コンポーネント、ビュー、ルーター、ストア)
│   ├── css/         # SCSS スタイルシート
│   └── js/          # レガシー JavaScript
├── config/          # Symfony の設定(ルート、サービス、パッケージ)
├── public/          # ウェブルート(index.php、レガシー PHP ページ、プラグイン)
│   ├── main/        # レガシー PHP モジュール(ツールごとにサブディレクトリ)
│   └── plugin/      # 組み込みおよびカスタムプラグイン
├── src/             # PHP ソースコード(Symfony バンドル)
│   ├── CoreBundle/  # プラットフォームの中核ロジック
│   ├── CourseBundle/# コース固有の機能
│   └── LtiBundle/   # LTI 1.3 統合
├── templates/       # Twig テンプレート
├── var/             # キャッシュ、ログ、アップロード(生成される)
├── vendor/          # Composer 依存関係(生成される)
├── node_modules/    # npm 依存関係(生成される)
└── translations/    # 翻訳ファイル

ソースコード (src/)

CoreBundle

最大のバンドル。注目すべきサブディレクトリ:

ディレクトリ
内容

Entity/

Doctrine エンティティ(User, Course, Session, ResourceNode など)

Controller/

管理コントローラー、API アクション、ページ(サブフォルダ Api/ には API Platform のカスタムアクションが含まれる)

Settings/

設定スキーマファイル(プラットフォーム設定)

Repository/

Doctrine リポジトリ

AiProvider/

AI プロバイダーの実装(OpenAI, Gemini, Mistral, DeepSeek, Grok)

Tool/

コースツールの定義

Security/

Voters、認証器、認可

EventListener/

イベントリスナー

EventSubscriber/

イベントサブスクライバー

Command/

Symfony コンソールコマンド

Migrations/

データベースマイグレーション

Twig/

Twig 拡張

Storage/

Flysystem ストレージアダプター

CourseBundle

コース固有のエンティティとロジック:

ディレクトリ
内容

Entity/

コースコンテンツのエンティティ(CDocument, CQuiz, CLp, CForum, CStudentPublication など)

Controller/

コースコントローラー

Settings/

コースレベルの設定スキーマ

Component/CourseCopy/

コースのインポート/エクスポート(Common Cartridge, Moodle)

LtiBundle

LTI 1.3 統合:

ディレクトリ
内容

Entity/

LTI プラットフォーム、ツール、デプロイメントのエンティティ

Controller/

LTI 起動および設定エンドポイント

フロントエンド (assets/vue/)


設定 (config/)

Symfonyは、ベースファイル packages/*.yaml を対応する環境サブディレクトリ(dev/prod/、または test/)内のファイルと自動的にマージするため、環境固有のファイルは異なる値のみを上書きすれば済みます。

ビルド設定

ファイル
目的

webpack.config.js

Webpack Encoreの設定(エントリーポイント、ローダー、プラグイン)

tailwind.config.js

Tailwind CSSの設定(コンテンツパス、テーマ拡張、プラグイン)

tsconfig.json

TypeScriptの設定

eslint.config.mjs

ESLintのルール(フラット設定)

.prettierrc.json

Prettierのフォーマットルール

すべてのファイルはプロジェクトのルートにあります。PostCSSプラグイン(Tailwind + Autoprefixer)は、webpack.config.js 内で enablePostCssLoader() を通じてインラインで設定されており、独立した postcss.config.js ファイルはありません。webpack.config.js はPostCSSを通じて間接的に tailwind.config.js を読み込むため、Tailwindの content または theme セクションの変更は、次回の yarn encore dev / yarn encore production の実行時に反映されます。

Webpackのエントリーポイント

ビルドでは以下のバンドルが生成されます:

JavaScript:

  • vue — メインのVue 3アプリケーション(assets/vue/main.js

  • vue_installer — インストールウィザード(assets/vue/main_installer.js

  • legacy_app, legacy_exercise, legacy_lp, legacy_document — Vueに移行していないページ用のレガシーJS

CSS:

  • app — メインスタイルシート(assets/css/app.scss

  • および特化スタイルシート:chat, document, editor, editor_content, markdown, print, responsive, scorm


CSSの構造 (assets/css/)


Tailwind CSS

TailwindはPostCSSを介して統合されています。ファイル assets/css/_tailwind.scss はベース、コンポーネント、ユーティリティの各レイヤーを出力し、ファイル assets/css/app.scss が最初にこれをインポートすることで、Tailwindのユーティリティが他のすべての部分ファイルで利用可能になります。Tailwindの設定 — コンテンツパスのパージ、テーマの拡張、プラグイン — はプロジェクトのルートにある tailwind.config.js (/var/www/chamilo/tailwind.config.js) に配置されています。

カスタムユーティリティクラスおよび @layer で定義されたコンポーネントクラス ( app.scss で確認可能) は、Tailwindのレイヤー規約に従い、ユーザー定義のクラスが生成されたユーティリティと同じ特異度ルールを尊重するようになっています。

カラーテーマ

Chamiloは、管理インターフェース (管理者 > カラーテーマ) から直接設定可能なカラーテーマシステムをサポートしています。保存された各テーマは、var/themes/ の下に専用のディレクトリにファイルとして記録されます:

ファイル colors.css は、CSSカスタムプロパティを rgb() 値ではなく、スペースで区切られたRGBチャンネルのトリプレットとして定義しており、これによりTailwindが追加の設定なしで不透明度のバリエーション (例: bg-primary/50) を構成できるようになっています:

テーマレイヤーは、コンパイルされたTailwind/SCSSパッケージの上に位置します。ブラウザはメインストylesheetの後に colors.css を読み込むため、テーマの変更はコンパイルステップを必要とせずに即座に有効になります。

最終更新

役に立ちましたか?