SPA への React コンポーネントの実装
- 適用対象:
- Experience Manager 6.5
作成対象:
- 開発者
単一ページアプリケーション(SPA)により、web サイトのユーザーに魅力的なエクスペリエンスを提供することができます。開発者は SPA フレームワークを使用してサイトを構築したいと考え、作成者はそうして構築されたサイトのコンテンツを Adobe Experience Manager(AEM)内でシームレスに編集したいと考えています。
SPA オーサリング機能には、AEM 内で SPA をサポートするための包括的なソリューションが用意されています。この記事では、AEM SPA Editor で動作するように既存のシンプルな React コンポーネントを適応させる方法の例を示します。
- ヘッドレスコンテンツを視覚的に編集するユニバーサルエディター。
- ヘッドレスコンテンツをフォームベースで編集するコンテンツフラグメントエディター。
はじめに
AEM によって要求され、AEM と SPA Editor の間で確立されたシンプルで軽量な契約により、既存の JavaScript アプリケーションを使用して AEM で SPA と共に使用するよう手順は非常に簡単です。
本記事では、We.Retail Journal のサンプル SPA に天気予報のコンポーネントを搭載した例を紹介します。
この記事を読む前に、AEM の SPA アプリケーションの構造について知っておく必要があります。
天気予報コンポーネント
天気予報コンポーネントは、We.Retail ジャーナルアプリケーションの左上にあります。気象データを動的に取得し、定義された場所の現在の天気を表示します。
Weather Widget の使用
SPA エディターで SPA のコンテンツをオーサリングする際、天気予報コンポーネントは他の AEM コンポーネントと同様に表示され、ツールバーも完備しており、編集可能です。
市区町村は、他の AEM コンポーネントと同様に、ダイアログで更新できます。
変更が保持され、コンポーネント自体は新しい天気データを使用して自動的に更新されます。
天気予報コンポーネントの実装
天気コンポーネントは、React Open Weather と呼ばれる、公開されている React コンポーネントに基づいています。これは、We.Retail ジャーナルサンプル SPA アプリケーション内でコンポーネントとして機能するように適応されています。
React Open Weather コンポーネントの使用に関する NPM ドキュメントのスニペットを以下に示します。
We.Retail ジャーナルアプリケーションでカスタマイズされた天気予報コンポーネント(Weather.js
)のコードを確認します。
-
16 行目:React Open Weather ウィジェットは、必要に応じて読み込まれます。
-
46 行目:この
MapTo
関数は、この React コンポーネントを SPA エディターで編集できるように、対応する 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 コンポーネントを使用できます。
次のステップ
AEM の SPA 開発について詳しくは、AEM の SPAの開発の記事を参照してください。