--- title: "Creative Exchange Liveでサイトデザインを修正しましょう" slug: "modify-your-site-design-with-creative-exchange-live" abstract: "テーマやその他のコンテンツに変更を加え、すぐにSitecore環境と同期してください。" --- # Creative Exchange Liveでサイトデザインを修正しましょう Creative Exchange Liveは、フロントエンド開発者がファイルをサイトに戻すことなくテーマやその他のサイトコンテンツを変更できるようにするSXA機能です。Creative Exchange Liveは、テーマやその他のコンテンツの変更やSitecore環境への即時同期を可能にするGulpタスクに対応します。 アセットをよりコントロールしたい場合、Gitのようなバージョン管理システムを使うなら、[SXA CLIを使って](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/add-a-theme-using-sxa-cli.html "Add a theme using SXA CLI") テーマを追加することもできます。 > !注SXAテーマはgulpバージョン3.9.xで動作します。各SXAテーマには、gulp installコマンド中にインストールされるgulpバージョンを指定するJSONパッケージが含まれています。 > > Creative Exchange Liveを利用するには、サイトはBasic 2テーマまたはBasic 2テーマを基にしたテーマを使用する必要があります。このテーマには*Gulp*フォルダが含まれています。 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[設定ノード](https://doc.sitecorepowershell.com/security#restrict-users-and-roles)にユーザーを追加する必要があります: > !注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](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/FB705631E88B4B10AB6D467E85807602.png) 3. 選択した宛先によっては、ZIPファイルはダウンロード可能か、サーバー内のフォルダに保存されます。ZIPファイルのオプションを選択した場合は、ZIPファイルを解凍してください。 4. site/Media/Project/Your Tenant/Your Site/Your Themeに移動してVisual Studioコードで開いてください。 5. Visual Studio Codeでは、ワークスペースのルートから統合ターミナルを開くことができます。ターミナルを開くには、「ビュー」に行き、「統合ターミナル」をクリックします。 6. エクスプローラーのペインで**Basic2**を右クリックし、「コピーパス」をクリックします。 7. 作業用フォルダを**Basic2**フォルダに変更してください。ターミナルでCDを入力し、コピーしたパスを貼り付けます。 ![Go to Basic2 folder](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/6C295CDE833142339B57EBD0BCA36904.png) 8. npmとインストールコマンドを使ってパッケージをインストールしてください:npm install > !注Gulpをインストールする前に、パソコンにインストールNode.js (Node) なければなりません。 9. Themes\\Basic2\\gulp\\config.jsに移動し、サーバー名を作業中のサイトに変更してください。 ![Go to config.js](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/308F1323C772415EBEE24E7E652D0174.png) ![Change server name](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/25C48E8F2E1041ED97DCE40268C8DD34.png) > !重要Creative Exchangeのエクスポートごとに、gulpファイルが上書きされることにご注意ください。 > > それを避けるために、Creative Exchange Liveの設定後に編集済みの \\gulp\\config.jsファイルをSitecoreにアップロードしてください。これは、ファイルを手動でSitecoreにアップロードするか、専用のgulpタスクを実行してファイルが修正されると自動的にアップロードされる(watch-gulp)ことでできます。他のウォッチャーについて詳しく知りたい場合は、readme.mdファイルを参照してください。 > !警告公開されているSitecoreインスタンスに \\gulp\\config.jsをアップロードすると、他のインスタンスでも利用可能です。セキュリティ上の理由から、パスワードは設定ファイルに入力せず、Creative Exchange Liveを起動時に入力することをお勧めします。 10. gulp watch-htmlタスクを実行してください。GulpウォッチャーはあなたのサイトのHTMLファイルを取得します。 > !注テーマのルートフォルダにあるreadmeファイルにアクセスすると、すべてのタスクのリストが表示されます。 11. ログインするには認証情報を入力してください。 これでGulpタスクを実行し、サイトデザインの変更を即座に同期させることができます。 例えば、レンダリングのスタイルを付けるクラスを追加すれば、ページをリフレッシュするとすぐにそのスタイルが選択可能になります。 ![Add a class](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/740BF91BB75B4BD1A5E1F726F97EF9EB.png)