1. クリエイティブ・エクスチェンジとの協力

Creative Exchange Liveでサイトデザインを修正しましょう

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

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

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

アセットをよりコントロールしたい場合、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設定ノードにユーザーを追加する必要があります:

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

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

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

    または、コンテンツエディターでウェブデザインをエクスポートするには、サイトページをクリックし、リボンの ホーム タブで 「エクスポート」をクリックしてください。

  2. 「 エクスポート設定 」ダイアログで、サイト全体をダウンロードする設定を編集し、「 エクスポート先 」欄でZIPファイルを 選んで「 zip化されたサイトをダウンロード」をクリックします。

    Export settings dialog box

  3. 選択した宛先によっては、ZIPファイルはダウンロード可能か、サーバー内のフォルダに保存されます。ZIPファイルのオプションを選択した場合は、ZIPファイルを解凍してください。

  4. *site/Media/Themes///*に移動してVisual Studioコードで開いてください。

  5. Visual Studio Codeでは、ワークスペースのルートから統合ターミナルを開くことができます。ターミナルを開くには、「ビュー」に行き、「 統合ターミナル」をクリックします。

  6. エクスプローラーのペインでBasic2を右クリックし、「コピーパス」をクリックします。

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

    Go to Basic2 folder

  8. 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
この記事を改善するための提案がある場合は、 お知らせください!