開発環境のセットアップ手順
ここでは、Visual Studio Code (VSCode) を使って、パレット CMS のテンプレートを効率的に開発できる環境の構築方法と、基本的な開発の流れを解説します。
この手順を終えると、テンプレートを保存するだけで自動的にサーバーへアップロードされ、すぐに動作確認できる環境 が整います。
1. 必要なツール
Visual Studio Code (VSCode)
最新バージョンを 公式サイト からインストールしてください。
Palette CMS Content Sync 拡張機能
VSCode 上でパレット CMS のコンテンツの作成・編集・同期を行うための拡張機能です。
以下のような機能を備え、テンプレート開発の効率と快適性を向上させます。
- シンタックスハイライト
- フォーマッター（開発中）
- スニペット
- コンパイルエラーのインライン表示
- ホットリロード
- コンテンツの同期
テンプレート開発では、パレット CMS の管理画面ではなく、VSCode を使用することを推奨します。
2. VSCode の設定
(1) 拡張機能のインストール
- VSCode を起動します。
- 左サイドバーの 拡張機能 (Extensions) を開きます。
- 「Palette CMS Content Sync」を検索して、インストールします。
(2) 表示位置の調整
VSCode では拡張機能のパネル位置を自由に変更できます。
左サイドバーに表示されている Palette CMS Content Sync のアイコンをドラッグして、拡張機能のパネルを任意の位置に移動してください。
特に右側ペインに移動すると、ファイルブラウザとコンテンツ設定を同時に確認できて便利です。
(3) 自動アップロードの有効化
Ctrl + ,で VSCode の設定画面を開きます。paletteCMSContentSync.uploadOnSaveを検索します。- 「保存時にコンテンツを自動的にサーバーへアップロードします。」 を有効にします。
- この設定を有効にすると、ファイルを保存するだけでテンプレートがサーバーへアップロードされます。
- 開発環境では、ホットリロードにより、アップロード完了後にページが自動的にリロードされます。
本番環境と開発環境で設定を分けたい場合は、フォルダ設定またはワークスペース設定で切り替えてください。
3. コンテンツ（ZIP ファイル）のダウンロード
- パレット CMS に管理者（admin）としてログインします。
- システム設定から 「コンテンツ」 ページへ移動します。
- 「ZIP ダウンロード」 をクリックして ZIP ファイルを取得します。
- ダウンロードした ZIP ファイルを解凍します。
- VSCode で解凍したフォルダを開きます。
4. Palette CMS Content Sync の基本操作
(1) 新規作成
Palette CMS Content Sync の右上にある 「新規作成」 ボタンをクリックします。
(2) ページレンダリング方式の選択
コンテンツのページレンダリング方式を 「テンプレートエンジン」 に設定します。
(3) コンテンツ情報の入力
コンテンツ名、カテゴリ、公開設定など、必要な情報を入力します。
(4) アップロード
設定完了後、右上にある 「アップロード」 をクリックすると、パレット CMS 上に新しいコンテンツが作成されます。
システム ID やその他いくつかの項目はサーバー側で自動的に生成さます。
アップロードが完了すると、空のテンプレートファイル（*.palette.html）が生成されます。
(5) フォルダ名の更新
三点リーダー（…）メニューから 「フォルダ名を更新」 を選ぶと、フォルダ名がコンテンツ ID にリネームされます。
(6) テンプレートの編集
生成されたフォルダ内の *.palette.html にテンプレートを記述します。
保存するとテンプレートが自動的にサーバーへアップロードされます。
開発環境では、アップロード完了後にページが自動的にリロードされます。
5. スニペットの活用
Palette CMS Content Sync 拡張機能には、多数のコードスニペット（定型文）が用意されています。
スニペットを活用すると、開発効率が飛躍的に向上します。
スニペット一覧の表示
Ctrl + Space で候補一覧を表示できます。
絞り込み検索
スニペット名の一部を入力すると、該当する候補だけが表示されます。
- 「
form」と入力 ⇒ フォーム関連スニペットだけ表示 - 「
input」と入力 ⇒ 入力フィールド関連スニペットだけ表示
6. その他の便利機能
(1) コンテンツ選択
任意のテンプレートまたは contents.json を開くと、そのコンテンツが自動的に選択されます。
(2) 手動アップロード
ツールバーのアップロードボタンで、選択中のコンテンツをアップロードします。
新規作成したコンテンツは、アップロード完了後に空のテンプレートファイル（*.palette.html）が生成されます。
システム ID やその他いくつかの項目はサーバー側で自動的に生成さます。
(3) ダウンロード
ツールバーのダウンロードボタンで、選択中のコンテンツをサーバーからダウンロードします。
ローカルのテンプレートが上書きされます。
(4) コンテンツの複製・削除
ツールバーから、選択中のコンテンツの複製や削除ができます。
削除はサーバー上からも完全に消去されます。
(5) 拡張子の一括変更
HTTP ヘッダーの Content-Type を変更した際などに、全ファイルの拡張子を一括で変換できます。
(6) スニペットの再取得
三点リーダー（…）メニューから最新のスニペットを取得できます。
任意項目を作成・編集した場合は、スニペットを最新化してください。
(7) 定義ファイルの再取得
三点リーダー（…）メニューから最新の定義ファイルを取得できます。
シートを作成したり任意項目を作成・編集した場合は、定義ファイルを最新化してください。