資産¶

Odooの資産を管理することは、他のアプリほど簡単ではありません。理由の一つは、いくつかの状況がありますが、すべての資産が必要とされるわけではありません。例えば、ウェブクライアントのニーズ、販売アプリのポイント、ウェブサイト、さらにはモバイルアプリケーションが異なります。また、一部の資産が大きいかもしれません。しかし、ほとんど必要ありません。その場合は、 :ref:`遅延（要求時） <frontend/assets/lazy_loading> ` になるようにしましょう。

アセットタイプ¶

アセットの種類は3つあります: code (js files), style (css or scss files) and templates (xml files).

コード

Odoo supports three different kinds of javascript files. All these files are then processed (native JS modules are transformed into odoo modules), then minified (if not in debug=assets mode) and concatenated. The result is then saved as a file attachment. These file attachments are usually loaded via a <script> tag in the <head> part of the page (as a static file).

スタイル

Styling can be done with either css or scss. Like the javascript files, these files are processed (scss files are converted into css), then minified (again, if not in debug=assets mode) and concatenated. The result is then saved as a file attachment. They are then usually loaded via a <link> tag in the <head> part of the page (as a static file).

テンプレート

テンプレート (静的な xml ファイル) は別の方法で処理されます。必要なときはいつでもファイルシステムから読み込まれ、結合されます。

ブラウザーが odoo をロードするたびに、 /web/webclient/qweb/ コントローラーを呼び出して、 :ref:`テンプレート <reference/qweb> ` を取得します。

ほとんどの場合、ブラウザはページを初めて読み込んだときにのみリクエストを実行することを知っておくと便利です。これは、これらのアセットのそれぞれが、ページソースに注入されるチェックサムに関連付けられているためです。 checksum は url に追加されます。つまり、キャッシュヘッダを長い期間に安全に設定することができます。

Bundles¶

Odoo assets are grouped by bundles. Each bundle (a list of file paths of specific types: xml, js, css or scss) is listed in the module manifest. Files can be declared using glob syntax, meaning that you can declare several asset files using a single line.

バンドルは、各モジュールの __manifest__.py で定義され、辞書を含む専用の assets キーが付いています。辞書はバンドル名 (キー) を含むファイル(値)のリストにマッピングします。次のようになります。

'assets': {
    'web.assets_backend': [
        'web/static/src/xml/**/*',
    ],
    'web.assets_common': [
        'web/static/lib/bootstrap/**/*',
        'web/static/src/js/boot.js',
        'web/static/src/js/webclient.js',
        'web/static/src/xml/webclient.xml',
    ],
    'web.qunit_suite_tests': [
        'web/static/src/js/webclient_tests.js',
    ],
},

以下は、ほとんどのodo開発者が知っておく必要がある重要なバンドルのリストです。

web.assets_common: このバンドルには、ウェブクライアント、ウェブサイト、および販売ポイントに共通するほとんどの資産が含まれています。これは、odoフレームワークの下位レベルのビルディングブロックを含むことになっています。 :file:`boot.js`ファイルが含まれていることに注意してください。これはodoモジュールシステムを定義しています。
web.assets_backend: このバンドルにはウェブクライアント固有のコードが含まれています (特にウェブクライアント/アクションマネージャ/ビュー/静的なXMLテンプレート)。
web.assets_frontend: このバンドルは、公開ウェブサイトに固有のすべてについてです: ecommerce、ポータル、フォーラム、ブログ、...
web.qunit_suite_tests: すべての javascript qunit テストコード (テスト、ヘルパー、モック)
web.qunit_mobile_suite_tests: モバイル固有のqunit テストコード

オペレーション¶

通常、アセットを扱うのは簡単です。assets_common や assets_backend など、よく使われるバンドルに新しいファイルを追加するだけです。しかし、いくつかのより具体的なユースケースをカバーするために利用可能な他の操作があります。

特定のアセットファイルをターゲットとするすべてのディレクティブ（すなわち） before, after, replace, remove) は、階層の上にあるマニフェストか、irのどちらかで、事前にそのファイルを宣言する必要があります。より低いシーケンスの sset レコード。

`append`¶

この操作は、1つまたは複数のファイルを追加します。最も一般的な操作なので、ファイル名を使用するだけで行うことができます。

'web.assets_common': [
    'my_addon/static/src/js/**/*',
],

デフォルトでは、バンドルに単純な文字列を追加すると、バンドルの末尾にあるglobパターンに一致するファイルが追加されます。明らかに、パターンは直接単一のファイルパスである可能性があります。

`prepend`¶

バンドルの先頭に1つまたは複数のファイルを追加します。

特定のファイルをバンドル内の他のファイルの前に置く必要がある場合に便利です (例えば、CSS ファイル)。 prepend 操作は次の構文で呼び出されます: ('prepend', <path> ) 。

'web.assets_common': [
    ('prepend', 'my_addon/static/src/css/bootstrap_overridden.scss'),
],

`前`¶

特定のファイルの前に1つまたは複数のファイルを追加します。

バンドルの開始時にファイルを事前に保留することは、十分に正確ではないかもしれません。 before ディレクティブは、指定されたファイルを*ターゲットファイルの前に*追加するために使用できます。通常のパスを3要素タプル ('before', <target>, <path> ) に置き換えることで宣言されます。

'web.assets_common': [
    ('before', 'web/static/src/css/bootstrap_overridden.scss', 'my_addon/static/src/css/bootstrap_overridden.scss'),
],

`変更後`¶

特定のファイルの後に1つまたは複数のファイルを追加します。

before と同じです。マッチするファイルは、ターゲットファイルの後に**追加されます。通常のパスを3要素のタプル ('after', <target>, <path> ) に置き換えることで宣言されます。

'web.assets_common': [
    ('after', 'web/static/src/css/list_view.scss', 'my_addon/static/src/css/list_view.scss'),
],

`include`¶

ネストされたバンドルを使用します。

include ディレクティブは、マニフェストのサイズを最小限に抑えるために、他のバンドルにバンドルを使う方法です。 Odoo では、複数の他のバンドルで使用されている一括処理にサブバンドル(規則でアンダースコアが付いています)を使用します。次のようにサブバンドルをペア`('include', <bundle>)`として指定できます。

'web.assets_common': [
    ('include', 'web._primary_variables'),
],

`remove`¶

1 つまたは複数のファイルを削除します。

場合によっては、バンドルから 1 つまたは複数のファイルを削除することもできます。 ('remove', <target> )`のペアを指定することで、 `remove ディレクティブを使用できます。

'web.assets_common': [
    ('remove', 'web/static/src/js/boot.js'),
],

`置換える`¶

アセットファイルを1つまたは複数のファイルに置き換えます。

資産を削除する必要があるだけではないとしましょう新しいバージョンの資産を同じ位置に挿入したいのです 3要素タプル ('replace', <target>, <path> )`を使用して、`replace ディレクティブを使用できます。

'web.assets_common': [
    ('replace', 'web/static/src/js/boot.js', 'my_addon/static/src/js/boot.js'),
],

注文を読み込み中¶

アセットがロードされる順序は時々決定的であり、主にスタイルシートの優先順位とスクリプトのセットアップのために決定的でなければなりません。 Odooの資産は以下のように処理されます。

アセットバンドルが呼び出されたとき（例：`t-call-assets="web.assets_common"）、アセットの空のリストが生成されます。
バンドルに一致するタイプ ir.asset のすべてのレコードはシーケンス番号で取得およびソートされます。次に、シーケンスが16未満のすべてのレコードが処理され、現在の資産リストに適用されます。
マニフェストに該当するバンドルのアセットを宣言するすべてのモジュールは、資産操作をこのリストに適用します。これはモジュールの依存関係の順序に従って行われます (例: `web`アセットは`website`の前に処理されます。ディレクティブがリストにすでに存在するファイルを追加しようとすると、そのファイルに対して何も処理されません。つまり、ファイルの最初の発生だけがリストに保存されます。
残りの ir.asset レコード (16 以上のシーケンスがあるもの) も処理され、適用されます。

Assets declared in the manifest may need to be loaded in a particular order, for example jquery.js must be loaded before all other jquery scripts when loading the lib folder. One solution would be to create an ir.asset record with a lower sequence or a 'prepend' directive, but there is another simpler way to do so.

アセットのリスト内の各ファイルパスの統一性が保証されているため、それを含むglob の前に特定のファイルを言及できる。そのファイルは、グローバルに含まれる他のすべてのファイルの前にリストに表示されます。

'web.assets_common': [
    'my_addon/static/lib/jquery/jquery.js',
    'my_addon/static/lib/jquery/**/*',
],

注釈

b モジュール a で宣言されたアセットを削除/置き換えるモジュールは、それに依存する必要があります。まだ宣言されていない資産を操作しようとすると、エラーになります。

遅延読み込み¶

たとえば、必要に応じてライブラリをロードするなど、ファイルやアセットバンドルを動的にロードする際に便利な場合があります。そのために、Odooフレームワークは :file:`@web/core/assets`にあるいくつかのヘルパー関数を提供します。

await loadAssets({
    jsLibs: ["/web/static/lib/stacktracejs/stacktrace.js"],
});

loadAssets(assets)¶

引数

assets (Object()) -- ロードされるべき様々な資産の説明

戻り値

Promise<void>

assets パラメータで説明されているアセットをロードします。次のキーを含むオブジェクトです。

キー	型	説明
`jsLibs`	`string[]`	javascriptファイルのURLのリスト
`cssLibs`	`string[]`	CSSファイルのURL一覧

useAssets(assets)¶

引数

assets (Object()) -- ロードされるべき様々な資産の説明

このフックは、コンポーネントが onWillStart メソッドでアセットをロードする必要がある場合に便利です。内部的に loadAssets を呼び出します。

アセットモデル (`ir.asset`)¶

ほとんどの場合、マニフェストで宣言された資産は主に十分です。しかし、より柔軟性を高めるために、フレームワークはデータベースで宣言された動的資産もサポートしています。

これは、`ir.asset`レコードを作成することによって行われます。それらはモジュールマニフェストで見つかったかのように処理され、マニフェストと同じ表現力を与えます。

名前

資産レコードの名前（識別目的のため）

bundle

資産が適用されるバンドル。

directive (default= append)

このフィールドは path (および必要に応じて`target` )がどのように解釈されるかを決定します。以下は、必要な引数と共に利用可能なディレクティブのリストです。

append: path
prepend: path
before: target, path
after: target, path
include: path (**bundle name**として解釈されます)
削除: path (削除するには ターゲットアセット と解釈されます)
replace: target, path

path

以下のいずれかを定義する文字列

アドオンファイルシステム内のアセットファイルへの**相対パス**
アドオンファイルシステム内の一連のアセットファイルに対する**globパターン**;
添付ファイルまたは外部アセットファイルへの**URL**;
include ディレクティブを使用している場合、バンドル名 を指定します。

target

バンドル内の位置を指定するターゲットファイル。replace、before、および `after`ディレクティブでのみ使用できます。

active (default= True)

レコードがアクティブかどうか

sequence (default= 16)

アセットレコードの順序を読み込んでいます(昇順)。シーケンスが 16 より低い場合は、マニフェストで宣言されたものよりも *前*にアセットが処理されることを意味します。

資産¶

アセットタイプ¶

Bundles¶

オペレーション¶

append¶

prepend¶

前¶

変更後¶

include¶

remove¶

置換える¶