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

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

このページの翻訳は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を使用してサイトのデザインを変更するには:

  1. エクスペリエンス エディターのリボンのExperience Acceleratorタブで、Exportをクリックします。

    または、コンテンツ エディターでWebデザインをエクスポートするには、サイト ページをクリックし、リボンのHomeタブでExportをクリックします。

  2. Export settingsダイアログで、設定を編集してサイト全体をダウンロードし、Export toフィールドで「ZIP file,」を選択して「Download zipped site」をクリックします。

    Export settings dialog box

  3. 選択した保存先に応じて、ZIPファイルをダウンロードできるか、またはファイルがサーバー上のフォルダに保存されます。ZIPファイルオプションを選択した場合は、ZIPファイルを抽出します。

  4. site/Media/Themes/<Your Tenant>/<Your Site>/<Your Theme>に移動し、Visual Studio Codeで開きます。

  5. Visual Studio Codeでは、最初はワークスペースのルートから統合ターミナルを開くことができます。ターミナルを開くには、表示に移動してIntegrated Terminalをクリックします。

  6. エクスプローラー ウィンドウで、Basic2を右クリックし、パスのコピー をクリックします。

  7. 作業フォルダをBasic2フォルダに変更します。ターミナルでCDと入力し、コピーしたパスを貼り付けます。

    Go to Basic2 folder

  8. npmとinstallコマンドを使用して、パッケージをインストールします。npm install

    手記

    Gulpをインストールする前に、コンピューターにNode.js (Node) がインストールされている必要があります。

  9. Themes\Basic2\gulp\config.jsに移動し、サーバー名を作業中のサイトに変更します。

    Go to config.js
    Change server name
    大事な

    Creative Exchangeのエクスポートは、gulpファイルを上書きします。

    これを回避するには、Creative Exchange Liveを設定した後、編集した \gulp\config.jsファイルをSitecoreにアップロードする必要があります。これを行うには、ファイルをSitecoreに手動でアップロードするか、ファイルが変更された後に自動的にアップロードする専用のgulpタスク (watch-gulp) を実行します。他のウォッチャーの詳細については、readme.mdファイルを参照してください。

    警告

    公開されているSitecoreインスタンスに \gulp\config.jsをアップロードすると、他のユーザーも利用できます。セキュリティ上の理由から、configファイルにはパスワードを入れず、Creative Exchange Liveの起動時にパスワードを入力することをお勧めします。

  10. gulp watch-htmlタスクを実行します。gulp watcherは、サイトのHTMLファイルを取得します。

    手記

    テーマのルートフォルダにあるreadmeファイルに移動して、すべてのタスクのリストを表示します。

  11. ログインするための認証情報を入力します。

    これで、サイトのデザインに変更を加え、すぐにサイトに同期するgulpタスクを実行できます。

    たとえば、レンダリングのスタイルを設定するクラスを追加し、ページを再表示した直後にスタイルを選択可能にすることができます。

    Add a class

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

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