シミュレーションメニューの拡張

ページとアプリがユーザーにどのように表示されるかをテストするときは、できるだけ多くの方法でビューをシミュレートすることが重要です。メインページの右側にあるシミュレーションメニューからシミュレーションを行うことができ、提供されていないものをシミュレートする必要がある場合は、メニューを拡張できます。

まず、パネルのカテゴリ/アプリの使用に慣れる必要があります。これについては、Customizing The Product Menuのチュートリアルで詳しく説明しています。パネルカテゴリとパネルアプリの作成方法を理解してから、このチュートリアルを進めてください。

シミュレーションメニューと製品メニューは大抵は同じ基本クラスを拡張するため、両者の違いはほとんどありません。デフォルトでは、シミュレーションメニューは1つのパネルカテゴリと1つのパネルアプリのみで構成されています。Liferayは、DevicePreviewPanelAppを保持するために必要な非表示のカテゴリであるSimulationPanelCategoryクラスを提供します。これは、デフォルトでシミュレーションメニューに表示されるアプリと機能です。

図1：シミュレーションメニューは、デバイスプレビューアプリケーションを提供します。

シミュレーションメニューに独自の機能を提供するには、SimulationPanelCategoryでパネルアプリを作成する必要があります。広範な機能を追加する場合は、メニューに追加のパネルカテゴリを作成して、パネルアプリを分割することもできます。このチュートリアルでは、すでに存在する非表示カテゴリ用のパネルアプリを作成する、より単純なケースについて説明します。

カスタムパネルアプリの作成については、カスタムパネルアプリの追加に記載されている手順に従ってください。パネルアプリの基盤を作成したら、それを調整してシミュレーションメニューをカスタマイズする方法について学習しましょう。

Blade CLIのシミュレーションパネルエントリテンプレートを使用して、シミュレーションパネルアプリを生成できます。動作例については、シミュレーションパネルアプリのサンプルも参照してください。
このチュートリアルでは、既存のシミュレーションカテゴリに追加の機能を提供することを前提としているため、@Componentアノテーションのpanel.category.keyでシミュレーションカテゴリを設定します。
```
"panel.category.key=" + SimulationPanelCategory.SIMULATION
```
この定数を使用するには、com.liferay.product.navigation.simulationに依存関係を追加する必要があります。

新しいパネルアプリを表示する順序も必ず指定してください。これについては、カスタムパネルアプリの追加で説明しました。
このチュートリアルでは、JSPを使用していることを前提としています。したがって、BaseJSPPanelApp抽象クラスを拡張する必要があります。このクラスは、PanelAppインターフェイスを実装し、JSPを指定してパネルアプリのUIをレンダリングするために必要な追加のメソッドも提供します。JSP以外のテクノロジー（FreeMarkerなど）を使用する場合は、独自のinclude()メソッドを実装して、希望のフロントエンドテクノロジーを使用することもできます。
シミュレーションビューを定義します。たとえば、DevicePreviewPanelAppのgetJspPathメソッドは、デバイスシミュレーションインターフェイスが定義されているresources/META-INF/resourcesフォルダ内のsimulation-device.jspファイルを指します。オプションで、独自の言語キー、CSS、またはJavaScriptリソースをシミュレーションモジュールに追加することもできます。

このメソッドを実装することにより、適切なサーブレットコンテキストも提供されます。
```
@Override
@Reference(
target = "(osgi.web.symbolicname=com.liferay.product.navigation.simulation.device)",
unbind = "-"
)
public void setServletContext(ServletContext servletContext) {
super.setServletContext(servletContext);
}
```
Customizing The Product Menuで説明したように、パネルアプリはポートレットに関連付ける必要があります。これにより、ユーザーがポートレットを表示する権限を持っている場合にのみ、パネルアプリが表示されます。このパネルアプリは、次のメソッドを使用してシミュレーションデバイスポートレットに関連付けられます。
```
@Override
public String getPortletId() {
return ProductNavigationSimulationPortletKeys.
PRODUCT_NAVIGATION_SIMULATION;
}

@Override
@Reference(
target = "(javax.portlet.name=" + ProductNavigationSimulationPortletKeys.PRODUCT_NAVIGATION_SIMULATION + ")",
unbind = "-"
)
public void setPortlet(Portlet portlet) {
super.setPortlet(portlet);
}
```
対象ユーザー設定は、シミュレーションメニューを拡張する方法の良い例でもあります。対象ユーザー設定アプリがデプロイされると、シミュレーションメニューが拡張され、対象ユーザー設定の[User Segments]と[Campaigns]が提供されます。シミュレーションメニューからキャンペーンおよびユーザーの特定のシナリオを直接シミュレートできます。パネルアプリクラスはDevicePreviewPanelAppに似ていますが、異なるポートレットとJSPを指す点が異なります。
デバイスプレビューiFrameと相互作用して、シミュレーションオプションとデバイスシミュレーションオプションを組み合わせることができます。カスタムシミュレーションビューのJavaScriptのaui:scriptブロックでデバイスプレビューフレームを取得するには、次のコードを使用できます。
```
var iframe = A.one('#simulationDeviceIframe');
```
次に、以下のようにデバイスプレビューフレームのURLを変更できます。
```
iframe.setAttribute('src', newUrlWithCustomParameters);
```

これで、必要なパネルカテゴリとパネルアプリを拡張してシミュレーションメニューを変更し、独自のモジュールを作成し、ニーズに最も有用になるようシミュレーションメニューをカスタマイズする方法がわかりました。

« アイコンとツールチップの定義ユーザーパーソナルバーの提供 »

ヘルプセンター

製品

リソース

セキュリティ

サポート

ドキュメンテーション