ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

Liferay 7.2のカスタムフォーム項目の開発

Reactベースのカスタムフォーム項目は、Liferay 7.3およびLiferay 7.4用に開発できます。方法については、カスタムフォームフィールドタイプの作成を参照してください。 Liferay 7.2 では、MetalJS と Soy クロージャテンプレートに基づく異なるフロントエンドテクノロジが使用されました。このチュートリアルでは、ReactベースのAcme C2P9 SliderフィールドをLiferay 7.2インストール上で動作するように適合させることについて学びます。

Acme C2P9 SliderをLiferay 7.2で動作するように調整する

Liferay 7.2 では、カスタムフォームフィールドに異なるフロントエンドフレームワークが使用されていました。 Acme C2P9 SliderフィールドをLiferay 7.2上で動作するよう調整するには、以下の手順に従ってください。

カスタムフォームフィールドタイププロジェクトをダウンロードして解凍します。
```
curl https://resources.learn.liferay.com/examples/liferay-c2p9.zip -O
```
```
unzip liferay-c2p9.zip
```

liferay-c2p9.zip/gradle.propertiesファイルを開き、次の行を

liferay.workspace.product=portal-7.4-ga8

宛先

liferay.workspace.product=portal-7.2-ga2

liferay-c2p9.zip/settings.gradleファイルを開き、次の行を

classpath group: "com.liferay", name: "com.liferay.gradle.plugins.workspace", version: "latest.release"

宛先

classpath group: "com.liferay", name: "com.liferay.gradle.plugins.workspace", version: "3.4.17"

liferay-c2p9.zip/c2p9-impl/build.gradleファイルを開き、次の行を追加します。

 compileOnly group: "org.osgi", name: "osgi.cmpn"
 jsCompile group: "com.liferay", name: "com.liferay.dynamic.data.mapping.form.field.type"

liferay-c2p9.zip/c2p9-impl/package.jsonファイルを開きます。次のdevDependenciesの行を

 "@liferay/portal-7.4": "*"

下記の2行に置き換えるところから始めます。

 "@liferay/portal-7.2": "*",
 "metal-tools-soy": "4.3.2"

次に、既存のscriptsコンテンツ（2行）を下記の3行に置き換えます。

"build": "npm run build-soy && npm run build-js && liferay-npm-bundler",
"build-js": "babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources",
"build-soy": "metalsoy --externalMsgFormat \"Liferay.Language.get('\\$2')\" --soyDeps \"./node_modules/clay-*/src/**/*.soy\" \"./node_modules/com.liferay.dynamic.data.mapping.form.field.type/META-INF/resources/+(FieldBase|components)/**/*.soy\""

liferay-c2p9.zip/c2p9-impl/bnd.bndファイルを開き、次の行を追加します。

Provide-Capability:\
	soy;\
		type:String="LiferayFormField"

liferay-c2p9.zip/c2p9-impl/.babelrc.jsの内容を次のように置き換えます。

module.exports = {
    presets: ['@babel/preset-env'],
};

チェックポイント: プロジェクトは 7.2 フロントエンドフレームワークを想定して再構成されるため、フォームフィールドプロジェクトのフロントエンドを置き換える必要があります。

既存のSlider.es.jsファイルを削除し、それに代わる以下の3つのファイルを作成します。

Slider.es.js: MetalJS + Soy フロントエンドを使用した新しいスライダーコンポーネント。

import 'dynamic-data-mapping-form-field-type/FieldBase/FieldBase.es';
import './SliderRegister.soy.js';
import templates from './Slider.soy.js';
import Component from 'metal-component';
import Soy from 'metal-soy';
import {Config} from 'metal-state';

class Slider extends Component {

    dispatchEvent(event, name, value) {
        this.emit(name, {
            fieldInstance: this,
            originalEvent: event,
            value
        });
    }

    _handleFieldChanged(event) {
        const {value} = event.target;

        this.setState(
            {
                value
            },
            () => this.dispatchEvent(event, 'fieldEdited', value)
        );
    }
}

Slider.STATE = {

    label: Config.string(),

    name: Config.string().required(),

    predefinedValue: Config.oneOfType([Config.number(), Config.string()]),

    required: Config.bool().value(false),

    showLabel: Config.bool().value(true),

    spritemap: Config.string(),

    value: Config.string().value('')
}

Soy.register(Slider, templates);

export default Slider;

Slider.soy：フィールドのSoyテンプレート。

{namespace Slider}

{template .render}
    {@param label: string}
    {@param name: string}
    {@param showLabel: bool}
    {@param tip: string}
    {@param value: ?}
    {@param? _handleFieldChanged: any}
    {@param? predefinedValue: any}
    {@param? required: bool}
    {@param? spritemap: string}

    {call FieldBase.render}
        {param contentRenderer kind="html"}
            {call .content}
                {param _handleFieldChanged: $_handleFieldChanged /}
                {param name: $name /}
                {param predefinedValue: $predefinedValue /}
                {param value: $value /}
            {/call}
        {/param}
        {param label: $label /}
        {param name: $name /}
        {param required: $required /}
        {param showLabel: $showLabel /}
        {param spritemap: $spritemap /}
        {param tip: $tip /}
    {/call}
{/template}

{template .content}
    {@param name: string}
    {@param value: ?}
    {@param? _handleFieldChanged: any}
    {@param? predefinedValue: any}
    {let $attributes kind="attributes"}
        class="ddm-field-slider form-control slider"

        data-oninput="{$_handleFieldChanged}"

        id="myRange"

        max="100"

        min="1"

        name="{$name}"

        type="range"

        {if $value}
            value="{$value}"
        {else}
            value="{$predefinedValue}"
        {/if}
    {/let}

    <input {$attributes}>
{/template}

SliderRegister.soy：スライダーのSoyテンプレートの登録コード。

{namespace SliderRegister}

{deltemplate PageRenderer.RegisterFieldType variant="'slider'"}
    {call Slider.render data="all" /}
{/deltemplate}

DDMFormFieldTypeに対して細かい調整が必要です：フィールドの識別子（名前）は、Soy テンプレートで Stringリテラルとして参照されるため、ハイフン（-）を持つことができません。 C2P9DDMFormFieldTypeクラスを開き、以下のハイフンを削除してください。

コンポーネントプロパティ ddm.form.field.type.name
getNameによって返される文字列

両方の場所の値はc2p9sliderになりました。

プロジェクトのフロントエンドが置き換えられたら、実行中の Liferay 7.2 にデプロイします。

Liferay 7.2のDockerコンテナを起動するには、次のコマンドを実行します。
```
docker run -it -m 8g -p 8080:8080 liferay/portal:7.2.1-ga2
```
再構成されたフォーム項目プロジェクトをデプロイするには、 liferay-c2p9.zipフォルダーに移動し、以下を実行します。
```
./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
```

Liferay Dockerコンテナコンソールでデプロイを確認します。