ローカルサイトから本番へPaletteページをエクスポート／インポートする⚡
Paletteを使えばページを視覚的に組み立てられますが、そのページを別のサイトへ移動するのは、単にテキストをコピーするだけでは済みません。ページはメディアや画像ファイル、そしてそれが構築された正確なコンポーネントバージョンを参照します。Palette Proはそのすべてを1つのバンドルにまとめるので、ページはピクセル単位で完璧なコピーとして本番に届きます。
このチュートリアルでは、ローカルサイト（drupalbook.local）に、すべてのQuote Sliderスタイルを表示するデモページを作成し、それをエクスポートして本番サイト（drupalbook.org）にインポートします。
移動するページ
このページには、項目スタイルごとに1つずつ、5つのQuote Sliderが積み重ねられています —Persona、Company、Persona with small icon、With square image、そしてWith frame and background image。各スライダーには3つの推薦文が含まれています。
始める前に
両方のサイトが一致している必要があります Palette Proはページが固定するコンポーネントのスキーマを運びますが、コンポーネントのコードは運びません。そのため、ローカルと本番のサイトには次が必要です:
- 同じモジュールが有効:
canvas、canvas_palette、palette_pro。 - 同じバージョンのコンポーネントプロバイダー（
canvas_palette／独自コンポーネント）。これによりページが同一にレンダリングされます。 - コアの
mediaが有効（Palette Proの依存関係）。
ステップ1 ローカルサイトでページをエクスポートする
バンドルを生成する方法は2つあります。どちらも同じ.jsonファイルを作成します。
オプションA — Canvasエディタから
ページをCanvasエディタで開きます。左サイドメニューでPaletteボタン（パレットアイコン）をクリックし、「Export」を選択します。ブラウザがcanvas-page-<id>.json（完全なバンドル）をダウンロードします。
オプションB — コマンドライン（Drush）から
スクリプト化やエアギャップ環境での移動に便利です。サイトルートで実行します。ページIDはContent → PagesまたはエディタのURLで確認できます。
# On the LOCAL site (drupalbook.local)
drush palette-sync:export 5 --out=quote-slider.json
# [OK] Exported page 5 "Quote Slider — all styles": 20 components, 3 media, 3 files -> quote-slider.jsonバンドルの中身
標準のCanvas CLIと異なり、Palette Proのバンドルは自己完結型です。すべてがUUIDで照合されるため、再インポートは重複を作らずその場で更新します。
| パート | 運ぶ内容 |
|---|---|
| ページ | タイトル、ステータス、URLエイリアス、コンポーネントツリー（メディア参照はUUIDでトークン化）。 |
| コンポーネントバージョン | ページが固定する各コンポーネントバージョンの正確なスキーマ。 |
| メディア | 参照されているすべてのメディアエンティティ。 |
| ファイル | 参照されているすべてのファイルとその生バイトデータ — 別途ファイルをコピーする必要はありません。 |
ステップ2 本番でページをインポートする
quote-slider.jsonを本番サーバーにコピーします（またはエディタからアップロードするために手元に用意します）。その後、drupalbook.orgでインポートします。
オプションA — Canvasエディタから
本番のCanvasエディタで任意のページを開き、Paletteボタンをクリックして「Import」を選択します（上のメニュー参照）。.jsonファイルを選ぶと、Palette Proがファイル・メディア・コンポーネントバージョン・ページを再作成し、インポートしたページをエディタで開きます。
オプションB — コマンドライン（Drush）から
# On PRODUCTION (drupalbook.org)
drush palette-sync:import quote-slider.json
# [OK] Imported page "Quote Slider — all styles" as canvas_page/12 (created): 3 new media, 3 new files.
# Re-running updates the same page in place (matched by UUID). Use --new to fork a fresh copy:
drush palette-sync:import quote-slider.json --newオプションC — チャンネル経由でプルする（ファイル移動不要）
Palette Proは、本番をソースサイトへ直接接続することもできます。ソースでチャンネル設定を開き、保護方法（トークンまたはHTTP Basic認証）を選択します。
デスティネーションで、ソースを指すリモートを追加し、「Pull pages」を使用します。ソースのページがページネーション付きで一覧表示され、それぞれにNew / Needs update / Syncedバッジが付くので、必要なものをプルします。
ステップ3 本番で確認する
- キャッシュを再構築します:
drush cr。 - エイリアス（
/quote-slider-styles）でページを開き、すべてのスライダー・画像・スタイルがレンダリングされることを確認します。 - Quote Sliderを開いて著者画像が表示されることを確認します。これは、ファイル→メディア→ツリーの再マッピングが最後まで機能したことの証明です。
注意点と落とし穴
- UUIDによる冪等性。 同じファイルを2回インポートしても、ページ・メディア・ファイルは更新されるだけで重複しません。ローカルで編集し、再エクスポート・再インポートすれば、本番が収束します。
- バンドル形式。 バンドルには
palette_pro:1というタグが付きます。読み取るには、両サイトが対応するPalette Proを実行している必要があります。 - 不足しているコンポーネント。 ページ内のコンポーネントが本番にインストールされていない場合、インポートは警告をログに記録し、その部分はレンダリングされないことがあります。プロバイダーモジュールをインストールして再インポートしてください。
スクリーンショットはローカルサイト（drupalbook.local）で取得したものです。CanvasエディタとPalette Sync UIは本番でも同一です。