Creative Exchange Live でサイトのデザインを変更する

概要

テーマやその他のコンテンツを変更し、即座に Sitecore 環境に同期します。

Creative Exchange Live は、フロントエンド開発者がファイルをサイトにインポートし直すことなくテーマやその他のサイトコンテンツを変更できる SXA 機能です。Creative Exchange Live は Gulp タスクと連携して、テーマやその他のコンテンツを変更し、即座に Sitecore 環境に同期できます。

アセットをより細かく管理する場合や、Git などのバージョン管理システムを使用する場合は、SXA CLI を使用してテーマを追加することもできます。

注記

SXA のテーマは、gulp バージョン 4.0.X で動作します。SXA の各テーマには、gulp install コマンドでインストールする gulp バージョンを指定する JSON パッケージが含まれています。

Creative Exchange Live を使用するには、サイトで Basic 2 テーマを使用するか、Basic 2 テーマをベースにしたテーマを使用する必要があります。このテーマには、Gulp フォルダーが含まれています。

最近 SXA 10 にアップグレードし、カスタムクライアントタスクを使用している場合は、Gulp タスクを新しい 4.0 バージョンに書き換える必要があります。

/configuration/sitecore/experienceAccelerator/creativeExchange/restrictedLocations の restrictedLocations にリストアップされているテーマは変更できません。

Creative Exchange Live を使用可能にするには:

Website\App_Config\Include\z.Feature.Overrides に移動し、z.SPE.Sync.Enabler.Gulp.config.disabled ファイルを有効にします。

十分な権限があることを確認します。sitecore\PowerShell Extensions Remoting ロールが割り当てられているか、/configuration/sitecore/powershell/services/restfulv2/authorization 設定ノードにユーザーを追加する必要があります。

<configuration>
 <sitecore>
  <powershell>
    <services>
      <restfulv2>
        <authorization>
         <add Permission="Allow" IdentityType="User" Identity="sitecore\username" />
          </authorization>
        </restfulv2>
    </powershell>
  </sitecore>
</configuration>

注記

Azure でホストされている環境で Creative Exchange Live を設定する場合、sitecore\PowerShell Extensions Remoting ロールはデフォルトでは存在しない場合があります。この場合は、 Sitecore インスタンスでロールを作成し、Creative Exchange Live でこのロールを必要とするユーザーに割り当てる必要があります。

Creative Exchange Live を使ってサイトのデザインを変更するには:

エクスペリエンスエディターのリボンで、[エクスペリエンスアクセラレーター] タブの [エクスポート] をクリックします。
または、コンテンツエディターで Web デザインをエクスポートするには、サイトのページをクリックし、リボンの [ホーム] タブで、[エクスポート] をクリックします。
[エクスポート設定] ダイアログで、サイト全体をダウンロードするように設定を編集し、"エクスポート" フィールドで [ZIP ファイル] を選択して、[ZIP 形式のサイトをダウンロード] をクリックします。
選択した宛先に応じて、ZIP ファイルがダウンロード可能になるか、サーバー上のフォルダーにファイルが保存されます。ZIP ファイルオプションを選択した場合は、ZIP ファイルを抽出します。
site/Media/Themes/<Your Tenant>/<Your Site>/<Your Theme> にナビゲートし、これを Visual Studio Code で開きます。
Visual Studio Code では、統合ターミナルを開くことができます。最初はワークスペースのルートから始まります。ターミナルを開くには、[表示] に移動し、[統合ターミナル] をクリックします。
エクスプローラーペインで [Basic2] を右クリックし、[パスのコピー] をクリックします。
作業フォルダーを [Basic2] フォルダーに変更します。ターミナルで「CD」と入力し、コピーしたパスを貼り付けます。
パッケージをインストールするには、npm と install コマンドを使用し、npm install と指定します。
注記
Gulp をインストールする前に、コンピュータにNode.js (Node) がインストールされている必要があります。
Themes\Basic2\gulp\config.js に移動し、サーバー名を作業するサイトに変更します。
重要
Creative Exchange のエクスポートでは、gulp ファイルが上書きされます。
これを避けるためには、Creative Exchange Live を設定した後に、編集した \gulp\config.js ファイルを Sitecore にアップロードする必要があります。そのために、ファイルを Sitecore に手動でアップロードするか、ファイルの変更後に自動的にアップロードする専用の gulp タスク (watch-gulp) を実行する方法があります。他のウォッチャーの詳細については、readme.md ファイルを参照してください。
警告
公開されている Sitecore のインスタンスに \gulp\config.js をアップロードすると、他の人も利用できるようになります。セキュリティ上の理由から、パスワードはconfig ファイルに記述せず、Creative Exchange Live の起動時に入力することをお勧めします。
gulp watch-html タスクを実行します。Gulp watcher は、サイトの Html ファイルを取り込みます。
注記
テーマのルートフォルダーにある readme ファイルにアクセスすると、すべてのタスクのリストが表示されます。
資格情報を入力してログインします。
これで、サイトデザインを変更する gulp タスクを実行し、変更を即座にサイトに同期できます。
たとえば、レンダリングのスタイルを設定するクラスを追加すると、ページを更新した直後にスタイルを選択できるようになります。

Creative Exchange Live でサイトのデザインを変更する

注記

注記

注記

重要

警告

注記