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

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

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

メモ

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

はじめに

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

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

この記事を読む前に、AEM🔗用SPAアプリケーションの構造を理解しておく必要があります。

注意

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

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 Open Weatherと呼ばれる、公開されているReactコンポーネントに基づいています。このコンポーネントは、We.Retail JournalサンプルSPAアプリケーション内でコンポーネントとして機能するように適応されています。

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

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

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

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

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

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

  • 31~44行目:Weatherコンポーネントは、クラスを拡張 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の開発について詳しくは、AEM向けSPAの開発の記事を参照してください。

このページ