Headless CMS の Cockpit を XAMPP 環境にインストールして触ってみたのでメモしておきます。
インストール
公式サイトからファイルをダウンロードして展開します。
![ファイル配置](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_1.jpg)
XAMPP の然るべき場所にファイルを配置。
![install にアクセス](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_2.jpg)
https://localhost/PATH/TO/COCKPIT/install
にアクセスするとインストール完了画面が表示されます。
![ログイン画面](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_3.jpg)
ちなみに、初期IDとパスワードは表示の通り admin
, admin
。
日本語対応
こちらから zip をダウンロードして展開。
![日本語のファイルを選択](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_4.jpg)
日本語用の ja.php
を選択して
![日本語のファイルを配置](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_5.jpg)
Cockpit のルートディレクトリから config/cockpit/i18n/
とフォルダを作成して i18n
の下に先程の ja.php
を配置。
![ログインしてメニューから「Account」](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_6.jpg)
ログインしてアカウントのメニューから「Account」を選択。
![ENGLISHを選択](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_7-1024x482.jpg)
右側の「ENGLISH」を選択。
![セレクトボックスで日本語を選択](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_8.jpg)
ただのテキストっぽいのですがクリックするとセレクトボックスが出現するので「日本語」を選択して左下の「SAVE」をクリックして設定を保存。
![日本語化された管理画面](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_9-1024x496.jpg)
これで画面をリロードすると日本語になりました。
コレクション~記事の作成
![コレクションを作成](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_10.jpg)
まずはコレクションを作成。
![blog コレクションを作成](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_11.jpg)
試しに blog コレクションを作成します。
![フィールドを定義](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_12-1024x437.jpg)
アイテムごとに登録できるフィールドを定義します。今回はブログなのでタイトルや公開日時など、予め Cockpit 側が持っているフィールドのテンプレートをそのまま利用。
![権限設定](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_13-1024x528.jpg)
権限は動作検証も兼ねてひとまずすべてをオフにしておきます。
![blog コレクション](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_14.jpg)
blog コレクションが作成されました。
![エントリーを追加](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_15.jpg)
続いてコレクションの中のアイテムであるエントリーを追加します。
![エントリー編集画面](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_16-1024x521.jpg)
エントリー編集画面。
![本文を Markdown で記述](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_17-1024x553.jpg)
本文を Markdown で記述します。
API 設定
![ダッシュボードから「設定」を開く](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_18.jpg)
ひとまずエントリーを追加したので API 設定を見ます。ダッシュボードから「設定」を開きます。
![APIアクセス](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_19-1024x244.jpg)
APIアクセス をクリック。
![APIキー を生成](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_20-1024x327.jpg)
マスターAPIキー を生成します。
![マスターAPIキー 越しに記事データを取得](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_21.jpg)
https://localhost/PATH/TO/COCKPIT/api/collections/get/blog?token=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
生成した APIキー を利用して、 api/collections/get/COLLECTION_NAME?token=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
の形式でアクセスすると記事データを取得できることが確認できました。
APIキー なしで記事データを取得する
なお、この状態で api/collections/get/COLLECTION_NAME
を マスターAPIキー を外すと当然ながら
{
"error": "Unauthorized"
}
と認証エラーが表示されます。
![エントリーを見るの権限を付与](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_22-1024x537.jpg)
そこでコレクションの設定から権限に進み、「エントリーを見る」の権限を有効にします。
![APIなしで記事データを取得](https://labor.ewigleere.net/wp-content/uploads/2021/11/cockpit-install-xampp-20210909_23.jpg)
すると、 マスターAPIキー なしでも記事データが取得できるようになりました。公開しても良い情報(基本的にそのはずですが)で、フロントエンド側に APIキー の情報を持たせたくない場合はこの設定を利用できると思います。
ざっくりですが、一通り軽く触ることができたと思います。
参考
概略
API, 権限
日本語化
- Cockpit CMSは日本語化出来ますか? – Qandar
config.php
を作成しなくても日本語化できてしまった