ポータルとウェブサイトで Owl コンポーネントを使用する¶

この記事では、ポータルやウェブサイトで Owl コンポーネントを活用する方法を学びます。

概要¶

ウェブサイトまたはポータルで Owl コンポーネントを使用するには、いくつかのことを行う必要があります。

Owl コンポーネントを作成して public_components レジストリに登録します。
web.assets_frontend バンドルにそのコンポーネントを追加します
ウェブサイトまたはポータルページに「<owl-component>」タグを追加して、コンポーネントを使用します

1. フクロウコンポーネントの作成¶

シンプルにするために、"Hello, World!"をレンダリングする非常に単純なコンポーネントから始めましょう。セットアップが機能している場合は、一目でお知らせします。

まず、 /your_module/static/src/portal_component/your_component.xml にテンプレートを作成します。

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="your_module.YourComponent">
        Hello, World!
    </t>
</templates>

次に、 :file:`/your_module/static/src/portal_component/your_component.js`でそのコンポーネントのJavaScriptファイルを作成し、`public_components`レジストリに追加します。

import { Component } from "@odoo/owl";
import { registry } from "@web/core/registry"

export class YourComponent extends Component {
    static template = "your_module.YourComponent";
    static props = {};
}

registry.category("public_components").add("your_module.YourComponent", YourComponent);

2. `web.assets_frontend`バンドルにコンポーネントを追加する¶

web. ssets_frontend バンドルは、ポータルとウェブサイトで使用されるアセットバンドルです。パブリックコンポーネントサービスがコンポーネントを見つけてマウントできるように、コンポーネントのコードをそのバンドルに追加します。モジュールのマニフェスト、assets_frontendに`web.assets_frontend`を追加し、コンポーネントのファイルを追加します。

{
    # ...
    'assets': {
        'web.assets_frontend': [
            'your_module/static/src/portal_component/**/*',
        ],
    }
}

3. ページに `<owl-component>` タグを追加する¶

Now we need add an <owl-component> tag that will serve as the target for the component to be mounted. For the sake of this example, we'll add it directly to the portal's home page with an xpath in /your_module/views/templates.xml.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="your_module.portal_my_home" inherit_id="portal.portal_my_home">
        <xpath expr="//*[hasclass('o_portal_my_home')]" position="before">
            <owl-component name="your_module.YourComponent" />
        </xpath>
    </template>
</odoo>

アセットバンドルのデータセクションにこのファイルを追加することを忘れないでください:

{
    # ...
    'data': [
        'views/templates.xml',
    ]
}

ポータルのホームページを開くと、ページの上部に「Hello, World!」というメッセージが表示されます。

注意点：¶

Owl コンポーネントはブラウザによって JavaScript で完全にレンダリングされます。いくつかの問題を引き起こす可能性があります:

レイアウトシフト
検索エンジンによるプーラインデックス作成

これらの理由により、下記の特定の使用事例については、ポータルおよびウェブサイトの Owl コンポーネントのみを使用してください。

レイアウトシフト¶

ページが最初にコンテンツをレンダリングし、そのコンテンツがその後ページ内に移動すると(「シフト」)、これはレイアウトシフトと呼ばれます。ポータルまたはウェブサイトで Owl コンポーネントを使用する場合 Owl コンポーネントを囲むすべての HTML はサーバーによってレンダリングされ、ユーザーに最初に表示されます。 JavaScript の実行が開始されると、Owl はコンポーネントをマウントし、周囲の要素をページ上で移動させる可能性があります。これにより、ユーザーエクスペリエンスが低下する可能性があります。最初にレンダリングされたページ上で、ユーザーが対話したい要素が表示されます。カーソルや指をその要素の上に移動させますクリックしようとしているように、Owl コンポーネントがマウントされ、対話したい要素が移動されます。彼らは代わりにOwlアプリをクリックして対話します。

これはイライラする経験になる可能性がありますので、Owl コンポーネントが要素を移動しないようにページを設計するときは注意する必要があります。これは様々な方法で達成することができます。を選択します。またはCSSを使用してOwlコンポーネントの固定スペースを予約することもできます。

検索エンジンによるプーラインデックス作成¶

検索エンジンがウェブのコンテンツのインデックスを構築する場合ウェブクローラーを使ってページを見つけてコンテンツを分析し検索結果にこれらのページを表示します現代の検索エンジンは一般的にJavaScriptコードを実行することができますが、一般的にJavaScriptでレンダリングされたコンテンツを表示し、インデックスを作成することができます。コンテンツのインデックスが速く検索結果のページを罰することはできません

ほとんどの検索エンジンは、彼らがクロールし、インデックスのウェブページを正確な方法を明らかにしないので。クライアント側のレンダリングが検索エンジンのスコアに与える影響の程度を知るのは簡単ではありません。 SEO戦略を作成または破損する可能性は低いですが。サーバー側のレンダリングで実際の値を追加する場合にのみ、Owl コンポーネントを使用する必要があります。