SPA への React コンポーネントの実装

単一ページアプリケーション(SPA)により、Web サイトのユーザーに魅力的なエクスペリエンスを提供することができます。開発者は SPA フレームワークを使用してサイトを構築したいと考え、作成者はそうして構築されたサイトのコンテンツを AEM 内でシームレスに編集したいと考えています。

SPA オーサリング機能には、AEM 内で SPA をサポートするための包括的なソリューションが用意されています。この記事では、AEM SPA Editor で動作するように既存のシンプルな React コンポーネントを適応させる方法の例を示します。

メモ

シングルページアプリケーション (SPA) エディター機能には、AEM 6.4 Service Pack 2 以降が必要です。

SPA Editor は、SPAフレームワークベースのクライアントサイドレンダリング (React やAngularなど ) が必要なプロジェクトで推奨されるソリューションです。

はじめに

AEMとSPA Editor の間で確立された、シンプルで軽量な契約により、既存の JavaScript アプリケーションを使用してAEMでSPAと共に使用するように適応させることは、簡単なことです。

この記事では、We.Retail ジャーナルのサンプルSPAの天気コンポーネントの例を示します。

詳しくは、 AEM用SPAアプリケーションの構造 この記事を読む前に。

注意

このドキュメントでは、 We.Retail ジャーナルアプリ デモ目的のみ。 どのプロジェクト作業にも使用しないでください。

AEM プロジェクトでは、 AEM プロジェクトアーキタイプを活用します。このアーキタイプは、React または Angular を使用する SPA プロジェクトをサポートし、SPA SDK を活用します。

天気コンポーネント

天気コンポーネントは、We.Retail ジャーナルアプリの左上にあります。 定義した場所の現在の天気が表示され、天候データが動的にプルされます。

気象ウィジェットの使用

screen_shot_2018-06-08at143224

SPAエディターでSPAのコンテンツをオーサリングする場合、天気コンポーネントは他のAEMコンポーネントと同様に表示され、ツールバーと共に完成し、編集可能です。

screen_shot_2018-06-08at143304

市区町村は、他のAEMコンポーネントと同様に、ダイアログで更新できます。

screen_shot_2018-06-08at143446

変更が保持され、コンポーネントは新しい天気データで自動的に更新されます。

screen_shot_2018-06-08at143524

気象コンポーネントの実装

天候コンポーネントは、実際には、 React オープンウェザー。We.Retail ジャーナルサンプルSPAアプリケーション内でコンポーネントとして機能するように適応されています。

React Open Weather コンポーネントの使用に関する NPM ドキュメントのスニペットを以下に示します。

screen_shot_2018-06-08at144723 screen_shot_2018-06-08at144215

カスタマイズされた気象コンポーネントのコード ( Weather.js) を We.Retail ジャーナルアプリケーションに追加します。

  • 行 16:React Open Weather ウィジェットは、必要に応じて読み込まれます。

  • 行 46:この MapTo 関数は、この React コンポーネントをSPA Editor で編集できるように、対応するAEMコンポーネントに関連付けます。

  • 行 22~29:この EditConfig が定義され、市区町村が設定されているかどうかを確認し、空の場合は値を定義します。

  • 行 31 ~ 44:天気コンポーネントは、 Component クラスに含まれ、React Open Weather コンポーネントの NPM 使用に関するドキュメントで定義されている必要なデータを提供し、コンポーネントをレンダリングします。

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2018 Adobe Systems Incorporated
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     https://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import React, {Component} from 'react';
import ReactWeather from 'react-open-weather';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Weather.css');

const WeatherEditConfig = {

    emptyLabel: 'Weather',

    isEmpty: function() {
        return !this.props || !this.props.cq_model || !this.props.cq_model.city || this.props.cq_model.city.trim().length < 1;
    }
};

class Weather extends Component {

    render() {
        let apiKey = "12345678901234567890";
        let city;

        if (this.props.cq_model) {
            city = this.props.cq_model.city;
            return <ReactWeather key={'react-weather' + Date.now()} forecast="today" apikey={apiKey} type="city" city={city} />
        }

        return null;
    }
}

MapTo('we-retail-journal/global/components/weather')(Weather, WeatherEditConfig);

バックエンドコンポーネントが既に存在している必要がありますが、フロントエンド開発者は、コーディングをほとんどおこなわずに We.Retail ジャーナルSPAの React Open Weather コンポーネントを活用できます。

次のステップ

SPA for AEMの開発について詳しくは、この記事を参照してください。 SPA for AEMの開発.

このページ