第 2 章では、AEM 以外でのフロントエンドの開発について説明します。開発者は JS および CSS ファイルを修正し、ブラウザーですぐに変更を確認できます。完全な開発ビルドを用意する必要はありません。Webpack の開発サーバー、SASS、Styleguidist など、よく使用されているフロントエンドツールをプロジェクトに統合できます。

チュートリアルの目次

前提条件

これは、複数のパートで構成されているチュートリアルの第 2 章です。第 1 章が完了し、ローカル開発環境に必要なツールがインストールされていることが前提となります。GitHub で第 1 章のコードを参照してください。

前の章のソリューションファイルをダウンロードします。

ダウンロード

この章では、AEM 以外でのフロントエンドの開発について説明します。前の章では、React アプリに変更を加えるたびに、ビルドおよび AEM へのデプロイという長時間のプロセスが必要でした。 この章では、React アプリを開発するための 2 つの異なる方法について、React アプリにパッケージ化されている開発サーバーを使用する方法と比較しながら説明します。開発者は JS および CSS ファイルを修正し、ブラウザーですぐに変更を確認できます。完全な開発ビルドを用意する必要がないので、開発がスピードアップします。また、開発プロセスをさらに短縮するために、よく使用されているいくつかのフロントエンドツールをインストールします。

Sass 対応アプリケーションのインストール

担当者:フロントエンド開発者

React では、各コンポーネントを自己完結型のモジュールにすることが推奨されます。一般的に、プリプロセッサーの効率が低下するので、同じ CSS クラス名を複数のコンポーネントで再利用しないことが推奨されます。このプロジェクトでは、変数や mixin など、いくつかの便利な機能のために Sass を使用します。また、このプロジェクトでは、SUIT CSS の命名規則にも、ほぼ従います。SUIT は BEM(Block Element Modifier)記法の 1 つで、一貫性のある CSS ルールの作成に使用されます。

新しいターミナルウィンドウを開きます。

  1. <src>/aem-guides-wknd-events/react-app ディレクトリに移動し、node-sass をインストールします。

    $ cd <src>/aem-guides-wknd-events/react-app
    $ npm install node-sass --save

    これで、プロジェクトで .scss ファイルおよび Sass の強力な機能を使用できるようになりました。React プロジェクトへの Sass スタイルシートの追加に関する詳細は、こちらで確認できます。

  2. 任意のエディターで、<src>/aem-guides-wknd-events/react-app を開きます。

    react-app/src の下に styles という名前のフォルダーを追加します。_shared.scss および _variables.scss という名前のスタイルの下に 2 つのファイルを追加します。

      /aem-guides-wknd-events
        /react-app
          /src
            /components
    +       /styles
    +          _shared.scss
    +          _variables.scss

    これらのファイルには、プロジェクト全体で再利用するいくつかのグローバル変数と mixin が含まれます。

  3. 以下のように _variables.scss を設定します。

    //variables for WKND Events
    
    //Typography
    $em-base:             20px;
    $base-font-size:      1rem;
    $small-font-size:     1.4rem;
    $lead-font-size:      2rem;
    $title-font-size:     5.2rem;
    $h1-font-size:        3rem;
    $h2-font-size:        2.5rem;
    $h3-font-size:        2rem;
    $h4-font-size:        1.5rem;
    $h5-font-size:        1.3rem;
    $h6-font-size:        1rem;
    $base-line-height:    1.5;
    $heading-line-height: 1.3;
    $lead-line-height:    1.7;
    
    $font-serif:         'Asar', serif;
    $font-sans:          'Source Sans Pro', sans-serif;
    
    $font-weight-light:      300;
    $font-weight-normal:     400;
    $font-weight-semi-bold:  600;
    $font-weight-bold:       700;
    
    //Colors
    $color-white:            #ffffff;
    $color-black:            #080808;
    
    $color-yellow:           #FFEA08;
    $color-gray:             #808080;
    $color-dark-gray:        #707070;
    
    //Functional Colors
    
    $color-primary:          $color-yellow;
    $color-secondary:        $color-gray;
    $color-text:             $color-gray;
                
    
    //Layout
    $max-width: 1200px;
    $header-height: 80px;
    $header-height-big: 100px;
    
    // Spacing
    $gutter-padding: 12px;
    
    // Mobile Breakpoints
    $mobile-screen: 160px;
    $small-screen:  767px;
    $medium-screen: 992px;
  4. _shared.scss に以下の Sass の mixin を記述し、_variables.scss を読み込みます。

    @import './variables';
    
    //Mixins
    @mixin media($types...) {
        @each $type in $types {
    
          @if $type == tablet {
            @media only screen and (min-width: $small-screen + 1) and (max-width: $medium-screen) {
              @content;
            }
          }
      
          @if $type == desktop {
            @media only screen and (min-width: $medium-screen + 1) {
              @content;
            }
          }
    
          @if $type == mobile {
            @media only screen and (min-width: $mobile-screen + 1) and (max-width: $small-screen) {
              @content;
            }
          }
        }
      }
      
      @mixin content-area () {
        max-width: $max-width;
        margin: 0 auto;
        padding: $gutter-padding;
      }
    
      @mixin component-padding() {
          padding: 0 $gutter-padding !important;
      }
    
      @mixin drop-shadow () {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

    次の節では、上記の Sass 変数および mixin をアプリケーションで使用します。

プロキシ経由で JSON を使用するアプローチ

担当者:フロントエンド開発者

スピーディな開発のための 1 番目のアプローチは、React プロジェクトに付属する開発サーバーとローカルの AEM インスタンスとの間でプロキシを設定することです。このアプローチでは、JSON モデルや画像などの AEM コンテンツへの要求を、静的な開発サーバーから要求した場合と同じように使用できます。

Create React App を使用した開発でのプロキシ経由の API 要求の詳細については、こちらを参照してください。

AEM インスタンスがローカルの http://localhost:4502 で実行されていることを前提とします。

任意のエディターで、/aem-guides-wknd-events/react-app を開きます。

  1. react-app/package.json を更新して、プロキシのエンドポイントを設定します。

    // package.json
    
    ...
    
    "scripts": {
        ...
      },
    +  "proxy": "http://localhost:4502",
     
    ...
  2. /aem-guides-wknd-events/react-app の下に .env.development という名前のファイルを作成します。以下のように記述します。

    # Configure Proxy end point
    REACT_APP_PAGE_MODEL_PATH=/content/wknd-events/react.model.json

    .env.development は、開発モードでアプリケーションを実行する際の環境変数ファイルの一例です。環境変数の設定に関する詳細については、こちらを参照してください。

    src/index.js には既に、環境変数 REACT_APP_PAGE_MODEL_PATH を使用して JSON モデルを初期化するための行が追加されています。

    // src/index.js
    
    ModelManager.initialize({ path: process.env.REACT_APP_PAGE_MODEL_PATH }).then(render);

    /content/wknd-events/react.model.json への要求は静的サーバー上に存在しないので、アプリを開発モードで実行する場合は、AEM からプロキシ経由で渡されます。

  3. ターミナルウィンドウを開き、React アプリを開発モードで開始します。

    $ cd <src>/aem-guides-wknd-events/react-app
    $ npm start
    
      Starting the development server...
      Compiled Successfully!
    
      You can now view react-app in the browser.
      Local:            http://localhost:3000/
  4. ブラウザーを開き、http://localhost:4502 を使用して AEM にログインします。新しいタブを開き、http://localhost:3000/content/wknd-events/react/home.html に移動します。

    これで、AEM インスタンスと同じコンテンツを使用して実行されている開発サーバー上の React アプリが表示されます。

    proxy-diff

    警告:

    AEM オーサーインスタンスには認証要件があるので、ブラウザーで新しいタブを開き、ローカルの AEM インスタンスにログインする必要があります。空白画面が表示された場合は、ほぼこれが原因です。

    Create React App のプロキシ機能は、(このチュートリアルが記述された時点では)CORS エラーが発生しないように設定されています。開発時に次のようなエラーが発生した場合、AEM CORS の設定の更新を確認してください。

    Fetch API cannot load http://localhost:4502/content.... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
    
  5. 名前を /src/index.css から index.scss に変更します。index.scss を次のように更新します。

    /* src/index.scss */
    
    @import './styles/shared';
    
    /* Google Font import */
    @import url('https://fonts.googleapis.com/css?family=Asar|Source+Sans+Pro:400,600,700');
    
    body {
        //font-weight: $normal;
        background-color: $color-white;
        font-family: $font-sans;
        margin: 0;
        padding: 0;
    
        font-weight: $font-weight-light;
        font-size: $em-base;
        text-align: left;
        color: $color-black;
        line-height: 1.5;
        line-height: 1.6;
        letter-spacing: 0.3px;
    }
    
    h1, h2, h3, h4 {
        font-family: $font-sans;
    }
    
    h1 {
      font-size:  $h1-font-size;
    }
    
    h2 {
      font-size: $h2-font-size;
    }
    
    h3 {
      font-size: $h3-font-size;
    }
    
    h4 {
      font-size: $h4-font-size;
    }
    
    h5 {
      font-size: $h5-font-size;
    }
    
    h6 {
      font-size: $h6-font-size;
    }
    
    p {
      color: $color-text;
      font-family: $font-serif;
    }
    
    ul {
        list-style-position: inside;
    }
    
    // abstracts/overrides
    
    ol, ul {
        padding-left: 0;
        margin-bottom: 0;
    }
    
    hr {
        height: 2px;
        //background-color: fade($dusty-gray, (.3*100));
        border: 0 none;
        margin: 0 auto;
        max-width: $max-width;
    }
    
    *:focus {
        outline: none;
    }
    
    textarea:focus, input:focus{
            outline: none;
    }
    
    body {
        overflow-x: hidden;
    }
    
    img {
        vertical-align: middle;
        border-style: none;
        width: 100%;
    }
  6. index.css の代わりに index.scss が含まれるよう src/index.js を更新します。

    /* src/index.js */
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { ModelManager, Constants } from '@adobe/cq-spa-page-model-manager';
    - import './index.css';
    + import './index.scss';
    import App from './App';
  7. ブラウザーに戻り、http://localhost:3000/content/wknd-events/react/home.html に移動します。

    フォントが変更されていることを確認できます。テストのために index.scss に変更を加えます。変更が自動的にコンパイルされ、静的サーバー上に表示されることを確認します。

    proxy-reload

モック用 JSON を使用するアプローチ

担当者:フロントエンド開発者

スピーディな開発のためのもう 1 つのアプローチは、静的またはモック用 JSON ファイルを使用して開発する方法です。これにより、ローカルの AEM インスタンスとの依存関係を解消できます。また、フロントエンド開発者は、バックエンド開発者に依存することなく、JSON を更新することで、機能をテストし、新しい JSON 応答をモックすることができます。

モック用 JSON の初期設定には、ローカルの AEM インスタンスが必要です。

  1. ブラウザーで、http://localhost:4502/content/wknd-events/react.model.json に移動します。

    これは、アプリケーションを実行している AEM から書き出した JSON です。JSON 出力をコピーします。

  2. 任意のエディターで React アプリを開きます。<src>/aem-guides-wknd-events/react-app

    react-app の下に public という名前のフォルダーがあります。mock.model.json という名前の新しいファイルを追加します。

    /aem-guides-wknd-events
      /react-app
        /public
          favicon.ico
          index.html
          manifest.json
    +     mock.model.json
        /src
  3. 前の手順でコピーした JSON を mock.model.json にペーストします。

    {
      ":items": {},
      ":itemsOrder": [],
      ":type": "wknd-events/components/structure/app",
      ":hierarchyType": "page",
      ":path": "/content/wknd-events/react",
      ":children": {
          "/content/wknd-events/react/home": {
              ":items": {
                  "root": {
                      "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
                      "columnCount": 12,
                      "columnClassNames": {
                          "responsivegrid": "aem-GridColumn aem-GridColumn--default--12"
                      },
                      ":items": {
                          "responsivegrid": {
                              "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
                              "columnCount": 12,
                              "columnClassNames": {
                                  "image": "aem-GridColumn aem-GridColumn--default--9 aem-GridColumn--offset--default--0 aem-GridColumn--default--none",
                                  "text": "aem-GridColumn aem-GridColumn--default--12"
                              },
                              ":items": {
                                  "text": {
                                      "text": "<h1>Hello World</h1>\r\n",
                                      "richText": true,
                                      ":type": "wknd-events/components/content/text"
                                  },
                                  "image": {
                                      "alt": "Alternative Text here",
                                      "title": "This is a caption",
                                      "src": "/content/wknd-events/react/home/_jcr_content/root/responsivegrid/image.coreimg.jpeg/1539196394835.jpeg",
                                      "srcUriTemplate": "/content/wknd-events/react/home/_jcr_content/root/responsivegrid/image.coreimg{.width}.jpeg/1539196394835.jpeg",
                                      "lazyEnabled": false,
                                      "widths": [],
                                      ":type": "wknd-events/components/content/image"
                                  }
                              },
                              ":itemsOrder": [
                                  "text",
                                  "image"
                              ],
                              ":type": "wcm/foundation/components/responsivegrid"
                          }
                      },
                      ":itemsOrder": [
                          "responsivegrid"
                      ],
                      ":type": "wcm/foundation/components/responsivegrid"
                  }
              },
              ":itemsOrder": [
                  "root"
              ],
              ":type": "wknd-events/components/structure/page",
              ":hierarchyType": "page",
              ":path": "/content/wknd-events/react/home",
              "title": "Home"
          }
      },
      "title": "React App"
    }
  4. public フォルダーの下に images という名前の新しいフォルダーを追加します。デスクトップから画像を選択し、それを images フォルダーに追加して、名前を mock-image.jpeg とします。

    Unsplash.com から自由に画像を取得していただけます。このチュートリアルで使用されている画像の多くは、このサイトから取得したものです。

    /aem-guides-wknd-events
      /react-app
        /public
          favicon.ico
          index.html
          manifest.json
          mock.model.json
    +     /images
    +        mock-image.jpeg 
        /src
  5. AEM Assets のものではなく、ローカルの画像ソースを指定するよう、mock.model.json を更新します。mock.model.json 内で wknd-events/components/content/image を検索します。

    mock-image.jpeg を指定するよう、src の値を更新します。

      "image": {
              "alt": "Alternative Text here",
              "title": "This is a caption",
    -         "src": "/content/wknd-events/react/home/_jcr_content/root/responsivegrid/image.coreimg.jpeg/1539196394835.jpeg",
    +         "src": "/images/mock-image.jpeg",
              "srcUriTemplate": "/content/wknd-events/react/home/_jcr_content/root/responsivegrid/image.coreimg{.width}.jpeg/1539196394835.jpeg",
              "lazyEnabled": false,
              "widths": [],
              ":type": "wknd-events/components/content/image"
          }
  6. mock.model.json を指定するよう、react-app/.env.development ファイルを更新します。一時的に、プロキシ REACT_APP_PAGE_MODEL_PATH をコメントアウトします。

      #Request the JSON from AEM
      #REACT_APP_PAGE_MODEL_PATH=/content/wknd-events/react.model.json
    
      # Request the JSON from Mock JSON
    + REACT_APP_PAGE_MODEL_PATH=mock.model.json
  7. React 開発サーバーが実行中の場合、再起動します。環境変数はビルド時にのみ埋め込まれるので、変更を加えた場合は再起動が必要になります。

    http://localhost:3000/content/wknd-events/react/home.html に移動します。ここで、モック用画像が表示されます。

  8. mock.model.json に対して、さらに別の変更を加えます。変更が自動的に反映されていることをブラウザーで確認します。

    mock-json-reload

ヘッダーコンポーネント

担当者:フロントエンド開発者

次に、アプリケーションのヘッダー用に、専用の React コンポーネントを作成します。

  1. /react-app/src/components の下に header という名前のフォルダーを追加します。/header の下に、Header.js および Header.scss という名前の 2 つのファイルを追加します。

    /react-app
      /src
        /components
    +      /header
    +        Header.js
    +        Header.scss
          /image
          /page
  2. Header.js に以下を記述し、ヘッダー用の React コンポーネントを作成します。

    // src/components/header/Header.js
    
    import React, {Component} from 'react';
    import './Header.scss';
    
    export default class Header extends Component {
    
      render() {
          return (
          <header className="Header">
              <div className="Header-wrapper">
                  <h1 className="Header-title">WKND<span className="Header-title--inverse">_</span></h1>
              </div>
            </header>
          );
      }
    }
  3. Header.scss に以下を記述し、コンポーネントにいくつかのスタイルを追加します。

    @import '../../styles/shared';
    
    .Header {
        background-color: $color-primary;
        height: $header-height;
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 99;
    
        @include media(tablet,desktop) {
          height: $header-height-big;
        }
    
        &-wrapper {
            @include content-area();
            display: flex;
            justify-content: space-between;
        }
    
        &-title {
            font-family: 'Helvetica';
            font-size: 20px; 
            float: left;
            padding-left: $gutter-padding;
        
            @include media(tablet,desktop) {
              font-size: 24px;
            }
        }
    
        &-title--inverse {
            color: $color-white;
        }
      }
  4. ヘッダーコンポーネントを含むよう、react-app/src/App.jsApp.js を更新します。

    import React from 'react';
    import { Page, withModel, EditorContext, Utils } from '@adobe/cq-react-editable-components';
    + import Header from './components/header/Header';
    
    // This component is the application entry point
    class App extends Page {
    
        render() {
            return (
                <div className="App">
    +                <Header />
                    <EditorContext.Provider value={ Utils.isInEditor() }>
  5. ヘッダーの高さを指定するために、react-app/src/index.scss の index.scss ファイルの body 内のルールを更新します。

    /* index.scss */
    body {
        //font-weight: $normal;
        background-color: $color-white;
        font-family: $font-sans;
        margin: 0;
        padding: 0;
        font-weight: $font-weight-light;
        font-size: $em-base;
        text-align: left;
        color: $color-black;
        line-height: 1.5;
        line-height: 1.6;
        letter-spacing: 0.3px;
    
    +    padding-top: $header-height-big;
    +    @include media(mobile, tablet) {
    +        padding-top: $header-height;
    +    }
    }

    静的な開発サーバー上で、ヘッダーへの変更が確認できます。

    header

画像コンポーネントの更新

担当者:フロントエンド開発者

次に、props.title が指定されている場合に、画像コンポーネントの下にキャプションを表示するためのオプションを追加します。

  1. react-app/src/components/image/Image.js を以下のように更新します。

    import React, {Component} from 'react';
    import {MapTo} from '@adobe/cq-react-editable-components';
    + require('./Image.scss');
    
    ...
    
    class Image extends Component {
    
    +    get caption() {
    +        if(this.props.title && this.props.title.length > 0) {
    +            return <span className="Image-caption">{this.props.title}</span>;
    +        }
    +        return null;
    +    }
    
        get content() {
            return <img src={this.props.src} alt={this.props.alt}
                title={this.props.displayPopupTitle && this.props.title}/>
        }
    
        render() {
            return (<div className="Image">
                    {this.content}
    +               {this.caption}
                </div>);
        }
    }
  2. react-app/src/components/image/ の下で、Image.scss という名前の新しいファイルを追加します。以下のように記述します。

    @import '../../styles/shared';
    
    .Image {
      @include component-padding();
    
      &-image {
        margin: 2rem 0;
        width: 100%;
        border: 0;
        font: inherit;
        padding: 0;
        vertical-align: baseline; 
      }
    
      &-caption {
        color: $color-white;
        background-color: $color-black;
        height: 3em;
        position: relative;
        padding: 20px 10px;
        top: -10px;
        @include drop-shadow();
    
        @include media(tablet) {
            padding: 25px 15px;
            top: -14px;
        }
    
        @include media(desktop) {
            padding: 30px 20px;
            top: -16px;
        }
      }
    }
  3. 静的な開発サーバー上で、画像コンポーネントへの変更が確認できます。

    image-caption

テキストコンポーネントの更新

担当者:フロントエンド開発者

次に、マッピングされたすべてのコンポーネントにわたって一貫性が保たれるよう、テキストコンポーネントに対して簡単な修正を加えます。

  1. ラッパー DIV を追加するために、react-app/src/components/text/Text.jsrender() 関数に以下を追加して更新します。また、Text.scss ファイルの読み込みを追加します。

      import React, {Component} from 'react';
      import {MapTo} from '@adobe/cq-react-editable-components';
    + require('./Text.scss');
    
    ...
    
    class Text extends Component {
    
    ...
    
        render() {
    +        let innercontent = this.props.richText ? this.richTextContent : this.textContent;
    +        return (<div className="Text">
    +                {innercontent}
    +            </div>);
        }
    }
    ...
  2. react-app/src/components/text/ の下で、Text.scss という名前の新しいファイルを追加します。以下のように記述します。

    @import '../../styles/shared';
    
    .Text {
      @include component-padding();
    }

レスポンシブグリッドの統合

担当者:フロントエンド開発者

AEM にはレイアウトモードと呼ばれる編集モードが付属しています。これを有効にすると、様々なデバイスの幅に合わせてコンテンツを最適化するために、コンポーネントおよびコンテナをサイズ変更できます。この機能は、SPA 編集機能に組み込まれています。必要となる操作は、AEM のレスポンシブグリッド用 CSS をプロジェクトに統合させることのみです。

スタータープロジェクトの一部として、ui.apps プロジェクトには、レスポンシブグリッド専用のクライアントライブラリが含まれています。クライアントライブラリは  /aem-guides-wknd-events/ui.apps/src/main/content/jcr_root/apps/wknd-events/clientlibs/responsive-grid で参照できます。このクライアントライブラリには wknd-events.grid というカテゴリがあり、そこには grid.less という名前の単一ファイルが含まれています。このファイルには、レイアウトモードおよびレスポンシブグリッドが動作するために必要な CSS が含まれています。次に、React アプリに CSS がロードされていることを確認します。

  1. <src>/aem-guides-wknd-events/react-app の下で、clientlib.config.js を開きます。React アプリが wknd-events.grid に依存するよう、clientlib.config.js を更新します。

    module.exports = {
        // default working directory (can be changed per 'cwd' in every asset option)
        context: __dirname,
    
        // path to the clientlib root folder (output)
        clientLibRoot: "./../ui.apps/src/main/content/jcr_root/apps/wknd-events/clientlibs",
    
        libs: {
            name: "react-app",
            allowProxy: true,
            categories: ["wknd-events.react"],
            serializationFormat: "xml",
            jsProcessor: ["min:gcc"],
    +        dependencies:["wknd-events.grid"],
            assets: {
                js: [
                    "build/static/**/*.js"
                ],
                css: [
                    "build/static/**/*.css"
                ]
            }
        }
    };
  2. maven を使用して、プロジェクトのルートから、変更を AEM にデプロイします。

    $ cd <src>/aem-guides-wknd-events
    $ mvn -PautoInstallPackage -Padobe-public clean install
  3. http://localhost:4502/editor.html/content/wknd-events/react/home.html に移動します。これで、コンポーネント上でレイアウトコントロールを使用し、グリッドに基づいてコンポーネントをサイズ変更できるようになりました。

    layout-control
    layout-drag
  4. いくつかのレイアウトコンテナを追加し、それらをサイズ変更して、メインコンテンツの領域とサイドバーの領域を作ります。次のような記事を作成できるはずです。

    first-article
  5. 最後の手順では、レスポンシブグリッド用の CSS を含めながら、引き続き静的サーバー上での開発ができることを確認します。responsive-grid.css の呼び出しを追加するよう、aem-guides-wknd-events/react-app/public フォルダーの下の index.html を更新します。

    <head>
    + <link rel="stylesheet" href="/etc.clientlibs/wknd-events/clientlibs/responsive-grid.css" type="text/css">
    ...
    </head>
  6. AEM プロキシを使用していない場合、これを使用するよう aem-guides-wknd-events/react-app/ の下の .env.development を更新します。

      #Request the JSON from AEM
    + REACT_APP_PAGE_MODEL_PATH=/content/wknd-events/react.model.json
    
      # Request the JSON from Mock JSON
      #REACT_APP_PAGE_MODEL_PATH=mock.model.json
  7. 開発サーバーを起動します。

    $ cd <src>/aem-guides-wknd-events/react-app
    $ npm start

    http://localhost:3000/content/wknd-events/react/home.html に移動します。レスポンシブグリッドと AEM で作成したばかりのコンテンツが配置されていることを確認できます。

    注意:

    AEM およびプロキシを使用せずにローカルで開発する場合、レスポンシブグリッド用 CSS をコピーおよび貼り付けし、aem-guides-wknd-events/react-app/public の下のパブリックフォルダーに、静的な CSS ファイルとして置くことができます。

次の手順

チュートリアルの次のパート:

GitHub で第 2 章のソリューションを参照してください。

完了後のパッケージをダウンロードしてください。

ダウンロード

(ボーナス)Styleguidist の統合

担当者:フロントエンド開発者

SPA コンポーネントの開発では、それらを個別に開発する方法がよく使用されます。これにより、開発者はコンポーネントの様々な状態をトラッキングできます。Styleguidist および Storybook など、それが簡単にできるツールがいくつか存在します。このプロジェクトでは、スタイルガイドおよびドキュメンテーションが単一のツールにまとめられている Styleguidist を使用します。Styleguidist と React の統合の詳細については、こちらを参照してください。

  1. コマンドラインから Styleguidist をインストール:

    $ cd <src>/aem-guides-wknd-events/react-app
    $ npm install --save react-styleguidist
  2. Styleguidist スクリプトを追加するために、react-app の下の package.json を更新します。

      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build && clientlib --verbose",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
    +   "styleguide": "styleguidist server",
    +   "styleguide:build": "styleguidist build"
      }
  3. react-app の下に styleguide.config.js という名前のファイルを作成します。以下の設定ルールを追加します。

    const path = require('path')
    module.exports = {
        components: 'src/components/**/[A-Z]*.js',
        assetsDir: 'public/images',
        require: [
            path.join(__dirname, 'src/index.scss')
          ],
        ignore:  ['src/components/**/Page.js','src/components/**/MappedComponents.js','src/components/**/Header.js','**/__tests__/**', '**/*.test.{js,jsx,ts,tsx}', '**/*.spec.{js,jsx,ts,tsx}', '**/*.d.ts']
    }
  4. コンポーネントを書き出すよう、react-app/src/components/image/Image.js を更新します。

      /**
      * Image React Component
      * 
      */
    + export default class Image extends Component {
    
     ...
  5. react-app/src/components/image の下に Image.md という名前の新しいファイルを作成します。以下のように Image.md を設定します。

      Image:
    
        ```js
        <Image  alt="Alternative Text here"
        src="mock-image.jpeg"/>
        ```
    
      Image with a caption:
    
        ```js
        <Image  alt="Alternative Text here" title="This is a caption" 
        src="mock-image.jpeg"/>
        ```
  6. react-app の下のコマンドラインから、Styleguidist サーバーを起動します。

     $ cd <src>/aem-guides-wknd-events/react-app
     $ npm run styleguide
    
     You can now view your style guide in the browser:
    
      Local:            http://localhost:6060/
      On your network:  http://192.168.1.152:6060/
    image-styleguide
  7. テキストコンポーネントに対して、上記の手順を繰り返します。課題:プレーンテキストおよびリッチテキストに対して 2 つの状態を追加します。

    text-styleguide

ヘルプ

行き詰まったり、追加の質問がある場合は、AEM 用 Experience League フォーラムを確認するか、既存の GitHub の問題を参照してください。

探していた情報が見つからなかった場合やエラーが見つかった場合は、WKND Events プロジェクトに関する GitHub の問題を報告してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー