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

Current version: 10.2

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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 設定ノードにユーザーを追加する必要があります。

RequestResponse

<configuration>
  <sitecore>
    <powershell>
      <services>
        <restfulv2>
          <authorization>
            <add Permission="Allow" IdentityType="User" Identity="sitecore\username" />
          </authorization>
        </restfulv2>
      </services>
    </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/<Tenant>/<サイト>/<テーマ> にナビゲートし、これを 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 タスクを実行し、変更を即座にサイトに同期できます。

たとえば、レンダリングのスタイルを設定するクラスを追加すると、ページを更新した直後にスタイルを選択できるようになります。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、